/* Legacy names kept as aliases so any rule not migrated by hand still follows the theme. */
:root {
  --bg: var(--ks-bg);
  --ink: var(--ks-ink);
  --muted: var(--ks-muted);
  --accent: var(--ks-accent);
  --line: var(--ks-line);
  --err: var(--ks-danger);
  --ok: var(--ks-ok);
  /* intl-tel-input appends its mobile popup to <body>, so its tokens need a root-level home too. */
  --iti-hover-color: var(--ks-fill);
  --iti-border-color: var(--ks-line);
  --iti-dialcode-color: var(--ks-muted);
  --iti-dropdown-bg: var(--ks-card);
  --iti-arrow-color: var(--ks-muted);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ks-bg);
  color: var(--ks-ink);
}
.wrap {
  max-width: 420px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}
.auth-card {
  background: var(--ks-card);
  border: 1px solid var(--ks-line);
  border-radius: 24px;
  padding: 1.75rem 1.5rem;
}
.auth-submit { width: 100%; }
.auth-foot { margin: 0.75rem 0 0; font-size: 0.9rem; }
h1 { margin: 0 0 0.35rem; font-size: 1.75rem; letter-spacing: -0.02em; }
.muted { color: var(--ks-muted); margin-top: 0; }
.break-all { word-break: break-all; }
/* Stays white in both themes: a QR code on a dark surface will not scan. */
.totp-qr {
  display: inline-block;
  margin: 0.75rem 0;
  padding: 0.5rem;
  background: #fff;
  min-width: 192px;
  min-height: 192px;
}
.totp-uri { font-size: 0.85rem; }
label {
  display: block;
  margin: 1rem 0;
  font-size: 0.9rem;
}
input, textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-input);
  color: var(--ks-ink);
  font-family: inherit;
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ks-accent);
  background: var(--ks-elev);
}
button, .btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--ks-accent);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-accent);
  color: var(--ks-on-accent);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.topbar-actions button,
.topbar-actions .btn,
.ks-toolbar .btn,
.ks-toolbar button,
.kaspi-actions .btn,
.form-actions button,
.form-actions .btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  margin-top: 0;
}
button:disabled { opacity: 0.55; cursor: default; }
button.secondary, .btn.secondary {
  background: var(--ks-card);
  color: var(--ks-ink);
  border: 1px solid var(--ks-line);
}
button.secondary:hover:not(:disabled), .btn.secondary:hover {
  border-color: var(--ks-accent);
  color: var(--ks-accent);
}
.links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.msg { min-height: 1.25rem; }
.msg.err { color: var(--ks-danger); }
.msg.ok { color: var(--ks-ok); }
.hidden { display: none; }
.hint {
  background: var(--ks-fill);
  border: 1px solid color-mix(in srgb, var(--ks-warn) 45%, transparent);
  color: var(--ks-ink);
  padding: 0.6rem 0.75rem;
  border-radius: var(--ks-radius);
  font-size: 0.9rem;
}
.card {
  background: var(--ks-card);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.label { color: var(--ks-muted); font-size: 0.85rem; }
a { color: var(--ks-accent); }

/* intl-tel-input within the narrow auth form */
/* Retheming the library through its own custom properties covers the dropdown, the arrow and
   the hover states in one place — otherwise the country list stays a white hole on dark. */
.iti {
  width: 100%;
  margin-top: 0.35rem;
  --iti-path-flags-1x: url("/lib/intl-tel-input/img/flags.webp");
  --iti-path-flags-2x: url("/lib/intl-tel-input/img/flags@2x.webp");
  --iti-path-globe-1x: url("/lib/intl-tel-input/img/globe.webp");
  --iti-path-globe-2x: url("/lib/intl-tel-input/img/globe@2x.webp");
  --iti-hover-color: var(--ks-fill);
  --iti-border-color: var(--ks-line);
  --iti-dialcode-color: var(--ks-muted);
  --iti-dropdown-bg: var(--ks-card);
  --iti-arrow-color: var(--ks-muted);
}
.iti__tel-input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-input);
  color: var(--ks-ink);
  font-size: 1rem;
}
.iti__country-list {
  z-index: 20;
  max-width: min(420px, 92vw);
}
.iti__dropdown-content { color: var(--ks-ink); }
.iti__country:hover { background: var(--ks-fill); }
.iti__search-input {
  margin-top: 0;
  background: var(--ks-card);
  color: var(--ks-ink);
}
.iti__selected-country-primary { color: var(--ks-ink); }
.iti--separate-dial-code {
  display: flex;
  align-items: stretch;
}
.iti--separate-dial-code .iti__selected-dial-code {
  font-size: 1rem;
  color: var(--ks-ink);
  padding-left: 0.15rem;
}
.iti--separate-dial-code .iti__tel-input {
  flex: 1;
  min-width: 0;
}

