/* Пульт — приборная панель запуска.
   Тёмная по замыслу: смотрят с телефона, часто ночью, и цифра
   должна читаться раньше, чем оформление вокруг неё.

   Шрифты: только заголовочный Unbounded лежит у нас (33 КБ, два подмножества).
   Текст и цифры идут системными — на айфоне это SF Pro и SF Mono: они уже
   в телефоне, весят ноль и рисуются мгновенно. Раньше здесь висели три
   семейства с fonts.googleapis.com: чужой домен, лишние рукопожатия
   и семь файлов до первой отрисовки. */

@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/f/unbounded-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url(/f/unbounded-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --ground:#091416;
  --panel:#0F1F22;
  --panel-2:#152B2F;
  --line:#1E3B3F;
  --line-soft:#162C30;
  --text:#E4EFED;
  --muted:#88A6A5;
  --dim:#5E7A7A;
  --amber:#F2A63B;
  --amber-soft:rgba(242,166,59,.14);
  --mint:#6FCBB0;
  --mint-soft:rgba(111,203,176,.14);
  --coral:#E9614C;
  --coral-soft:rgba(233,97,76,.15);

  --f-display:'Unbounded',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

/* Атрибут hidden обязан побеждать.
   Браузер прячет [hidden] правилом display:none из своей таблицы стилей,
   но у него нулевая специфичность: любой наш класс с display перебивает его.
   Из-за этого заставка «Проверяю, что это ты…» оставалась висеть поверх
   уже загруженного пульта, хотя JS честно выставлял hidden. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
button{font:inherit; color:inherit}

/* ─── ворота ─── */
.gate{
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:32px; text-align:center;
  background:var(--ground); z-index:60;
}
.gate-mark{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--amber-soft); border:1px solid rgba(242,166,59,.35);
  font-family:var(--f-display); font-size:22px; font-weight:700; color:var(--amber);
}
.gate-msg{font-size:15px; color:var(--muted); max-width:30ch}
.gate-sub{font-family:var(--f-mono); font-size:11px; color:var(--dim); max-width:34ch; line-height:1.6}
.gate.bad .gate-mark{background:var(--coral-soft); border-color:rgba(233,97,76,.4); color:var(--coral)}

/* ─── каркас ─── */
.app{display:flex; flex-direction:column; height:100%}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(var(--safe-t) + 12px) 16px 11px;
  border-bottom:1px solid var(--line-soft); background:var(--ground);
  position:sticky; top:0; z-index:20;
}
.top-l{display:flex; align-items:center; gap:10px; min-width:0}
.mark{
  width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--amber-soft); border:1px solid rgba(242,166,59,.32);
  font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--amber);
}
.top-title{font-family:var(--f-display); font-size:15px; font-weight:700; letter-spacing:-.02em}
.top-sub{font-family:var(--f-mono); font-size:10px; color:var(--dim)}
.icon-btn{
  width:36px; height:36px; flex:none; border-radius:11px; border:1px solid var(--line-soft);
  background:var(--panel); display:grid; place-items:center; cursor:pointer;
}
.icon-btn svg{width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.icon-btn:active{background:var(--panel-2)}
.icon-btn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.views{flex:1; position:relative; overflow:hidden}
.view{
  position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 14px calc(var(--safe-b) + 22px);
  display:none; flex-direction:column; gap:11px;
}
.view.is-on{display:flex}

.tabbar{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line-soft); background:var(--panel);
  padding:6px 4px calc(var(--safe-b) + 8px); flex:none;
}
.tabbar[data-role="karina"]{grid-template-columns:repeat(3,1fr)}
.tabbar[data-role="karina"] .tab[data-owner]{display:none}
.tab{
  appearance:none; border:0; background:none; cursor:pointer; padding:6px 2px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.03em; color:var(--dim);
  border-radius:10px;
}
.tab svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tab.is-on{color:var(--amber)}
.tab:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

/* ─── блоки ─── */
.v-head{display:flex; flex-direction:column; gap:2px; padding:2px 2px 4px}
.v-sub{font-family:var(--f-mono); font-size:10px; color:var(--dim); letter-spacing:.07em; text-transform:uppercase}
.v-title{font-family:var(--f-display); font-size:21px; font-weight:700; letter-spacing:-.035em}

