/* Layout: one dark trading-terminal column — clock on top, lamps under it, target countdown, then sync panel */
:root{
  --bg:#0d1113; --panel:#161b1e; --panel2:#1d2327; --line:#2a3236;
  --fg:#e8eef0; --muted:#8b979d; --dim:#5d686e;
  --go:#2fd35c; --warn:#e6c229; --hot:#ea8a2b; --stop:#e5452f; --flash:#ffffff;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:Manrope,"Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg)}
body{background:radial-gradient(1200px 600px at 50% -200px,#1a2226 0%,var(--bg) 60%) fixed,var(--bg)}
.clock,.target,.sync,.practice{background:linear-gradient(180deg,#192024 0%,#13181b 100%)!important;border-color:#262e33!important;border-radius:24px!important;box-shadow:0 18px 40px rgba(0,0,0,.25)}
body{font-family:var(--sans);padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.02em}
h1 small{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--line);background:var(--panel)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--stop);box-shadow:0 0 10px var(--stop)}
.pill.ok i{background:var(--go);box-shadow:0 0 10px var(--go)}
.pill.old i{background:var(--warn);box-shadow:0 0 10px var(--warn)}

.clock{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:16px}
.label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.time{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(40px,11vw,104px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.time .ms{color:var(--warn)}
.time .sep{color:var(--dim)}
.secmeter{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,3.5vw,30px);justify-content:center}
.barset{display:flex;align-items:stretch;gap:10px}
.pwrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.roundbtn{width:clamp(120px,26vw,176px);aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;color:#fff;font:800 clamp(24px,5vw,34px) var(--sans);letter-spacing:.08em;
  background:radial-gradient(circle at 34% 28%,#ff8a6b 0%,#ec4a31 48%,#a8240e 100%);
  box-shadow:0 0 0 7px rgba(236,74,49,.16),0 0 0 14px rgba(236,74,49,.07),0 14px 34px rgba(236,74,49,.38),inset 0 -8px 16px rgba(0,0,0,.28),inset 0 6px 12px rgba(255,255,255,.18);
  transition:transform .07s ease,box-shadow .07s ease;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent}
.roundbtn:hover{filter:brightness(1.06)}
.roundbtn:active,.roundbtn.hit{transform:scale(.93);box-shadow:0 0 0 10px rgba(236,74,49,.28),0 6px 16px rgba(236,74,49,.3),inset 0 6px 14px rgba(0,0,0,.35)}
.mini{font:800 clamp(30px,6vw,40px) var(--mono);font-variant-numeric:tabular-nums;min-height:1.3em;text-align:center}
.mini small{display:block;font:700 13px var(--sans);color:var(--muted);margin-top:4px}
.mini small b{color:var(--fg)}
.secmeter{transition:transform .2s ease}
.scale{display:flex;flex-direction:column-reverse;justify-content:space-between;font:700 13px var(--mono);color:var(--dim);padding-block:2px;text-align:right}
.bigtube{width:clamp(96px,24vw,150px);height:clamp(220px,42vh,300px);border-radius:12px;background:#0a0d0f;border:3px solid var(--line);position:relative;overflow:hidden}
.bigtube b{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--go)}
.bigtube::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 calc(10% - 2px),rgba(255,255,255,.18) calc(10% - 2px) 10%);pointer-events:none}
.bigtube.end{border-color:var(--stop);box-shadow:0 0 26px var(--stop)}
.secread{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.secread .big{font:800 clamp(40px,10vw,72px) var(--mono);font-variant-numeric:tabular-nums;line-height:1}
.secread small{font:700 15px var(--mono);color:var(--muted)}
.practice{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:16px;align-items:center}
.practice h2{margin:0;font-size:18px;font-weight:800;align-self:flex-start}
.press{font:800 clamp(26px,6vw,40px) var(--sans);letter-spacing:.06em;width:min(100%,420px);padding:26px 20px;border-radius:18px;background:var(--stop);border:none;color:#fff;box-shadow:0 6px 0 #8d2214;touch-action:manipulation;user-select:none}
.press:active,.press.hit{transform:translateY(4px);box-shadow:0 2px 0 #8d2214}
.result{font:800 clamp(38px,10vw,70px) var(--mono);font-variant-numeric:tabular-nums;line-height:1}
.restxt{font-size:16px;font-weight:700;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:640px}
.chip{font:700 13px var(--mono);padding:5px 9px;border-radius:8px;background:var(--panel2)}
.reco{background:var(--panel2);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;line-height:1.6;text-align:center;max-width:640px}
.reco button{margin-top:8px}
.q-good{color:var(--go)}.q-ok{color:var(--warn)}.q-bad{color:var(--stop)}
select{font:700 15px var(--sans);background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}

.lamps{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,1.4vw,10px);width:100%;max-width:640px}
.lamp{aspect-ratio:1;max-width:100%;border-radius:50%;background:#0a0d0f;border:2px solid var(--line);position:relative}
.lamp::after{content:attr(data-n);position:absolute;inset:auto 0 -20px;text-align:center;font:600 11px var(--mono);color:var(--dim)}
.lamp.on{border-color:transparent}
.lamp.on.c0{background:var(--go);box-shadow:0 0 14px var(--go)}
.lamp.on.c1{background:var(--warn);box-shadow:0 0 14px var(--warn)}
.lamp.on.c2{background:var(--hot);box-shadow:0 0 14px var(--hot)}
.lamp.on.c3{background:var(--stop);box-shadow:0 0 16px var(--stop)}
.lamp.now{background:var(--flash)!important;box-shadow:0 0 22px var(--flash)!important}
.toggles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tog{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font:700 13px var(--sans);color:var(--muted);cursor:pointer;user-select:none;transition:color .15s,border-color .15s}
.tog:has(input:checked){color:var(--fg);border-color:#33413a}
.tog input{appearance:none;-webkit-appearance:none;margin:0;width:36px;height:20px;border-radius:999px;background:#2a3236;position:relative;cursor:pointer;transition:background .15s;flex:none}
.tog input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#cfd8dc;transition:left .15s,background .15s}
.tog input:checked{background:var(--go)}
.tog input:checked::after{left:18px;background:#fff}
.tog input:focus-visible{outline:2px solid var(--warn);outline-offset:2px}
#tenths{max-width:880px;gap:clamp(6px,1.8vw,16px)}
#tenths .lamp::after{inset:auto 0 -22px;font-size:12px}
.lamprow{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding-bottom:16px}
.hint{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5;max-width:60ch}

.target{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:16px;align-items:center}
.target.armed{border-color:var(--warn)}
.target.final{border-color:var(--stop);box-shadow:0 0 0 2px var(--stop) inset}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:center;width:100%}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12px;font-weight:700;color:var(--muted)}
input[type=time],input[type=number],input[type=text]{font:700 18px var(--mono);background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
input[type=number]{width:110px}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--warn);outline-offset:2px}
.check{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;padding-bottom:10px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--go)}
.count{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(34px,9vw,76px);line-height:1;white-space:nowrap}
.count.final{color:var(--stop)}
.tgtline{font:600 14px var(--mono);color:var(--muted)}
button{font:700 14px var(--sans);border-radius:10px;padding:10px 16px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);cursor:pointer}
button.primary{background:var(--go);border-color:var(--go);color:#062010}
button.on{background:var(--warn);border-color:var(--warn);color:#241c00}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

.sync{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px}
.sync h2{margin:0;font-size:16px;font-weight:800}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55}
.bm{display:inline-block;background:var(--warn);color:#241c00;font-weight:800;text-decoration:none;padding:6px 12px;border-radius:8px;cursor:grab}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:var(--panel2);border-radius:10px;padding:10px 12px}
.stat b{display:block;font:700 18px var(--mono);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.msg{font-size:13px;font-weight:600;min-height:1.2em}
.msg.err{color:var(--stop)} .msg.good{color:var(--go)}
details{font-size:14px;line-height:1.6;color:var(--muted)}
details summary{cursor:pointer;color:var(--fg);font-weight:700}

#flash{position:fixed;inset:0;background:var(--go);color:#041a0b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:50;font:800 clamp(48px,14vw,150px) var(--mono)}
#flash small{font:800 clamp(16px,4vw,28px) var(--sans);letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.lamp.on{box-shadow:none!important}}

/* қўшимча синф ва компонентлар (inline style ўрнига) */
.mt6{margin-top:6px}
.lnk{color:var(--warn);font-weight:700}
.row.left{justify-content:flex-start}
.field.grow{flex:1 1 220px}
.devrow{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;align-items:baseline;margin-top:-6px;font:600 13px var(--sans);color:var(--muted)}
.devrow b{font:700 16px var(--mono);font-variant-numeric:tabular-nums;color:var(--fg);margin-left:6px}
.devrow .dg{color:var(--go)}.devrow .dy{color:var(--warn)}.devrow .dr{color:var(--stop)}