/* Касса — тёмная тема, крупные тапабельные элементы, один палец за столом. */

/* Шрифты лежат рядом файлами, а не тянутся с CDN: приложение обязано работать
   офлайн и под строгим CSP. Кириллица и латиница разнесены по unicode-range —
   браузер качает только то, что реально встретил на странице. */
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
/* Цифры моноширинные: суммы выстраиваются колонкой, «1» не уже «8». */
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
}

:root{
  --font:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-num:'JetBrains Mono','IBM Plex Sans',ui-monospace,Consolas,monospace;
  --bg:#14100d;
  --bg2:#1d1814;
  --card:#241e19;
  --card2:#2c2520;
  --line:#3a312a;
  --tx:#f2ebe4;
  --tx2:#a89b8e;
  --tx3:#6f6357;
  --acc:#ff8a3d;
  --acc-dim:#4a2d17;
  --ok:#4ec97f;
  --warn:#f0c04a;
  --bad:#f0654a;
  --r:14px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

/* без этого двойной тап по кнопке зумит страницу — приходится вручную откатывать */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* Обязательно !important: display в .sheet-wrap / #tabbar иначе перебивает
   браузерное [hidden]{display:none}, и скрытая шторка ловит все клики. */
[hidden]{display:none !important}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--tx);
  font:16px/1.4 var(--font);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

/* ---------- topbar ---------- */
/* position:fixed вместо sticky — на iOS Safari sticky-шапка с backdrop-filter
   иногда пропадает совсем при долгой прокрутке вниз (известный баг рендеринга).
   fixed всегда рисуется поверх, независимо от скролла */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;
  background:linear-gradient(var(--bg),rgba(20,16,13,.92));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
#topTitle{font-weight:650;font-size:17px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clock{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--tx2);font-size:14px}
.icon-btn{
  background:none;border:0;color:var(--tx);font-size:22px;line-height:1;
  padding:6px 10px;border-radius:10px;cursor:pointer;
}
.icon-btn:active{background:var(--card2)}