.tiles{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.tile{background:var(--panel); border:1px solid var(--line-soft); border-radius:15px; padding:12px 13px; display:flex; flex-direction:column; gap:2px}
.tile .k{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.tile .v{font-family:var(--f-display); font-size:25px; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.1}
.tile .d{font-family:var(--f-mono); font-size:10.5px; color:var(--muted)}
.tile.hi{border-color:rgba(242,166,59,.4); background:linear-gradient(160deg,var(--amber-soft),var(--panel))}
.tile.hi .v{color:var(--amber)}

.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:15px; padding:13px}
.card-h{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.card-h .t{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.card.flat{padding:0; overflow:hidden}
.card.flat .card-h{padding:13px 13px 0; margin-bottom:6px}

.empty{font-size:13.5px; color:var(--dim); padding:6px 2px}

.pill{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.04em; padding:3px 7px; border-radius:99px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.pill.ok{color:var(--mint); border-color:rgba(111,203,176,.4); background:var(--mint-soft)}
.pill.warn{color:var(--amber); border-color:rgba(242,166,59,.4); background:var(--amber-soft)}
.pill.bad{color:var(--coral); border-color:rgba(233,97,76,.4); background:var(--coral-soft)}

.alert{display:flex; gap:10px; padding:10px 11px; border-radius:13px; align-items:stretch; border:1px solid var(--line-soft); background:var(--panel); width:100%; text-align:left; cursor:pointer}
.alert .bar{width:3px; border-radius:9px; flex:none}
.alert .tx{font-size:13px; line-height:1.45}
.alert .tm{font-family:var(--f-mono); font-size:9.5px; color:var(--dim); margin-top:3px}
.a-ok .bar{background:var(--mint)}
.a-warn .bar{background:var(--amber)}
.a-bad .bar{background:var(--coral)}

.rows{display:flex; flex-direction:column}
.row{display:flex; gap:10px; align-items:center; padding:10px 13px; border-top:1px solid var(--line-soft); background:none; border-left:0; border-right:0; border-bottom:0; width:100%; text-align:left; cursor:pointer}
.rows .row:first-child{border-top:0}
.row:active{background:var(--panel-2)}
.av{width:33px; height:33px; border-radius:11px; flex:none; display:grid; place-items:center; font-family:var(--f-mono); font-size:12px; font-weight:600; background:var(--panel-2); color:var(--muted); border:1px solid var(--line-soft)}
.av.hot{color:var(--amber); border-color:rgba(242,166,59,.4)}
.av.cold{color:var(--coral); border-color:rgba(233,97,76,.4)}
.av.won{color:var(--mint); border-color:rgba(111,203,176,.4)}
.row .body{flex:1; min-width:0}
.row .nm{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .mt{font-family:var(--f-mono); font-size:10px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .rt{font-family:var(--f-mono); font-size:12px; text-align:right; flex:none; font-variant-numeric:tabular-nums; color:var(--muted)}

.chk{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:13.5px; cursor:pointer; background:none; border-left:0; border-right:0; border-bottom:0; width:100%; text-align:left}
.card .chk:first-of-type{border-top:0}
.chk .box{width:17px; height:17px; border-radius:6px; border:1.5px solid var(--line); flex:none; position:relative}
.chk .box.done{background:var(--mint); border-color:var(--mint)}
.chk .box.done::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:var(--ground); font-weight:700}
.chk .txt{flex:1; min-width:0}
.chk .txt.done-t{color:var(--dim); text-decoration:line-through}
.chk .sub{font-family:var(--f-mono); font-size:9.5px; color:var(--dim)}
.chk .sub.late{color:var(--coral)}

.bars{display:flex; align-items:flex-end; gap:4px; height:64px}
.bars i{flex:1; border-radius:4px 4px 2px 2px; background:var(--line); display:block; min-height:2px}
.bars i.on{background:var(--amber)}
.bars i.mid{background:rgba(242,166,59,.45)}
.xax{display:flex; gap:4px; margin-top:6px}
.xax span{flex:1; text-align:center; font-family:var(--f-mono); font-size:8.5px; color:var(--dim)}

.fun{display:flex; flex-direction:column; gap:7px}
.fun .f{display:flex; align-items:center; gap:9px}
.fun .lb{font-family:var(--f-mono); font-size:10px; color:var(--dim); width:40px; flex:none}
.fun .tr{flex:1; height:20px; background:var(--panel-2); border-radius:6px; overflow:hidden}
.fun .fl{height:100%; background:linear-gradient(90deg,var(--amber),rgba(242,166,59,.45)); border-radius:6px; display:block}
.fun .vl{font-family:var(--f-mono); font-size:10.5px; width:66px; text-align:right; flex:none; font-variant-numeric:tabular-nums}
.fun .vl s{text-decoration:none; color:var(--coral)}

.svc{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft)}
.card .svc:first-of-type{border-top:0}
.led{width:8px; height:8px; border-radius:50%; flex:none; background:var(--dim)}
.led.up{background:var(--mint); box-shadow:0 0 0 3px var(--mint-soft)}
.led.down{background:var(--coral); box-shadow:0 0 0 3px var(--coral-soft)}
.svc .n{flex:1; font-size:13.5px}
.svc .s{font-family:var(--f-mono); font-size:10px; color:var(--dim)}

/* ─── управление ─── */
.btn{
  appearance:none; border:1px solid var(--line); background:var(--panel); color:var(--muted);
  font-family:var(--f-mono); font-size:12px; padding:11px 14px; border-radius:12px;
  cursor:pointer; text-align:center; flex:1;
}
.btn:active{background:var(--panel-2)}
.btn.pri{background:var(--amber); color:#0B1416; border-color:var(--amber); font-weight:600}
.btn.sm{padding:8px 11px; font-size:11px; flex:none}
.btn[disabled]{opacity:.5; cursor:default}
.btn-row{display:flex; gap:8px}

.chips{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  appearance:none; border:1px solid var(--line-soft); background:var(--panel); color:var(--muted);
  font-family:var(--f-mono); font-size:11px; padding:8px 12px; border-radius:99px;
  white-space:nowrap; cursor:pointer; flex:none;
}
.chip.on{background:var(--amber-soft); border-color:rgba(242,166,59,.45); color:var(--amber)}

input.fld, textarea.fld{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px; color:var(--text); font-family:var(--f-body); font-size:15px;
}
input.fld{font-family:var(--f-mono)}
textarea.fld{min-height:96px; resize:vertical; line-height:1.5}
.fld:focus{outline:none; border-color:rgba(242,166,59,.5)}
.fld::placeholder{color:var(--dim)}
label.lbl{font-family:var(--f-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:6px}

/* ─── шторка ─── */
.sheet-bg{position:fixed; inset:0; background:rgba(4,10,11,.72); z-index:40; backdrop-filter:blur(2px)}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:50; max-height:88%;
  background:var(--ground); border-top:1px solid var(--line);
  border-radius:22px 22px 0 0; display:flex; flex-direction:column;
  animation:up .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes up{from{transform:translateY(20px); opacity:.4} to{transform:none; opacity:1}}
.sheet-grip{width:38px; height:4px; border-radius:99px; background:var(--line); margin:10px auto 4px; flex:none}
.sheet-body{overflow-y:auto; padding:8px 15px calc(var(--safe-b) + 20px); display:flex; flex-direction:column; gap:11px}
.sheet-title{font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.03em}
.sheet-sub{font-family:var(--f-mono); font-size:10.5px; color:var(--dim)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13.5px}
.kv dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding-top:3px}
.kv dd{margin:0}

.tl{display:flex; flex-direction:column; gap:0}
.tl .e{display:grid; grid-template-columns:64px 1fr; gap:11px; padding:8px 0; border-top:1px solid var(--line-soft); font-size:13px}
.tl .e:first-child{border-top:0}
.tl .when{font-family:var(--f-mono); font-size:9.5px; color:var(--dim); padding-top:3px}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--safe-b) + 78px);
  z-index:70; background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 16px; font-size:13.5px; max-width:86%;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.8);
}
.toast.bad{border-color:rgba(233,97,76,.5); color:var(--coral)}
.toast.ok{border-color:rgba(111,203,176,.45); color:var(--mint)}

.skel{height:64px; border-radius:15px; background:linear-gradient(90deg,var(--panel),var(--panel-2),var(--panel)); background-size:220% 100%; animation:sk 1.3s ease-in-out infinite}
@keyframes sk{to{background-position:-120% 0}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}