/* Общий пульт: то, чего нет в общем слое /pult/kb.css (GGWP web/cabinet.css). Классы pl-…, цвета — только
   переменные --kb-*, поэтому светлая и тёмная тема работают сами. Серые таблетки — только внутри белых карточек. */


/* Шрифт — как у общего слоя: Geist, если он есть в системе, иначе системный. Свои файлы Geist (400–800) пульт
   начнёт раздавать сам, когда они появятся в репозитории целым набором: одни жирные начертания портят обычный текст. */
html{background:var(--kb-page)}
body{margin:0; background:var(--kb-page); color:var(--kb-ink)}
[hidden]{display:none !important}

a.kb-nav-item, a.kb-chip, a.kb-btn, a.kb-brand{text-decoration:none}
.pl-word{font-size:22px; font-weight:800; letter-spacing:-.04em; line-height:20px}
.pl-me{border:0; background:none; padding:0; text-align:left; border-radius:999px}
.pl-bell{position:relative}
.pl-bell-n{position:absolute; top:6px; right:6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center; background:var(--kb-red-dot); color:#fff; font-style:normal; font-size:11px; font-weight:700}
.pl-bell-n:empty{display:none}

/* ── полоса под шапкой: магазин и период ───────────────────────────────── */
.pl-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px}
.pl-shops{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%}
.pl-shops::-webkit-scrollbar{display:none}
.pl-shops .kb-chip{background:var(--kb-card); flex:none}
.pl-shops .kb-chip.on{background:var(--kb-black); color:var(--kb-on-black)}
.pl-dot{width:8px; height:8px; border-radius:50%; background:var(--kb-green-dot); flex:none}
.pl-dot.stale{background:var(--kb-amber-dot)} .pl-dot.off{background:var(--kb-red-dot)} .pl-dot.none{background:var(--kb-line-2)}
.pl-bar-right{display:flex; align-items:center; gap:12px; margin-left:auto}
.pl-fresh{font-size:13px; color:var(--kb-ink-3); white-space:nowrap}
.pl-apart{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; opacity:.6}

/* ── вкладки раздела ───────────────────────────────────────────────────── */
.pl-tabs{display:flex; gap:2px; padding:5px; border-radius:999px; background:var(--kb-card); width:max-content; max-width:100%;
  overflow-x:auto; scrollbar-width:none; margin:0 0 16px}
.pl-tabs::-webkit-scrollbar{display:none}
.pl-tabs button{height:38px; padding:0 16px; border:0; border-radius:999px; background:none; color:var(--kb-ink-2);
  font-weight:500; white-space:nowrap; flex:none}
.pl-tabs button:hover{background:var(--kb-soft); color:var(--kb-ink)}
.pl-tabs button.on{background:var(--kb-soft-2); color:var(--kb-ink); font-weight:600}
.pl-tabs i{font-style:normal; margin-left:6px; font-size:13px; color:var(--kb-ink-3)}

/* ── строки «подпись — значение» и чек ─────────────────────────────────── */
.pl-rows{display:flex; flex-direction:column}
.pl-row{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--kb-line)}
.pl-row:last-child{border-bottom:0}
.pl-row > span{color:var(--kb-ink-3); flex:none}
.pl-row > b{margin-left:auto; text-align:right; font-weight:600; min-width:0; overflow-wrap:anywhere}
.pl-row > b small{font-weight:400; color:var(--kb-ink-3); margin-left:6px}
/* В узких блоках шторки пояснение встаёт под числом: число не рвётся, пояснение не толкает его на вторую строку. */
.kb-sec .pl-row > b{white-space:nowrap}
.kb-sec .pl-row > b small{display:block; margin-left:0; font-size:13px; white-space:normal; letter-spacing:0}
.kb-sec .pl-row > span{flex:0 1 auto; min-width:0}
.pl-row.minus > b{color:var(--kb-red)} .pl-row.plus > b{color:var(--kb-green)}
.pl-row.total{padding-top:14px; border-top:2px solid var(--kb-ink); border-bottom:0; margin-top:4px}
.pl-row.total > span{color:var(--kb-ink); font-weight:600} .pl-row.total > b{font-size:22px; font-weight:700; letter-spacing:-.02em}
.pl-row.sub > span{padding-left:14px} .pl-row.sub{padding:5px 0; border-bottom:0; font-size:14px}
.pl-note{margin:10px 0 0; font-size:13px; color:var(--kb-ink-3); line-height:1.45}
.pl-warn{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--kb-amber-bg);
  color:var(--kb-amber); font-size:14px; line-height:1.4}