/* App shell after login */
.app-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.7rem 0.85rem 0;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-card);
  position: sticky;
  top: 0.55rem;
  z-index: 10;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.topbar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ks-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 6rem);
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  margin-top: 0;
  border-radius: var(--ks-radius-pill);
  border: 1px solid var(--ks-line);
  background: var(--ks-card);
  color: var(--ks-ink);
  text-decoration: none;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--ks-card);
  border-color: var(--ks-accent);
  color: var(--ks-accent);
}
/* Auth screens have no topbar, so the theme control floats in the corner instead. */
.pc-theme-float {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 30;
}
.app-main {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  flex: 1;
}
.app-main.narrow {
  width: min(560px, 100%);
}
.app-title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem;
  margin-top: 1.25rem;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-card);
  text-decoration: none;
  color: var(--ks-ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile:hover {
  border-color: var(--ks-accent);
  transform: translateY(-1px);
}
.tile span {
  color: var(--ks-muted);
  font-size: 0.9rem;
}
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1.25rem 0;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-card);
}
.settings-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.settings-row input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--ks-accent);
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.settings-actions .btn,
.settings-actions button {
  margin-top: 0;
}
.settings-block {
  margin: 1.5rem 0;
}
.settings-h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.profile-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.profile-row label {
  margin: 0;
}
/* Colour only — sizing stays wherever each select already defined it. */
select {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-input);
  color: var(--ks-ink);
  font-family: inherit;
}
.profile-row select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  font-size: 1rem;
}
.token-bar {
  height: 8px;
  background: var(--ks-fill-strong);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 0.75rem;
}
.token-bar-fill {
  height: 100%;
  background: var(--ks-accent);
}
.badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--ks-line);
  color: var(--ks-ink);
  white-space: nowrap;
}
.badge-ok {
  background: color-mix(in srgb, var(--ks-ok) 22%, transparent);
  color: var(--ks-ok);
  border-color: color-mix(in srgb, var(--ks-ok) 40%, transparent);
}
.badge-soon {
  background: var(--ks-fill);
  color: var(--ks-muted);
}
@media (max-width: 520px) {
  .profile-row { grid-template-columns: 1fr; }
}