/* ---------- layout ---------- */
/* сверху — запас под теперь-fixed шапку (её высота ~44px + внутренние отступы + safe-area) */
#view{padding:calc(76px + env(safe-area-inset-top,0px)) 12px calc(96px + var(--safe-b));max-width:720px;margin:0 auto}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--tx2)}
.dim{color:var(--tx3)}
.tiny{font-size:12px}
.small{font-size:13px}
.big{font-size:26px;font-weight:700;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
/* моноширинный шрифт даёт пробелу-разрядителю («20 000») ту же ширину, что и
   цифре — на экране «Деньги» это особенно заметно. Сжимаем именно пробелы. */
.tab-money .num,.tab-money .big,.tab-money .kpi .val{
  word-spacing:-.45em;
}
.pos{color:var(--ok)}
.neg{color:var(--bad)}
.warnc{color:var(--warn)}
h3{margin:4px 2px;font-size:13px;font-weight:600;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.06em}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.tight{padding:10px 12px}
.card.acc{border-color:var(--acc-dim)}
.list{display:flex;flex-direction:column;gap:8px}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.kpi .lab{font-size:12px;color:var(--tx2);margin-bottom:4px}
.kpi .val{font-size:21px;font-weight:700;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.kpi .val.nowrap{white-space:nowrap}
.kpi .val.compact{font-size:16px}
.kpi.wide{grid-column:1/-1}

/* ---------- buttons ---------- */
button,input,select,textarea{font:inherit;font-family:inherit}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--card2);color:var(--tx);border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;font-weight:600;cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--acc);color:#231404;border-color:var(--acc)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:#5a2c22}
.btn.sm{padding:8px 11px;font-size:14px;border-radius:10px;font-weight:500}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.flash{background:var(--acc);color:#231404;border-color:var(--acc);transition:background .15s,color .15s,border-color .15s}
.chip.flash{background:var(--acc);color:#231404;border-color:var(--acc);transition:background .15s,color .15s,border-color .15s}
.btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.btn-row.two{grid-template-columns:repeat(2,1fr)}
.btn.stepper{width:80%;margin:0 auto}
.btn.btn-img{
  background-color:transparent;background-repeat:no-repeat;background-position:center;
  background-size:100% 100%;border:none;color:transparent;text-shadow:none;box-shadow:none;
  /* высота — жёстко по пропорции картинки (354×147), а не «как посчитает браузер»:
     у пустой flex-кнопки без текста разные браузеры (Chrome/Android и Safari/iOS)
     по-разному считают минимальную высоту строки — из-за этого высота кнопки
     и, соответственно, растяжение фоновой картинки отличались на Android */
  aspect-ratio:354/147;height:auto;padding-top:0;padding-bottom:0;
}

/* ---------- inputs ---------- */
label.field{display:block;margin-bottom:12px}
label.field > span{display:block;font-size:13px;color:var(--tx2);margin-bottom:5px}
input,select,textarea{
  width:100%;background:var(--bg2);color:var(--tx);
  border:1px solid var(--line);border-radius:11px;padding:12px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc-dim);border-color:var(--acc)}
input[type=number],input[data-money],input[type=datetime-local]{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{
  background:var(--card2);border:1px solid var(--line);color:var(--tx2);
  border-radius:999px;padding:7px 12px;font-size:14px;cursor:pointer;
}
.chip.on{background:var(--acc-dim);border-color:var(--acc);color:var(--tx)}
/* быстрые суммы: одинаковый размер, по центру строки */
.chips.center{justify-content:center}
.chip.amt{min-width:60px;justify-content:center;text-align:center}
/* рейк: суммы короче («30к», не «250к») — ширину можно сделать меньше */
.chip.amt.sm{min-width:44px}
.inline2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- player rows ---------- */
.pl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
.pl.out{opacity:.55}
.pl .nm{font-weight:600}
.pl .meta{font-size:12.5px;color:var(--tx2);margin-top:2px}
.pl .acts{display:flex;gap:6px;margin-top:9px}
.pl .acts .btn{flex:1}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;margin-right:6px}
.dot.off{background:var(--tx3)}

/* ---------- session list ---------- */
.sess{display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.sess.live{border-color:var(--acc)}
.badge{font-size:11px;padding:2px 7px;border-radius:999px;
  background:var(--card2);color:var(--tx2);border:1px solid var(--line)}
.badge.live{background:var(--acc);color:#231404;border-color:var(--acc)}
.badge.imp{color:var(--warn)}

/* ---------- feed ---------- */
.ev{display:flex;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px}
.ev:last-child{border-bottom:0}
.ev .t{color:var(--tx3);font-family:var(--font-num);font-variant-numeric:tabular-nums;width:46px;flex:none}
.ev .d{flex:1;min-width:0}
.ev .a{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:600}
.ev .x{color:var(--tx3);cursor:pointer;padding:0 4px}
.ev .x.x-danger{color:var(--bad);font-weight:700}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{color:var(--tx2);font-weight:600;text-align:right;padding:7px 5px;
  border-bottom:1px solid var(--line);font-size:12px}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:8px 5px;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.best td{background:var(--acc-dim)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- verdict ---------- */
.verdict{border-radius:var(--r);padding:14px;border:1px solid;font-weight:600}
.verdict.go{background:rgba(78,201,127,.10);border-color:rgba(78,201,127,.4);color:var(--ok)}
.verdict.thin{background:rgba(240,192,74,.10);border-color:rgba(240,192,74,.4);color:var(--warn)}
.verdict.stop{background:rgba(240,101,74,.10);border-color:rgba(240,101,74,.4);color:var(--bad)}
.verdict.nodata{background:var(--card);border-color:var(--line);color:var(--tx2)}

/* ---------- tabbar ---------- */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:rgba(29,24,20,.97);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);backdrop-filter:blur(10px);
}
#tabbar button{
  background:none;border:0;color:var(--tx3);padding:9px 4px 8px;
  font-size:11px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;
}
#tabbar button .ic{font-size:19px;line-height:1}
#tabbar button.on{color:var(--acc)}

/* ---------- sheet ---------- */
/* выше .lock (70): подтверждение сброса пина открывается ПОВЕРХ экрана блокировки,
   иначе шторка рисуется под ним и физически недоступна для нажатия */
.sheet-wrap{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.sheet{
  position:relative;width:100%;max-width:560px;max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg2);border:1px solid var(--line);border-bottom:0;
  border-radius:20px 20px 0 0;
  animation:up .18s ease-out;
}
@keyframes up{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:16px 16px 14px;background:var(--bg2);border-bottom:1px solid var(--line);
}
.sheet-head h2{margin:0;font-size:18px;flex:1}
#sheetBody{overflow-y:auto;padding:16px 16px calc(20px + var(--safe-b))}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(80px + var(--safe-b));z-index:60;
  background:var(--acc);border:1px solid var(--acc);color:#231404;
  padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;max-width:88vw;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}