.pl-warn.red{background:var(--kb-red-bg); color:var(--kb-red)}
.pl-warn .kb-ico{flex:none; margin-top:1px}

/* Каскад: выручка → закупка → касса → чистая. Полосы показывают долю от выручки. */
.pl-cascade{display:flex; flex-direction:column; gap:10px}
.pl-step{display:grid; grid-template-columns:minmax(120px, 190px) 1fr auto; gap:12px; align-items:center}
.pl-step > span{color:var(--kb-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-step > i{height:28px; border-radius:10px; background:var(--kb-soft); position:relative; overflow:hidden}
.pl-step > i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w, 0%); border-radius:10px; background:var(--kb-blue)}
.pl-step.cost > i::after{background:var(--kb-ink-3)} .pl-step.fee > i::after{background:var(--kb-amber-dot)}
.pl-step.net > i::after{background:var(--kb-green-dot)} .pl-step.share > i::after{background:var(--kb-blue-2)}
.pl-step > b{font-weight:600; white-space:nowrap; text-align:right; min-width:96px}
.pl-step > b small{display:block; font-weight:400; font-size:12px; color:var(--kb-ink-3)}

/* Столбики по дням и ряд кнопок карточки. */
.pl-days{display:flex; align-items:flex-end; gap:5px; height:96px; margin-top:16px}
.pl-days i{flex:1; min-width:4px; border-radius:6px 6px 3px 3px; background:var(--kb-blue-2); transition:background-color .15s var(--kb-ease)}
.pl-days i:hover{background:var(--kb-blue)} .pl-days i.today{background:var(--kb-lime)}
.pl-acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pl-rev .kb-big{display:block; margin-top:4px}

