.unit-calc-container{gap:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-xl);backdrop-filter:blur(16px);flex-direction:column;display:flex;position:relative;overflow:hidden}.category-selector-nav{gap:var(--space-2);border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-3);flex-wrap:wrap;display:flex}.cat-tab{font-family:var(--font-sans);font-size:var(--text-sm);border-radius:var(--radius-md);background:var(--surface-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration-fast) var(--ease-spring);padding:8px 16px;font-weight:600}.cat-tab:hover{background:var(--surface-overlay);color:var(--text-primary);border-color:var(--border-strong)}.cat-tab.active{background:var(--primary);color:#f9fafb;border-color:var(--primary);box-shadow:0 2px 10px hsl(var(--primary-h) var(--primary-s) 50% / .35)}.bento-unit-stage{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}@media (width<=900px){.bento-unit-stage{grid-template-columns:1fr}}.main-unit-card{gap:var(--space-5);background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-5);flex-direction:column;display:flex}.unit-conversion-grid{gap:var(--space-4);flex-direction:column;display:flex}.unit-input-group{gap:var(--space-2);flex-direction:column;display:flex}.unit-input-group label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:600}.unit-field-row{gap:var(--space-2);grid-template-columns:1.2fr 1fr;display:grid}.unit-field-row input{font-family:var(--font-mono);font-size:var(--text-xl);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);padding:10px 14px;font-weight:800}.unit-field-row input:focus{border-color:var(--primary);box-shadow:0 0 0 3px hsl(var(--primary-h) var(--primary-s) 50% / .2);outline:none}.unit-select{font-family:var(--font-sans);font-size:var(--text-sm);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;padding:10px 12px;font-weight:600}.swap-units-strip{padding:var(--space-1) 0;justify-content:center;align-items:center;display:flex}.btn-swap-units{align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);border-radius:var(--radius-full);background:var(--surface-card);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration-fast);padding:6px 14px;font-weight:700;display:inline-flex}.btn-swap-units:hover{background:var(--surface-elevated);color:var(--primary);border-color:var(--primary);transform:rotate(180deg)}.popular-units-strip{gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border-subtle);flex-direction:column;display:flex}.popular-chips-list{gap:var(--space-2);flex-wrap:wrap;display:flex}.unit-results-column{gap:var(--space-5);flex-direction:column;display:flex}.unit-hero-card{gap:var(--space-1);background:hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .08);border:1px solid hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .4);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-5);flex-direction:column;display:flex}.unit-hero-val{font-family:var(--font-mono);color:var(--primary);word-break:break-all;font-size:clamp(2rem,3.5vw,2.6rem);font-weight:900;line-height:1.15}.unit-hero-sub{font-size:var(--text-xs);color:var(--text-secondary)}.unit-formula-card{gap:var(--space-2);background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);flex-direction:column;display:flex}.formula-label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;font-weight:600}.formula-math{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-primary);font-weight:700}.multi-equiv-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.equiv-item-card{background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);flex-direction:column;gap:2px;display:flex}.eq-unit-name{font-size:var(--text-xs);color:var(--text-tertiary);font-weight:600}.eq-unit-val{font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-primary);font-weight:800}