.empty{text-align:center;color:var(--tx3);padding:36px 16px}
.sep{height:1px;background:var(--line);margin:4px 0}
code.k{background:var(--card2);padding:2px 6px;border-radius:6px;font-size:12.5px}

@media (min-width:640px){
  .kpis{grid-template-columns:repeat(4,1fr)}
  .kpi.wide{grid-column:auto}
}

/* ---------- индикатор синхронизации ---------- */
.syncdot{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  font-size:11px;font-weight:700;color:#14100d;background:var(--ok);
}
.syncdot.wait{background:var(--warn)}
.syncdot.bad{background:var(--bad);color:#fff}
.syncdot.busy{opacity:.5}

/* ---------- полоса обновления версии ---------- */
.updbar{
  position:fixed;left:10px;right:10px;z-index:50;
  bottom:calc(76px + var(--safe-b));
  display:flex;align-items:center;gap:8px;
  background:var(--card2);border:1px solid var(--acc);
  border-radius:12px;padding:10px 12px;font-size:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  max-width:560px;margin:0 auto;
}
.updbar span{flex:1}

/* ---------- экран входа по пину ---------- */
.lock{
  position:fixed;inset:0;z-index:70;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.lock-box{width:100%;max-width:320px;text-align:center}
.lock-fox{font-size:44px;margin-bottom:6px}
.lock-title{font-size:17px;font-weight:600;margin-bottom:20px}
.lock-dots{display:flex;gap:14px;justify-content:center;margin-bottom:26px}
.lock-dots i{
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--line);background:transparent;transition:.12s;
}
.lock-dots i.on{background:var(--acc);border-color:var(--acc)}
.lock-dots.shake{animation:shk .38s}
@keyframes shk{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
.lock-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lock-pad button{
  height:62px;border-radius:50%;font-size:23px;font-weight:600;
  background:var(--card);color:var(--tx);border:1px solid var(--line);cursor:pointer;
}
.lock-pad button:active{background:var(--acc-dim);border-color:var(--acc)}
.lock-pad button.flat{background:none;border:0;font-size:13px;color:var(--tx3);font-weight:500}
.lock-hint{margin-top:18px;font-size:12.5px;color:var(--tx3);min-height:18px}
.oper-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;border:1px solid var(--acc);
  background:var(--acc-dim);color:var(--tx);font-size:13px;font-weight:700;cursor:pointer;
}

/* часть суммы, назначенная способу расчёта — подписью прямо на чипе */
.chip .part{font-size:12px;opacity:.85}

/* строки сбора рейка целиком жёлтые — их ищешь в ленте чаще всего */
.ev.rake, .ev.rake .t, .ev.rake .d, .ev.rake .a, .ev.rake b{color:var(--warn)}
.ev.rake .tiny.muted, .ev.rake .dim{color:var(--warn);opacity:.7}