/* ============================================================
   SECRET BOX · Пульт v1.0 — design system
   Палитра по спеке (APP-ARCHITECTURE §3.1): почти чёрный фон,
   золото #C2A058, статус-зелёный #4ADE80, числа — моно.
   ============================================================ */
:root{
  --bg:#010404; --bg2:#121414; --bg3:#0b0e0d;
  --line:#202624; --line2:#2a3230;
  --ink:#ffffff; --muted:#888a8e;
  --brand:#6abf4b; --brand2:#9ccc65; --brand-dim:color-mix(in oklab,var(--brand) 45%,transparent);
  --gold:var(--brand); --gold-dim:var(--brand-dim);
  --green:#4ade80; --green2:#34d399; --red:#e2634a; --blue:#a1d6e2;
  --r:12px; --r-s:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,sans-serif; font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; max-width:560px; margin:0 auto; min-height:100dvh;
}
.num{font-family:"Roboto Mono",monospace; font-variant-numeric:tabular-nums}
.dim{color:var(--muted); font-weight:500}

/* ---------- header ---------- */
header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 10px}
.logo{display:flex; align-items:center; gap:10px; line-height:1.1}
.logo img{height:40px; width:40px}
.logo b{font-size:21px; letter-spacing:.04em; font-weight:800}
.logo b span{color:var(--brand)}
.logo small{font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.logo .logo-txt{display:flex; flex-direction:column}
.head-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.freshness{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  border:1px solid var(--line); border-radius:999px; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--bg2); cursor:pointer;
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill.demo .dot{background:var(--gold)}
.pill.live .dot{background:var(--green); box-shadow:0 0 8px color-mix(in oklab,var(--green) 60%,transparent)}
.pill.err .dot{background:var(--red)}

/* ---------- screens ---------- */
main{flex:1; padding:6px 18px 100px}
.screen{display:none; animation:fade .22s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sec-label{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:22px 2px 10px}
.sub-title{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:14px 0 6px}

/* ---------- banner ---------- */
.banner{
  display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:var(--r);
  font-size:13px; margin-top:8px; border:1px solid var(--line); background:var(--bg2);
}
.banner.ok{border-color:color-mix(in oklab,var(--green) 35%,var(--line)); background:color-mix(in oklab,var(--green) 8%,var(--bg2))}
.banner.warn{border-color:color-mix(in oklab,var(--gold) 45%,var(--line)); background:color-mix(in oklab,var(--gold) 10%,var(--bg2))}
.banner.bad{border-color:color-mix(in oklab,var(--red) 50%,var(--line)); background:color-mix(in oklab,var(--red) 12%,var(--bg2))}
.banner b{letter-spacing:.04em}

/* ---------- hero ---------- */
.hero{background:linear-gradient(150deg,#14181a,var(--bg2) 70%); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-top:10px}
.hero-title{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700}
.hero-top{display:flex; align-items:flex-start; gap:12px}
.hero .big{font-size:62px; line-height:1; font-weight:500}
.hero-sub{display:flex; flex-direction:column; gap:2px; padding-top:6px}
.hero .unit{color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.hero .dim{font-size:11px}
.hero .badge{margin-left:auto; padding:5px 11px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.06em; white-space:nowrap}
.badge.ok{background:color-mix(in oklab,var(--green) 15%,transparent); color:var(--green)}
.badge.warn{background:color-mix(in oklab,var(--gold) 18%,transparent); color:var(--gold)}
.badge.bad{background:color-mix(in oklab,var(--red) 16%,transparent); color:var(--red)}
.kpi-strip{display:flex; align-items:baseline; gap:10px; margin:14px 0 4px; padding:10px 12px; background:color-mix(in oklab,var(--bg) 55%,transparent); border-radius:var(--r-s)}
.kpi{font-size:28px; color:var(--green2)}
.kpi-label{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:12px}
.metric{background:color-mix(in oklab,var(--bg) 55%,transparent); padding:11px 9px; border-radius:var(--r-s)}
.metric .k{font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.metric .v{font-family:"Roboto Mono",monospace; font-size:19px; line-height:1.25; margin-top:2px}
.metric .v small{font-family:"Inter",sans-serif; font-size:10px; color:var(--muted); display:block}

/* ---------- cards / rows / hints ---------- */
.card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:16px 17px; margin-top:10px}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid color-mix(in oklab,var(--line) 55%,transparent); font-size:13px}
.row:last-child{border-bottom:none}
.row .k{color:var(--muted)}
.row .v{font-family:"Roboto Mono",monospace; font-size:18px}
.row .v small{font-family:"Inter",sans-serif; font-size:10px; color:var(--muted); margin-left:4px}
.row-cur{background:color-mix(in oklab,var(--gold) 7%,transparent); border-radius:var(--r-s); padding-left:8px; padding-right:8px}
.hint{font-size:11.5px; color:var(--muted); margin-top:10px; max-width:62ch}

/* ---------- alerts / events ---------- */
.alert{display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-s); background:var(--bg2); border:1px solid var(--line); margin-top:3px; font-size:13px}
.alert .ic{font-size:15px; line-height:1.3}
.alert.warn{border-left:3px solid var(--gold)}
.alert.bad{border-left:3px solid var(--red)}
.alert.ok{border-left:3px solid var(--green)}
.alert b{display:block; font-size:12.5px}
.alert span{color:var(--muted); font-size:11.5px}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  padding:10px 14px; font-size:11px; letter-spacing:.06em; font-weight:700;
  border-radius:var(--r-s); border:1px solid var(--line); background:var(--bg3); color:var(--ink); cursor:pointer;
}
.chip .dim{font-size:9.5px; margin-left:3px}
.chip.active{background:var(--brand); color:#0d1a08; border-color:var(--brand)}
.chip.sim{flex:1; min-width:110px}
.chip.sim.active{background:var(--red); color:#fff; border-color:var(--red)}

/* ---------- health grid ---------- */
.health{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.chip-health{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-s); padding:10px 11px}
.chip-health b{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.chip-health span{font-size:12.5px; font-weight:600}
.chip-health.ok span{color:var(--green)}
.chip-health.bad span{color:var(--red)}

/* ---------- light timeline ---------- */
.tl{display:flex; gap:3px; height:64px; margin:4px 0 10px}
.tl-block{
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  border-radius:6px; padding:6px 2px; min-width:0; overflow:hidden;
}
.tl-dawn{background:linear-gradient(180deg,color-mix(in oklab,var(--gold) 45%,#000),color-mix(in oklab,var(--gold) 18%,#000))}
.tl-day{background:linear-gradient(180deg,color-mix(in oklab,var(--gold) 75%,#000),color-mix(in oklab,var(--gold) 40%,#000))}
.tl-dusk{background:linear-gradient(180deg,color-mix(in oklab,var(--gold) 35%,#000),color-mix(in oklab,var(--gold) 12%,#000))}
.tl-night{background:#0c1012}
.tl-name{font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; white-space:nowrap}
.tl-lvl{font-family:"Roboto Mono",monospace; font-size:12px}
.tl-time{font-family:"Roboto Mono",monospace; font-size:8.5px; color:rgba(255,255,255,.55); white-space:nowrap}

/* ---------- chart ---------- */
.chart-card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.chart-card canvas{width:100%; height:200px; display:block}
.legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:10px; color:var(--muted)}
.legend i{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:4px}
.seg{display:flex; gap:8px; margin-bottom:12px}
.seg button{flex:1; padding:9px 8px; font-size:10px; letter-spacing:.08em}
.seg button.active{border-color:var(--gold); color:var(--gold); background:color-mix(in oklab,var(--gold) 12%,transparent)}

/* ---------- states / buttons / inputs ---------- */
.state{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.state.on{color:var(--green)}
button{
  font:700 12px "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--r-s); cursor:pointer; border:1px solid var(--line);
  background:var(--bg2); color:var(--ink); padding:13px 16px;
  transition:filter .16s ease, border-color .16s ease;
}
button:hover{filter:brightness(1.15)}
button.primary{background:var(--brand); color:#0d1a08; border-color:var(--brand)}
button.block{width:100%}
.field{margin-top:13px}
.field label{display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:7px}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=time],select{
  width:100%; background:var(--bg3); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-s); padding:12px 13px; font:500 14px "Inter",sans-serif;
}
input:focus,select:focus{outline:1px solid var(--gold-dim)}
input[type=range]{width:100%; margin-top:10px; accent-color:var(--gold)}

/* ---------- задачи (Jane-style reminders) ---------- */
.link-card{display:block; margin-top:12px; padding:12px 14px; border-radius:var(--r-s); background:var(--bg3); border:1px solid var(--line); color:var(--brand2); font-size:12.5px; font-weight:600; text-decoration:none}
.link-card:hover{filter:brightness(1.15)}
.task{display:flex; align-items:center; gap:11px; padding:11px 12px; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-s); margin-top:4px; font-size:12.5px}
.task .when{margin-left:auto; font-family:"Roboto Mono",monospace; font-size:11px; color:var(--muted); white-space:nowrap}
.task.due .when{color:var(--brand2)}
.task button{padding:7px 10px; font-size:9px}

/* ---------- tab bar ---------- */
nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:560px; display:grid; grid-template-columns:repeat(5,1fr);
  background:color-mix(in oklab,var(--bg) 92%,transparent); border-top:1px solid var(--line);
  backdrop-filter:blur(8px); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
nav button{
  background:none; border:none; padding:8px 2px; display:flex; flex-direction:column;
  align-items:center; gap:3px; color:var(--muted); font-size:8.5px; letter-spacing:.08em;
}
nav button .ic{font-size:19px; line-height:1}
nav button.active{color:var(--gold)}

@media (min-width:620px){ body{max-width:640px} .health{grid-template-columns:repeat(6,1fr)} }
@media print{ nav, header .head-right{display:none} }