:root {
  color-scheme: dark;
  --bg:#0d0f11; --panel:#171a1e; --panel-2:#20242a; --line:#303640;
  --text:#f5f7f8; --muted:#a8b0ba; --accent:#d8ff58; --danger:#ff6868; --good:#52e391;
  --board-light:#d9d5c6; --board-dark:#66715c; --shadow:0 14px 40px rgba(0,0,0,.28);
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { min-height:100dvh; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.app-shell { width:min(980px,100%); margin:0 auto; padding:max(16px,env(safe-area-inset-top)) 14px max(32px,env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 2px 16px; }
.eyebrow { font-size:.67rem; font-weight:800; letter-spacing:.14em; color:var(--accent); }
h1 { margin:2px 0 0; font-size:clamp(1.7rem,5vw,2.4rem); line-height:1; }
.camera-state { display:flex; align-items:center; gap:7px; padding:8px 10px; background:#14171a; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.78rem; white-space:nowrap; }
.dot { width:8px; height:8px; border-radius:50%; background:#6e747c; box-shadow:0 0 0 3px rgba(110,116,124,.12); }
.camera-state.live .dot { background:var(--good); box-shadow:0 0 0 3px rgba(82,227,145,.14); }
.panel { background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.panel + .panel { margin-top:14px; }
.camera-card,.interpretation { padding:14px; }
.section-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section-title-row.compact { align-items:center; }
h2 { margin:0 0 3px; font-size:1.05rem; }
p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.4; }
.button { border:1px solid transparent; min-height:42px; padding:0 14px; border-radius:11px; font-weight:750; cursor:pointer; transition:.16s ease; }
.button:active { transform:scale(.98); }
.button:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.button.primary { color:#0a0c0d; background:var(--accent); }
.button.secondary { color:var(--text); background:var(--panel-2); border-color:#3a414c; }
.button.danger { color:#ffb5b5; background:#27191b; border-color:#593034; }

.camera-stage { position:relative; width:100%; aspect-ratio:1; background:#070809; border-radius:14px; overflow:hidden; border:1px solid #2c3138; touch-action:none; }
#video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#070809; }
.perspective-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.perspective-overlay .outline { fill:rgba(216,255,88,.025); stroke:rgba(216,255,88,.95); stroke-width:4; vector-effect:non-scaling-stroke; }
.perspective-overlay .grid-line { stroke:rgba(216,255,88,.42); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.corner-handle { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:3px solid #101214; background:var(--accent); color:#101214; font-size:.75rem; font-weight:950; box-shadow:0 2px 10px rgba(0,0,0,.55),0 0 0 2px rgba(216,255,88,.38); z-index:5; display:none; touch-action:none; }
.camera-stage.camera-on .corner-handle { display:block; }
.camera-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:radial-gradient(circle at center,#1a1d20 0,#0b0d0f 68%); text-align:center; padding:20px; z-index:8; }
.camera-placeholder.hidden { display:none; }
.camera-placeholder span { color:var(--muted); font-size:.78rem; }
.camera-icon { font-size:2rem; color:var(--accent); margin-bottom:3px; }
.camera-actions { display:grid; grid-template-columns:1.45fr 1fr; gap:8px; margin-top:10px; }

.board-and-eval { display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:14px; align-items:start; }
.digital-board-wrap { min-width:0; }
.digital-board {
  width:100%; aspect-ratio:1/1; display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  grid-template-rows:repeat(8,minmax(0,1fr));
  border-radius:10px; overflow:hidden; border:1px solid #42484f; background:#111;
  container-type:inline-size;
}
.square { position:relative; min-width:0; min-height:0; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; line-height:1; user-select:none; }
.square.light { background:var(--board-light); }
.square.dark { background:var(--board-dark); }
.square.last::before { content:""; position:absolute; inset:0; background:rgba(216,255,88,.3); z-index:1; }
.square.detected::after { content:""; position:absolute; inset:3px; border:2px solid rgba(53,235,126,.85); border-radius:3px; pointer-events:none; z-index:4; }
.square.mismatch::after { border-color:#ff4141; border-width:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 9px rgba(255,65,65,.55); }
.piece { position:relative; z-index:2; font-family:"Arial Unicode MS","Noto Sans Symbols 2","Segoe UI Symbol",serif; font-size:9.4cqw; text-shadow:0 1px 1px rgba(0,0,0,.22); transform:translateY(-1px); }
.piece.white-piece { color:#fff; -webkit-text-stroke:1px rgba(0,0,0,.65); }
.piece.black-piece { color:#101214; -webkit-text-stroke:.45px rgba(255,255,255,.38); }
.coord { position:absolute; z-index:3; font-size:1.55cqw; min-font-size:7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:850; opacity:.72; }
.coord.file { right:2px; bottom:1px; }
.coord.rank { left:2px; top:1px; }
.legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px; color:var(--muted); font-size:.68rem; }
.legend span { display:flex; align-items:center; gap:5px; }
.legend-box { width:12px; height:12px; border:2px solid var(--good); border-radius:2px; }
.legend-box.mismatch { border-color:var(--danger); }

.eval-wrap { display:flex; flex-direction:column; align-items:center; min-width:0; }
.eval-title { font-size:.74rem; font-weight:800; margin-bottom:4px; }
.eval-label { font-size:.6rem; font-weight:900; letter-spacing:.08em; color:var(--muted); margin:3px 0; }
.eval-gauge { position:relative; width:58px; height:min(62vw,390px); max-height:390px; min-height:235px; border:1px solid #4b515a; border-radius:10px; overflow:hidden; background:#111; }
.eval-half { position:absolute; left:0; right:0; height:50%; }
.white-half { top:0; background:linear-gradient(#f5f5f3,#bbbcb8); }
.black-half { bottom:0; background:linear-gradient(#25282d,#090a0b); }
.eval-midline { position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-1px); background:#d7ff58; z-index:2; }
.tick { position:absolute; left:0; right:0; height:1px; background:rgba(30,33,36,.28); z-index:1; }
.tick span { position:absolute; right:3px; top:-7px; padding:1px 2px; border-radius:3px; font-size:.54rem; font-weight:800; color:#1a1c1f; background:rgba(255,255,255,.45); }
.t-w3{top:1%}.t-w2{top:16.67%}.t-w1{top:33.33%}.t-0{top:50%}.t-b1{top:66.67%}.t-b2{top:83.33%}.t-b3{top:99%}
.t-b1 span,.t-b2 span,.t-b3 span { color:#eee; background:rgba(0,0,0,.35); }
.t-0 span { color:#0a0b0c; background:var(--accent); }
.eval-marker { position:absolute; left:-5px; right:-5px; top:50%; transform:translateY(-50%); z-index:4; height:4px; background:#ffca48; box-shadow:0 0 12px rgba(255,202,72,.8); transition:top .28s ease; }
.eval-marker::before { content:""; position:absolute; left:-1px; top:50%; transform:translateY(-50%); border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:7px solid #ffca48; }
.eval-marker span { position:absolute; left:50%; top:6px; transform:translateX(-50%); font-size:.59rem; font-weight:900; padding:2px 4px; border-radius:4px; color:#151515; background:#ffca48; white-space:nowrap; }
.eval-note { text-align:center; color:var(--muted); font-size:.57rem; line-height:1.25; margin-top:5px; }
.status-card { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; }
.status-indicator { width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:4px; background:#6e747c; box-shadow:0 0 0 4px rgba(110,116,124,.1); }
.status-indicator.good { background:var(--good); box-shadow:0 0 0 4px rgba(82,227,145,.11); }
.status-indicator.wait { background:#ffca48; box-shadow:0 0 0 4px rgba(255,202,72,.11); }
.status-indicator.bad { background:var(--danger); box-shadow:0 0 0 4px rgba(255,104,104,.11); }
.status-title { font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.status-text { margin-top:2px; font-size:.86rem; line-height:1.35; }
.debug { padding:0; }
.debug summary { cursor:pointer; padding:13px 14px; font-weight:750; font-size:.86rem; }
.debug-body { border-top:1px solid var(--line); padding:13px 14px 14px; }
.slider-row { display:block; }
.second-slider { margin-top:16px; }
.slider-row span { display:flex; justify-content:space-between; color:var(--muted); font-size:.76rem; }
.slider-row input { width:100%; margin-top:9px; accent-color:var(--accent); }
.debug-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.debug-grid div { display:flex; justify-content:space-between; gap:8px; padding:9px 10px; background:#111418; border:1px solid #2a3037; border-radius:9px; font-size:.72rem; }
.debug-grid span { color:var(--muted); }
.small-print { margin-top:11px; font-size:.7rem; }
footer { text-align:center; color:#707780; font-size:.66rem; margin:18px 8px 0; }

@media (min-width:760px) {
  .app-shell { padding-left:22px; padding-right:22px; }
  .camera-card { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr); gap:16px; }
  .camera-card .section-title-row { grid-column:1/-1; margin-bottom:0; }
  .camera-stage { grid-column:1; }
  .camera-actions { grid-column:2; grid-row:2; display:flex; flex-direction:column; margin:0; justify-content:flex-start; }
  .camera-actions .button { min-height:50px; }
  .interpretation { padding:16px; }
  .board-and-eval { grid-template-columns:minmax(420px,630px) 110px; justify-content:center; }
  .eval-gauge { width:66px; height:390px; }
}
@media (max-width:430px) {
  .button { padding-left:10px; padding-right:10px; font-size:.76rem; }
  .board-and-eval { grid-template-columns:minmax(0,1fr) 72px; gap:9px; }
  .eval-gauge { width:48px; }
  .corner-handle { width:30px; height:30px; margin:-15px 0 0 -15px; }
}
@supports not (font-size: 1cqw) {
  .piece { font-size:clamp(22px,9vw,58px); }
  .coord { font-size:clamp(7px,1.8vw,10px); }
}