:root{color-scheme:dark;--bg:#05080b;--panel:rgba(7,12,17,.58);--panel2:rgba(9,17,24,.8);--line:rgba(176,213,230,.2);--line2:rgba(176,213,230,.1);--text:#edf8fb;--muted:#8ca2ad;--accent:#80f7d3;--accent2:#62b7ff;--warn:#ffc966;--danger:#ff6f7d;--mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans)}button,input,select{font:inherit}button{color:inherit}.app-shell{width:100%;height:100%;background:#000}.glass{border:1px solid var(--line);background:var(--panel);box-shadow:0 10px 38px rgba(0,0,0,.18);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.topbar{position:fixed;z-index:50;top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 7px 10px;border-radius:16px}.brand{min-width:0;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(128,247,211,.45);border-radius:10px;background:rgba(128,247,211,.08);color:var(--accent);font:800 10px/1 var(--mono);letter-spacing:-.04em}.brand-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.brand-copy strong{font:800 12px/1 var(--mono);letter-spacing:.05em}.brand-copy small{overflow:hidden;color:var(--muted);font:8px/1.2 var(--mono);letter-spacing:.08em;text-overflow:ellipsis;white-space:nowrap}.top-actions{display:flex;gap:4px}.icon-btn,.mini-btn{border:1px solid var(--line);background:rgba(3,8,12,.52);cursor:pointer}.icon-btn{width:36px;height:36px;border-radius:10px;font:700 18px/1 var(--mono)}.icon-btn:disabled{opacity:.3}.icon-btn.active,.icon-btn:active{border-color:rgba(128,247,211,.6);color:var(--accent);background:rgba(128,247,211,.1)}
.camera-shell{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#111c23 0,#05080b 55%,#020304 100%)}#camera,#analysisCanvas,#overlayCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#camera{z-index:1;background:#020406}#analysisCanvas{z-index:2;pointer-events:none}#overlayCanvas{z-index:3;pointer-events:none}#workCanvas{position:absolute;left:-9999px;top:-9999px;width:320px;height:180px}.camera-shade{position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(1,4,7,.4),transparent 18%,transparent 68%,rgba(1,4,7,.72) 100%)}.reticle{position:absolute;z-index:5;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);opacity:.4;pointer-events:none}.reticle:before,.reticle:after,.reticle span:before,.reticle span:after{content:"";position:absolute;background:var(--accent)}.reticle:before,.reticle:after{top:26px;width:16px;height:1px}.reticle:before{left:0}.reticle:after{right:0}.reticle span:before,.reticle span:after{left:26px;width:1px;height:16px}.reticle span:before{top:0}.reticle span:after{bottom:0}
.hud{position:absolute;z-index:10;border-radius:12px;pointer-events:none}.hud-left{top:calc(env(safe-area-inset-top) + 70px);left:10px;min-width:184px;padding:8px 10px}.hud-right{top:calc(env(safe-area-inset-top) + 70px);right:10px;display:flex;gap:12px;padding:8px 10px}.hud-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}.hud-row b{font:800 10px/1 var(--mono);letter-spacing:.05em}.status-dot{width:7px;height:7px;border-radius:50%;background:#52636b;box-shadow:0 0 0 4px rgba(82,99,107,.12)}.status-dot.live{background:var(--accent);box-shadow:0 0 0 4px rgba(128,247,211,.12)}.status-dot.warn{background:var(--warn)}.hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.hud-grid span,.metric span{color:var(--muted);font:8px/1.1 var(--mono);letter-spacing:.06em}.hud-grid b,.metric b{color:var(--text);font:800 9px/1 var(--mono)}.metric{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.model-banner{position:absolute;z-index:15;top:calc(env(safe-area-inset-top) + 132px);left:50%;display:flex;align-items:center;gap:7px;max-width:min(78vw,420px);padding:6px 9px;border-radius:999px;color:var(--muted);font:9px/1.2 var(--mono);transform:translateX(-50%);transition:.2s opacity,.2s transform}.model-banner.hidden{opacity:0;transform:translate(-50%,-8px);pointer-events:none}.spinner{width:10px;height:10px;border:1px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.model-banner.ready .spinner{animation:none;border-color:var(--accent);background:rgba(128,247,211,.25)}.model-banner.error .spinner{animation:none;border-color:var(--danger);background:rgba(255,111,125,.2)}@keyframes spin{to{transform:rotate(360deg)}}
.controls-toggle{position:absolute;z-index:21;top:calc(env(safe-area-inset-top) + 128px);right:10px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;color:var(--muted);font:800 9px/1 var(--mono);letter-spacing:.05em;cursor:pointer}.controls-toggle b{color:var(--accent);font-size:14px}.controls-panel{position:absolute;z-index:25;top:calc(env(safe-area-inset-top) + 166px);right:10px;width:min(330px,calc(100vw - 20px));max-height:min(57vh,520px);display:none;flex-direction:column;border-radius:15px;overflow:hidden}.controls-panel.open{display:flex}.controls-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line2);background:rgba(3,8,12,.34)}.controls-head>div{min-width:0;display:flex;flex-direction:column;gap:3px}.controls-head strong{font:800 11px/1 var(--mono)}.controls-head small{overflow:hidden;color:var(--muted);font:8px/1.2 var(--mono);text-overflow:ellipsis;white-space:nowrap}.controls-body{padding:8px 10px;overflow:auto;overscroll-behavior:contain}.control-row{display:grid;grid-template-columns:112px 1fr 45px;align-items:center;gap:8px;min-height:35px;border-bottom:1px solid var(--line2)}.control-row:last-child{border-bottom:0}.control-row label{color:#c4d2d8;font:9px/1.2 var(--mono)}.control-value{color:var(--accent);font:800 9px/1 var(--mono);text-align:right}.control-row input[type=range]{width:100%;accent-color:var(--accent)}.control-row select{width:100%;min-height:26px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;outline:0;background:rgba(2,7,10,.58);color:var(--text);font:9px var(--mono)}.toggle{justify-self:end;position:relative;width:34px;height:19px}.toggle input{position:absolute;opacity:0}.toggle span{position:absolute;inset:0;border:1px solid var(--line);border-radius:999px;background:rgba(3,7,10,.65)}.toggle span:after{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;border-radius:50%;background:#70828a;transition:.18s}.toggle input:checked+span{border-color:rgba(128,247,211,.5);background:rgba(128,247,211,.13)}.toggle input:checked+span:after{left:17px;background:var(--accent)}.controls-foot{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid var(--line2);background:rgba(2,6,9,.38)}.mini-btn{min-height:28px;padding:5px 8px;border-radius:8px;color:var(--muted);font:800 8px/1 var(--mono);letter-spacing:.05em}.mini-btn:active{color:var(--accent);border-color:rgba(128,247,211,.45)}
.inspector{position:absolute;z-index:12;left:10px;bottom:calc(env(safe-area-inset-bottom) + 88px);width:min(310px,55vw);max-height:155px;overflow:hidden;border-radius:13px;transition:.2s opacity}.inspector-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-bottom:1px solid var(--line2);color:var(--muted);font:800 8px/1 var(--mono);letter-spacing:.06em}.inspector-head b{color:var(--accent)}.inspector-body{display:flex;flex-direction:column;gap:4px;padding:7px 9px;max-height:120px;overflow:auto;font:9px/1.25 var(--mono)}.inspect-line{display:grid;grid-template-columns:52px 1fr auto;gap:7px;align-items:center}.inspect-line .tag{overflow:hidden;color:var(--accent);text-overflow:ellipsis}.inspect-line .dim{color:var(--muted)}.muted{color:var(--muted)}
.mode-rail{position:absolute;z-index:30;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 8px);height:70px;display:flex;align-items:stretch;gap:4px;padding:6px;border-radius:18px;overflow-x:auto;scrollbar-width:none}.mode-rail::-webkit-scrollbar{display:none}.mode-btn{flex:1 0 64px;min-width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer}.mode-btn.active{border-color:rgba(128,247,211,.38);background:rgba(128,247,211,.09);color:var(--text)}.mode-icon{font:800 18px/1 var(--mono)}.mode-btn.active .mode-icon{color:var(--accent);text-shadow:0 0 18px rgba(128,247,211,.35)}.mode-btn b{font:800 8px/1 var(--mono);letter-spacing:.03em}
.start-screen{position:absolute;z-index:100;inset:0;display:grid;place-items:center;padding:calc(env(safe-area-inset-top) + 76px) 16px calc(env(safe-area-inset-bottom) + 96px);background:radial-gradient(circle at 50% 30%,rgba(38,80,83,.26),rgba(1,4,6,.93) 60%,#010204)}.start-screen.hidden{display:none}.start-card{width:min(560px,100%);padding:24px;border-radius:24px}.start-mark{width:58px;height:58px;display:grid;place-items:center;margin-bottom:20px;border:1px solid rgba(128,247,211,.42);border-radius:17px;background:linear-gradient(135deg,rgba(128,247,211,.12),rgba(98,183,255,.07));color:var(--accent);font:900 13px/1 var(--mono)}.eyebrow{margin:0 0 8px;color:var(--accent);font:800 9px/1 var(--mono);letter-spacing:.13em}.start-card h1{margin:0;max-width:500px;font-size:clamp(28px,8vw,52px);line-height:.98;letter-spacing:-.045em}.start-copy{margin:16px 0;color:#bbcad0;font-size:13px;line-height:1.55}.primary-btn{width:100%;min-height:48px;margin-top:5px;border:1px solid rgba(128,247,211,.55);border-radius:13px;background:linear-gradient(180deg,rgba(128,247,211,.19),rgba(128,247,211,.08));color:var(--text);font:900 11px/1 var(--mono);letter-spacing:.08em;cursor:pointer}.primary-btn:active{transform:translateY(1px)}.start-notes{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.start-notes span{padding:4px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:7px/1 var(--mono)}.privacy-note{margin:12px 0 0;color:#6e838d;font:8px/1.45 var(--mono)}
.capture-flash{position:absolute;z-index:90;inset:0;pointer-events:none;background:white;opacity:0}.capture-flash.flash{animation:flash .22s ease-out}@keyframes flash{0%{opacity:.8}100%{opacity:0}}
body.camera-mirrored #camera,body.camera-mirrored #analysisCanvas,body.camera-mirrored #overlayCanvas{transform:scaleX(-1)}
@media(max-width:620px){.topbar{height:48px}.brand-copy small{max-width:150px}.icon-btn{width:32px;height:32px}.hud-left{top:calc(env(safe-area-inset-top) + 64px);min-width:166px}.hud-right{top:calc(env(safe-area-inset-top) + 64px)}.model-banner{top:calc(env(safe-area-inset-top) + 120px)}.controls-toggle{top:calc(env(safe-area-inset-top) + 118px)}.controls-panel{top:calc(env(safe-area-inset-top) + 154px)}.inspector{width:calc(100vw - 20px);max-height:118px;bottom:calc(env(safe-area-inset-bottom) + 86px)}.inspector-body{max-height:86px}.mode-rail{height:66px}.start-card{padding:19px}.start-copy{font-size:12px}}@media(max-width:420px){.hud-right{display:none}.brand-copy small{max-width:122px}.top-actions{gap:2px}.icon-btn{width:30px}.controls-toggle{right:8px}.controls-panel{right:8px;width:calc(100vw - 16px)}.control-row{grid-template-columns:104px 1fr 42px}.mode-btn{flex-basis:58px;min-width:58px}.mode-rail{left:7px;right:7px;gap:1px;padding:5px}.inspector{left:7px;width:calc(100vw - 14px)}}@media(min-width:900px){.camera-shell{max-width:1500px;margin:auto}.controls-panel{width:360px}.inspector{width:340px}.mode-btn{max-width:120px}.mode-rail{justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Pose Studio v7 */
.pose-rig-panel{position:absolute;z-index:24;top:190px;right:10px;width:190px;height:270px;display:none;flex-direction:column;overflow:hidden;border-radius:15px;touch-action:none;user-select:none;min-width:130px;min-height:190px}
.pose-rig-panel.show{display:flex}
.pose-rig-head{height:36px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 7px 6px 9px;border-bottom:1px solid var(--line2);cursor:move;background:rgba(2,7,10,.52);touch-action:none}
.pose-rig-head>span:first-child{min-width:0;display:flex;flex-direction:column;gap:2px}.pose-rig-head b{font:900 9px/1 var(--mono);letter-spacing:.06em;color:var(--accent)}.pose-rig-head small{font:7px/1 var(--mono);letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.pose-rig-head-actions{display:flex;gap:3px}.pose-rig-head-actions button,.pose-rig-actions button{border:1px solid var(--line);background:rgba(3,8,12,.72);color:var(--text);font:800 8px/1 var(--mono);cursor:pointer}
.pose-rig-head-actions button{width:25px;height:24px;border-radius:7px;font-size:13px}.pose-rig-viewport{position:relative;flex:1;min-height:100px;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(38,71,78,.45),rgba(2,5,7,.82) 72%);touch-action:none}
.pose-rig-viewport canvas{display:block;width:100%;height:100%;touch-action:none}.pose-rig-loading{position:absolute;inset:0;display:grid;place-items:center;padding:10px;text-align:center;color:var(--muted);font:8px/1.35 var(--mono);pointer-events:none}
.pose-rig-actions{height:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px 6px 3px;background:rgba(2,6,9,.54);border-top:1px solid var(--line2)}.pose-rig-actions button{border-radius:6px;min-width:0}.pose-rig-actions button:disabled{opacity:.3}.pose-rig-actions button.recording{border-color:rgba(255,111,125,.7);background:rgba(255,111,125,.15);color:#ff8b96;animation:poseRecPulse 1.1s ease-in-out infinite}
@keyframes poseRecPulse{50%{box-shadow:0 0 0 4px rgba(255,111,125,.06),0 0 18px rgba(255,111,125,.16)}}
.pose-rig-status{height:22px;display:flex;align-items:center;padding:0 8px;color:var(--muted);background:rgba(2,6,9,.62);font:7px/1 var(--mono);letter-spacing:.03em}
.pose-rig-resize{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;touch-action:none}.pose-rig-resize:before,.pose-rig-resize:after{content:"";position:absolute;right:4px;bottom:4px;width:9px;height:1px;background:rgba(128,247,211,.7);transform:rotate(-45deg);transform-origin:right center}.pose-rig-resize:after{right:3px;bottom:8px;width:6px}
@media(max-width:620px){.pose-rig-panel{top:172px;right:8px;width:168px;height:240px}.pose-rig-head small{display:none}.pose-rig-actions{gap:3px;padding-left:4px;padding-right:4px}}
