.unit-calc-container{display:flex;flex-direction:column;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);position:relative;overflow:hidden}.category-selector-nav{display:flex;gap:var(--space-2);flex-wrap:wrap;border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-3)}.cat-tab{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;padding:8px 16px;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)}.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{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}@media(max-width:900px){.bento-unit-stage{grid-template-columns:1fr}}.main-unit-card{display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-5)}.unit-conversion-grid{display:flex;flex-direction:column;gap:var(--space-4)}.unit-input-group{display:flex;flex-direction:column;gap:var(--space-2)}.unit-input-group label{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary)}.unit-field-row{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-2)}.unit-field-row input{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:800;padding:10px 14px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary)}.unit-field-row input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px hsl(var(--primary-h) var(--primary-s) 50% / .2)}.custom-unit-wrapper{position:relative;width:100%}.custom-unit-btn{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;padding:10px 12px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;text-align:left;transition:all var(--duration-fast)}.custom-unit-btn:hover,.custom-unit-btn:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px hsl(var(--primary-h) var(--primary-s) 50% / .15);outline:none}.custom-unit-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);max-height:240px;overflow-y:auto;z-index:40;display:flex;flex-direction:column;padding:4px}.custom-unit-dropdown[hidden]{display:none}.custom-unit-option{display:block;width:100%;background:transparent;border:none;color:var(--text-secondary);padding:8px 10px;font-size:var(--text-sm);text-align:left;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast)}.custom-unit-option:hover,.custom-unit-option:focus{background:var(--surface-elevated);color:var(--text-primary)}.custom-unit-option.selected{background:hsl(var(--primary-h) var(--primary-s) 50% / .15);color:var(--primary);font-weight:700}.unit-select{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;padding:10px 12px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer}.swap-units-strip{display:flex;justify-content:center;align-items:center;padding:var(--space-1) 0}.btn-swap-units{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;padding:6px 14px;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)}.btn-swap-units:hover{background:var(--surface-elevated);color:var(--primary);border-color:var(--primary);transform:rotate(180deg)}.popular-units-strip{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border-subtle)}.popular-chips-list{display:flex;gap:var(--space-2);flex-wrap:wrap}.unit-results-column{display:flex;flex-direction:column;gap:var(--space-5)}.unit-hero-card{display:flex;flex-direction:column;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)}.unit-hero-val{font-family:var(--font-mono);font-size:clamp(2rem,3.5vw,2.6rem);font-weight:900;color:var(--primary);line-height:1.15;word-break:break-all}.unit-hero-sub{font-size:var(--text-xs);color:var(--text-secondary)}.unit-formula-card{display:flex;flex-direction:column;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)}.formula-label{font-size:var(--text-xs);font-weight:600;color:var(--text-tertiary);text-transform:uppercase}.formula-math{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;color:var(--text-primary)}.multi-equiv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.equiv-item-card{display:flex;flex-direction:column;gap:2px;background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}.eq-unit-name{font-size:var(--text-xs);font-weight:600;color:var(--text-tertiary)}.eq-unit-val{font-family:var(--font-mono);font-size:var(--text-base);font-weight:800;color:var(--text-primary)}