/* References module */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 1.25rem;
}
.subnav a {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  text-decoration: none;
  color: var(--ks-ink);
  font-size: 0.9rem;
}
.subnav a.active {
  border-color: var(--ks-accent);
  background: color-mix(in srgb, var(--ks-accent) 18%, transparent);
  color: var(--ks-accent);
  font-weight: 600;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--ks-card);
  color: var(--ks-ink);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--ks-line);
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: var(--ks-card-2);
  font-size: 0.8rem;
  color: var(--ks-muted);
  font-weight: 600;
}
.data-table tr:last-child td { border-bottom: none; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.65rem 0.85rem;
  margin: 0.75rem 0;
}
.form-grid label { margin: 0; }
.form-grid input, .form-grid select, .form-grid textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-input);
  color: var(--ks-ink);
  font-size: 0.95rem;
}
.form-grid textarea { min-height: 4rem; resize: vertical; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.form-actions button, .form-actions .btn { margin-top: 0; }
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.row-actions button {
  margin-top: 0;
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
}
.chk-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
}
.chk-inline input { width: auto; margin: 0; }
.section-stub {
  padding: 1rem;
  color: var(--ks-muted);
}
.app-main.wide { width: min(1100px, 100%); }
.app-main.wide.kaspi-wide { width: min(100%, calc(100vw - 2rem)); }
.kaspi-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.kaspi-strip-meta { flex: 1; min-width: 220px; }
.kaspi-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0.6rem; }
.kaspi-next { margin: 0; font-weight: 600; }
.kaspi-actions { display: flex; gap: 0.5rem; align-items: center; }
.kaspi-btn-lg {
  padding: 0.85rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0;
}
.kaspi-error {
  background: var(--ks-fill);
  border: 1px solid color-mix(in srgb, var(--ks-danger) 45%, transparent);
  color: var(--ks-danger);
  padding: 0.65rem 0.8rem;
  border-radius: var(--ks-radius);
  margin: 0.5rem 0 0;
  font-weight: 600;
}
.kaspi-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.kaspi-cols .card { margin: 0; }
.kaspi-cab-flag {
  display: inline-block;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  border-radius: var(--ks-radius);
  margin: 0.25rem 0 0.5rem;
}
.kaspi-cab-flag.on {
  background: color-mix(in srgb, var(--ks-ok) 22%, transparent);
  color: var(--ks-ok);
}
.kaspi-cab-flag.off { background: var(--ks-fill); color: var(--ks-muted); }
.kaspi-need { outline: 2px solid var(--ks-danger); }
.kaspi-num {
  width: 5.5rem;
  padding: 0.3rem 0.4rem;
  margin: 0;
  font-size: 0.9rem;
}
.kaspi-table-wrap { overflow-x: auto; margin-top: 1rem; }
.kaspi-sku-table { font-size: 0.88rem; }
.kaspi-sku-table th, .kaspi-sku-table td { padding: 0.4rem 0.45rem; }
.kaspi-sku-table td { vertical-align: middle; }
.kaspi-sku-table .kaspi-sku { white-space: nowrap; }
.kaspi-sku-table .kaspi-title {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kaspi-sku-table input[type="checkbox"] {
  width: auto;
  display: inline-block;
  margin: 0;
}
.kaspi-dump-bar { margin: 0.75rem 0 0.2rem; }
.kaspi-dump-bar span { font-size: 1.05rem; }
#dumpErr { margin: 0.35rem 0; }
.kaspi-sku-table .kaspi-tariff,
.kaspi-sku-table .kaspi-floor-mode,
.kaspi-sku-table .kaspi-empty-zone {
  width: auto;
  min-width: 7.5rem;
  margin: 0;
  padding: 0.25rem 0.3rem;
  font-size: 0.8rem;
}
.kaspi-status-cell { white-space: nowrap; }
.kaspi-offers-btn {
  display: block;
  margin-top: 0.3rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
}
.kaspi-offers-row td {
  background: var(--ks-card-2);
  padding: 0.65rem 0.75rem;
}
.kaspi-offers-panel { font-size: 0.88rem; }
.kaspi-offers-err { color: var(--ks-danger); }
.kaspi-offers-table { font-size: 0.85rem; max-width: 36rem; margin: 0; }
.kaspi-offers-table .kaspi-offer-own { font-weight: 600; }
.kaspi-price-val {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
}
.kaspi-price-edit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.kaspi-price-edit .apply-btn {
  margin-top: 0;
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
}
.kaspi-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0.35rem;
  font-weight: 600;
}
.kaspi-consent input { width: auto; margin: 0.2rem 0 0; }
.badge-err {
  background: color-mix(in srgb, var(--ks-danger) 20%, transparent);
  color: var(--ks-danger);
  border-color: color-mix(in srgb, var(--ks-danger) 45%, transparent);
}
.badge-off {
  background: var(--ks-fill);
  color: var(--ks-muted);
}
@media (max-width: 800px) {
  .kaspi-cols { grid-template-columns: 1fr; }
}
.line-rows { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.5rem 0; }
.line-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
@media (max-width: 700px) {
  .line-row { grid-template-columns: 1fr; }
}
.vol-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: end;
  margin: 0.75rem 0;
}
.vol-toolbar label { margin: 0; }
.vol-range { display: flex; gap: 0.4rem; }
.vol-range button.active {
  border-color: var(--ks-accent);
  color: var(--ks-accent);
  font-weight: 600;
}
.vol-chart {
  width: 100%;
  min-height: 220px;
  margin: 0.5rem 0 1rem;
}
.vol-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--ks-muted);
  margin-bottom: 0.35rem;
}
.vol-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.vol-swatch.storefront { background: var(--ks-accent); }
.vol-swatch.cabinet { background: var(--ks-chart-margin-prev); }
.vol-swatch.api { background: var(--ks-chart-revenue); }
.vol-kinds {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
}
.vol-kinds label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ks-muted);
  cursor: pointer;
}
.vol-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.25rem 0 0.85rem;
}
.vol-kpi {
  background: var(--ks-card-2);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 0.65rem 0.75rem;
}
.vol-kpi h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ks-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vol-kpi .vol-kpi-total {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 0 0 0.25rem;
}
.vol-kpi p { margin: 0; font-size: 0.85rem; color: var(--ks-muted); }
.vol-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.9rem;
}
.vol-cell strong {
  font-weight: 600;
}
@media (max-width: 800px) {
  .vol-kpis { grid-template-columns: 1fr; }
}

