.psk-volume-page { padding:24px 0 48px; }
.psk-volume-page [hidden] { display:none !important; }
.psk-volume-page .psk-volume-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 28px; list-style:none; font-size:.84rem; }
.psk-volume-page .psk-volume-breadcrumbs li + li::before { content:"/"; margin-right:8px; color:var(--psk-muted); }
.psk-volume-page .psk-volume-header { max-width:780px; margin-bottom:28px; }
.psk-volume-page h1 { margin:0 0 14px; font-size:clamp(2rem,5vw,3rem); line-height:1.15; }
.psk-volume-page .psk-volume-header > p:last-child { color:var(--psk-muted); font-size:1.05rem; }
.psk-volume-page .psk-volume-calculator { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); border:1px solid var(--psk-line); border-radius:var(--psk-radius); background:var(--psk-card); overflow:hidden; }
.psk-volume-page .psk-volume-inputs { padding:28px; }
.psk-volume-page h2 { font-size:1.35rem; line-height:1.3; margin:0 0 12px; }
.psk-volume-page .psk-volume-inputs > p { margin:0 0 20px; color:var(--psk-muted); }
.psk-volume-page .psk-volume-field { min-width:0; }
.psk-volume-page .psk-volume-field label, .psk-volume-page legend { display:block; margin-bottom:6px; font-weight:750; font-size:.92rem; }
.psk-volume-page input[type="number"], .psk-volume-page select { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--psk-line); border-radius:9px; background:var(--psk-card); color:var(--psk-ink); font:inherit; }
.psk-volume-page .psk-volume-shapes { border:0; padding:0; margin:20px 0 14px; min-width:0; }
.psk-volume-page .psk-volume-shapes > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.psk-volume-page .psk-volume-shapes label { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:8px; border:1px solid var(--psk-line); border-radius:9px; cursor:pointer; font-weight:650; font-size:.88rem; }
.psk-volume-page .psk-volume-shapes label:has(input:checked) { border-color:var(--psk-dark-2); background:var(--psk-soft); }
.psk-volume-page input[type="radio"] { accent-color:var(--psk-dark-2); width:16px; height:16px; flex-shrink:0; margin:0; }
.psk-volume-page .psk-volume-dimensions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.psk-volume-page .psk-volume-unit-note, .psk-volume-page .psk-volume-help { font-size:.86rem; color:var(--psk-muted); }
.psk-volume-page .psk-volume-error { color:var(--psk-ink); font-size:.86rem; font-weight:700; margin:6px 0 0; }
.psk-volume-page input[aria-invalid="true"] { border:2px solid var(--psk-dark-2); }
.psk-volume-page .psk-volume-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.psk-volume-page .psk-volume-actions button { min-height:48px; }
.psk-volume-page .psk-volume-result { padding:32px; background:var(--psk-soft); border-left:1px solid var(--psk-line); overflow-wrap:anywhere; }
.psk-volume-page .psk-volume-primary { font-size:clamp(2.2rem,4vw,3.25rem); font-weight:850; line-height:1.15; margin:22px 0 4px; color:var(--psk-dark); }
.psk-volume-page .psk-volume-result-unit { font-size:1.05rem; font-weight:750; margin:0 0 20px; }
.psk-volume-page .psk-volume-secondary { font-size:1.15rem; font-weight:700; }
.psk-volume-page .psk-volume-assumptions, .psk-volume-page .psk-volume-placeholder { color:var(--psk-muted); }
.psk-volume-page .psk-volume-guide { max-width:var(--psk-reading); margin:36px auto 0; }
.psk-volume-page .psk-volume-guide h2 { margin-top:28px; }
.psk-volume-page .psk-volume-guide table { width:100%; font-size:.9rem; }
.psk-volume-page .psk-volume-guide th, .psk-volume-page .psk-volume-guide td { padding:10px; overflow-wrap:anywhere; }
.psk-volume-page .psk-volume-byline { max-width:var(--psk-reading); margin:24px auto 0; color:var(--psk-muted); font-size:.85rem; }
.psk-volume-page :focus-visible { outline:3px solid var(--psk-dark-2); outline-offset:4px; }
@media (max-width:1000px) {
 .psk-volume-page .psk-volume-shapes > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
 .psk-volume-page .psk-volume-calculator { grid-template-columns:1fr; }
 .psk-volume-page .psk-volume-inputs, .psk-volume-page .psk-volume-result { padding:20px; }
 .psk-volume-page .psk-volume-result { border-left:0; border-top:1px solid var(--psk-line); }
 .psk-volume-page .psk-volume-dimensions { grid-template-columns:1fr; }
}