/* StarSnow admin: the pages (orders, catalog, finance, marketing, settings…). Loaded after admin.css.
   Only --ad-* tokens from admin.css (see the admin contract); no colour values here. Shell, sidebar and dashboard are styled in admin.css. */

/* ---------- page head: one line of purpose, actions on the right ---------- */
.av-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: -4px 0 4px; }
.av-lead { margin: 0; flex: 1 1 320px; min-width: 0; max-width: 72ch; color: var(--ad-muted); font: 400 14px/1.5 var(--ad-font); }
.av-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.av-actions .btn, .av-actions .exp-btn { white-space: nowrap; }
@media (max-width: 560px) {
  .av-head { align-items: stretch; }
  .av-actions { width: 100%; }
  .av-actions > * { flex: 1 1 0; justify-content: center; }
}

/* ---------- numbers: tabular figures everywhere money and counts are shown ---------- */
.adm .tbl td, .adm .row__value, .adm .kpi b, .fo-kpi b, .pc-stat b, .pc-main__v, .pc-leg b, .pc-row, .bc-stats b, .bc-count b,
.orders-summary b, .rvA-score b, .fo-row, .spend-kpis b, .books-partners b { font-variant-numeric: tabular-nums; }
.adm .tbl .num { text-align: right; white-space: nowrap; }
.adm .tbl th { font: 600 11.5px/1.2 var(--ad-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ad-muted); }
.adm .tbl td, .adm .tbl th { padding: 11px 12px; border-bottom: 1px solid var(--ad-line); vertical-align: top; }
.adm .tbl tbody tr:last-child td { border-bottom: 0; }
.adm .tbl tr.row-click { cursor: pointer; }
.adm .tbl tr.row-click:hover td, .adm .tbl tr.row-click:focus-visible td { background: var(--ad-surface-2); }
.adm .tbl tr.row-click:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: -2px; }
.adm .tbl td.is-good { color: var(--ad-ok); } .adm .tbl td.is-bad { color: var(--ad-bad); }
/* a wide table scrolls inside its own card; the fade on the right says there is more */
.adm .tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  background: linear-gradient(90deg, var(--ad-surface) 30%, transparent) left / 24px 100% no-repeat local,
              linear-gradient(270deg, var(--ad-surface) 30%, transparent) right / 24px 100% no-repeat local,
              linear-gradient(270deg, var(--ad-line), transparent) right / 12px 100% no-repeat scroll,
              var(--ad-surface); }

/* ---------- one status vocabulary (pills) ---------- */
.adm .pill, .ui-sheet .pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 2px 10px; border-radius: 999px;
  font: 600 12px/1.25 var(--ad-font); background: var(--ad-surface-3); color: var(--ad-muted); white-space: normal; }
.adm .pill::before, .ui-sheet .pill::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adm .pill--ok, .adm .st-fulfilled { background: var(--ad-ok-soft); color: var(--ad-ok); }
.adm .pill--bad, .adm .st-failed, .adm .st-refunded { background: var(--ad-bad-soft); color: var(--ad-bad); }
.adm .pill--warn { background: var(--ad-warn-soft); color: var(--ad-warn); }
.adm .st-paid, .adm .st-fulfilling { background: var(--ad-info-soft); color: var(--ad-accent); }
.adm .st-pending, .adm .st-expired, .adm .st-cancelled { background: var(--ad-surface-3); color: var(--ad-muted); }

/* ---------- empty / error states (the kit's .ad-empty is used when it exists; this is the same look) ---------- */
.ad-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--ad-muted); }
.ad-empty__pic { width: 88px; height: 88px; margin-bottom: 6px; }
.ad-empty__title { color: var(--ad-text); font: 600 15px/1.35 var(--ad-font); }
.ad-empty__text { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.45; }
.av-error { display: grid; justify-items: start; gap: 6px; padding: 18px 20px; border-radius: var(--ad-radius-sm); background: var(--ad-bad-soft); color: var(--ad-text); }
.av-error b { color: var(--ad-bad); }
.av-error p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.orders-list.is-empty { overflow: visible; }