/* ── курсы и балансы ───────────────────────────────────────────────────── */
.pl-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px}
.pl-tile{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:18px; background:var(--kb-soft); min-width:0}
.pl-tile small{font-size:13px; color:var(--kb-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-tile b{font-size:22px; font-weight:700; letter-spacing:-.02em; white-space:nowrap}
.pl-tile b small{font-size:.6em; font-weight:600; color:inherit; opacity:.6; margin-left:2px}
.pl-tile em{font-style:normal; font-size:12px; color:var(--kb-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-tile.low{background:var(--kb-red-bg)} .pl-tile.low b{color:var(--kb-red)}
.pl-tile.accent{background:var(--kb-blue); color:var(--kb-on-blue)} .pl-tile.accent small, .pl-tile.accent em{color:color-mix(in oklab, #fff 75%, transparent)}

/* ── «требует внимания» ────────────────────────────────────────────────── */
.pl-attn{display:flex; flex-direction:column; gap:8px}
.pl-attn button{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:16px;
  background:var(--kb-soft); text-align:left}
.pl-attn button:hover{background:var(--kb-soft-2)}
.pl-attn b{font-weight:600} .pl-attn small{display:block; color:var(--kb-ink-3); font-size:13px}
.pl-attn .n{margin-left:auto; min-width:30px; height:30px; padding:0 9px; border-radius:999px; display:grid; place-items:center;
  background:var(--kb-red-dot); color:#fff; font-weight:700; font-size:14px}
.pl-attn .n.amber{background:var(--kb-amber-dot)} .pl-attn .n.calm{background:var(--kb-line-2); color:var(--kb-ink-2)}

/* ── таблицы и списки пульта ───────────────────────────────────────────── */
.pl-click tbody tr{cursor:pointer}
.pl-click tbody tr:hover td{background:var(--kb-soft)}
.pl-shop{display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; background:var(--kb-soft);
  font-size:12px; font-weight:600; letter-spacing:.02em; white-space:nowrap}
.pl-muted{color:var(--kb-ink-3)} .pl-num{font-variant-numeric:tabular-nums; white-space:nowrap}
.pl-right{text-align:right} .pl-strong{font-weight:600}
.pl-good{color:var(--kb-green)} .pl-bad{color:var(--kb-red)}
.pl-tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px}
.pl-tools .kb-search{flex:1; min-width:220px}
.pl-more{display:flex; justify-content:center; margin-top:14px}
.pl-skel{height:14px; border-radius:7px; background:linear-gradient(90deg, var(--kb-soft) 0%, var(--kb-soft-2) 50%, var(--kb-soft) 100%);
  background-size:200% 100%; animation:pl-skel 1.2s linear infinite}
@keyframes pl-skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.pl-skel{animation:none}}

/* Лента событий заказа: создан → оплачен → выдача → выдан. */
.pl-tl{display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none}
.pl-tl li{position:relative; padding:0 0 14px 22px}
.pl-tl li::before{content:""; position:absolute; left:4px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--kb-line-2)}
.pl-tl li::after{content:""; position:absolute; left:8px; top:18px; bottom:0; width:1.5px; background:var(--kb-line)}
.pl-tl li:last-child{padding-bottom:0} .pl-tl li:last-child::after{display:none}
.pl-tl li.ok::before{background:var(--kb-green-dot)} .pl-tl li.bad::before{background:var(--kb-red-dot)} .pl-tl li.wait::before{background:var(--kb-amber-dot)}
.pl-tl b{display:block; font-weight:600} .pl-tl small{color:var(--kb-ink-3); font-size:13px; overflow-wrap:anywhere}
.pl-code{font-family:var(--kb-mono); font-size:13px; padding:2px 8px; border-radius:8px; background:var(--kb-card); border:1px solid var(--kb-line)}
.pl-drawer-tags{display:flex; gap:8px; flex-wrap:wrap; min-width:0}
dialog.pl-drawer{width:min(900px, calc(100vw - 24px))}
.pl-tools .kb-search input{width:100%}
.pl-two{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px}
.pl-two > .kb-sec + .kb-sec{margin-top:0}

/* ── вход ──────────────────────────────────────────────────────────────── */
.pl-gate{min-height:100dvh; display:grid; place-items:center; padding:24px;
  font-family:var(--kb-font); font-size:15px; line-height:1.45; color:var(--kb-ink)}
.pl-gate *{box-sizing:border-box}
.pl-gate button, .pl-gate input{font:inherit; color:inherit}
.pl-gate-card{width:min(440px, 100%); padding:32px; border-radius:28px; background:var(--kb-card); box-shadow:var(--kb-lift);
  display:flex; flex-direction:column; gap:18px; text-align:center}
.pl-gate-brand{display:flex; align-items:center; justify-content:center; gap:12px}
.pl-gate h1{margin:0; font-size:26px; font-weight:700; letter-spacing:-.025em; line-height:1.15}
.pl-gate p{margin:0; color:var(--kb-ink-2)}
.pl-gate .kb-btn{width:100%; justify-content:center; height:52px; font-size:16px}
.pl-qr{align-self:center; width:208px; height:208px; padding:10px; border-radius:20px; background:#fff}
.pl-qr img{display:block; width:100%; height:100%}
.pl-steps{display:flex; flex-direction:column; gap:8px; text-align:left; margin:0; padding:0; list-style:none; counter-reset:s}
.pl-steps li{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:var(--kb-soft); counter-increment:s}
.pl-steps li::before{content:counter(s); flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--kb-card); font-weight:700; font-size:13px}
.pl-steps li.done::before{content:"✓"; background:var(--kb-green-dot); color:#fff}
.pl-steps li.now{background:var(--kb-blue-soft)}
.pl-otp{height:60px; width:100%; border-radius:18px; border:1.5px solid var(--kb-line-2); background:var(--kb-card); text-align:center;
  font-family:var(--kb-mono); font-size:28px; font-weight:600; letter-spacing:.3em; padding-left:.3em; outline:0}
.pl-otp:focus{border-color:var(--kb-blue)}
.pl-gate-err{color:var(--kb-red); min-height:1.45em; font-size:14px}
.pl-gate-foot{font-size:13px; color:var(--kb-ink-3)}
.pl-linkbtn{border:0; background:none; padding:0; color:var(--kb-blue-text); text-decoration:underline; cursor:pointer}
.pl-codes{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-family:var(--kb-mono); font-size:14px; text-align:center}
.pl-codes span{padding:8px; border-radius:10px; background:var(--kb-soft)}

/* ── узкие экраны ──────────────────────────────────────────────────────── */
@media (max-width:1240px){ dialog.pl-drawer{width:min(760px, calc(100vw - 24px))} }
@media (max-width:760px){
  dialog.pl-drawer{width:100%}
  .pl-bar{flex-direction:column; align-items:stretch}
  .pl-bar-right{margin-left:0; flex-direction:column; align-items:stretch; gap:6px}
  .pl-bar-right .kb-seg{display:flex} .pl-bar-right .kb-seg button{flex:1; justify-content:center; padding:0 8px}
  .pl-fresh{order:2; text-align:right}
  .pl-two{grid-template-columns:1fr}
  .pl-step{grid-template-columns:1fr auto} .pl-step > i{grid-column:1 / -1; order:3; height:10px}
  .pl-gate-card{padding:24px}
  .pl-hide-m{display:none}
}