/* Design tokens for the whole app. Every surface — auth, cabinet, settings, bot, shop — reads
   these; the theme attribute lives on <html> so it can be set before the first paint. Dark is
   also the bare :root default, so a page that never sets the attribute still has a full palette. */
:root,
:root[data-ks-theme="dark"] {
  --ks-radius: 18px;
  --ks-radius-pill: 999px;
  --ks-bg: #1a1c1a;
  --ks-elev: #222522;
  --ks-card: #222522;
  --ks-card-2: #2a2d2a;
  --ks-panel: #262926;
  --ks-ink: #e8e6e1;
  --ks-muted: rgba(232, 230, 225, 0.55);
  --ks-line: rgba(232, 230, 225, 0.12);
  --ks-accent: #d9d4c8;
  --ks-on-accent: #1a1c1a;
  --ks-ok: #3fa266;
  --ks-warn: #f1b467;
  --ks-danger: #fc6b83;
  --ks-fill: rgba(232, 230, 225, 0.08);
  --ks-fill-strong: rgba(232, 230, 225, 0.14);
  --ks-selected: rgba(217, 212, 200, 0.16);
  --ks-overlay: rgba(0, 0, 0, 0.55);
  --ks-chart-revenue: #70b0d8;
  --ks-chart-margin: #3fa266;
  --ks-chart-revenue-prev: #aa98d8;
  --ks-chart-margin-prev: #d08770;
  --ks-chart-ads: #9386f2;
  --ks-chart-grid: rgba(232, 230, 225, 0.12);
  --ks-chart-axis: rgba(232, 230, 225, 0.45);
  --ks-tile-1: rgba(223, 74, 58, 0.5);
  --ks-tile-2: rgba(232, 80, 82, 0.5);
  --ks-tile-3: rgba(223, 122, 34, 0.5);
  --ks-tile-4: rgba(233, 190, 14, 0.5);
  --ks-tile-5: rgba(228, 216, 87, 0.5);
  --ks-tile-6: rgba(45, 198, 109, 0.5);
  --ks-tile-7: rgba(160, 190, 58, 0.5);
  --ks-tile-text: #e8e6e1;
  --ks-topbar: #222522;
  --ks-input: #1a1c1a;
}
:root[data-ks-theme="light"] {
  --ks-radius: 18px;
  --ks-radius-pill: 999px;
  --ks-bg: #cfd3ce;
  --ks-elev: #f4f1ea;
  --ks-card: #f7f4ee;
  --ks-card-2: #ece8e0;
  --ks-panel: #fbfaf6;
  --ks-ink: #1c1e1c;
  --ks-muted: rgba(28, 30, 28, 0.55);
  --ks-line: rgba(28, 30, 28, 0.12);
  --ks-accent: #2a2d2a;
  --ks-on-accent: #f7f4ee;
  --ks-ok: #1f8a65;
  --ks-warn: #c08532;
  --ks-danger: #cf2d56;
  --ks-fill: rgba(28, 30, 28, 0.06);
  --ks-fill-strong: rgba(28, 30, 28, 0.1);
  --ks-selected: rgba(42, 45, 42, 0.1);
  --ks-overlay: rgba(28, 26, 22, 0.45);
  --ks-chart-revenue: #2e79b5;
  --ks-chart-margin: #1f8a65;
  --ks-chart-revenue-prev: #7b64b8;
  --ks-chart-margin-prev: #c06028;
  --ks-chart-ads: #5b21b6;
  --ks-chart-grid: rgba(28, 30, 28, 0.12);
  --ks-chart-axis: rgba(28, 30, 28, 0.45);
  --ks-tile-1: rgba(223, 74, 58, 0.5);
  --ks-tile-2: rgba(232, 80, 82, 0.5);
  --ks-tile-3: rgba(223, 122, 34, 0.5);
  --ks-tile-4: rgba(233, 190, 14, 0.5);
  --ks-tile-5: rgba(228, 216, 87, 0.5);
  --ks-tile-6: rgba(45, 198, 109, 0.5);
  --ks-tile-7: rgba(160, 190, 58, 0.5);
  --ks-tile-text: #1c1e1c;
  --ks-topbar: #f4f1ea;
  --ks-input: #fbfaf6;
}
:root { color-scheme: dark; }
:root[data-ks-theme="light"] { color-scheme: light; }
.ks-back,
.ks-back a { color: var(--ks-muted); }

