.volume-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}.calc-header-bar{gap:var(--space-4);flex-direction:column;display:flex}.calc-title-group{gap:var(--space-1);flex-direction:column;display:flex}.calc-badge{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;border-radius:var(--radius-full);background:hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .15);color:var(--primary);border:1px solid hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .3);align-self:flex-start;padding:4px 10px;font-weight:700}.calc-title{font-size:var(--text-2xl);color:var(--text-primary);letter-spacing:-.02em;margin:0;font-weight:800}.shape-selector-nav{gap:var(--space-2);border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-3);flex-wrap:wrap;display:flex}.shape-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}.shape-tab:hover{background:var(--surface-overlay);color:var(--text-primary);border-color:var(--border-strong)}.shape-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-volume-stage{gap:var(--space-6);grid-template-columns:1fr 1fr;display:grid}@media (width<=900px){.bento-volume-stage{grid-template-columns:1fr}}.main-volume-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}.shape-formula-banner{font-family:var(--font-mono);font-size:var(--text-xs);background:var(--surface-card);border-radius:var(--radius-md);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:8px 12px}.shape-formula-banner strong{color:var(--primary)}.shape-inputs-grid{gap:var(--space-4);flex-direction:column;display:flex}.dim-field{gap:var(--space-1);flex-direction:column;display:flex}.dim-field label{font-size:var(--text-sm);color:var(--text-secondary);font-weight:600}.dim-input-wrapper{align-items:center;display:flex;position:relative}.dim-input-wrapper input{width:100%;font-family:var(--font-mono);font-size:var(--text-lg);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);transition:border-color var(--duration-fast);padding:10px 48px 10px 14px;font-weight:700}.dim-input-wrapper input:focus{border-color:var(--primary);box-shadow:0 0 0 3px hsl(var(--primary-h) var(--primary-s) 50% / .2);outline:none}.dim-unit{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-tertiary);pointer-events:none;font-weight:700;position:absolute;right:14px}.margin-presets-box{gap:var(--space-2);flex-direction:column;display:flex}.margin-label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.margin-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.margin-btn{font-family:var(--font-mono);font-size:var(--text-xs);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration-fast);padding:6px 12px;font-weight:600}.margin-btn:hover{background:var(--surface-elevated);color:var(--text-primary)}.margin-btn.active{background:var(--primary);color:#f9fafb;border-color:var(--primary)}.visual-results-column{gap:var(--space-5);flex-direction:column;display:flex}.svg-visualizer-card{border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-4);background:#0b0e13;flex-direction:column;justify-content:center;align-items:center;min-height:220px;display:flex;position:relative;overflow:hidden}.svg-visualizer-card svg{width:100%;max-width:320px;height:180px}.result-hero-matrix{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.result-pill-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}.result-pill-card.primary{border-color:hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .4);background:hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .08)}.result-pill-card.accent{background:#14b86614;border-color:#14b86666}.pill-label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;white-space:nowrap;font-weight:600}.pill-value{font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--text-primary);font-weight:800}.result-pill-card.primary .pill-value{color:var(--primary)}.result-pill-card.accent .pill-value{color:#17cf73}.pill-sub{font-size:var(--text-xs);color:var(--text-secondary)}.material-estimates-grid{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}@media (width<=600px){.material-estimates-grid{grid-template-columns:1fr}}.material-card{gap:var(--space-1);background:var(--surface-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-3);flex-direction:column;display:flex}.mat-icon{font-size:var(--text-lg)}.mat-title{font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;font-weight:700}.mat-val{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--text-primary);font-weight:800}.mat-detail{color:var(--text-tertiary);font-size:11px}.calc-action-strip{gap:var(--space-2);border-top:1px solid var(--border-subtle);padding-top:var(--space-4);flex-wrap:wrap;justify-content:flex-end;display:flex}.action-btn{align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration-fast);padding:8px 14px;font-weight:600;display:inline-flex}.action-btn:hover{background:var(--surface-overlay);color:var(--text-primary);border-color:var(--border-strong)}