/* ---------- orders ---------- */
.av-orders { gap: 14px; }
.av-filterbar { display: grid; gap: 10px; }
.av-search { position: relative; display: block; }
.av-search__icon { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--ad-muted); border-radius: 50%; pointer-events: none; }
.av-search__icon::after { content: ''; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; border-radius: 2px; background: var(--ad-muted); transform: rotate(45deg); }
.adm .av-search input[type='search'] { width: 100%; min-height: 44px; padding-left: 44px !important; }
.adm .toolbar.orders-filters { padding: 0; gap: 8px; }
.adm .toolbar.orders-filters .ui-dd, .adm .toolbar.orders-filters .ui-dr { flex: 0 1 auto; max-width: 220px; }
.adm .toolbar.orders-filters > .btn--ghost { min-height: 40px; }
.adm .orders-summary { margin: 0 2px; color: var(--ad-muted); font-size: 13px; }
.orders-summary b { color: var(--ad-text); font-weight: 600; }
.adm .orders-list { padding: 4px 8px; }
.adm .tbl--orders { table-layout: auto; min-width: 0; font-size: 14px; }
.adm .tbl--orders th:nth-child(n) { width: auto; }
.ord-when { color: var(--ad-muted); white-space: nowrap; font-size: 13px; }
.ord-id { font-family: var(--ad-mono); font-size: 13px; color: var(--ad-text); }
.ord-sum b { font-weight: 600; }
.ord-pay { color: var(--ad-muted); white-space: nowrap; }
.adm .tbl__sub { color: var(--ad-muted); }
.adm .tbl__err { color: var(--ad-bad); }
.adm .pager { justify-content: center; gap: 12px; padding: 4px 0; }
.adm .pager .msg { min-width: 90px; text-align: center; }
@media (max-width: 1180px) and (min-width: 721px) { .ord-pay { display: none; } .tbl--orders th:nth-child(5) { display: none; } }
@media (max-width: 720px) {
  .adm .orders-list { padding: 0; background: none; border: 0; overflow: visible; }
  .tbl--stack, .tbl--stack tbody { display: block; }
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); background: var(--ad-surface); }
  .adm .tbl--stack td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl--orders .ord-st { grid-column: 1; grid-row: 1; justify-self: start; }
  .tbl--orders .ord-sum { grid-column: 2; grid-row: 1; }
  .tbl--orders .ord-what { grid-column: 1 / -1; grid-row: 2; font-weight: 600; }
  .tbl--orders .ord-what .tbl__sub, .tbl--orders .ord-what .tbl__err { font-weight: 400; }
  .tbl--orders .ord-who { grid-column: 1; grid-row: 3; }
  .tbl--orders .ord-pay { grid-column: 2; grid-row: 3; display: block; text-align: right; font-size: 13px; }
  .tbl--orders .ord-when { grid-column: 1 / -1; grid-row: 4; font-size: 12.5px; }
  .tbl--orders .tbl__err { max-width: none; }
  .adm .toolbar.orders-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 2px; }
  .adm .toolbar.orders-filters::-webkit-scrollbar { display: none; }
  .adm .toolbar.orders-filters .ui-dd, .adm .toolbar.orders-filters .ui-dr { flex: none; max-width: none; }
}

/* ---------- charts: the series colours, flat fills, no gradients ---------- */
.adm .bars__bar { fill: var(--ad-c1); }
.adm .bars__bar:hover, .adm .bars__bar.is-hot { fill: var(--ad-accent); filter: none; opacity: .85; }
.adm .bars__bar.is-neg { fill: var(--ad-bad); }
.adm .bars__grid { stroke: var(--ad-line); }
.adm .bars__axis { fill: var(--ad-muted); font-family: var(--ad-font); }
.adm .meter i, .bc-bar i, .funnel-bar { background: var(--ad-accent); }
.adm .meter.is-warn i { background: var(--ad-warn); } .adm .meter.is-bad i { background: var(--ad-bad); }
.adm .chart { padding: 12px 12px 6px; }
.av-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 2px 0; color: var(--ad-muted); font-size: 12.5px; }
.av-legend span { display: inline-flex; align-items: center; gap: 6px; }
.av-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--ad-c1); }
.av-legend i.is-neg { background: var(--ad-bad); }

