:root {
  --bg: #0f1113;
  --panel: #181b1e;
  --panel2: #212529;
  --line: #2c3136;
  --text: #e9ecef;
  --muted: #98a1a9;
  --accent: #ffb800;
  --accent-ink: #1a1400;
  --cyan: #39d0ff;
  --good: #48d17a;
  --warn: #ffb800;
  --bad: #ff5d5d;
  --r: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
button, select, input, .btn { font: inherit; color: inherit; }
h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(15,17,19,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.brand svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; }
.brand .dot { fill: var(--accent); stroke: none; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--panel2); color: var(--muted); }
.pill.ok { background: rgba(72,209,122,.15); color: var(--good); }

main { max-width: 760px; margin: 0 auto; padding: 12px 16px; }
.tab { display: none; }
.tab.active { display: block; }

.setup { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
select, input[type=number], input:not([type]) { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; width: 100%; }

button, .btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; font-size: 16px; font-weight: 600; user-select: none; }
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; }
button.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.danger { color: var(--bad); }
button.toggle[aria-pressed=true], button.on { background: rgba(255,184,0,.16); border-color: var(--accent); color: var(--accent); }

.viewwrap { position: relative; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line); }
#view { display: block; width: 100%; height: 56vw; max-height: 58vh; touch-action: none; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; gap: 8px; background: radial-gradient(circle at 50% 40%, #1b1f23, #0b0c0d); }
.empty p { margin: 0 0 6px; color: var(--muted); }
.banner { position: absolute; left: 8px; right: 8px; top: 8px; background: rgba(15,17,19,.92); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.banner .msg { flex: 1 1 200px; font-weight: 600; }
.banner select, .banner input { width: auto; flex: 1 1 160px; padding: 8px; }
.banner button { min-height: 36px; padding: 6px 12px; }
.viewtools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.viewtools button { min-height: 36px; padding: 4px 10px; background: rgba(15,17,19,.8); }

.status { margin: 8px 2px; color: var(--muted); font-size: 13px; min-height: 18px; }
.status[data-kind=ok] { color: var(--good); }
.status[data-kind=warn] { color: var(--warn); }

.readout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.readout > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.readout span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.readout b { font-size: 28px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.readout small { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
#rLast { color: var(--accent); }

.actions { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin-bottom: 8px; }
.actions.small { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.actions .big { font-size: 17px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 10px; }
.grid2 .panel { margin: 0; }
.plotwrap { padding: 6px; }
#plot { width: 100%; aspect-ratio: 1; display: block; }
.stat { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.stat:last-of-type { border: 0; }
.stat span { color: var(--muted); }
.stat b { font-variant-numeric: tabular-nums; text-align: right; }
.advice { margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--panel2); font-size: 13px; }

.phead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.phead h3 { margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.srow { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { min-height: 32px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-variant-numeric: tabular-nums; }
.chip.sel { border-color: #fff; }
.chip.latest { border-color: var(--accent); color: var(--accent); }
.chip i { font-style: normal; color: var(--muted); margin-right: 4px; }

details summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.form { display: flex; flex-direction: column; gap: 10px; }
details.form > summary, details .form { margin-top: 0; }
details[open] .form { margin-top: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 15px; }
.form input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--accent); }
.hint { margin: 0; font-size: 12px; color: var(--muted); }
.tips ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; }
.tips li { margin: 4px 0; }

.sess { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px; margin-bottom: 8px; background: var(--panel); border-radius: var(--r); }
.sess .t { font-weight: 600; }
.sess .m { font-size: 13px; color: var(--muted); }
.sess .s { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
#chart svg { width: 100%; height: auto; display: block; }
.emptynote { color: var(--muted); text-align: center; padding: 24px 0; }

dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); }
#dlgBody { padding: 16px; }
.cardimg { width: 100%; border-radius: 10px; display: block; margin: 8px 0; }
.dlgbar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--bg); padding-bottom: 8px; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #2a2f34; border: 1px solid var(--line); padding: 10px 14px; border-radius: 10px; max-width: calc(100vw - 32px); z-index: 40; box-shadow: 0 6px 24px rgba(0,0,0,.4); }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(15,17,19,.96); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabs button { border: 0; border-radius: 0; background: none; color: var(--muted); min-height: 56px; font-weight: 600; }
.tabs button.active { color: var(--accent); }

#video { position: fixed; width: 2px; height: 2px; opacity: 0; pointer-events: none; left: 0; top: 0; }

@media (max-width: 520px) {
  .grid2 { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  #view { height: 72vw; }
}

/* Full-screen aiming */
body.aiming { overflow: hidden; }
body.aiming .viewwrap { position: fixed; inset: 0; z-index: 30; border: 0; border-radius: 0; }
body.aiming #view { height: 100vh !important; height: 100dvh !important; max-height: none; }

/* Lens picker */
.lensgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.lens { flex-direction: column; align-items: stretch; text-align: left; padding: 6px; gap: 4px; }
.lens canvas { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: #000; display: block; }
.lens small { color: var(--muted); font-size: 11px; line-height: 1.3; word-break: break-word; }
.lens.sel { border-color: var(--accent); }

/* ---------- Simple, big-button layout ---------- */
.huge { width: 100%; min-height: 66px; font-size: 20px; font-weight: 700; border-radius: 16px; }
.big { min-height: 58px; font-size: 17px; }
.wide { width: 100%; margin-bottom: 10px; }
#btnScore { margin-bottom: 10px; font-size: 22px; min-height: 76px; }
.actions3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.actions3 button { min-height: 60px; font-size: 16px; }
.more { margin: 4px 0 12px; }
.more summary { padding: 14px 4px; font-size: 16px; }
.more .actions { margin-top: 4px; }
.setupcard { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 10px 14px; margin-bottom: 10px; }
.setupcard .sum { flex: 1; min-width: 0; }
.setupcard .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.setupcard b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setupcard small { color: var(--muted); }
.empty h2 { margin: 0; font-size: 22px; }
.empty p { max-width: 320px; }
.empty .huge { max-width: 320px; }
.bigicon { font-size: 44px; line-height: 1; }
.status { font-size: 15px; }

/* Setup wizard */
.wizard { position: fixed; inset: 0; z-index: 35; background: var(--bg); overflow-y: auto; padding: calc(8px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.wizard > section { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.wizard h2 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.wizard h3 { margin: 10px 0 0; font-size: 14px; }
.wzhead { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto 8px; }
.wzicon { min-width: 52px; font-size: 24px; padding: 0; background: transparent; border-color: transparent; }
.dots { display: flex; gap: 8px; }
.dots i { width: 28px; height: 6px; border-radius: 3px; background: var(--line); }
.dots i.on { background: var(--accent); }
.kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tiles { display: flex; flex-direction: column; gap: 10px; }
.tile { flex-direction: column; align-items: flex-start; text-align: left; min-height: 74px; padding: 14px 16px; border-width: 2px; }
.tile b { font-size: 18px; }
.tile small { color: var(--muted); font-weight: 400; font-size: 14px; }
.tile.sel { border-color: var(--accent); background: rgba(255,184,0,.1); }
.tile.sel b::before { content: '✓ '; color: var(--accent); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg button { flex-direction: column; min-height: 70px; font-size: 22px; border-width: 2px; gap: 0; }
.seg button small { font-size: 13px; color: var(--muted); font-weight: 400; }
.seg button.sel { border-color: var(--accent); background: rgba(255,184,0,.1); color: var(--accent); }
.wztips { margin: 0 0 6px; padding-left: 22px; font-size: 17px; line-height: 1.5; color: var(--text); }
.wizard .row2 .btn, .wizard .row2 button { width: 100%; }
.wizard .hint { text-align: center; font-size: 13px; }

/* Full-screen aiming */
.aimtop { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 12px 18px; background: linear-gradient(rgba(0,0,0,.85) 70%, rgba(0,0,0,0)); }
.aimrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pillbtn { min-height: 46px; padding: 8px 14px; background: rgba(40,44,48,.9); }
.aimsteps { margin: 10px 0 0; padding-left: 26px; font-size: 18px; line-height: 1.45; text-shadow: 0 1px 3px #000; }
.aimsteps li { color: #c9ced3; }
.aimsteps li.on { color: #fff; font-weight: 700; }
.aimsteps li.on::marker { color: var(--accent); }
.aimsteps li.done { color: var(--good); }
.aimmsg { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--warn); text-shadow: 0 1px 3px #000; }
.aimmsg:empty { display: none; }
.aimmsg.ok { color: var(--good); }
.aimenter { position: absolute; left: 16px; right: 16px; bottom: calc(108px + env(safe-area-inset-bottom)); min-height: 66px; font-size: 22px; border-radius: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.5); opacity: .85; }
.aimenter.ready { background: var(--good); border-color: var(--good); color: #062512; opacity: 1; }
.zoombar { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 18px; background: rgba(15,17,19,.85); }
.zoombar > button { width: 72px; min-height: 72px; padding: 0; font-size: 34px; border-radius: 50%; background: var(--panel2); flex: none; }
.zmid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.zmid output { font-size: 20px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.zmid input { width: 100%; }
body.aiming .banner { top: auto; bottom: calc(190px + env(safe-area-inset-bottom)); font-size: 17px; }
body.wz { overflow: hidden; }

.readout b { font-size: 40px; }
.readout span i { font-style: normal; }
body:not(.ready) #setupCard, body:not(.ready) .status, body:not(.ready) .readout,
body:not(.ready) #btnScore, body:not(.ready) .actions3, body:not(.ready) #moreBox { display: none; }
.empty .big { max-width: 320px; width: 100%; }
.more > summary { font-weight: 600; color: var(--muted); }
.more[open] > summary { margin-bottom: 8px; }