.app-main.wide.ks-wide { width: min(1440px, 100%); }
.ks-back { margin: 0 0 0.5rem; font-size: 0.9rem; }
.ks-shell { display: flex; flex-direction: column; gap: 0; min-height: calc(100vh - 8rem); }
.ks-header { margin-bottom: 0.75rem; }
.ks-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ks-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ks-title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--ks-ink); }
.ks-pill {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.ks-pill-ok { background: color-mix(in srgb, var(--ks-ok) 22%, transparent); color: var(--ks-ok); border: 1px solid color-mix(in srgb, var(--ks-ok) 40%, transparent); }
.ks-pill-warn { background: color-mix(in srgb, var(--ks-warn) 22%, transparent); color: var(--ks-warn); border: 1px solid color-mix(in srgb, var(--ks-warn) 40%, transparent); }
.ks-pill-off { background: var(--ks-fill); color: var(--ks-muted); border: 1px solid var(--ks-line); }
.ks-subtitle { margin: 0.35rem 0 0; color: var(--ks-muted); font-size: 0.9rem; }
.ks-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: none;
  margin-bottom: 0.35rem;
}
.ks-tab {
  padding: 0.42rem 0.95rem;
  border: 1px solid transparent;
  background: none;
  color: var(--ks-muted);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  margin-top: 0;
  border-radius: var(--ks-radius-pill);
}
.ks-tab:hover {
  color: var(--ks-ink);
  background: var(--ks-fill);
}
.ks-tab.active {
  color: var(--ks-ink);
  background: var(--ks-card);
  border-color: var(--ks-line);
  font-weight: 600;
}
.ks-tab-body { flex: 1; min-height: 0; padding-top: 0.5rem; }
.ks-status {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ks-line);
}
.ks-status-text { margin: 0 0 0.35rem; font-size: 0.9rem; color: var(--ks-ink); }
.ks-progress {
  height: 3px;
  background: var(--ks-fill-strong);
  border-radius: 999px;
  overflow: hidden;
}
.ks-progress-bar {
  height: 100%;
  width: 35%;
  background: var(--ks-accent);
  animation: ks-indeterminate 1.2s ease-in-out infinite;
}
@keyframes ks-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.ks-card {
  background: var(--ks-panel);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}