/* price split bar (calculator, books): series in fixed order */
.pc-seg--ton { background: var(--ad-c1); } .pc-seg--ex { background: var(--ad-c6); } .pc-seg--fee { background: var(--ad-c4); }
.pc-seg--wd { background: var(--ad-c-other); } .pc-seg--profit { background: var(--ad-c2); } .pc-seg--ads { background: var(--ad-c3); } .pc-seg--oth { background: var(--ad-c5); }
.pc-bar { background: var(--ad-surface-3); }
/* the result block: a flat tinted surface, not a coloured gradient tile */
.pc-main, .pc-main.is-mid, .pc-main.is-bad { background: var(--ad-ok-soft); color: var(--ad-text); box-shadow: none; border: 1px solid var(--ad-line); }
.pc-main.is-mid { background: var(--ad-warn-soft); }
.pc-main.is-bad { background: var(--ad-bad-soft); }
.pc-main::after { content: none; }
.pc-main__l { color: var(--ad-muted); opacity: 1; }
.pc-main__v { font-family: var(--ad-display); font-weight: 700; color: var(--ad-text); }
.pc-main .pc-pill { background: var(--ad-surface); color: var(--ad-text); }
.pc-main small { color: var(--ad-muted); opacity: 1; }
.pc-stat { background: var(--ad-surface-2); border-radius: var(--ad-radius-sm); }
.pc-stat b { font-family: var(--ad-display); font-weight: 700; font-size: 16px; }
.pc-stat.is-good b { color: var(--ad-ok); } .pc-stat.is-bad b { color: var(--ad-bad); }
.pc-badge { background: var(--ad-surface-3); }
.pc-badge.is-good { background: var(--ad-ok-soft); color: var(--ad-ok); }
.pc-badge.is-mid { background: var(--ad-warn-soft); color: var(--ad-warn); }
.pc-badge.is-bad { background: var(--ad-bad-soft); color: var(--ad-bad); }
.pc-chip { background: var(--ad-accent-soft); color: var(--ad-accent); }
.pc-chip.is-own { background: var(--ad-warn-soft); color: var(--ad-warn); }
.pc-presets button { background: var(--ad-accent-soft); color: var(--ad-accent); font-family: var(--ad-font); }
.pc-toggle { background: var(--ad-surface-2); color: var(--ad-accent); }
.pc-field__box { background: var(--ad-surface-2); border: 1px solid var(--ad-line); }
.pc-field__box:focus-within { box-shadow: none; border-color: var(--ad-accent); outline: 2px solid var(--ad-accent-soft); }
.pc-sec h3 { color: var(--ad-muted); font-family: var(--ad-font); }
.books-conv.is-bad, .exp-info.is-bad, .bt-count.is-bad { color: var(--ad-bad); }

/* ---------- forms: label above the field, help under it ---------- */
.adm .field > .msg:first-child, .adm .bt-label, .adm .pc-field__top { color: var(--ad-muted); font-size: 13px; font-weight: 500; }
.adm .field small.msg, .adm .bt-field > small.msg { font-size: 12.5px; line-height: 1.45; }
.av-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px -4px 0; padding: 12px 16px;
  border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); background: var(--ad-surface); }
.av-savebar .msg { margin: 0; }
.av-savebar.is-dirty { border-color: var(--ad-accent); }

/* ---------- catalog ---------- */
.catalog-card { border-color: var(--ad-line); background: var(--ad-surface); border-radius: var(--ad-radius); }
.catalog-card__desc, .catalog-card__meta { color: var(--ad-muted); }
.catalog-state { background: var(--ad-surface-3); color: var(--ad-muted); }
.catalog-state.is-ready { background: var(--ad-ok-soft); color: var(--ad-ok); }
.catalog-state.is-warn { background: var(--ad-warn-soft); color: var(--ad-warn); }
.catalog-empty { background: var(--ad-surface-2); color: var(--ad-muted); }
.admin .catalog-card { box-shadow: none; }

/* ---------- suppliers ---------- */
.sup-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sup-bar .bc-chips { margin: 0; }
.sup-bar .ui-input[type='search'] { flex: 1 1 240px; min-width: 0; }
.sup-note { margin: 2px 2px 0; }

/* ---------- chips (broadcasts, first order, suppliers) ---------- */
.bc-chipbtn { min-height: 36px; padding: 7px 14px; background: var(--ad-surface-2); color: var(--ad-text); border: 1px solid var(--ad-line); font: 500 13px var(--ad-font); }
.bc-chipbtn:hover { border-color: var(--ad-accent); }
.bc-chipbtn[aria-pressed='true'] { background: var(--ad-accent-soft); color: var(--ad-accent); border-color: var(--ad-accent); font-weight: 600; }
.bc-chipbtn:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* ---------- first-order discount ---------- */
.fo-on { background: var(--ad-surface-2); border: 1px solid var(--ad-line); }
.fo-num { background: var(--ad-surface-2); }
.fo-dd__menu { background: var(--ad-surface); border-color: var(--ad-line); box-shadow: var(--ad-shadow-pop); }
.fo-dd__opt:hover { background: var(--ad-surface-2); }
.fo-dd__opt input { accent-color: var(--ad-accent); }
.fo-row { background: var(--ad-surface-2); font-variant-numeric: tabular-nums; }
.fo-row > span:not(.fo-item) { text-align: right; }
.fo-row--head { background: none; color: var(--ad-muted); font-family: var(--ad-font); }
.fo-net, :root[data-theme='dark'] .fo-net { color: var(--ad-ok); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .fo-net { color: var(--ad-ok); } }
.fo-neg { color: var(--ad-bad); }
.fo-tag { background: var(--ad-warn-soft); color: var(--ad-warn); font-family: var(--ad-font); }
.fo-kpi { background: var(--ad-surface-2); border: 1px solid transparent; }
.fo-kpi b { font: 700 20px/1.15 var(--ad-display); letter-spacing: -.02em; }
.fo-kpi.is-net { background: var(--ad-ok-soft); }
.fo-kpi.is-net b { color: var(--ad-ok); }
.fo-kpi.is-net.is-bad { background: var(--ad-bad-soft); } .fo-kpi.is-net.is-bad b { color: var(--ad-bad); }
.fo-kpi.is-given b, .fo-given { color: var(--ad-warn); }
.fo-order { background: var(--ad-surface-2); font-variant-numeric: tabular-nums; }
.fo-order b { color: var(--ad-accent); font-family: var(--ad-mono); }
.fo-h { margin-top: 10px; }
@media (max-width: 860px) { .fo-row > span:not(.fo-item) { text-align: left; } }
@media (max-width: 420px) { .fo-unit { flex-wrap: wrap; } .fo-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fo-kpi b { font-size: 17px; } }

