:root{--bg: #0b1215;--surface: #111a1f;--card: #10171b;--border: #203037;--text: #eaf1f5;--muted: #98a6ae;--accent: #1dd6d2;--accent-2: #1a8b92;--warn: #ffcc66;--error: #ff6b6b;--ok: #32d583;--s4: 4px;--s8: 8px;--s12: 12px;--s16: 16px;--s20: 20px;--s24: 24px;--s32: 32px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 14px;--radius-xl: 16px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .02);--motion-duration: .12s;--motion-easing: ease-out;--accent2: var(--accent-2);--ring: var(--accent);--shadow: var(--shadow-lg)}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";font-size:var(--text-sm);font-weight:var(--weight-regular);background:linear-gradient(180deg,#0b1215,#0c1518 60%,#0b1215);color:var(--text);display:grid;grid-template-rows:auto minmax(0,1fr) auto;font-variant-numeric:tabular-nums}header{position:relative;padding:var(--s16) var(--s20);border-bottom:1px solid var(--border);display:flex;gap:var(--s12);align-items:center}header h1{font-size:var(--text-lg);font-weight:var(--weight-semibold);margin:0;letter-spacing:.3px}.header-content{display:flex;align-items:center;gap:12px;flex:1}.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.header-btn{padding:var(--s8) var(--s16);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-medium);transition:all var(--motion-duration) var(--motion-easing);display:flex;align-items:center;gap:var(--s8);min-height:36px;line-height:1.2;white-space:nowrap;min-width:fit-content}.header-btn:hover{background:var(--surface);border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.header-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.library-btn{background:var(--accent);color:#042224;border-color:var(--accent);font-weight:var(--weight-bold)}.library-btn:hover{background:var(--accent-2);border-color:var(--accent-2);box-shadow:var(--shadow-md)}.new-case-btn{background:var(--surface);color:var(--text);border-color:var(--border)}.new-case-btn:hover{background:var(--card);border-color:var(--accent)}.header-video{width:80px;height:60px;border-radius:14px;border:1px solid #22333b;box-shadow:var(--shadow);object-fit:cover;background:var(--card)}main{display:grid;grid-template-columns:380px 1fr 400px;gap:var(--s24);padding:var(--s20);height:var(--content-h, 100%);min-height:0;overflow:hidden}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s20);box-shadow:var(--shadow);transition:box-shadow var(--motion-duration) var(--motion-easing)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}label{display:block;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--muted);margin-bottom:var(--s8)}select,input[type=file],input[type=text],input[type=date],button{width:100%;background:#0f171b;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--s12);font-size:var(--text-sm);transition:border-color var(--motion-duration) var(--motion-easing),box-shadow var(--motion-duration) var(--motion-easing)}input,select{outline:none;transition:border-color .15s ease,box-shadow .15s ease}input:focus,select:focus{border-color:var(--ring);box-shadow:0 0 0 3px #3bd7d62e}button{cursor:pointer;transition:all var(--motion-duration) var(--motion-easing);outline:none;font-weight:var(--weight-medium)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);border:none;color:#052126;font-weight:var(--weight-bold);transition:transform var(--motion-duration) var(--motion-easing),opacity var(--motion-duration) var(--motion-easing)}button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}button.primary:active:not(:disabled){transform:translateY(0)}button.primary:disabled{opacity:.6;cursor:not-allowed;transform:none}button.secondary{background:var(--surface);border:1px solid var(--border);color:var(--text)}button.secondary:hover:not(:disabled){border-color:var(--accent);background:var(--card)}button.ghost{background:transparent;border:1px solid var(--border);color:var(--accent);font-weight:var(--weight-medium)}button.ghost:hover:not(:disabled){border-color:var(--accent);background:#1dd6d21a}button.workflow-button{background:var(--accent);border:none;color:#042224;font-weight:var(--weight-bold);font-size:var(--text-base);padding:var(--s20);border-radius:var(--radius-lg);transition:all var(--motion-duration) var(--motion-easing);text-align:center;cursor:pointer;width:100%;box-shadow:var(--shadow-sm)}button.workflow-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}button.workflow-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}button.workflow-button:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed;transform:none;opacity:.6;box-shadow:none}button.workflow-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.workflow-button.pulse-animation{animation:pulseGlow 1.5s ease-in-out infinite;transform:scale(1)}@keyframes pulseGlow{0%,to{box-shadow:0 0 #1dd6d2b3,0 0 20px #1dd6d24d;transform:scale(1)}50%{box-shadow:0 0 0 12px #1dd6d200,0 0 30px #1dd6d280;transform:scale(1.02)}}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.muted{color:var(--muted);font-size:12px}.mode{display:flex;gap:8px;flex-wrap:wrap}.mode button{flex:1}canvas{border-radius:12px;border:1px solid #22333b;background:#000;cursor:none;display:block}.pill{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #2b3c45;background:#0f171b;color:var(--muted);font-size:12px;margin-left:6px}table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-xs);overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface)}thead th{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border)}td,th{padding:var(--s8) var(--s12);border-bottom:1px solid var(--border)}tbody tr:nth-child(odd){background:var(--surface)}tbody tr:nth-child(2n){background:var(--card)}th{text-align:left;color:var(--muted);font-weight:var(--weight-semibold);font-size:10px;text-transform:uppercase;letter-spacing:.5px}td.numeric{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--weight-medium)}.status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok)}.status-indicator.pending{background:var(--border)}.status-indicator.error{background:var(--error)}footer{padding:var(--s12) var(--s16);color:var(--muted);font-size:var(--text-xs);border-top:1px solid var(--border);background:var(--surface)}.hint{font-size:var(--text-xs);color:var(--muted);margin-top:var(--s8);line-height:1.4}.inline{display:flex;gap:var(--s8);align-items:center}.inline code{background:var(--surface);border:1px solid var(--border);padding:var(--s4) var(--s8);border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:inherit;font-weight:var(--weight-medium)}.valves{display:flex;gap:var(--s8)}.valves button{flex:1;padding:var(--s12);border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:var(--s4);cursor:pointer;transition:all var(--motion-duration) var(--motion-easing);font-weight:var(--weight-medium)}.valves button:hover:not(.active){border-color:var(--accent);background:var(--card);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.valves button.active{background:var(--accent);border-color:var(--accent);color:#042224;font-weight:var(--weight-bold);box-shadow:var(--shadow-md)}.valves button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.valve-circle{border-radius:50%;background:currentColor;opacity:.4;transition:opacity .2s ease}.valve-circle.size-20{width:12px;height:12px;background:#ec4899}.valve-circle.size-23{width:16px;height:16px;background:#22c55e}.valve-circle.size-26{width:20px;height:20px;background:#8b5cf6}.valve-circle.size-29{width:24px;height:24px;background:#f97316}.valves button.active .valve-circle{opacity:1}.step{display:flex;align-items:center;gap:8px;margin-top:10px}.step .badge{padding:4px 10px;border-radius:999px;border:1px solid #2b3c45;background:#0f171b;font-size:12px;color:#c7d2d9}.progress{height:6px;background:#0e1519;border:1px solid #1e2a31;border-radius:999px;margin-top:8px;overflow:hidden}.progress .bar{height:100%;background:var(--accent);width:0%;transition:width .25s ease}.flash{animation:flash 1.2s ease-in-out 1}@keyframes flash{0%{box-shadow:0 0 #3bd7d600}20%{box-shadow:0 0 0 6px #3bd7d640}to{box-shadow:0 0 #3bd7d600}}.resultGlow{animation:glow 1.4s ease-in-out 1}@keyframes glow{0%{background-color:#3bd7d60d}to{background-color:transparent}}@media (max-width: 1024px){main{grid-template-columns:1fr}}@media (max-width: 768px){html,body{overflow:auto}body{display:block}header{padding:12px 16px;position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid #233038}header h1{font-size:16px}.header-video{width:60px;height:45px}main{display:block;padding:16px;height:auto;min-height:calc(100vh - 120px)}.card{border-radius:12px;padding:16px;margin-bottom:16px}.mobile-step{display:block;min-height:calc(100vh - 200px)}.mobile-step.hidden{display:none}button{min-height:44px;font-size:16px;padding:12px 16px}.valves{display:grid;grid-template-columns:1fr 1fr;gap:12px}.valves button{padding:16px;min-height:80px}.mobile-measurement-header{background:var(--card);border:1px solid #22333b;border-radius:12px;padding:16px;margin-bottom:16px;text-align:center}.mobile-step-indicator{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.mobile-step-number{background:var(--accent);color:#052126;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.mobile-step-title{font-size:18px;font-weight:600;color:var(--text)}#canvasCard{margin-bottom:0}#canvasBox{min-height:50vh;overflow:visible}canvas{cursor:crosshair;max-width:100%;height:auto;touch-action:pan-zoom}#zoomWrap{display:none!important}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid #22333b;padding:12px 16px;z-index:50}.mobile-nav-buttons{display:flex;gap:12px;max-width:400px;margin:0 auto}.mobile-nav button{flex:1;background:var(--accent);border:none;color:#052126;font-weight:600}.mobile-nav button:disabled{background:#2b3c45;color:var(--muted)}.mobile-nav button.secondary{background:#0f171b;border:1px solid #2b3c45;color:var(--text)}table{font-size:13px}td,th{padding:8px 6px}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:none;background:transparent;border-radius:0}.segmented .seg{border:1px solid #2b3c45;border-radius:8px;background:#0f171b;min-height:44px;display:flex;align-items:center;justify-content:center}.segmented .seg+.seg{border-left:1px solid #2b3c45}.mobile-progress-dots{display:flex;justify-content:center;gap:8px;margin:16px 0}.mobile-progress-dot{width:8px;height:8px;border-radius:50%;background:#2b3c45;transition:background-color .2s ease}.mobile-progress-dot.active{background:var(--accent)}.mobile-progress-dot.completed{background:#3ade7b}footer{padding:16px;margin-top:60px;font-size:11px}.mobile-instruction{background:#3bd7d61a;border:1px solid rgba(59,215,214,.3);border-radius:8px;padding:12px;margin-bottom:16px;font-size:14px;text-align:center;color:var(--accent)}.mobile-swipe-hint{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:#3bd7d6e6;color:#052126;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;z-index:40;animation:fadeInOut 3s ease-in-out;pointer-events:none}@keyframes fadeInOut{0%,to{opacity:0}10%,90%{opacity:1}}.desktop-only{display:none!important}.mobile-only{display:block!important}input,select{font-size:16px;min-height:44px}}@media (min-width: 769px) and (max-width: 1024px){.mobile-only{display:none!important}}@media (min-width: 769px){.mobile-only{display:none!important}}#zoomWrap{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:10;pointer-events:none}#zoomLabel{color:#9fb2bb;font-size:12px}#zoom{width:160px;height:160px;border-radius:10px;border:1px solid #22333b;background:#000}.section{margin-top:var(--s16)}.section:first-child{margin-top:0}.divider{height:0;border-top:1px solid var(--border);margin:var(--s16) 0;opacity:.5}#controls.sticky{position:sticky;top:0;align-self:start;max-height:100%;overflow:auto}#controls.card{padding:var(--s16)}#controls .section{margin-top:var(--s12)}#canvasCard{display:flex;flex-direction:column;min-height:0;height:100%}#canvasArea{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}#canvasBox{flex:1;min-height:0;position:relative;overflow:hidden}#resultsWrap{margin-top:12px;max-height:28vh;overflow:auto}.mode button.active{outline:2px solid var(--accent)}.segmented{display:flex;gap:0;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;padding:var(--s4)}.segmented .seg{flex:1;border:0;background:transparent;color:var(--text);padding:var(--s12);border-radius:var(--radius-md);cursor:pointer;transition:all var(--motion-duration) var(--motion-easing);font-weight:var(--weight-medium);text-align:center}.segmented .seg:hover:not(.active){background:var(--card);color:var(--accent)}.segmented .seg.active{background:var(--accent);color:#042224;font-weight:var(--weight-bold);box-shadow:var(--shadow-sm)}.segmented .seg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--accent);font-weight:var(--weight-medium);transition:all var(--motion-duration) var(--motion-easing)}.btn-ghost:hover:not(:disabled){border-color:var(--accent);background:#1dd6d21a;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@keyframes slideInFade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.section button[aria-expanded]{background:#3bd7d61a;border:1px solid var(--accent);color:var(--accent);font-weight:600;transition:all .2s ease}.section button[aria-expanded]:hover{background:#3bd7d633;transform:translateY(-1px)}.section button[aria-expanded=true]{background:var(--accent);color:#052126}#resultsTable{background:#3bd7d605;border:2px solid rgba(59,215,214,.3)}#resultsTable th{background:#3bd7d61a;color:var(--accent);font-weight:700}.segmented .seg.active{background:var(--accent);color:#052126;box-shadow:0 2px 8px #3bd7d64d;font-weight:800}#zoomWrap{background:var(--card);border:2px solid var(--accent);border-radius:12px;padding:8px;box-shadow:0 4px 16px #3bd7d633;position:absolute;top:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:10;pointer-events:none}#zoom{border:1px solid rgba(59,215,214,.5);width:320px;height:320px;border-radius:10px;background:#000}@media (min-width: 769px){#controls.sticky{margin-top:var(--s12)}#canvasCard{margin-top:var(--s12);align-self:start}}.summary-bar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s20);box-shadow:var(--shadow);position:sticky;top:0;align-self:start;height:100%;max-height:none;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s16)}@media (min-width: 769px){.summary-bar{margin-top:var(--s12)}}.summary-section{margin-bottom:0;flex-shrink:0}.summary-section h3{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text);margin:0 0 var(--s16) 0}.summary-section:last-child{flex:1;min-height:0;display:flex;flex-direction:column}.summary-section:last-child h3{flex-shrink:0}.summary-section:last-child>div:last-child{flex:1;display:flex;flex-direction:column;justify-content:center}.summary-pills{display:flex;flex-direction:column;gap:var(--s8)}.summary-pill{display:flex;justify-content:space-between;align-items:center;padding:var(--s8) var(--s12);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-xs)}.pill-label{color:var(--muted);font-weight:var(--weight-medium)}.pill-value{color:var(--text);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}.progress-indicators{display:flex;flex-direction:column;gap:var(--s12)}.progress-dots-labeled{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s12)}.progress-item{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}.progress-label{font-size:10px;font-weight:var(--weight-medium);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.progress-summary{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s8);border-top:1px solid var(--border)}.progress-percentage{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}.summary-item{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) 0;font-size:var(--text-xs)}.summary-label{color:var(--muted)}.summary-value{color:var(--text);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}.summary-value[aria-live]{color:var(--accent);font-weight:var(--weight-semibold)}.progress-dots{display:flex;gap:var(--s8);margin-top:var(--s8)}.progress-dot{width:24px;height:24px;border-radius:50%;background:var(--border);transition:background-color .2s ease;display:flex;align-items:center;justify-content:center;position:relative}.percentage-text{font-size:8px;font-weight:600;color:#052126;line-height:1}.progress-dot.completed{background:var(--ok)}.progress-dot.active{background:var(--accent)}.pill{display:inline-block;padding:2px var(--s8);border-radius:999px;font-size:12px;font-weight:500}.pill.warn{background:var(--warn);color:#2d1b00}.pill.error{background:var(--error);color:#2d0000}.pill.ok{background:var(--ok);color:#002d14}.pill.default{background:var(--surface);border:1px solid var(--border);color:var(--muted)}.valve-chips{display:flex;gap:var(--s8)}.valve-chip{flex:1;padding:var(--s12);border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .15s ease;outline:none}.valve-chip:hover{border-color:var(--accent);background:var(--card)}.valve-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.valve-chip[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:#042224;font-weight:600}.valve-chip-circle{border-radius:50%;background:currentColor;opacity:.6;transition:opacity .2s ease}.valve-chip[aria-checked=true] .valve-chip-circle{opacity:1}.valve-chip-circle.size-20{width:12px;height:12px;background:#ec4899}.valve-chip-circle.size-23{width:16px;height:16px;background:#22c55e}.valve-chip-circle.size-26{width:20px;height:20px;background:#8b5cf6}.valve-chip-circle.size-29{width:24px;height:24px;background:#f97316}.tooltip{position:absolute;background:var(--card);color:var(--text);padding:var(--s8) var(--s12);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:var(--weight-medium);border:1px solid var(--border);box-shadow:var(--shadow-lg);z-index:1000;pointer-events:none;max-width:240px;word-wrap:break-word;line-height:1.4;animation:tooltipFadeIn .2s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--card)}.info-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--muted);color:var(--bg);font-size:10px;font-weight:var(--weight-bold);margin-left:var(--s4);cursor:help;transition:all var(--motion-duration) var(--motion-easing)}.info-dot:hover{background:var(--accent);transform:scale(1.1)}.label-with-info{display:flex;align-items:center;gap:var(--s4)}.toast{position:fixed;bottom:20px;left:20px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:var(--s12) 16px;color:var(--text);font-size:14px;box-shadow:var(--shadow);z-index:1000;animation:slideInFade .3s ease-out;max-width:300px}.toast.error{border-color:var(--error);background:#ff6b6b1a;color:var(--error)}.toast.warn{border-color:var(--warn);background:#ffcc661a;color:var(--warn)}.toast.success{border-color:var(--ok);background:#32d5831a;color:var(--ok)}.collapsible-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s12);cursor:pointer}.collapsible-header button{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--muted);padding:4px var(--s8);font-size:12px;cursor:pointer;width:auto}.collapsible-header button:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}.step-badge{padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12px;color:var(--text);font-weight:500}.step-badge.active{background:var(--accent);color:#042224;border-color:var(--accent)}.section-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text);margin-bottom:var(--s8)}.section-header{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:var(--s16) 0 var(--s8) 0;padding-bottom:var(--s4);border-bottom:1px solid var(--border)}.section-header:first-child{margin-top:0}.text-pill{display:inline-flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s8);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text)}.text-pill .icon{width:14px;height:14px;opacity:.7}.measurement-value{font-family:inherit;font-variant-numeric:tabular-nums;font-weight:var(--weight-medium)}@media (max-width: 1200px){main{grid-template-columns:350px 1fr 380px}}@media (max-width: 1024px){main{grid-template-columns:1fr}.summary-bar{display:none}}.volume-slider-container{display:flex;flex-direction:column;gap:var(--s12);margin-top:var(--s8);padding:var(--s12);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.volume-controls{display:flex;align-items:center;justify-content:center;gap:var(--s16)}.volume-btn{width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);color:var(--text);font-size:20px;font-weight:var(--weight-bold);cursor:pointer;transition:all var(--motion-duration) var(--motion-easing);display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.volume-btn:hover:not(:disabled){border-color:var(--accent);background:var(--surface);transform:translateY(-1px)}.volume-btn:active:not(:disabled){transform:translateY(0);background:var(--accent);color:#042224}.volume-btn:disabled{opacity:.4;cursor:not-allowed}.volume-display{text-align:center;min-width:80px}.volume-value{display:block;font-size:24px;font-weight:600;color:var(--accent);line-height:1}.volume-unit{display:block;font-size:12px;color:var(--muted);margin-top:2px}.volume-slider-track{position:relative;margin:8px 0}.volume-slider{width:100%;height:6px;background:var(--border);border-radius:3px;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--bg);box-shadow:0 2px 6px #0003;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #0000004d}.volume-slider::-moz-range-thumb{width:20px;height:20px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--bg);box-shadow:0 2px 6px #0003}.volume-slider::-moz-range-track{height:6px;background:var(--border);border-radius:3px;border:none}.volume-slider-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--muted);padding:0 10px}.volume-other-toggle{margin-top:8px}.volume-checkbox-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}.volume-checkbox-label input[type=checkbox]{margin:0}.volume-custom-input{width:100%;margin-top:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px}.volume-custom-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #1dd6d21a}#imageGrid{display:flex;flex-direction:column;height:100%;min-height:0}.grid-header{margin-bottom:var(--s20);text-align:center}.grid-header h3{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text)}.image-grid-container{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}.image-cell{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all var(--motion-duration) var(--motion-easing);background:var(--surface);min-height:160px;aspect-ratio:4/3;display:flex;flex-direction:column}.image-cell-header{display:flex;align-items:center;justify-content:space-between;padding:var(--s8) var(--s12);background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0}.cell-title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text);margin:0}.cell-status-chips{display:flex;gap:var(--s4)}.status-chip{display:inline-flex;align-items:center;gap:var(--s4);padding:2px var(--s4);border-radius:var(--radius-sm);font-size:10px;font-weight:var(--weight-medium);line-height:1}.status-chip.uploaded{background:var(--ok);color:#002d14}.status-chip.measured{background:var(--accent);color:#042224}.status-chip.needs-attention{background:var(--warn);color:#2d1b00}.image-cell-content{flex:1;display:flex;align-items:stretch;justify-content:stretch;position:relative}.image-cell:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px #1dd6d226}.image-cell.empty{border-style:dashed;border-color:var(--muted)}.image-cell.empty:hover{border-color:var(--accent);border-style:solid;background:#1dd6d20d}.image-cell.has-image{padding:0}.empty-cell{text-align:center;padding:0;width:100%;height:100%;display:flex;flex-direction:column}.cell-label{font-size:14px;font-weight:500;color:var(--text);margin-bottom:8px;line-height:1.3}.upload-prompt{font-size:12px;color:var(--muted);opacity:.7}.image-cell.empty:hover .upload-prompt{color:var(--accent);opacity:1}.upload-actions{display:flex;width:100%;height:100%;gap:0;flex:1}.upload-action{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px;background:transparent;border:none;cursor:pointer;transition:all .3s ease;border-radius:0;position:relative;height:100%}.upload-action:hover{background:#1dd6d21a;transform:translateY(-2px)}.upload-action-file:hover{background:#3498db1a}.upload-action-paste:hover{background:#9b59b61a}.upload-action:before{display:none}.action-icon{font-size:32px;margin-bottom:12px;transition:transform .3s ease}.upload-action:hover .action-icon{transform:scale(1.2)}.action-text{font-size:14px;font-weight:500;color:var(--text);opacity:.8;transition:all .3s ease}.upload-action:hover .action-text{opacity:1;font-weight:600}.upload-action-file:hover .action-text{color:#3498db}.upload-action-paste:hover .action-text{color:#9b59b6}@media (max-width: 768px){.upload-actions{flex-direction:column;gap:0}.upload-action{height:100%;padding:16px 12px}.action-icon{font-size:28px;margin-bottom:8px}.action-text{font-size:12px}}.image-thumbnail{position:relative;width:100%;height:100%;min-height:160px}.thumbnail-img{width:100%;height:100%;object-fit:cover;display:block;background:transparent}.image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.image-cell:hover .image-overlay{opacity:1}.overlay-text{color:#fff;font-size:16px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5)}.replace-button{position:absolute;top:8px;right:8px;width:32px;height:32px;background:#000c;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease;z-index:10}.image-thumbnail:hover .replace-button{opacity:1}.replace-button:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}.measurement-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.back-button{background:var(--accent);border:1px solid var(--accent);border-radius:10px;color:#052126;padding:8px 12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px #1dd6d24d;white-space:nowrap;flex-shrink:0;width:fit-content}.back-button:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-1px);box-shadow:0 4px 12px #1dd6d266}.current-image-title{margin:0;font-size:20px;font-weight:600;color:var(--text);flex:1;text-align:center;letter-spacing:.025em}@media (max-width: 768px){.image-grid-container{grid-template-columns:1fr;gap:12px}.image-cell{min-height:120px}.measurement-header{flex-direction:column;align-items:flex-start;gap:8px}.back-button{align-self:flex-start}.current-image-title{font-size:18px;text-align:left}}.classification-display{display:flex;flex-direction:column;gap:8px}.classification-item{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--surface);border-radius:6px;border:1px solid var(--border)}.classification-label{font-size:12px;color:var(--muted);font-weight:500}.classification-value{font-size:12px;color:var(--text);font-weight:600}.classification-value.highlight{color:var(--accent)}.classification-placeholder{padding:16px 12px;text-align:center;color:var(--muted);font-size:12px;background:var(--surface);border-radius:6px;border:1px dashed var(--border)}.enhanced-input{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:8px!important;color:var(--text)!important;font-size:16px!important;font-weight:600!important;padding:12px 16px!important;transition:all .2s ease!important;width:100%!important;box-sizing:border-box!important}.enhanced-input:focus{outline:none!important;border-color:var(--accent)!important;box-shadow:0 0 0 2px #1dd6d21a!important}.enhanced-input::placeholder{color:var(--muted)!important;font-weight:400!important}.case-library-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.case-library-modal{background:var(--bg);border:1px solid var(--border);border-radius:12px;width:100%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}.case-library-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.case-library-title{margin:0;font-size:20px;font-weight:600;color:var(--text)}.case-library-close{background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.case-library-close:hover{color:var(--text);background:var(--surface)}.case-library-filters{padding:16px 20px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:center}.filter-group{display:flex;flex-direction:column;gap:4px}.filter-label{font-size:12px;color:var(--muted);font-weight:500}.filter-select,.filter-input{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px;padding:8px 12px;transition:all .2s ease}.filter-select:focus,.filter-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #1dd6d21a}.case-library-content{flex:1;padding:20px;overflow-y:auto}.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.case-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;transition:all .2s ease;cursor:pointer;position:relative}.case-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px #0003}.case-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px #1dd6d233}.case-selection{position:absolute;top:12px;right:12px}.case-selection input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.case-thumbnail-container{width:100%;height:120px;border-radius:8px;background:var(--surface);border:1px solid var(--border);overflow:hidden;position:relative;margin-bottom:12px;display:flex;align-items:center;justify-content:center}.case-thumbnail{width:100%;height:100%;object-fit:cover}.case-thumbnail-placeholder{color:var(--muted);font-size:14px}.case-drive-status{position:absolute;top:8px;left:8px;background:#000c;color:var(--text);padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.case-drive-status.uploaded{background:#32d58333;color:var(--ok);border:1px solid var(--ok)}.case-info{margin-bottom:16px}.case-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.case-id{font-size:14px;font-weight:600;color:var(--text)}.case-valve-size{font-size:12px;padding:4px 8px;background:var(--accent);color:var(--bg);border-radius:4px;font-weight:600}.case-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.case-timing,.case-projection{font-size:12px;color:var(--muted)}.case-stats{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.case-actions{display:flex;gap:8px;flex-wrap:wrap}.action-btn{padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1;min-width:0}.action-btn:hover{border-color:var(--accent);background:var(--card)}.action-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.action-btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}.action-btn.upload{background:var(--warn);color:var(--bg);border-color:var(--warn)}.action-btn:disabled{opacity:.6;cursor:not-allowed}.loading-state{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted);font-size:14px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--muted);text-align:center}.empty-state-title{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--text)}.empty-state-description{font-size:14px;margin-bottom:16px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1100}.modal-dialog{background:var(--bg);border:1px solid var(--border);border-radius:12px;min-width:400px;max-width:90vw;max-height:90vh;box-shadow:var(--shadow)}.modal-header{padding:20px;border-bottom:1px solid var(--border)}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:var(--text)}.modal-content{padding:20px}.modal-content label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text);font-weight:500}.rater-input{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;padding:12px;transition:all .2s ease}.rater-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #1dd6d21a}.rater-input::placeholder{color:var(--muted)}.modal-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:12px;justify-content:flex-end}.modal-btn{padding:10px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.modal-btn:hover{border-color:var(--accent);background:var(--card)}.modal-btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.modal-btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}@media (max-width: 768px){.case-library-overlay{padding:10px}.case-library-modal{max-height:95vh}.case-library-filters{grid-template-columns:1fr;gap:8px}.cases-grid{grid-template-columns:1fr;gap:12px}.case-actions{gap:6px}.action-btn{font-size:11px;padding:6px 8px}.modal-dialog{min-width:auto;width:90vw}}