.volc-wrap{max-width:580px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1a1a1a}
.volc-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.volc-icon{font-size:34px;line-height:1}
.volc-title{font-size:22px!important;font-weight:600!important;margin:0 0 3px!important;padding:0!important;border:none!important;color:#1a1a1a!important}
.volc-sub{font-size:13px;color:#666;margin:0}
.volc-shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
@media(max-width:440px){.volc-shape-grid{grid-template-columns:repeat(2,1fr)}}
.volc-shape-btn{padding:10px 8px;border:1.5px solid #d0d0d0;border-radius:10px;background:#fff;color:#555;cursor:pointer;transition:all .13s;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:18px}
.volc-shape-btn span{font-size:11px;font-weight:500;color:#555}
.volc-shape-btn:hover:not(.act){background:#eff6ff}
.volc-shape-btn.act{background:#dbeafe;border-color:#3B82F6;color:#1D4ED8}
.volc-shape-btn.act span{color:#1D4ED8;font-weight:700}
.volc-inputs-wrap{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;margin-bottom:12px}
.volc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.volc-grid{grid-template-columns:1fr}}
.volc-lbl{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:5px}
.volc-iw{position:relative}
.volc-iw input{width:100%;box-sizing:border-box;padding:9px 44px 9px 12px;border:1px solid #d0d0d0;border-radius:8px;font-size:14px;color:#1a1a1a;background:#fff;outline:none;transition:border-color .15s;-moz-appearance:textfield}
.volc-iw input::-webkit-inner-spin-button,.volc-iw input::-webkit-outer-spin-button{-webkit-appearance:none}
.volc-iw input:focus{border-color:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.volc-suf{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;color:#999;pointer-events:none}
.volc-unit-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.volc-select{padding:8px 12px;border:1px solid #d0d0d0;border-radius:8px;font-size:13px;color:#1a1a1a;background:#fff;outline:none;cursor:pointer;font-family:inherit}
.volc-select:focus{border-color:#3B82F6}
.volc-result-card{background:linear-gradient(135deg,#1D4ED8,#1e3a8a);border-radius:12px;padding:18px 22px;color:#fff;margin-top:4px;animation:volc-in .22s ease}
@keyframes volc-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.volc-res-main{font-size:38px;font-weight:700;font-family:monospace;text-align:center;margin-bottom:4px}
.volc-res-unit{font-size:14px;opacity:.8;text-align:center;margin-bottom:10px}
.volc-res-formula{font-size:12px;opacity:.6;text-align:center;margin-bottom:10px;font-family:monospace}
.volc-conversions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid rgba(255,255,255,.2);padding-top:10px}
.volc-conv-item{text-align:center}
.volc-conv-val{font-size:13px;font-weight:600;font-family:monospace}
.volc-conv-unit{font-size:11px;opacity:.65;margin-top:2px}
.volc-reset-btn{display:block;width:100%;margin-top:10px;padding:9px;font-size:13px;color:#999;background:none;border:1px solid #e8e8e8;border-radius:8px;cursor:pointer;transition:background .13s}
.volc-reset-btn:hover{background:#f5f5f5}