/* ---------- broadcasts ---------- */
.bc-lbl, .bc-section { color: var(--ad-muted); font-family: var(--ad-font); }
.bc-section { border-top-color: var(--ad-line); }
.bc-check input { accent-color: var(--ad-accent); }
.bc-result { background: var(--ad-surface-2); border: 1px solid var(--ad-line); }
.bc-count b { font-family: var(--ad-display); }
.bc-chip { background: var(--ad-surface); color: var(--ad-muted); border: 1px solid var(--ad-line); }
.bc-card { background: var(--ad-surface-2); border: 1px solid var(--ad-line); }
.bc-state { background: var(--ad-ok-soft); color: var(--ad-ok); font-family: var(--ad-font); }
.bc-state.is-sending { background: var(--ad-info-soft); color: var(--ad-accent); }
.bc-state.is-cancelled { background: var(--ad-bad-soft); color: var(--ad-bad); }
.bc-state.is-scheduled, .bc-state.is-wait { background: var(--ad-warn-soft); color: var(--ad-warn); }
.bc-bar { background: var(--ad-surface-3); }
.bc-buyers b { color: var(--ad-ok); }
.bc-vs { background: var(--ad-surface); }
/* the Telegram preview keeps Telegram's own dark chat: it shows what the buyer sees, so it follows the app, not the admin theme */
.bc-phone { background: var(--ad-text); border-color: var(--ad-line); }
.bc-phone__bar { background: color-mix(in srgb, var(--ad-text) 88%, var(--ad-accent)); color: var(--ad-bg); }
.bc-phone__bar small, .bc-bubble__time { color: var(--ad-muted); }
.bc-bubble { background: color-mix(in srgb, var(--ad-text) 82%, var(--ad-accent)); color: var(--ad-bg); }
.bc-kb__btn { background: color-mix(in srgb, var(--ad-bg) 10%, transparent); color: color-mix(in srgb, var(--ad-accent) 55%, var(--ad-bg)); font-family: var(--ad-font); }
.bc-kb__btn--off { color: var(--ad-muted); }
.bc-variant { background: var(--ad-accent-soft); color: color-mix(in srgb, var(--ad-accent) 55%, var(--ad-bg)); }
:root[data-theme='dark'] .bc-phone, :root[data-theme='dark'] .bc-phone__bar, :root[data-theme='dark'] .bc-bubble { color: var(--ad-text); }
:root[data-theme='dark'] .bc-phone { background: var(--ad-surface-2); }
:root[data-theme='dark'] .bc-phone__bar { background: var(--ad-surface-3); }
:root[data-theme='dark'] .bc-bubble { background: var(--ad-surface-3); }
:root[data-theme='dark'] .bc-kb__btn { background: var(--ad-surface-2); color: var(--ad-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bc-phone, :root:not([data-theme='light']) .bc-phone__bar, :root:not([data-theme='light']) .bc-bubble { color: var(--ad-text); }
  :root:not([data-theme='light']) .bc-phone { background: var(--ad-surface-2); }
  :root:not([data-theme='light']) .bc-phone__bar, :root:not([data-theme='light']) .bc-bubble { background: var(--ad-surface-3); }
  :root:not([data-theme='light']) .bc-kb__btn { background: var(--ad-surface-2); color: var(--ad-accent); }
}
@media (max-width: 420px) { .bc-range { gap: 6px; } .bc-num { width: 76px; } .bc-imgrow { flex-wrap: wrap; } }

/* ---------- reviews ---------- */
.rvA-stars { color: var(--ad-amber); }
.rvA-score b { font-family: var(--ad-display); }
.rvA-tabs button { min-height: 36px; background: var(--ad-surface); border-color: var(--ad-line); color: var(--ad-text); }
.rvA-tabs button:hover { border-color: var(--ad-accent); }
.rvA-tabs button[aria-pressed='true'] { background: var(--ad-accent-soft); border-color: var(--ad-accent); color: var(--ad-accent); font-weight: 600; }
.rvA-tabs button.has-new em { color: var(--ad-accent-ink); background: var(--ad-bad); }
.rvA-card { background: var(--ad-surface); border-color: var(--ad-line); border-radius: var(--ad-radius); padding: 16px 18px; }
.rvA-card.is-pending { border-color: var(--ad-warn); box-shadow: inset 3px 0 0 var(--ad-warn); }
.rvA-state--published { color: var(--ad-ok); } .rvA-state--pending { color: var(--ad-warn); } .rvA-state--hidden { color: var(--ad-bad); }
.rvA-guest { background: var(--ad-warn-soft); color: var(--ad-warn); }
.rvA-reward { border: 1px solid var(--ad-line); background: var(--ad-surface); color: var(--ad-text); border-radius: var(--ad-radius-sm); }
.rvA-form input[type='number'], .rvA-form select { background: var(--ad-surface-2); border-color: var(--ad-line); }
.rvA-why { color: var(--ad-bad); }
@media (max-width: 560px) { .rvA-tabs { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rvA-tabs button { flex: none; } .rvA-top small { margin-left: 0; width: 100%; } }

/* ---------- settings: payment look, books, export ---------- */
.pl-health summary { color: var(--ad-ok); } .pl-health.is-bad summary { color: var(--ad-bad); }
.pl-badge { background: var(--ad-ok-soft); color: var(--ad-ok); }
.pl-ic.is-on { border-color: var(--ad-accent); }
.pl-cl.is-on { outline-color: var(--ad-text); }
.exp-info.is-bad { color: var(--ad-bad); }
.books-partners .pc-stat b { font-size: 15px; }

/* ---------- spend ---------- */
.spend-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.spend-kpis .kpi { display: grid; gap: 4px; }
.spend-kpis .kpi b { font: 700 20px/1.15 var(--ad-display); }
.spend-limit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spend-limit input[type='number'] { width: 140px; }

/* ---------- small screens: nothing scrolls sideways ---------- */
@media (max-width: 420px) {
  .adm .toolbar .ui-dd, .adm .toolbar .ui-dr { min-width: 0; }
  .adm .row__value { max-width: 48%; }
  .pc-row { font-size: 13px; }
  .catalog-card { padding: 14px; }
}

/* ---- Обзор: one screen, split by product ---- */
.dash { display: grid; gap: var(--sp-4, 16px); }
.prod { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.prod__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.share { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 130px; font-variant-numeric: tabular-nums; }
.share i { display: block; height: 6px; flex: 0 1 90px; min-width: 4px; border-radius: 999px; }
.dash-split .tbl td:last-child, .dash-split .tbl th:last-child { min-width: 130px; }
.dash-att { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-att button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--ad-radius-sm, 10px); background: var(--ad-surface-2); }
.dash-att button:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-att li.is-bad button { box-shadow: inset 3px 0 0 var(--ad-bad, #e5484d); }
.dash-att b { font-weight: 600; }
.dash-att span { color: var(--ad-muted); font-size: 13px; }

/* Admin tab rails: the scrollbar is visible, so the hidden tabs are obvious; the wheel scrolls them (js/rail.js). */
.admin .sec-tabs, .admin .subtabs, .admin .tabsbar, main.adm .tabsbar, .tabsbar {
  scrollbar-width: thin; scrollbar-color: var(--ad-line, #2a2f3a) transparent;
}
.admin .sec-tabs::-webkit-scrollbar, .admin .subtabs::-webkit-scrollbar, .admin .tabsbar::-webkit-scrollbar, main.adm .tabsbar::-webkit-scrollbar, .tabsbar::-webkit-scrollbar { display: block; height: 6px; }
.admin .sec-tabs::-webkit-scrollbar-thumb, .admin .subtabs::-webkit-scrollbar-thumb, .admin .tabsbar::-webkit-scrollbar-thumb, main.adm .tabsbar::-webkit-scrollbar-thumb, .tabsbar::-webkit-scrollbar-thumb { background: var(--ad-line, #2a2f3a); border-radius: 999px; }
@media (max-width: 720px) { .admin .sec-tabs, .admin .subtabs { scrollbar-width: none; } }
/* no fade or blur on the navigation rows: the whole row is visible */
.admin .sec-tabs, .admin .subtabs, main.adm .tabsbar, .admin .sec-groups { -webkit-mask-image: none !important; mask-image: none !important; overflow: visible; filter: none; backdrop-filter: none; }

/* Grouped section tabs (settings): a pill row of groups on top, the group's sections under it, no grey rule. */
.admin .sec-groups { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: var(--ad-surface, #151922); border: 1px solid var(--ad-line, #2a2f3a); flex-wrap: wrap; }
.admin .sec-groups button { font: inherit; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 10px; background: transparent; color: var(--ad-muted, #8a93a6); }
.admin .sec-groups button:hover { color: var(--ad-text, #e8ecf4); }
.admin .sec-groups button[aria-selected="true"] { background: var(--ad-accent, #3d74ff); color: var(--ad-accent-ink, #fff); }
.admin .sec-groups button:focus-visible { outline: 2px solid var(--ad-accent, #3d74ff); outline-offset: 2px; }
/* section tabs: one pill box that grows to fit its rows (no clipping, no underline leftovers from the old style) */
.admin .sec-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow: visible; padding: 4px; margin: 0 0 12px; border: 1px solid var(--ad-line, #2a2f3a); border-radius: 14px; background: var(--ad-surface, #151922); box-shadow: none !important; }
.admin .sec-tabs .sec-tab { flex: none; margin: 0; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ad-muted, #8a93a6); font: 600 14px/1.2 var(--ad-font); white-space: nowrap; }
.admin .sec-tabs .sec-tab:hover { color: var(--ad-text, #e8ecf4); border-color: transparent; }
.admin .sec-tabs .sec-tab[aria-selected="true"] { background: var(--ad-accent, #3d74ff); color: var(--ad-accent-ink, #fff); border: 0; font-weight: 600; }

/* «Ждёт решения»: a toggle chip in the orders filters, lit when the queue is on. */
.admin .queue-btn { flex: none; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ad-line, #2a2f3a); background: var(--ad-surface, #151922); color: var(--ad-text, #e8ecf4); white-space: nowrap; }
.admin .queue-btn[aria-pressed="true"] { background: var(--ad-accent, #3d74ff); border-color: transparent; color: #fff; }
.admin .queue-btn:focus-visible { outline: 2px solid var(--ad-accent, #3d74ff); outline-offset: 2px; }

/* promotions page («Акции»): the timed promotion, the product badges and the Steam card share one grid and one rhythm */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 14px; margin: 12px 0 4px; }
.promo-grid .field { display: grid; gap: 6px; min-width: 0; }
.promo-grid .field input { width: 100%; min-width: 0; height: 44px; min-height: 44px; box-sizing: border-box; }
.promo-grid .field > .msg { align-self: start; }
.promo-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.promo-steam .check { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font: 500 14px/1.3 var(--ad-font); color: var(--ad-text); white-space: nowrap; cursor: pointer; }
.promo-steam .check input[type='checkbox'] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--ad-accent); }
.badge-list { display: grid; gap: 8px; margin: 12px 0 4px; }
.badge-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(160px, 1fr) minmax(150px, 190px); gap: 10px; align-items: center; }
.badge-row > b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-row input { width: 100%; min-width: 0; }
.badge-row .ui-dd { width: 100%; }
@media (max-width: 640px) { .badge-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--ad-line); } }

/* the money page's fields (expenses, books): one frame per field, the control sits inside it with no frame of its own */
.pc-field__box { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--ad-line); border-radius: 12px; background: var(--ad-surface-2); }
.pc-field__box:focus-within { border-color: var(--ad-accent); box-shadow: 0 0 0 2px var(--ad-accent-soft); }
.pc-field__box input, .pc-field__box textarea, .pc-field__box .ui-input { flex: 1; min-width: 0; width: 100%; height: 42px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; outline: 0; font: inherit; font-size: 15px; color: var(--ad-text); }
.pc-field__box textarea { height: 56px; padding: 12px 0 !important; resize: vertical; }
.pc-field__box em { flex: none; font-style: normal; color: var(--ad-muted); font-size: 14px; }

/* section tabs (Сводка / Бухгалтерия / …) use the same pill row as the groups above them, not underlined links */
.admin .subtabs, .admin .sec-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: var(--ad-surface, #151922); border: 1px solid var(--ad-line, #2a2f3a); box-shadow: none; }
.admin .subtabs a, .admin .sec-tabs a, .admin .sec-tabs button { font: 600 14px/1.2 var(--ad-font); padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ad-muted, #8a93a6); text-decoration: none; box-shadow: none; white-space: nowrap; cursor: pointer; }
.admin .subtabs a:hover, .admin .sec-tabs a:hover, .admin .sec-tabs button:hover { color: var(--ad-text, #e8ecf4); }
.admin .subtabs a[aria-current="page"], .admin .sec-tabs a[aria-current="page"], .admin .sec-tabs button[aria-selected="true"], .admin .sec-tabs a[aria-selected="true"] { background: var(--ad-accent, #3d74ff); color: var(--ad-accent-ink, #fff); }
/* the product row (one for every filter): pills, wrapping on a phone, no dropdown */
.admin .prod-chips { margin: 0 0 12px; }
.admin .prod-chips button { font-size: 13.5px; padding: 7px 12px; }

/* checkboxes: one look everywhere, the box is only the square itself (no tile or background behind it) */
.adm input[type='checkbox'] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: inline-grid; place-content: center; border: 1.5px solid var(--ad-muted); border-radius: 6px; background: transparent; cursor: pointer; }
.adm input[type='checkbox']::before { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .12s ease; }
.adm input[type='checkbox']:checked { background: var(--ad-accent); border-color: var(--ad-accent); }
.adm input[type='checkbox']:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.adm input[type='checkbox']:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.adm input[type='checkbox']:disabled { opacity: .45; cursor: default; }

/* spacing: one scale for the whole admin; it narrows on a phone instead of drifting */
.adm { --adm-gap: clamp(10px, 1.6vw, 16px); --adm-pad: clamp(14px, 2.2vw, 24px); }
.adm .card { padding: var(--adm-pad); }
.adm .toolbar { gap: var(--adm-gap); }
.adm .card + .card, .adm .card + .sec-groups, .adm .sec-groups + .toolbar { margin-top: var(--adm-gap); }
@media (max-width: 720px) {
  .adm { --adm-gap: 10px; --adm-pad: 14px; }
  .adm .card { border-radius: 18px; }
}

/* the product filter is a compact dropdown of its own size (it was stretched across the whole row) */
.adm .prod-dd { flex: 0 1 300px; width: auto; min-width: 200px; max-width: 300px; }
.adm .prod-dd .ui-dd__btn { width: 100%; justify-content: space-between; }
/* the active section tab is solid like the others (no gradient) */
.subtabs a[aria-current="page"], .admin .subtabs a[aria-current="page"] { background: var(--ad-accent) !important; color: var(--ad-accent-ink, #fff) !important; }

/* every dropdown in a toolbar or a filter row keeps its own size: it no longer stretches across the row */
.adm .toolbar .ui-dd, .adm .toolbar .ui-dr { flex: 0 1 240px; width: auto; min-width: 160px; max-width: 320px; }
.adm .toolbar .ui-dd .ui-dd__btn, .adm .toolbar .ui-dr .ui-dd__btn { width: 100%; justify-content: space-between; }
.adm .toolbar .ui-dd__btn span:first-child, .adm .toolbar .ui-dd__text { text-align: left; }

/* ONE component for every level of navigation (the groups «Работа / Деньги / Сервис» and the tabs inside a page):
   the same pill row, the same item, the same selected state. Only the markup differs. */
.admin .sec-groups, .admin .sec-tabs, .admin .subtabs { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: var(--ad-surface, #151922); border: 1px solid var(--ad-line, #2a2f3a); box-shadow: none; }
.admin .sec-groups > *, .admin .sec-tabs > *, .admin .subtabs > * { font: 600 14px/1.2 var(--ad-font); padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ad-muted, #8a93a6); text-decoration: none; box-shadow: none; white-space: nowrap; cursor: pointer; }
.admin .sec-groups > *:hover, .admin .sec-tabs > *:hover, .admin .subtabs > *:hover { color: var(--ad-text, #e8ecf4); }
.admin .sec-groups > *:focus-visible, .admin .sec-tabs > *:focus-visible, .admin .subtabs > *:focus-visible { outline: 2px solid var(--ad-accent, #3d74ff); outline-offset: 2px; }
.admin .sec-groups > [aria-selected="true"], .admin .sec-tabs > [aria-selected="true"], .admin .subtabs > [aria-current="page"], .admin .subtabs > [aria-selected="true"] { background: var(--ad-accent, #3d74ff); color: var(--ad-accent-ink, #fff); }

/* ONE navigation row everywhere (the picture: a rounded container, the selected pill solid blue): the page's section tabs use it too */
main.adm .tabsbar, .admin .subtabs, .admin .sec-tabs, .admin .sec-groups { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; margin: 0 0 12px; border-radius: 14px; background: var(--ad-surface, #151922); border: 1px solid var(--ad-line, #2a2f3a); box-shadow: none; }
main.adm .tabsbar > a, main.adm .tabsbar > button, .admin .subtabs > a, .admin .sec-tabs > *, .admin .sec-groups > * { font: 600 14px/1.2 var(--ad-font); padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ad-muted, #8a93a6); text-decoration: none; box-shadow: none; white-space: nowrap; cursor: pointer; }
main.adm .tabsbar > a:hover, main.adm .tabsbar > button:hover, .admin .subtabs > a:hover, .admin .sec-tabs > *:hover, .admin .sec-groups > *:hover { color: var(--ad-text, #e8ecf4); background: transparent; }
/* the selected item is solid, never a gradient or a glow */
main.adm .tabsbar > [aria-selected="true"], main.adm .tabsbar > [aria-current="page"], .admin .subtabs > [aria-current="page"], .admin .subtabs > [aria-selected="true"], .admin .sec-tabs > [aria-selected="true"], .admin .sec-groups > [aria-selected="true"] { background: var(--ad-accent, #3d74ff) !important; color: var(--ad-accent-ink, #fff) !important; box-shadow: none !important; }
/* the sidebar keeps its own list (it is not a tab row) */
.adm-side .tabsbar { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; }
.adm-side .tabsbar > a { display: flex; padding: 0 12px; min-height: 40px; border-radius: var(--ad-radius-sm); font-weight: 500; }

/* radio buttons look like the checkboxes (a round outline, a solid dot when chosen) and sit in one row */
.adm input[type='radio'] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: inline-grid; place-content: center; border: 1.5px solid var(--ad-muted); border-radius: 50%; background: transparent; cursor: pointer; }
.adm input[type='radio']::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s ease; }
.adm input[type='radio']:checked { background: var(--ad-accent); border-color: var(--ad-accent); }
.adm input[type='radio']:checked::before { transform: scale(1); }
.adm input[type='radio']:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.steam-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 6px 0 10px; }
/* a row with a radio or a checkbox and its text: plain layout (the shop's .check is a 22 px circle and must not be used here) */
.admin .opt-row { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--ad-font); color: var(--ad-text); white-space: nowrap; cursor: pointer; }
.admin .opt-row input { flex: none; margin: 0; }
.admin .opt-row--top { margin: 14px 0 6px; }

/* publishing tree: category → product → positions, one grid, the switches on the right */
.pub-tree { display: grid; gap: 14px; margin-top: 12px; }
.pub-cat { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--ad-line); border-radius: 14px; background: var(--ad-surface); }
.pub-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.pub-head > b, .pub-head > span:first-child { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pub-head > .msg { color: var(--ad-muted); font-size: 13px; }
.pub-head > input[type='checkbox'] { margin-left: auto; flex: none; }
.pub-head .ui-dd { flex: 0 0 auto; width: auto; min-width: 140px; max-width: 180px; }
.pub-markup { flex: none; width: 72px; height: 36px; box-sizing: border-box; padding: 0 8px; border-radius: 10px; border: 1px solid var(--ad-line); background: var(--ad-surface-2); color: var(--ad-text); font: 500 14px var(--ad-font); }
.pub-prod { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ad-line); }
.pub-items { display: grid; }
.pub-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ad-line); }
.pub-item:last-child { border-bottom: 0; }
.pub-item > span { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.pub-item > small { white-space: nowrap; color: var(--ad-muted); font-size: 13px; }
.pub-item > input[type='checkbox'] { margin: 0; justify-self: end; }

/* spacing between the blocks of a page: one rhythm, the same on a phone and on a desktop */
main.adm .toolbar { margin-bottom: var(--adm-gap, 12px); }
main.adm .toolbar + .toolbar, main.adm .toolbar + .card, main.adm .card + .toolbar { margin-top: 0; }

/* money check («Сверка денег» on the finance page): the account rows with their button, and the move form on one grid */
.ledger { display: grid; gap: 14px; margin-bottom: 16px; }
.ledger .seg { justify-self: start; }
.ledger__acc { display: grid; gap: 6px; justify-items: start; }
.ledger__acc > .btn { align-self: start; }
.ledger__form { display: grid; gap: 12px; }
.ledger__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: center; }
.ledger__grid .ui-input { min-height: 40px; box-sizing: border-box; width: 100%; }
.ledger__grid .btn { min-height: 40px; }
.pub-photo-wrap { display: inline-flex; gap: 4px; align-items: center; }
.pub-photo { min-height: 36px; padding: 0 10px; font-size: 13px; }
.pub-title { width: 200px; max-width: 100%; height: 36px; box-sizing: border-box; font-size: 14px; }
.sup-save { min-height: 1.4em; margin: 6px 0 4px; font-size: 13px; }
.sup-save.is-ok { color: var(--ad-ok, #3ddc84); }
.sup-save.is-bad { color: var(--ad-bad, #e5484d); font-weight: 600; }