:root{--c-primary:#00898b;--c-primary-soft:#0f6f72;--c-bg:#0b1b24;--c-card:#102335;--c-card-2:#143043;--c-accent:#e29937;--c-danger:#d9534f;--c-ok:#39b58c;--c-info:#6fb3c9;--c-text:#e6f0f1;--c-text-dim:#9fb6bd;--c-text-mute:#6d8894;--c-line:#1d3a4a;--radius:14px;--radius-sm:9px;--gap:12px;--font-scale:1;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--c-bg);color:var(--c-text);font-family:system-ui,-apple-system,Segoe UI,Microsoft YaHei,Noto Sans Thai,Noto Sans,sans-serif;font-size:calc(15px * var(--font-scale));-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;padding:0;line-height:1.6}body,button,.no-select{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}#app{min-height:100dvh}h1,h2,h3,h4{margin:0 0 8px;font-weight:650;line-height:1.35}h1{font-size:calc(21px * var(--font-scale))}h2{font-size:calc(17px * var(--font-scale))}h3{font-size:calc(15px * var(--font-scale))}p{margin:0 0 10px}a{color:var(--c-primary);text-decoration:none}.page{min-height:100dvh;padding:calc(var(--safe-top) + 14px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 14px);gap:var(--gap);flex-direction:column;display:flex}.page-wide{width:100%;max-width:900px;margin:0 auto}.topbar{align-items:center;gap:10px;min-height:40px;display:flex}.topbar .title{flex:1;min-width:0}.topbar .title h1{white-space:nowrap;text-overflow:ellipsis;margin:0;overflow:hidden}.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);padding:14px}.card-flat{background:var(--c-card-2);border-color:#0000}.card h3{align-items:center;gap:8px;display:flex}.row{align-items:center;gap:10px;display:flex}.row-between{justify-content:space-between;align-items:center;gap:10px;display:flex}.col{flex-direction:column;gap:8px;display:flex}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.center{text-align:center}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.dim{color:var(--c-text-dim)}.mute{color:var(--c-text-mute)}.small{font-size:calc(12.5px * var(--font-scale))}.tiny{font-size:calc(11.5px * var(--font-scale))}.strong{font-weight:650}.pre-wrap{white-space:pre-wrap}.nowrap{white-space:nowrap}.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.btn{appearance:none;border:1px solid var(--c-line);background:var(--c-card-2);color:var(--c-text);border-radius:var(--radius-sm);font-size:calc(15px * var(--font-scale));cursor:pointer;touch-action:manipulation;justify-content:center;align-items:center;gap:7px;min-height:44px;padding:11px 15px;font-family:inherit;font-weight:600;transition:transform 80ms,background .15s,border-color .15s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.975)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.btn-accent{background:var(--c-accent);border-color:var(--c-accent);color:#201304}.btn-danger{border-color:var(--c-danger);color:#ffb9b6;background:0 0}.btn-ghost{background:0 0}.btn-block{width:100%}.btn-sm{min-height:36px;font-size:calc(13px * var(--font-scale));padding:7px 11px}.btn-xs{min-height:30px;font-size:calc(12px * var(--font-scale));padding:5px 9px}.field{flex-direction:column;gap:6px;display:flex}.field label{font-size:calc(13px * var(--font-scale));color:var(--c-text-dim)}input[type=text],input[type=password],input[type=number]{border:1px solid var(--c-line);border-radius:var(--radius-sm);color:var(--c-text);font-size:calc(16px * var(--font-scale));background:#0d1f2b;width:100%;padding:12px 13px;font-family:inherit}input:focus{outline:2px solid var(--c-primary-soft);outline-offset:1px}.checkbox{cursor:pointer;align-items:flex-start;gap:10px;display:flex}.checkbox input{width:22px;height:22px;accent-color:var(--c-primary);flex:none;margin-top:2px}.switch-row{justify-content:space-between;align-items:center;gap:12px;padding:9px 0;display:flex}.switch-row+.switch-row{border-top:1px solid var(--c-line)}.badge{font-size:calc(11.5px * var(--font-scale));white-space:nowrap;border:1px solid #0000;border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-weight:650;display:inline-flex}.badge-ok{color:#6fe0b8;background:#39b58c29;border-color:#39b58c6b}.badge-warn{color:#f0bd76;background:#e2993729;border-color:#e2993773}.badge-danger{color:#ff9d99;background:#d9534f2e;border-color:#d9534f80}.badge-info{color:#5fd0d2;background:#00898b2e;border-color:#00898b73}.badge-muted{color:var(--c-text-dim);background:#6d889429;border-color:#6d889459}.dot{background:currentColor;border-radius:50%;flex:none;width:7px;height:7px}.dot-pulse{animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}.notice{border-radius:var(--radius-sm);font-size:calc(13px * var(--font-scale));border:1px solid var(--c-line);background:var(--c-card-2);padding:10px 12px}.notice-warn{background:#e299371a;border-color:#e2993780}.notice-danger{background:#d9534f1a;border-color:#d9534f80}.notice-ok{background:#39b58c1a;border-color:#39b58c80}.notice-info{background:#00898b1a;border-color:#00898b80}.disclaimer{font-size:calc(11.5px * var(--font-scale));color:var(--c-text-mute);border-top:1px solid var(--c-line);padding-top:9px;line-height:1.55}.toast{left:50%;bottom:calc(var(--safe-bottom) + 18px);z-index:900;border:1px solid var(--c-line);border-left:4px solid var(--c-primary);border-radius:var(--radius-sm);max-width:min(92vw,520px);font-size:calc(13px * var(--font-scale));background:#16303f;padding:10px 14px;animation:.2s toast-in;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #00000073}.toast-warn{border-left-color:var(--c-accent)}.toast-danger{border-left-color:var(--c-danger)}.toast-ok{border-left-color:var(--c-ok)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.list{flex-direction:column;gap:10px;display:flex}.list-item{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);flex-direction:column;gap:8px;padding:13px;display:flex}.tabs{border-radius:var(--radius-sm);border:1px solid var(--c-line);background:#0d1f2b;gap:6px;padding:4px;display:flex}.tabs button{color:var(--c-text-dim);font-size:calc(13px * var(--font-scale));background:0 0;border:none;border-radius:7px;flex:1;min-height:38px;padding:9px 8px;font-family:inherit;font-weight:600}.tabs button.active{background:var(--c-primary);color:#fff}.kv{font-size:calc(13px * var(--font-scale));grid-template-columns:auto 1fr;gap:4px 12px;display:grid}.kv dt{color:var(--c-text-dim)}.kv dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}@media (width<=420px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}.bar{border:1px solid var(--c-line);background:#0d1f2b;border-radius:999px;height:8px;overflow:hidden}.bar>span{background:var(--c-primary);height:100%;transition:width .3s;display:block}.bar-accent>span{background:var(--c-accent)}.bar-danger>span{background:var(--c-danger)}.bar-ok>span{background:var(--c-ok)}.flight-root{touch-action:none;user-select:none;z-index:10;background:#05121a;position:fixed;inset:0;overflow:hidden}.flight-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hud{pointer-events:none;padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 10px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 10px);flex-direction:column;gap:8px;display:flex;position:absolute;inset:0}.hud>*{pointer-events:auto}.hud-top{align-items:flex-start;gap:8px;display:flex}.hud-panel{backdrop-filter:blur(6px);border-radius:var(--radius-sm);font-size:calc(12px * var(--font-scale));font-variant-numeric:tabular-nums;background:#091821b8;border:1px solid #1d3a4ae6;padding:7px 9px}.hud-metric{flex-direction:column;gap:1px;min-width:62px;display:flex}.hud-metric .label{font-size:calc(10px * var(--font-scale));color:var(--c-text-mute);letter-spacing:.02em}.hud-metric .value{font-size:calc(17px * var(--font-scale));font-weight:700;line-height:1.15}.hud-metric .unit{font-size:calc(10px * var(--font-scale));color:var(--c-text-mute);margin-left:2px;font-weight:500}.compass{flex:none;width:62px;height:62px;position:relative}.compass svg{width:100%;height:100%;display:block}.hud-sticks{justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;display:flex}.hud-actions{pointer-events:auto;flex-direction:column;align-items:flex-end;gap:6px;display:flex}.hud-actions .btn{min-height:38px;font-size:calc(12px * var(--font-scale));backdrop-filter:blur(4px);background:#102335db;padding:6px 10px}.btn-capture{background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:#201304!important;font-weight:750!important}.btn-capture.is-done{border-color:var(--c-ok)!important;color:#04231a!important;background:#39b58cd9!important}.stick{width:var(--stick-size,148px);height:var(--stick-size,148px);touch-action:none;background:radial-gradient(circle,#00898b29,#09182199 72%);border:2px solid #00898b80;border-radius:50%;flex:none;position:relative}.stick.deadzone-active{border-color:#6d889480}.stick .cross{pointer-events:none;max-height:44vh;position:absolute;inset:0}.stick .cross:before,.stick .cross:after{content:"";background:#6fb3c938;position:absolute}.stick .cross:before{width:1px;top:12%;bottom:12%;left:50%}.stick .cross:after{height:1px;top:50%;left:12%;right:12%}.stick .knob{border:2px solid var(--c-primary);will-change:transform;background:linear-gradient(#1a3d4d,#0e2532);border-radius:50%;width:34%;height:34%;margin:-17% 0 0 -17%;position:absolute;top:50%;left:50%;box-shadow:0 4px 14px #0000008c,inset 0 0 12px #00898b59}.stick.active .knob{border-color:var(--c-accent)}.stick .knob.returning{transition:transform .16s cubic-bezier(.22,1,.36,1)}.stick .axis-hint{font-size:calc(9.5px * var(--font-scale));color:var(--c-text-mute);letter-spacing:.04em;pointer-events:none;position:absolute}.stick .axis-hint.top{top:5%;left:50%;transform:translate(-50%)}.stick .axis-hint.bottom{bottom:5%;left:50%;transform:translate(-50%)}.stick .axis-hint.left{top:50%;left:6%;transform:translateY(-50%)}.stick .axis-hint.right{top:50%;right:6%;transform:translateY(-50%)}.flight-center{flex-direction:column;flex:1;align-items:center;gap:6px;min-width:0;display:flex}.flight-center .btn{min-height:34px;font-size:calc(12px * var(--font-scale));backdrop-filter:blur(4px);background:#102335d6;padding:5px 12px}.flight-toolbar{pointer-events:none;justify-content:space-between;align-items:flex-start;gap:8px;display:flex;position:absolute;inset:7px 10px auto}.view-switch,.flight-readout{backdrop-filter:blur(5px);pointer-events:auto;background:#091821d6;border:1px solid #cfe1e638;border-radius:7px;align-items:center;gap:4px;padding:4px;display:flex}.view-switch .btn{white-space:nowrap;min-height:30px;padding:4px 8px}.view-switch .btn.locked-view{display:none}.view-switch .btn.active{color:#102335;background:#74d1ca;border-color:#74d1ca}.flight-readout{color:#f2f6f4;font-size:calc(12px * var(--font-scale));font-variant-numeric:tabular-nums;gap:10px}.flight-readout span+span{border-left:1px solid #cfe1e640;padding-left:9px}.boundary-alert{color:#fff5d6;max-width:min(360px,45vw);font-size:calc(12px * var(--font-scale));text-align:right;pointer-events:none;background:#6d3f09eb;border:1px solid #ffc44ecc;border-radius:7px;padding:8px 12px;position:absolute;top:82px;right:10px}.legacy-hud-top{display:none!important}.hud-status-row{align-items:stretch;gap:6px;max-width:min(720px,58vw);display:flex;position:absolute;top:45px;left:10px;right:10px}.hud-status-row .hud-panel{background:#091821d6;padding:5px 8px;min-width:0!important}.hud-status-row .target-panel{flex:290px}.hud-status-row .sync-panel{flex:0 235px}.hud-status-row .sync-panel .tiny{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.hud-status-row .sync-panel .row{flex-wrap:nowrap}.hud-status-row .sync-panel .row>.tiny{display:none}.hud-status-row .strong{text-overflow:ellipsis;white-space:nowrap;max-width:38vw;overflow:hidden}.hud-sticks{left:10px;right:10px;bottom:max(8px, var(--safe-bottom));pointer-events:none;grid-template-columns:minmax(104px,1fr) minmax(230px,1.15fr) minmax(104px,1fr);align-items:end;gap:clamp(4px,1.4vw,18px);display:grid}.hud-sticks>*{pointer-events:auto}.hud-sticks .col{min-width:0}.flight-center{backdrop-filter:blur(4px);background:#09182194;border-radius:8px;gap:4px;padding:6px}.flight-center .row{flex-wrap:nowrap;justify-content:center;gap:3px!important}.flight-center .btn{min-height:27px;font-size:calc(10px * var(--font-scale));padding:3px 6px}.flight-center .btn-capture{min-height:32px}.flight-sticks-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.event-feed{max-width:min(34vw,360px);top:50%;left:10px}.event-chip{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}@media (orientation:landscape) and (height<=560px){.flight-toolbar{inset:5px 7px auto}.view-switch,.flight-readout{padding:3px}.view-switch .btn{min-height:26px;font-size:calc(10px * var(--font-scale));padding:3px 6px}.flight-readout{font-size:calc(10px * var(--font-scale));gap:7px}.flight-readout span+span{padding-left:6px}.boundary-alert{font-size:calc(10px * var(--font-scale));padding:5px 8px;top:73px;right:7px}.hud-status-row{gap:4px;max-width:min(620px,64vw);top:37px;left:7px;right:7px}.hud-status-row .hud-panel{padding:5px 7px}.hud-status-row .tiny{font-size:calc(9px * var(--font-scale))}.hud-status-row .strong{font-size:calc(11px * var(--font-scale))}.hud-sticks{left:7px;right:7px;bottom:max(4px, var(--safe-bottom));grid-template-columns:minmax(94px,1fr) minmax(260px,1.12fr) minmax(94px,1fr);gap:4px}.hud-sticks .tiny{font-size:calc(9px * var(--font-scale))}.flight-center{gap:2px;padding:4px}.flight-center .btn{min-height:23px;font-size:calc(9px * var(--font-scale));padding:2px 5px}.flight-center .btn-capture{min-height:28px}.stick{width:min(var(--stick-size), 30vh);height:min(var(--stick-size), 30vh)}.event-feed{max-width:30vw;top:auto;bottom:38vh}.event-chip{font-size:calc(9px * var(--font-scale));padding:3px 6px}}@media (width<=700px) and (orientation:landscape){.flight-readout span:last-child{display:none}.hud-status-row{max-width:64vw}.sync-panel{display:none}.hud-sticks{grid-template-columns:minmax(88px,1fr) minmax(230px,1.2fr) minmax(88px,1fr)}.view-switch .btn{padding-inline:5px}}@media (height<=430px) and (orientation:landscape){.hud-sticks{transform-origin:bottom;bottom:3px;transform:scale(.82)}.event-feed{max-width:24vw;left:4px}.hud-status-row{left:4px;right:4px}}.overlay{backdrop-filter:blur(3px);text-align:center;z-index:40;background:#05121adb;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:absolute;inset:0}.overlay h2{font-size:calc(19px * var(--font-scale))}.event-feed{left:calc(var(--safe-left) + 10px);pointer-events:none;flex-direction:column;gap:5px;max-width:45vw;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.event-chip{border-left:3px solid var(--c-info);font-size:calc(11.5px * var(--font-scale));background:#091821cc;border-radius:6px;padding:4px 9px;animation:.25s chip-in}.event-chip.warning{border-left-color:var(--c-accent)}.event-chip.critical{border-left-color:var(--c-danger);font-weight:650}@keyframes chip-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.rotate-hint{z-index:50;color:#201304;text-align:center;font-size:calc(12.5px * var(--font-scale));background:#e29937f0;padding:8px 12px;font-weight:650;position:absolute;inset:auto 0 0}.score-hero{align-items:center;gap:16px;display:flex}.score-value{font-size:calc(44px * var(--font-scale));font-variant-numeric:tabular-nums;font-weight:800;line-height:1}.dim-row{border-bottom:1px solid var(--c-line);flex-direction:column;gap:6px;padding:9px 0;display:flex}.dim-row:last-child{border-bottom:none}.timeline{padding-left:16px;position:relative}.timeline:before{content:"";background:var(--c-line);width:2px;position:absolute;top:6px;bottom:6px;left:4px}.timeline-item{font-size:calc(13px * var(--font-scale));padding:6px 0;position:relative}.timeline-item:before{content:"";background:var(--c-info);border-radius:50%;width:8px;height:8px;position:absolute;top:12px;left:-15px}.timeline-item.warning:before{background:var(--c-accent)}.timeline-item.critical:before{background:var(--c-danger)}.timeline-item.info:before{background:var(--c-primary)}.replay-stage{border:1px solid var(--c-line);border-radius:var(--radius);aspect-ratio:16/10;touch-action:none;background:#05121a;position:relative;overflow:hidden}.replay-stage canvas{width:100%;height:100%;display:block}.range{width:100%;accent-color:var(--c-primary);height:32px}.seg{border:1px solid var(--c-line);border-radius:var(--radius-sm);display:inline-flex;overflow:hidden}.seg button{color:var(--c-text-dim);font-family:inherit;font-size:calc(12.5px * var(--font-scale));background:0 0;border:none;min-height:36px;padding:7px 12px}.seg button.active{background:var(--c-primary);color:#fff}.legend{font-size:calc(11.5px * var(--font-scale));color:var(--c-text-dim);flex-wrap:wrap;gap:10px;display:flex}.legend i{vertical-align:-1px;border-radius:3px;width:10px;height:10px;margin-right:4px;display:inline-block}.stack-sm>*+*{margin-top:6px}.stack>*+*{margin-top:12px}.hidden{display:none!important}.scroll-y{-webkit-overflow-scrolling:touch;overflow-y:auto}.spacer{flex:1}@media (orientation:landscape) and (height<=520px){.page{padding-top:calc(var(--safe-top) + 8px);gap:8px}h1{font-size:calc(18px * var(--font-scale))}.card{padding:10px}}