.ks-card-white { background: var(--ks-panel); }
.ks-card-title { font-weight: 600; margin: 0 0 0.65rem; font-size: 0.95rem; color: var(--ks-ink); }
.ks-label { display: block; font-size: 0.78rem; color: var(--ks-muted); margin-bottom: 0.25rem; }
.ks-field {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-input);
  color: var(--ks-ink);
  font: inherit;
  font-size: 0.92rem;
}
.ks-field:focus { outline: 2px solid var(--ks-accent); background: var(--ks-elev); }
.ks-hint { color: var(--ks-muted); font-size: 0.85rem; margin: 0.5rem 0 0; }
.ks-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ks-row-gap { gap: 0.75rem; }
.ks-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  color: var(--ks-ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  margin-top: 0;
}
.ks-btn:hover:not(:disabled) { border-color: var(--ks-accent); color: var(--ks-accent); }
.ks-btn-primary {
  background: var(--ks-accent);
  color: var(--ks-on-accent);
  border-color: var(--ks-accent);
}
.ks-btn-primary:hover:not(:disabled) { opacity: 0.92; color: var(--ks-on-accent); }
.ks-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ks-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.ks-chk { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0.65rem 0 0; font-size: 0.9rem; }
.ks-chk input { width: auto; margin: 0.15rem 0 0; }
.ks-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.65rem; }
.ks-table-wrap {
  overflow: auto;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-panel);
  max-height: min(52vh, 520px);
}
.ks-orders-table {
  overflow: visible;
  max-height: none;
}
.ks-orders-table .ks-table {
  table-layout: fixed;
}
.ks-orders-table .ks-table th,
.ks-orders-table .ks-table td {
  padding: 0.35rem 0.55rem;
}
.ks-orders-table .ks-table th {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.ks-orders-table .ks-col-products {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 40%;
}
.ks-orders-table .ks-col-fixed {
  white-space: nowrap;
  overflow: visible;
}
.ks-orders-table .ks-col-num { width: 2.5rem; }
.ks-orders-table .ks-col-check { width: 2rem; }
.ks-orders-table .ks-col-code { width: 8rem; }
.ks-orders-table .ks-col-qty { width: 3.25rem; }
.ks-orders-table .ks-col-places { width: 5rem; }
.ks-orders-table .ks-col-delivery { width: 13.5rem; }
.ks-orders-table .ks-col-cost { width: 10.5rem; }
.ks-orders-table .ks-col-sum { width: 6.5rem; }
.ks-orders-table .ks-col-waybill { width: 8rem; }
.ks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  color: var(--ks-ink);
}
.ks-table th, .ks-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--ks-line);
  text-align: left;
  vertical-align: middle;
}
.ks-table th {
  background: var(--ks-card-2);
  color: var(--ks-muted);
  font-size: 0.78rem;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.ks-table tr:last-child td { border-bottom: none; }
.ks-table tr.selected td { background: var(--ks-selected); }
.ks-table .ks-num { width: 4.5rem; padding: 0.25rem 0.4rem; margin: 0; font-size: 0.85rem; }
.ks-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ks-muted);
}
div.ks-empty {
  background: var(--ks-panel);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
}
.ks-orders { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0.65rem; }
.ks-filters {
  background: var(--ks-panel);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 0.35rem;
  align-self: start;
}
.ks-filter-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  margin-top: 0;
  color: var(--ks-ink);
}
.ks-filter-item:hover { background: var(--ks-fill-strong); }
.ks-filter-item.active { background: var(--ks-selected); color: var(--ks-accent); font-weight: 600; }
.ks-orders-main { display: flex; flex-direction: column; min-height: 0; }
.ks-section-actions { margin-bottom: 0.5rem; }
.ks-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  color: var(--ks-muted);
}
.ks-detail {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-panel);
  margin-top: 0.5rem;
}
.ks-detail summary {
  padding: 0.55rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ks-detail summary::-webkit-details-marker { display: none; }
.ks-detail-body { padding: 0 0.75rem 0.75rem; font-size: 0.9rem; }
.ks-detail-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.65rem; }
.ks-finance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ks-finance dt { font-size: 0.75rem; color: var(--ks-muted); margin: 0; }
.ks-finance dd { margin: 0.15rem 0 0; font-weight: 600; }
.ks-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
  gap: 0.75rem;
  min-height: 0;
}
.ks-map-col { min-width: 0; }
.ks-area-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; align-self: stretch; }
.ks-area-filters .ks-filter-item { width: auto; }
.ks-sku-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.ks-sku-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: color-mix(in srgb, var(--ks-ok) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ks-ok) 40%, transparent);
  color: var(--ks-ok);
  border-radius: 999px;
  padding: 0.12rem 0.45rem 0.12rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.2;
}
.ks-sku-chip-x {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 0.1rem;
  line-height: 1;
  font-size: 1rem;
  color: var(--ks-muted);
}
.ks-sku-chip-x:hover { color: var(--ks-danger); }
.ks-map-select { min-width: 11rem; max-width: 18rem; font-size: 0.82rem; }
.ks-stock-map { min-width: 12rem; }
.ks-textarea {
  width: 100%;
  min-height: 5rem;
  margin-top: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--ks-input);
  color: var(--ks-ink);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}
.ks-anal-days {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  margin: 0.55rem 0 0.75rem;
  padding-bottom: 0.3rem;
}
.ks-anal-day {
  flex: 0 0 auto;
  min-width: 3.5rem;
  border: 1px solid var(--ks-line);
  background: var(--ks-panel);
  border-radius: var(--ks-radius);
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  font: inherit;
  color: inherit;
}
.ks-anal-day:hover { background: var(--ks-fill); }
.ks-anal-day.active {
  background: var(--ks-selected);
  border-color: var(--ks-accent);
  font-weight: 600;
}
.ks-anal-day-date { font-size: 0.85rem; }
.ks-anal-open-chip { min-width: 7.5rem; }
.ks-anal-day-count { font-size: 0.72rem; color: var(--ks-muted); }
.ks-anal-day-margin { font-size: 0.72rem; color: var(--ks-ok); }
.ks-anal-day-refund { font-size: 0.72rem; color: var(--ks-warn); }
.ks-anal-day-ads { font-size: 0.72rem; color: var(--ks-chart-ads); }
.ks-anal-ads { margin: 0.15rem 0 0.65rem; }
.ks-ads-file { display: none; }
.ks-anal-stat-span { grid-column: span 2; }
.ks-anal-top-wrap { max-height: 22rem; overflow: auto; }
.ks-table th[data-analytics-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.ks-anal-unknown-card { align-self: stretch; }
.ks-anal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.65rem 0;
}
.ks-anal-stats-pair {
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.ks-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.65rem 0 0.85rem;
}
.ks-kpi {
  background: var(--ks-panel);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 0.85rem 1rem;
  min-width: 0;
}
.ks-kpi-label { font-size: 0.75rem; color: var(--ks-muted); }
.ks-kpi-value {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-top: 0.25rem;
  color: var(--ks-ink);
}
.ks-kpi-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.35rem; font-size: 0.75rem; }
.ks-kpi-delta { color: var(--ks-ok); }
.ks-kpi-delta.down { color: var(--ks-danger); }
.ks-kpi-hint { color: var(--ks-muted); }
.ks-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.ks-pane-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
}
.ks-pane-tabs .ks-filter-item { width: auto; }
.ks-treemap-card .ks-card-title { margin: 0; }
.ks-treemap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 0.45rem;
}
.ks-treemap-switches {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.ks-metric-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.ks-metric-opt {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ks-muted);
  cursor: pointer;
}
.ks-metric-opt.is-on {
  color: var(--ks-ink);
  font-weight: 600;
}
.ks-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--ks-line);
  background: var(--ks-fill);
  cursor: pointer;
  flex-shrink: 0;
}
.ks-toggle.is-on {
  background: var(--ks-accent);
  border-color: var(--ks-accent);
}
.ks-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ks-ink);
  transition: left 0.16s ease;
  pointer-events: none;
}
.ks-toggle.is-on .ks-toggle-knob {
  left: 22px;
  background: var(--ks-on-accent);
}
.ks-treemap { width: 100%; display: block; margin: 0.35rem 0 0.5rem; }
.ks-treemap-cell {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  overflow: hidden;
  color: var(--ks-tile-text);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
}
.ks-treemap-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.28;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  min-height: 0;
  max-height: calc(100% - 1.4em);
}
.ks-treemap-value {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.15;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.ks-treemap-cell-md {
  padding: 6px 8px;
  gap: 3px;
}
.ks-treemap-cell-md .ks-treemap-name { font-size: 11.5px; }
.ks-treemap-cell-md .ks-treemap-value { font-size: 13.5px; }
.ks-treemap-cell-sm {
  padding: 5px 6px;
  gap: 2px;
}
.ks-treemap-cell-sm .ks-treemap-name { font-size: 10.5px; }
.ks-treemap-cell-sm .ks-treemap-value { font-size: 12.5px; }
.ks-anal-stat {
  background: var(--ks-panel);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 0.7rem 0.85rem;
}
.ks-anal-stat-value { font-size: 1.05rem; font-weight: 600; }
.ks-anal-stat-label { font-size: 0.75rem; color: var(--ks-muted); margin-top: 0.2rem; }
.ks-anal-chart { margin: 0.35rem 0 0.5rem; }
.ks-anal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  font-size: 0.8rem;
  color: var(--ks-muted);
  margin-top: 0.35rem;
}
.ks-anal-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.ks-anal-swatch {
  width: 1.1rem;
  border-top: 2.4px solid currentColor;
  display: inline-block;
}
.ks-anal-swatch.dashed { border-top-style: dashed; border-top-width: 1.6px; }
.ks-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ks-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.ks-picker {
  background: var(--ks-elev);
  color: var(--ks-ink);
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  width: min(52rem, 100%);
  max-height: calc(100vh - 2.5rem);
  display: flex;
  flex-direction: column;
}
.ks-picker-narrow { width: min(28rem, 100%); }
.ks-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ks-line);
}
.ks-picker .ks-area-filters {
  padding: 0.55rem 1rem 0;
  margin-bottom: 0.25rem;
}
.ks-picker-body {
  overflow: auto;
  padding: 0.5rem 1rem 1rem;
  min-height: 12rem;
}
.ks-picker .ks-table tbody tr { cursor: pointer; }
@media (max-width: 1100px) {
  .ks-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ks-charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .ks-anal-stats { grid-template-columns: 1fr 1fr; }
  .ks-anal-unknown { grid-template-columns: 1fr; }
  .ks-anal-stat-span { grid-column: span 2; }
  .ks-kpi-grid { grid-template-columns: 1fr 1fr; }
  .ks-orders { grid-template-columns: 1fr; }
}
.ks-mfa-overlay { z-index: 60; }
.ks-mfa-card {
  background: var(--ks-elev);
  color: var(--ks-ink);
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  width: min(22rem, 100%);
  padding: 1.1rem 1.15rem 1.2rem;
}
.ks-mfa-code {
  letter-spacing: 0.28em;
  font-size: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ks-anal-unknown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.55rem;
  margin: 0.65rem 0;
}
.ks-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-chart-card { margin-bottom: 0; }
.ks-chart-card .ks-card-title { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.ks-chart-card .ks-card-title span { font-weight: 400; color: var(--ks-muted); font-size: 0.78rem; }
.ks-table tbody tr[data-analytics-order],
.ks-table tbody tr[data-order],
.ks-table tbody tr[data-catalog-item],
.ks-table tbody tr[data-product] { cursor: pointer; }
@media (max-width: 1100px) {
  .ks-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}