/* Donetella Reco portal - design tokens, layout, components */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f1f3f6;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --faint: #98a2b3;
  --brand: #4f46e5;
  --brand-ink: #ffffff;
  --brand-soft: #eef2ff;
  --brand-text: #4338ca;
  --ok: #079455;
  --ok-soft: #ecfdf3;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --bad: #d92d20;
  --bad-soft: #fef3f2;
  --info: #175cd3;
  --info-soft: #eff8ff;
  --side: #ffffff;
  --side-ink: #475467;
  --side-muted: #98a2b3;
  --side-hover: #f2f4f7;
  --side-active: #eef2ff;
  --side-strong: #101828;
  --side-active-ink: #4338ca;
  --side-border: #e4e7ec;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px -6px rgba(16, 24, 40, .18), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* light is the default; dark = chosen, or "system" on a dark-mode computer */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #0b0e14; --surface: #12161f; --surface-2: #161b26; --surface-3: #1c2230;
    --border: #232a38; --border-strong: #303848;
    --ink: #f5f5f6; --ink-2: #cecfd2; --muted: #94969c; --faint: #6b6f78;
    --brand: #6d6af5; --brand-soft: #1e1b4b; --brand-text: #a5b4fc;
    --ok: #47cd89; --ok-soft: #0b2b1d; --warn: #fdb022; --warn-soft: #2e2208;
    --bad: #f97066; --bad-soft: #3a1210; --info: #53b1fd; --info-soft: #0b2440;
    --side: #07090d; --side-ink: #cecfd2; --side-muted: #85888e; --side-hover: #141821; --side-active: #1a1f2a; --side-strong: #ffffff; --side-active-ink: #ffffff; --side-border: #1a1f2a;
    --shadow-sm: none; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0e14; --surface: #12161f; --surface-2: #161b26; --surface-3: #1c2230;
  --border: #232a38; --border-strong: #303848;
  --ink: #f5f5f6; --ink-2: #cecfd2; --muted: #94969c; --faint: #6b6f78;
  --brand: #6d6af5; --brand-soft: #1e1b4b; --brand-text: #a5b4fc;
  --ok: #47cd89; --ok-soft: #0b2b1d; --warn: #fdb022; --warn-soft: #2e2208;
  --bad: #f97066; --bad-soft: #3a1210; --info: #53b1fd; --info-soft: #0b2440;
  --side: #07090d; --side-ink: #cecfd2; --side-muted: #85888e; --side-hover: #141821; --side-active: #1a1f2a; --side-strong: #ffffff; --side-active-ink: #ffffff; --side-border: #1a1f2a;
  --shadow-sm: none; --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }

.boot { height: 100vh; display: grid; place-items: center; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
.spinner.sm { width: 14px; height: 14px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- login -- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--surface); }
.login-art {
  position: relative; overflow: hidden; color: #fff; padding: 44px 56px;
  display: flex; flex-direction: column; gap: 36px; justify-content: space-between;
  background: linear-gradient(160deg, #111a3a 0%, #0b1022 55%, #0a1a24 100%);
}
.login-art .glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.login-art .g1 { width: 520px; height: 520px; left: -160px; top: -200px; background: #5b57f0; animation: drift 18s ease-in-out infinite alternate; }
.login-art .g2 { width: 460px; height: 460px; right: -170px; bottom: -180px; background: #0ea5a4; opacity: .45; animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.08); } }
.login-art .grid-bg { position: absolute; inset: 0; opacity: .09;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); }
.login-art > * { position: relative; }
.login-brand { color: #fff; }
.login-brand small { color: #9aa3ba !important; }
.login-hero .eyebrow { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #c9ccff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 5px 11px; border-radius: 99px; }
.login-hero h1 { font-size: 44px; line-height: 1.08; letter-spacing: -.03em; margin: 18px 0 14px; max-width: 540px; font-weight: 700; }
.login-hero .grad { background: linear-gradient(90deg, #a5b4fc, #5eead4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-hero p { color: #b8bfd0; max-width: 470px; font-size: 15.5px; margin: 0; line-height: 1.6; }
.login-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 470px; }
.login-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: #aab2c5; line-height: 1.45; }
.login-feats li > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #c7d2fe; }
.login-feats b { display: block; color: #fff; font-weight: 600; font-size: 14px; }
.login-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.lp-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; backdrop-filter: blur(6px); }
.lp-card .lbl { font-size: 11.5px; color: #9aa3ba; display: block; }
.lp-card b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; display: block; margin: 2px 0 4px; }
.lp-card svg { width: 100%; height: 36px; display: block; }
.lp-card svg .ln { fill: none; stroke: #5eead4; stroke-width: 2; vector-effect: non-scaling-stroke; }
.lp-card svg .ar { fill: rgba(94,234,212,.14); }
.lp-bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; margin-top: 8px; }
.lp-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #a5b4fc, #6366f1); opacity: .85; }
.lp-chips { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.lp-chips span { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.lp-chips img { width: 26px; height: 26px; object-fit: contain; }
.login-form { position: relative; display: grid; place-items: center; padding: 40px 20px; background: var(--surface); }
.login-top { position: absolute; top: 16px; right: 16px; }
.login-form form { width: 100%; max-width: 380px; }
.login-form h2 { font-size: 28px; margin: 0 0 6px; letter-spacing: -.02em; }
.login-form .login-m-brand { display: none; margin-bottom: 28px; }
.input-ic { position: relative; }
.input-ic > svg.i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.input-ic .input { padding-left: 38px; height: 44px; }
.input-ic .input:focus + .pw-eye, .input-ic .input:focus ~ svg { color: var(--brand); }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; border-radius: 8px;
  display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.pw-eye:hover { background: var(--surface-3); color: var(--ink); }
.input-ic .input[type=password], .input-ic .input#p { padding-right: 44px; }
.caps { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--warn); margin-top: 6px; font-weight: 500; }
.btn.big { height: 46px; font-size: 15px; border-radius: 10px; }
.login-help { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--faint); margin: 22px 0 0; }
.login-foot { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 12px; color: var(--faint); }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@media (max-width: 960px) {
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-form .login-m-brand { display: flex; }
}
@media (max-height: 760px) { .login-preview { display: none; } }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; flex: none; }
.brand small { display: block; font-weight: 500; font-size: 11px; color: var(--side-muted); letter-spacing: .04em; text-transform: uppercase; }

/* ---------------------------------------------------------------- shell -- */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side {
  background: var(--side); color: var(--side-ink); padding: 18px 12px; border-right: 1px solid var(--side-border); position: sticky; top: 0;
  height: 100vh; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.side .brand { color: var(--side-strong); padding: 4px 10px 18px; }
.side-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); padding: 16px 12px 6px; font-weight: 600; }
.nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--side-ink); font-weight: 500; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.nav:hover { background: var(--side-hover); text-decoration: none; color: var(--side-strong); }
.nav.active { background: var(--side-active); color: var(--side-active-ink); font-weight: 600; }
.nav .dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; background: var(--side-muted); }
.nav .dot.ok { background: #47cd89; } .nav .dot.warn { background: #fdb022; } .nav .dot.run { background: #6d6af5; animation: pulse 1.2s infinite; }
.nav.soon { color: var(--side-muted); cursor: default; font-weight: 400; }
.nav.soon:hover { background: none; color: var(--side-muted); }
.nav .tag { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--side-hover); color: var(--side-muted); }
@keyframes pulse { 50% { opacity: .35; } }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--side-hover); }
.me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; border: 0; background: none; width: 100%; color: inherit; text-align: left; }
.me:hover { background: var(--side-hover); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; background: linear-gradient(135deg, #6d6af5, #0ea5a4); color: #fff; flex: none; }
.me .who { line-height: 1.25; min-width: 0; }
.me .who b { color: var(--side-strong); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 12px; color: var(--side-muted); }
.main { min-width: 0; }
.topbar { display: none; }
.page { max-width: 1320px; margin: 0 auto; padding: 28px 32px 64px; }
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 40; width: 270px; left: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .shell.nav-open .side { transform: none; }
  .shell.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
  .topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--side); color: var(--side-strong); border-bottom: 1px solid var(--side-border); position: sticky; top: 0; z-index: 20; }
  .topbar button { background: none; border: 0; color: var(--side-strong); padding: 4px; cursor: pointer; display: grid; }
  .page { padding: 20px 16px 48px; }
}

/* ---------------------------------------------------------- page header -- */
.ph { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ph h1 { font-size: 24px; letter-spacing: -.02em; margin: 0; line-height: 1.25; }
.ph .sub { color: var(--muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ph .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:focus-visible, .input:focus-visible, .nav:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: none; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn.xs { height: 28px; padding: 0 8px; font-size: 12.5px; }
.btn.icon { width: 34px; padding: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; }

/* ---------------------------------------------------------------- forms -- */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 500; color: var(--ink-2); font-size: 13px; }
.input, select.input {
  height: 40px; width: 100%; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.input:focus { border-color: var(--brand); }
.input.sm { height: 34px; }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }
.radio-cards { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.radio-card { border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.radio-card input { margin-top: 3px; accent-color: var(--brand); }
.radio-card b { display: block; font-weight: 600; }
.radio-card span { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- cards -- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; }
.card-h .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-b { padding: 20px; }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g-main { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g-main { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g4, .g3, .g2 { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 16px; }

/* KPI tiles */
.kpi { padding: 18px 20px; position: relative; overflow: hidden; }
.kpi .lbl { color: var(--muted); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .val { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.2; }
.kpi .val small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.kpi .foot { font-size: 12.5px; color: var(--muted); }
.kpi .ico { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 10px; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }

/* tone helpers */
.t-ok { color: var(--ok) !important; } .t-bad { color: var(--bad) !important; } .t-warn { color: var(--warn) !important; } .t-info { color: var(--info) !important; }
.bg-ok { background: var(--ok-soft); color: var(--ok); } .bg-bad { background: var(--bad-soft); color: var(--bad); }
.bg-warn { background: var(--warn-soft); color: var(--warn); } .bg-info { background: var(--info-soft); color: var(--info); }
.bg-brand { background: var(--brand-soft); color: var(--brand-text); }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.plain::before { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--ink-2); }
.chip:hover { background: var(--surface-2); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.chip .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.chip.on .n { color: inherit; opacity: .7; }

/* alerts */
.alert { display: flex; gap: 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid; align-items: flex-start; }
.alert.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink-2); }
.alert.warn svg { color: var(--warn); }
.alert.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--ink-2); }
.alert.info svg { color: var(--info); }
.alert.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.alert.bad svg { color: var(--bad); }
.alert b { color: var(--ink); }

/* ----------------------------------------------------------------- tabs -- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tab { padding: 10px 14px; border: 0; background: none; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--brand-text); border-bottom-color: var(--brand); }
.tab .count { font-size: 11.5px; padding: 0 7px; border-radius: 99px; background: var(--surface-3); color: var(--ink-2); }
.tab.on .count { background: var(--brand-soft); color: var(--brand-text); }

/* ---------------------------------------------------------------- table -- */
.tbl-wrap { overflow: auto; max-width: 100%; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12px; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--ink); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover td { background: var(--surface-2); }
.tbl tfoot td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--border); padding: 11px 14px; }
.tbl .sub { color: var(--muted); font-size: 12px; }
.tbl-scroll { max-height: 620px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 40px; height: 40px; color: var(--faint); margin-bottom: 8px; }
.empty h4 { margin: 4px 0; color: var(--ink); font-size: 15px; }

/* --------------------------------------------------------------- upload -- */
.folder { display: flex; flex-direction: column; }
.drop {
  display: block; margin: 0 20px 16px; border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 18px; text-align: center;
  color: var(--muted); cursor: pointer; transition: all .12s; background: var(--surface-2);
}
.drop:hover, .drop.over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); }
.drop b { color: var(--brand-text); }
.drop svg { display: block; margin: 0 auto 6px; }
.drawer .drop, .card-b .drop { margin: 0 0 12px; }
.drawer .progress, .card-b .progress { margin: 0 0 12px; }
.files { list-style: none; margin: 0; padding: 0 8px 8px; }
.files li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; }
.files li:hover { background: var(--surface-2); }
.files .fi { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: none; }
.files .fn { min-width: 0; flex: 1; }
.files .fn b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files .fn span { font-size: 12px; color: var(--muted); }
.files .acts { display: flex; gap: 2px; opacity: .55; }
.files li:hover .acts { opacity: 1; }
.progress { height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin: 0 20px 12px; }
.progress i { display: block; height: 100%; background: var(--brand); width: 0; transition: width .15s; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: center; }
.check-list .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }

/* ---------------------------------------------------------------- chart -- */
.chart { width: 100%; height: 260px; display: block; }
.chart .gl { stroke: var(--border); stroke-width: 1; }
.chart .zero { stroke: var(--border-strong); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .b-neg { fill: var(--bad); } .chart .b-pos { fill: var(--warn); } .chart .b-zero { fill: var(--ok); }
.chart rect.hit { fill: transparent; cursor: pointer; }
.chart rect.hit:hover { fill: var(--surface-3); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tip { position: fixed; pointer-events: none; z-index: 100; background: var(--ink); color: var(--surface); padding: 8px 10px; border-radius: 8px; font-size: 12px; box-shadow: var(--shadow-lg); line-height: 1.45; }

/* donut */
.flagrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.flagrow:last-child { border-bottom: 0; }
.flagrow .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.flagrow .nm { font-weight: 500; }
.flagrow .ds { font-size: 12px; color: var(--muted); }
.flagrow .ct { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.stackbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-3); margin: 4px 0 12px; }
.stackbar i { display: block; height: 100%; }

/* ------------------------------------------------------------- console -- */
.console { background: #0c111d; color: #d0d5dd; font-family: var(--mono); font-size: 12px; line-height: 1.55; padding: 14px 16px; border-radius: 10px; height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.console .l-warn { color: #fdb022; } .console .l-ok { color: #47cd89; } .console .l-err { color: #f97066; } .console .l-dim { color: #85888e; }

/* ---------------------------------------------------------------- modal -- */
.modal-bg { position: fixed; inset: 0; background: rgba(12, 17, 29, .55); z-index: 60; display: grid; place-items: center; padding: 16px; animation: fade .12s; backdrop-filter: blur(2px); }
.modal { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: pop .15s; border: 1px solid var(--border); }
.modal.wide { max-width: 820px; }
.modal-h { padding: 18px 22px 0; display: flex; align-items: flex-start; gap: 12px; }
.modal-h h3 { margin: 0; font-size: 17px; }
.modal-h p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.modal-h .x { margin-left: auto; }
.modal-b { padding: 18px 22px; overflow: auto; }
.modal-f { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }

/* ---------------------------------------------------------------- toast -- */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--surface); padding: 11px 14px; border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center; font-weight: 500; animation: pop .15s; max-width: 420px; }
.toast.bad { background: var(--bad); color: #fff; }
.toast.ok svg { color: #47cd89; }

/* ------------------------------------------------------------- channel card -- */
.ch-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.ch-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.ch-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(135deg, #f27a1a, #e8590c); flex: none; }
.ch-card .row { display: flex; gap: 12px; align-items: center; }
.ch-card h3 { margin: 0; font-size: 16px; }
.ch-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.ch-metrics div { font-size: 12px; color: var(--muted); }
.ch-metrics b { display: block; font-size: 17px; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.soon-tile { padding: 16px; display: flex; gap: 12px; align-items: center; color: var(--muted); border-style: dashed; box-shadow: none; background: transparent; }
.soon-tile .ch-logo { width: 36px; height: 36px; font-size: 14px; background: var(--surface-3); color: var(--faint); }

.ring { width: 64px; height: 64px; flex: none; }
.ring circle { fill: none; stroke-width: 7; }
.ring .bgc { stroke: var(--surface-3); }
.ring .fgc { stroke: var(--ok); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.ring text { font-size: 15px; font-weight: 700; fill: var(--ink); font-family: var(--font); }

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.feed li:last-child { border-bottom: 0; }
.feed .fi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.feed .when { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }

.banner { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); margin-bottom: 16px; font-weight: 500; flex-wrap: wrap; }
.banner .btn { margin-left: auto; }

.menu { position: fixed; z-index: 70; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 200px; }
.menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink-2); text-align: left; }
.menu button:hover { background: var(--surface-3); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }

.searchbox { position: relative; }
.searchbox svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.searchbox .input { padding-left: 34px; }

/* ===================================================== v2 components ===== */
/* theme switch */
.theme-seg { display: flex; background: var(--side-hover); border-radius: 9px; padding: 3px; gap: 2px; margin: 0 4px 10px; }
.theme-seg button { flex: 1; display: grid; place-items: center; height: 28px; border: 0; background: none; border-radius: 7px; color: var(--side-muted); cursor: pointer; }
.theme-seg button:hover { color: var(--side-strong); }
.theme-seg button.on { background: var(--side); color: var(--side-strong); box-shadow: var(--shadow-sm); }

/* channel logo chip */
.lg { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: none; }
.nav .lg { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.nav .dot { flex: none; }
.nav .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* top bar with search (desktop) */
.headbar { display: flex; align-items: center; gap: 12px; padding: 12px 32px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 15; }
.headbar .searchbox { flex: 1; max-width: 520px; }
.headbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); }
.searchbox kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 960px) { .headbar { padding: 10px 16px; top: 49px; } .headbar .hide-sm { display: none; } }

/* group titles */
.group-t { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.group-t h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; font-weight: 600; }
.group-t::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* summary strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.strip > div { padding: 18px 20px; border-right: 1px solid var(--border); }
.strip > div:last-child { border-right: 0; }
.strip .lbl { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.strip .val { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
@media (max-width: 900px) { .strip { grid-template-columns: repeat(2, 1fr); } .strip > div:nth-child(2) { border-right: 0; } .strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }

/* attention list */
.att { list-style: none; margin: 0; padding: 0; }
.att li { display: flex; gap: 12px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--border); }
.att li:last-child { border-bottom: 0; }
.att .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.att .go { margin-left: auto; }

/* compact channel card */
.cc { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.cc:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.cc .top { display: flex; gap: 10px; align-items: center; }
.cc .top .lg { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
.cc h3 { margin: 0; font-size: 15px; }
.cc .sub { font-size: 12.5px; color: var(--muted); }
.cc .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc .nums div { font-size: 11.5px; color: var(--muted); }
.cc .nums b { display: block; font-size: 16px; color: var(--ink); font-weight: 600; }
.cc .foot { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--border); padding-top: 10px; }
.g-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* select column + bulk bar */
.tbl td.cb, .tbl th.cb { width: 36px; padding-right: 0; }
.tbl input[type=checkbox] { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }
.tbl tr.sel td { background: var(--brand-soft); }
.bulk { position: sticky; bottom: 16px; z-index: 12; margin: 12px auto 0; width: fit-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); }
.bulk .btn { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 30%, transparent); box-shadow: none; }
.bulk .btn:hover { background: color-mix(in srgb, var(--surface) 12%, transparent); }

/* workflow status pills */
.ws-open { background: var(--surface-3); color: var(--ink-2); }
.ws-working { background: var(--info-soft); color: var(--info); }
.ws-fixed { background: var(--ok-soft); color: var(--ok); }
.ws-ignored { background: var(--surface-3); color: var(--faint); }
.who-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.who-chip .avatar { width: 20px; height: 20px; font-size: 9.5px; }

/* drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(12, 17, 29, .35); z-index: 55; animation: fade .12s; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); z-index: 56; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; animation: slide .18s; border-left: 1px solid var(--border); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.drawer-h { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.drawer-h h3 { margin: 0; font-size: 16px; word-break: break-all; }
.drawer-b { padding: 18px 20px; overflow: auto; flex: 1; }
.drawer-f { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; font-size: 13.5px; margin: 0 0 18px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: var(--surface); padding: 7px 12px; font-weight: 600; font-size: 13px; color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--brand-soft); color: var(--brand-text); }
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.timeline li { padding: 0 0 14px 16px; position: relative; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }

/* trend chart */
.trend { width: 100%; height: 180px; display: block; }
.trend .ln { fill: none; stroke: var(--brand); stroke-width: 2.2; }
.trend .ar { fill: color-mix(in srgb, var(--brand) 12%, transparent); }
.trend .pt { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.trend text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.trend .gl { stroke: var(--border); }

.delta { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 12.5px; padding: 3px 9px; border-radius: 99px; }
.st { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.report { font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border-radius: 10px; padding: 14px 16px; max-height: 460px; overflow: auto; color: var(--ink-2); margin: 0; }
.stale-tag { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-weight: 600; white-space: nowrap; }
.search-hit { padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 8px 12px; align-items: flex-start; cursor: pointer; flex-wrap: wrap; }
.search-hit > div { flex: 1 1 220px; }
.search-hit:hover { background: var(--surface-2); }
.search-hit:last-child { border-bottom: 0; }
mark { background: color-mix(in srgb, var(--warn) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
/* real logos */
.lg.img { background: #fff; border: 1px solid var(--border); padding: 2px; overflow: hidden; }
.lg.img img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.lg.big { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
.ph .lg { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }

/* six-number strip */
.strip.strip6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .strip.strip6 { grid-template-columns: repeat(3, 1fr); } .strip.strip6 > div:nth-child(3) { border-right: 0; } .strip.strip6 > div:nth-child(-n+3) { border-bottom: 1px solid var(--border); } }
@media (max-width: 640px) { .strip.strip6 { grid-template-columns: repeat(2, 1fr); } .strip.strip6 > div { border-right: 0; border-bottom: 1px solid var(--border); } }

/* month-close grid */
.tbl.heat th.c, .tbl.heat td.c { text-align: center; padding: 6px 4px; }
.tbl.heat th.c { font-size: 11.5px; line-height: 1.2; }
.tbl.heat td { border-bottom: 1px solid var(--border); }
.hc { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 30px; padding: 0 6px; border-radius: 7px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none !important; }
.hc.ok { background: var(--ok-soft); color: var(--ok); }
.hc.warn { background: var(--warn-soft); color: var(--warn); }
.hc.bad { background: var(--bad-soft); color: var(--bad); }
.hc.none { background: var(--surface-3); color: var(--faint); }
a.hc:hover { outline: 2px solid var(--brand); outline-offset: 1px; }

/* horizontal bars */
.hbar { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.hbar .track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.hbar b { min-width: 40px; text-align: right; }
.legend i { border-radius: 3px; }

/* ---------------------------------------------- exceptions v3 ---------- */
.catcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.catcard { --tone: var(--brand); position: relative; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 12px 14px 12px 16px; cursor: pointer; display: grid; gap: 2px; box-shadow: var(--shadow-sm); transition: box-shadow .12s, border-color .12s, transform .12s; overflow: hidden; color: inherit; font: inherit; }
.catcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.catcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.catcard.on { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone) inset, var(--shadow); }
.catcard .nm { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catcard b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.catcard .amt { font-size: 12px; color: var(--muted); }
.ex-tools { gap: 10px; }
.dot-t { --tone: var(--brand); display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); margin-right: 7px; vertical-align: 1px; }
.tbl td.clip { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-tbl td { padding-top: 9px; padding-bottom: 9px; }
.ex-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ex-tbl tbody tr.sel td { background: var(--brand-soft); }
.drawer.wide { width: min(820px, 100vw); }
.dr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dr-amt { margin-left: auto; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.dr-amt small { font-size: 13px; color: var(--muted); font-weight: 500; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.facts > div { background: var(--surface); padding: 9px 12px; min-width: 0; }
.facts span { display: block; font-size: 11.5px; color: var(--muted); }
.facts b { display: block; font-weight: 600; font-size: 13.5px; word-break: break-word; }
.dr-h { display: flex; align-items: center; gap: 8px; margin: 20px 0 8px; font-size: 14px; }
.lines-tbl th, .lines-tbl td { padding: 7px 10px; font-size: 12.5px; }
.lines-tbl td.clip { max-width: 220px; }
textarea.ticket { font-family: var(--mono); font-size: 12px; min-height: 150px; background: var(--surface-2); }
details.allf { margin-top: 20px; }
details.allf summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.colpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }
.colpick label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.plan-tbl tr.done td { opacity: .55; }
.plan-help { max-width: 380px; font-size: 12.5px; white-space: normal; }
.att .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .catcards { grid-template-columns: repeat(2, 1fr); } .dr-amt { margin-left: 0; width: 100%; } }

.ro-badge { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--muted); font-weight: 600; }

/* ---------------------------------------------- sales dashboard -------- */
.sales-bar { margin-bottom: 16px; }
.chan-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; align-items: center; }
.chan-chips .chip { padding: 4px 12px 4px 5px; gap: 8px; }
.chan-chips .chip .lg { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
.chip.on-soft { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand-text); }
.chip.off { opacity: .55; }
.chip[disabled] { opacity: .35; cursor: not-allowed; }
.g6 { grid-template-columns: repeat(6, 1fr); }
.kpis6 { margin-bottom: 16px; }
.kpis6 .kpi .val { font-size: 24px; }
@media (max-width: 1250px) { .g6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .g6 { grid-template-columns: repeat(2, 1fr); } }
.delta { font-size: 11.5px; padding: 1px 7px; }
.spark { display: block; }
.mini-mix { display: flex; width: 110px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.mini-mix i { display: block; height: 100%; }
.tbl.matrix td, .tbl.matrix th { padding: 8px 10px; font-size: 12.5px; }
.snap .hbar { padding: 7px 0; border-bottom: 1px solid var(--border); }
.snap .hbar:last-child { border-bottom: 0; }
.snap .hbar:hover { background: var(--surface-2); }
.snap .lg { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }

/* ---------------------------------------------- search results --------- */
.order-card .card-h { align-items: flex-start; }
.order-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; }
.order-body > div { padding: 14px 20px; min-width: 0; overflow-x: auto; }
.order-body > div + div { border-left: 1px solid var(--border); }
.sub-h { display: flex; gap: 6px; align-items: center; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) { .order-body { grid-template-columns: 1fr; } .order-body > div + div { border-left: 0; border-top: 1px solid var(--border); } }

/* ---------------------------------------------------------------- profit --
   chart series: categorical slots 1-4 of the validated reference palette
   (light + dark steps), diverging blue/red for adds / takes away */
.pf { --pf-1: #2a78d6; --pf-2: #eb6834; --pf-3: #1baf7a; --pf-4: #eda100; --pf-up: #2a78d6; --pf-down: #e34948; --pf-total: #52514e; }
:root[data-theme="dark"] .pf { --pf-1: #3987e5; --pf-2: #d95926; --pf-3: #199e70; --pf-4: #c98500; --pf-up: #3987e5; --pf-down: #e66767; --pf-total: #c3c2b7; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .pf { --pf-1: #3987e5; --pf-2: #d95926; --pf-3: #199e70; --pf-4: #c98500; --pf-up: #3987e5; --pf-down: #e66767; --pf-total: #c3c2b7; }
}
.chart text.wf-v { fill: var(--ink-2); font-weight: 600; font-size: 11.5px; }
.pf .kv dt b, .pf .kv dd b { font-weight: 600; }
/* profit settings: ad cost per channel */
.ads-set { display: grid; gap: 8px; }
.ads-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ads-row .nm { display: flex; gap: 8px; align-items: center; font-weight: 600; min-width: 150px; flex: 1; }
.ads-row .nm small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.ads-row select { width: auto; }
.ads-row .pctin { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }
.ads-row .pctin input { width: 72px; }

/* ===================================================== UI refresh (Oct 2026) == */
/* page entrance */
.page { animation: pagein .22s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* loading skeleton */
.skel { display: grid; gap: 16px; align-content: start; padding-top: 4px; }
.sk-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sk-row.two { grid-template-columns: 2fr 1fr; }
.sk-row i { display: block; height: 92px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 40%, var(--surface-3) 80%); background-size: 300% 100%; animation: shimmer 1.3s ease-in-out infinite; border: 1px solid var(--border); }
.sk-row i.tall { height: 240px; }
.sk-row i.wide { grid-column: 1 / -1; height: 140px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 760px) { .sk-row { grid-template-columns: 1fr 1fr; } .sk-row.two { grid-template-columns: 1fr; } }

/* sidebar: accent on the active item, collapsible to an icon rail */
.side .brand { display: flex; align-items: center; }
.side-col { margin-left: auto; width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--side-muted); cursor: pointer; display: grid; place-items: center; }
.side-col:hover { background: var(--side-hover); color: var(--side-strong); }
.nav { position: relative; transition: background .12s, color .12s; }
.nav.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.shell { transition: grid-template-columns .18s ease; }
@media (min-width: 961px) {
  .shell.collapsed { grid-template-columns: 72px 1fr; }
  .shell.collapsed .side { padding: 18px 10px; }
  .shell.collapsed .side .brand { flex-direction: column; gap: 8px; padding: 4px 0 14px; }
  .shell.collapsed .side .brand .nm, .shell.collapsed .nav .nm, .shell.collapsed .me .who, .shell.collapsed .nav .tag { display: none; }
  .shell.collapsed .side-col { margin: 0; }
  .shell.collapsed .side-label { font-size: 0; padding: 10px 0 6px; }
  .shell.collapsed .side-label::after { content: ""; display: block; height: 1px; background: var(--side-border); margin: 0 8px; }
  .shell.collapsed .nav { justify-content: center; padding: 9px 0; }
  .shell.collapsed .nav .dot { position: absolute; top: 6px; right: 10px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--side); }
  .shell.collapsed .nav.active::before { left: -10px; }
  .shell.collapsed .theme-seg { flex-direction: column; margin: 0 0 10px; }
  .shell.collapsed .me { justify-content: center; }
}
@media (max-width: 960px) { .side-col { display: none; } }
.avatar { position: relative; }
.new-dot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 2px var(--side); }

/* scrollbars */
.side::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar, .kp-list::-webkit-scrollbar, .drawer-b::-webkit-scrollbar { width: 8px; height: 8px; }
.side::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb, .kp-list::-webkit-scrollbar-thumb, .drawer-b::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }

/* header: the Jump-to button */
.kbar { color: var(--muted); border: 1px solid var(--border) !important; background: var(--surface) !important; }
.kbar:hover { color: var(--ink); }
kbd { font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; line-height: 1.5; }

/* command palette */
.kp-bg { position: fixed; inset: 0; z-index: 80; background: rgba(12, 17, 29, .5); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade .12s; }
.kp { width: 100%; max-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; animation: pop .14s ease-out; }
@keyframes pop { from { transform: translateY(-6px) scale(.98); opacity: 0; } }
.kp-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.kp-in input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); }
.kp-list { overflow-y: auto; padding: 6px; }
.kp-g { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: 10px 10px 4px; }
.kp-i { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink-2); }
.kp-i .lg { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }
.kp-i .t { font-weight: 500; }
.kp-i .s { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.kp-i.on { background: var(--brand-soft); color: var(--brand-text); }
.kp-i.on .s { color: var(--brand-text); opacity: .75; }
.kp-empty { padding: 26px; text-align: center; color: var(--muted); }
.kp-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); background: var(--surface-2); }
.kp-foot kbd { margin-right: 3px; }

/* shortcuts + what's new */
.kb-list { display: grid; gap: 2px; }
.kb-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.kb-list > div:last-child { border-bottom: 0; }
.news { display: grid; gap: 0; }
.news-i { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--border); margin-left: 6px; }
.news-i:last-child { padding-bottom: 0; }
.news-i::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.news-i.first::before { border-color: var(--brand); background: var(--brand); }
.news-i .dt { font-size: 12px; color: var(--faint); display: block; }
.news-i b { display: block; margin: 2px 0 2px; }
.news-i p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* cards, KPIs and buttons */
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand)); box-shadow: 0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.18); }
.btn { transition: background .12s, border-color .12s, box-shadow .12s, transform .06s; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.input { transition: border-color .12s, box-shadow .12s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); outline: none; }
.kpi { transition: border-color .15s, box-shadow .15s; }
.kpi:hover { border-color: var(--border-strong); }
.kpi .val { font-variant-numeric: tabular-nums; }
.tbl tbody tr.click:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.chip { transition: background .12s, border-color .12s, color .12s; }
.chip.on .lg { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.ph h1 { font-weight: 700; }
.headbar { box-shadow: 0 1px 0 var(--border); border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .page, .kp, .kp-bg, .login-art .glow, .sk-row i { animation: none !important; } .shell { transition: none; } }

/* ------------------------------------------------ dashboards (sales + profit) */
/* date bar: range button, quick presets, chart buckets */
.rb { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
.rb .right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sales-bar .rb + .chan-chips { border-top: 1px solid var(--border); padding-top: 10px; }
.dr-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--ink); min-height: 42px; text-align: left; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; font: inherit; }
.dr-btn:hover { border-color: var(--brand); }
.dr-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.dr-btn > .i:first-child { color: var(--brand-text); }
.dr-t { display: flex; flex-direction: column; line-height: 1.2; }
.dr-t b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.dr-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.seg.sm button { padding: 6px 10px; font-size: 12.5px; }
.seg button .faint { font-weight: 500; }
@media (min-width: 961px) { .sticky-bar { position: sticky; top: 58px; z-index: 12; box-shadow: var(--shadow); } }
.is-loading { position: relative; }
.is-loading > * { opacity: .55; transition: opacity .15s; pointer-events: none; }
.is-loading::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 50; background: linear-gradient(90deg, transparent, var(--brand), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: loadbar 1s linear infinite; }
@keyframes loadbar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.cmp-note { display: flex; gap: 8px; align-items: center; margin: -6px 0 16px; font-size: 12.5px; color: var(--muted); }
.cmp-note b { color: var(--ink-2); font-weight: 600; }

/* date picker popover */
.dp-pop { position: fixed; z-index: 60; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pagein .14s ease-out; max-width: calc(100vw - 16px); }
.dp-pre { display: flex; flex-direction: column; padding: 8px; border-right: 1px solid var(--border); background: var(--surface-2); min-width: 150px; }
.dp-pre button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; }
.dp-pre button:hover { background: var(--surface-3); }
.dp-pre button.on { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.dp-main { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.dp-top { display: flex; align-items: center; gap: 8px; }
.dp-sum { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-3); }
.dp-cals { display: flex; gap: 22px; }
.dp-mh { text-align: center; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.dp-g { display: grid; grid-template-columns: repeat(7, 34px); row-gap: 2px; }
.dp-wd { text-align: center; font-size: 11px; color: var(--faint); padding: 4px 0; font-weight: 600; }
.dp-d { height: 32px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 8px; font-variant-numeric: tabular-nums; position: relative; }
.dp-d:hover { background: var(--surface-3); }
.dp-d.out { color: var(--faint); }
.dp-d.last::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.dp-d.in { background: var(--brand-soft); color: var(--brand-text); border-radius: 0; }
.dp-d.s, .dp-d.e { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.dp-d.s { border-radius: 8px 0 0 8px; } .dp-d.e { border-radius: 0 8px 8px 0; } .dp-d.s.e { border-radius: 8px; }
.dp-d.s.last::after, .dp-d.e.last::after { background: var(--brand-ink); }
.dp-in { display: flex; gap: 10px; flex-wrap: wrap; }
.dp-in label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 500; flex: 1; min-width: 130px; }
.dp-foot { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--border); padding-top: 10px; font-size: 12px; }
@media (max-width: 700px) {
  .dp-pop { flex-direction: column; max-height: calc(100vh - 90px); overflow: auto; }
  .dp-pre { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .dp-pre button { padding: 6px 9px; font-size: 12.5px; }
  .dp-cals .dp-m:first-child { display: none; }
  .dp-cals .dp-m { flex: 1; }
  .dp-g { grid-template-columns: repeat(7, 1fr); }
  .dp-foot .faint { display: none; }
}

/* KPI tiles with a sparkline along the bottom */
.kt { padding-bottom: 34px; }
.kt .foot { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kt-sp { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; pointer-events: none; }
.kt-svg { width: 100%; height: 100%; display: block; }
.kpi.click { cursor: pointer; }

/* pace tiles (latest day, last 7 days, month to date, forecast, last month) */
.pace { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.pace-t { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 0; border-right: 1px solid var(--border); background: none; text-align: left; cursor: pointer; color: inherit; text-decoration: none; position: relative; font: inherit; }
.pace-t:last-child { border-right: 0; }
.pace-t:hover { background: var(--surface-2); }
.pace-t.on { background: var(--brand-soft); }
.pace-t.on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.pt-l { font-size: 12.5px; color: var(--muted); font-weight: 500; display: flex; gap: 6px; align-items: center; }
.pt-v { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pt-v small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.pt-f, .pt-o { font-size: 12px; }
.pt-bar { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.pt-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.pace.mini { grid-template-columns: repeat(3, 1fr); margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
@media (max-width: 1100px) { .pace { grid-template-columns: repeat(3, 1fr); } .pace-t { border-bottom: 1px solid var(--border); } }
@media (max-width: 640px) { .pace, .pace.mini { grid-template-columns: repeat(2, 1fr); } }

/* legends, mix donut, share cells */
.legend i.dash { width: 16px; height: 0; border-top: 2px dashed var(--ink-2); border-radius: 0; opacity: .7; }
.mix { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.mix .donut { flex: none; align-self: center; }
.mix-l { min-width: 0; }
.mix-r { display: grid; grid-template-columns: 10px 1fr auto 58px 50px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px; color: inherit; text-decoration: none; border-radius: 6px; }
.mix-r:last-child { border-bottom: 0; }
.mix-r:hover { background: var(--surface-2); }
.mix-r .sw { width: 10px; height: 10px; border-radius: 3px; }
.mix-r .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mix-r .g { font-size: 12px; text-align: right; }
.mix-r b { text-align: right; font-weight: 600; }
.donut .dn-v { font-size: 18px; font-weight: 700; fill: var(--ink); font-family: var(--font); }
.donut .dn-s { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.share-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 56px; }
.share-cell i { display: block; height: 3px; border-radius: 99px; max-width: 56px; }

/* calendar heatmap */
.cal-wrap { overflow-x: auto; }
.chart.cal rect.cd { cursor: pointer; }
.chart.cal rect.cd:hover { stroke: var(--ink); stroke-width: 1.5; }
.cal-key { display: flex; gap: 3px; align-items: center; justify-content: flex-end; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.cal-key i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cal-key span { margin: 0 4px; }

/* ABC / Pareto */
.abc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; }
.abc-t { display: grid; gap: 8px; }
.abc-c { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.abc-c:hover { border-color: var(--brand); background: var(--surface-2); }
.abc-c > div { flex: 1; min-width: 0; font-size: 13px; }
.abc-c .ds { font-size: 12px; color: var(--muted); margin-top: 2px; }
.abc-c .ct { font-size: 18px; font-weight: 700; text-align: right; }
.abc-c .ct small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.abc-l { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; flex: none; }
.abc-l.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; display: inline-grid; }
.abc-A { background: var(--ok-soft); color: var(--ok); }
.abc-B { background: var(--info-soft); color: var(--info); }
.abc-C { background: var(--surface-3); color: var(--muted); }
@media (max-width: 900px) { .abc { grid-template-columns: 1fr; } }

/* profit: trend table, movers, SKU map */
.tbl-wrap.scroll-y { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--border); }
.tbl-wrap.scroll-y tfoot td { position: sticky; bottom: 0; background: var(--surface-2); }
.mv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mv-h { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.mv { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 13px; border-radius: 6px; }
.mv:last-child { border-bottom: 0; }
.mv.click { cursor: pointer; }
.mv.click:hover { background: var(--surface-2); }
.mv .mono { font-weight: 600; font-size: 12.5px; }
.mv .clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
@media (max-width: 640px) { .mv-cols { grid-template-columns: 1fr; } }
.chart .q-l { fill: var(--muted); font-size: 11.5px; font-weight: 600; }
.chart .q-n { fill: var(--faint); font-weight: 500; }
.chart .ax-t { fill: var(--faint); font-size: 11px; }
.i.flip { transform: scaleY(-1); }
.cal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cal-stats > div { display: flex; flex-direction: column; gap: 1px; }
.cal-stats span { font-size: 12px; color: var(--muted); }
.cal-stats b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-stats small { font-size: 11.5px; color: var(--faint); }
@media (max-width: 640px) { .cal-stats { grid-template-columns: repeat(2, 1fr); } }
.calm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calm-h { font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: center; padding-bottom: 2px; }
.calm-d { border: 0; border-radius: 8px; min-height: 46px; padding: 5px 7px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.calm-d span { font-size: 11px; opacity: .75; }
.calm-d b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; align-self: flex-end; }
.calm-d.dk { color: #fff; }
.calm-d:hover { box-shadow: 0 0 0 2px var(--ink) inset; }
@media (max-width: 640px) { .calm-d { min-height: 40px; padding: 4px; } .calm-d b { font-size: 11px; } }
#sv-skus .mini-mix { width: 84px; }
.sku-cell { max-width: 250px; }
.sku-cell b { display: block; font-size: 12.5px; }
.sku-cell span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- stock sync */
.thumb { border-radius: 7px; object-fit: cover; background: var(--surface-3); display: block; border: 1px solid var(--border); }
.thumb.ph { display: inline-block; width: 30px; height: 30px; }
.src-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.src-chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: 12.5px; color: var(--ink-2); }
.src-chip.bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-soft); }
.src-chip a { color: var(--muted); display: inline-flex; }
.rule-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.rule-c { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; box-shadow: var(--shadow-sm); }
.rule-c:hover { border-color: var(--border-strong); }
.rule-c.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; background: color-mix(in srgb, var(--brand-soft) 50%, var(--surface)); }
.rc-n { font-weight: 600; font-size: 13.5px; }
.rc-v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.rc-f { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.rc-sp { position: absolute; right: 10px; top: 12px; opacity: .8; }
.rule-how { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; padding: 12px 18px; }
.rule-how .arr { color: var(--faint); display: inline-flex; }
.rule-how b { font-weight: 600; }
.sk-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px 0; }
.sk-tbl td { vertical-align: middle; }
.checks { display: grid; gap: 14px; }
.chk { display: flex; gap: 10px; align-items: flex-start; }
.chk .ck { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.chk .codes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.code-chip { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); }
.code-chip:hover { background: var(--brand-soft); color: var(--brand-text); }
.item-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.item-head img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); flex: none; background: var(--surface-3); }
.item-head.mini { padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin-bottom: 14px; }
.item-head.mini img { width: 64px; height: 64px; border-radius: 9px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cat-chips .pill { text-transform: capitalize; }
.ru { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2); }
.ru-h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.ru-h .input { max-width: 260px; font-weight: 600; }
.ru-on { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); margin-left: auto; }
.ru-on input { accent-color: var(--brand); }
.ru-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ru-g label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
@media (max-width: 760px) { .ru-g { grid-template-columns: 1fr; } .item-head img { width: 80px; height: 80px; } }
.gs-key { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.spinner.sm { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: -2px; margin-right: 6px; }
.sk-note { font-size: 11.5px; color: var(--muted); margin-top: 3px; max-width: 260px; white-space: normal; line-height: 1.35; }
.sk-note.t-bad { color: var(--bad); }

/* stock sync v2: regions, fix first, logos */
.flag { width: 18px; height: 12px; border-radius: 2.5px; overflow: hidden; display: inline-block; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(16,24,40,.12); flex: none; }
.reg { display: inline-flex; gap: 5px; align-items: center; font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 1px 7px 1px 5px; border-radius: 99px; background: var(--surface-3); white-space: nowrap; }
.reg:not(:has(+ *)):empty { display: none; }
.lg.sm { width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
.sk-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 18px; }
.sk-bar .seg button { display: inline-flex; gap: 7px; align-items: center; }
.sk-bar .seg .flag + .flag { margin-left: -2px; }
.sk-bar .src-bar { margin: 0; }
.fix-h { display: flex; gap: 10px; align-items: baseline; margin: 2px 0 10px; }
.fix-h h3 { margin: 0; font-size: 15px; }
.fix-h .muted { font-size: 13px; }
.fix-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.fix-t { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; color: inherit; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color .12s, transform .08s; }
.fix-t::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.fix-t.bad::before { background: var(--bad); } .fix-t.warn::before { background: var(--warn); } .fix-t.info::before { background: var(--info); }
.fix-t:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.fx-i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 2px; }
.fix-t.bad .fx-i { background: var(--bad-soft); color: var(--bad); } .fix-t.warn .fx-i { background: var(--warn-soft); color: var(--warn); } .fix-t.info .fx-i { background: var(--info-soft); color: var(--info); }
.fx-l { font-size: 13px; color: var(--muted); font-weight: 500; }
.fx-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.fix-t.bad .fx-v { color: var(--bad); }
.fx-s { font-size: 12px; color: var(--muted); line-height: 1.35; }
.fx-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; min-height: 20px; }
.fx-split { display: inline-flex; gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fx-split .reg { padding: 0; background: none; margin-right: 4px; }
@media (max-width: 1250px) { .fix-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .fix-grid { grid-template-columns: 1fr 1fr; } }
.rule-wrap { margin-bottom: 8px; }
.rule-cards.top { grid-template-columns: minmax(200px, 260px); margin-bottom: 12px; }
.rg-h { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.rg-h b { color: var(--ink); }
.rule-c { gap: 6px; }
.rc-top { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rc-top .lg { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.rc-top .rc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-top .reg { padding: 0; background: none; }
.rc-ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); flex: none; }
.card-h .rc-ico { width: 28px; height: 28px; }
.rc-v small { font-size: 12px; font-weight: 500; color: var(--muted); }
.rc-bar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rc-bar i { display: block; height: 100%; border-radius: 99px; }
.rule-c.all { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 70%, var(--surface)), var(--surface)); }
.card-h .lg { width: 28px; height: 28px; }
.sk-kpis { padding: 16px 20px 0; }
.sk-kpis .kpi { box-shadow: none; }
.sk-tools { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 20px 10px; }
.sk-tools .sk-chips { padding: 0; }
.sk-tools-r { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.chip .dot.bg-bad { background: var(--bad); } .chip .dot.bg-warn { background: var(--warn); } .chip .dot.bg-info { background: var(--info); } .chip .dot.bg-ok { background: var(--ok); }
.tgl { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.tgl input { display: none; }
.tgl > span:first-of-type { width: 30px; height: 17px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; }
.tgl > span:first-of-type::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tgl input:checked + span { background: var(--brand); }
.tgl input:checked + span::after { left: 15px; }
.tgl .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-cell { display: inline-flex; gap: 8px; align-items: center; }
.ch-cell .reg { padding: 0; background: none; }
.wh-chip { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--ink-2); margin-right: 5px; }
.wh-chip.b { background: var(--surface-3); color: var(--muted); }
.sk-more { display: flex; gap: 10px; align-items: center; padding: 12px 20px; }
.it-alerts { display: grid; gap: 8px; margin: 6px 0 4px; }
.it-alerts .alert { margin: 0; }
.stk-reg { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; margin-bottom: 8px; }
.stk-reg-h { padding-top: 10px; }
.facts .uc b { color: var(--brand-text); }
.wh-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wh-pick .chip { cursor: pointer; }
.ru-tabs { margin-bottom: 12px; }
.ru-h .lg { width: 28px; height: 28px; }
@media (max-width: 700px) { .stk-reg { grid-template-columns: 1fr; } .stk-reg-h { padding: 0; } }
.rule-cards.top { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rule-c .rc-sp { position: static; opacity: .85; }
.rc-mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.rc-top .rc-n { flex: 1; }
.rc-top .reg { margin-left: auto; }
.sk-tbl .sku-cell { max-width: 230px; }
.sk-tbl .code-cell { max-width: 190px; white-space: normal; }
.sk-tbl .code-cell .mono { white-space: nowrap; }

/* ---------------------------------------------------- compact sidebar -- */
.side { gap: 2px; padding: 16px 10px; }
.side .brand { padding: 2px 8px 14px; }
.side-label { padding: 14px 10px 4px; font-size: 10.5px; }
.nav { padding: 7px 10px; font-size: 13.5px; gap: 9px; }
.nav.active::before { left: -10px; }
.nav .lg { width: 20px; height: 20px; font-size: 10px; border-radius: 6px; }
.nav.sub { padding: 6px 10px 6px 14px; margin-left: 12px; width: calc(100% - 12px); font-size: 13px; }
.nav.sub::after { content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; width: 1px; background: var(--side-border); }
.nav.sub.active::before { left: -1px; top: 6px; bottom: 6px; }
.sg { display: flex; flex-direction: column; gap: 1px; }
.sg-h { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; border: 0; background: none; color: var(--side-ink); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; width: 100%; text-align: left; }
.sg-h:hover { background: var(--side-hover); color: var(--side-strong); }
.sg-h .sg-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-h .sg-chev { color: var(--side-muted); transition: transform .15s; transform: rotate(-90deg); flex: none; }
.sg.open > .sg-h .sg-chev { transform: none; }
.sg-h .sg-c { font-size: 11px; color: var(--side-muted); font-variant-numeric: tabular-nums; }
.sg-h .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--side-muted); flex: none; }
.sg-h .dot.ok { background: #47cd89; } .sg-h .dot.warn { background: #fdb022; } .sg-h .dot.run { background: #6d6af5; animation: pulse 1.2s infinite; }
.sg-h .dot:not(.ok):not(.warn):not(.run) { display: none; }
.sg-logos { display: inline-flex; padding-left: 5px; }
.sg-logos .lg { width: 18px; height: 18px; font-size: 9px; border-radius: 5px; margin-left: -5px; box-shadow: 0 0 0 2px var(--side); }
.sg-logos .lg.img { padding: 1px; }
.sg.open .sg-logos { display: none; }
.sg-items { display: none; flex-direction: column; gap: 1px; padding: 1px 0 4px; }
.sg.open > .sg-items { display: flex; }
.side-foot { padding-top: 10px; }
.side-foot .theme-seg { margin-bottom: 6px; }
@media (min-width: 961px) {
  .shell.collapsed .sg-h { display: none; }
  .shell.collapsed .sg-items { display: flex; padding: 0; }
  .shell.collapsed .nav.sub { margin-left: 0; width: 100%; padding: 9px 0; }
  .shell.collapsed .nav.sub::after { display: none; }
}

/* ----------------------------------------------------------- users page -- */
.u-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.u-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-right: 1px solid var(--border); }
.u-stats > div:last-child { border-right: 0; }
.u-stats span { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.u-stats b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.u-stats small { font-size: 12px; color: var(--faint); }
.role-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.role-c { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font: inherit; color: inherit; box-shadow: var(--shadow-sm); transition: border-color .12s; }
.role-c:hover { border-color: var(--border-strong); }
.role-c.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.rl-i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.rt-brand .rl-i, .rl-i.rt-brand { background: var(--brand-soft); color: var(--brand-text); }
.rt-info .rl-i, .rl-i.rt-info { background: var(--info-soft); color: var(--info); }
.rt-warn .rl-i, .rl-i.rt-warn { background: var(--warn-soft); color: var(--warn); }
.rt-muted .rl-i, .rl-i.rt-muted { background: var(--surface-3); color: var(--muted); }
.rl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-t b { font-weight: 600; font-size: 13.5px; }
.rl-t small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.rl-n { font-size: 24px; font-weight: 700; }
.pill.role-admin { background: var(--brand-soft); color: var(--brand-text); }
.pill.role-sales { background: var(--info-soft); color: var(--info); }
.pill.role-payment { background: var(--warn-soft); color: var(--warn); }
.pill.role-viewer { background: var(--surface-3); color: var(--ink-2); }
.pill .i { margin-right: 2px; }
.u-tbl tr.off td { opacity: .55; }
.u-who { display: flex; gap: 11px; align-items: center; }
.u-who .avatar { width: 36px; height: 36px; font-size: 13px; }
.u-who b { display: block; font-weight: 600; }
.u-who .mono { font-size: 12px; color: var(--muted); }
.on-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 2px var(--surface); }
.u-act { display: flex; gap: 10px; align-items: center; }
.u-act span { display: flex; flex-direction: column; line-height: 1.15; }
.u-act small, .u-last small { font-size: 11.5px; color: var(--faint); }
.u-last { max-width: 230px; }
.u-last span { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl.cap-tbl td.c, .tbl.cap-tbl th.c { text-align: center; }
.cap-y { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.cap-n { color: var(--faint); }
.uf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uf-grid small { font-size: 11.5px; }
.uf-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uf-role { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.uf-role:hover { border-color: var(--border-strong); }
.uf-role.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand) inset; }
.uf-role .rl-i { width: 32px; height: 32px; border-radius: 9px; }
.uf-role span:last-child { display: flex; flex-direction: column; }
.uf-role small { font-size: 12px; color: var(--muted); }
.uf-pw { display: flex; gap: 8px; }
.uf-pw .input { flex: 1; }
.pw-meter { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.pw-meter i { height: 4px; flex: 0 0 44px; border-radius: 99px; background: var(--surface-3); }
.pw-meter i.s1 { background: var(--bad); } .pw-meter i.s2 { background: var(--warn); } .pw-meter i.s3 { background: var(--info); } .pw-meter i.s4 { background: var(--ok); }
.pw-meter span { font-size: 12px; color: var(--muted); margin-left: 6px; }
@media (max-width: 1100px) { .role-cards, .u-stats { grid-template-columns: 1fr 1fr; } .u-stats > div:nth-child(2) { border-right: 0; } .u-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } }
@media (max-width: 640px) { .role-cards, .uf-grid, .uf-roles { grid-template-columns: 1fr; } }

/* -------------------------------------------------------- settings page -- */
.set-wrap { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.set-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 4px; }
.set-nav button { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer; font: inherit; color: var(--ink-2); }
.set-nav button:hover { background: var(--surface); border-color: var(--border); }
.set-nav button.on { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); color: var(--ink); }
.set-nav button.on > .i { color: var(--brand-text); }
.set-nav button > span { display: flex; flex-direction: column; min-width: 0; }
.set-nav b { font-weight: 600; font-size: 13.5px; }
.set-nav small { font-size: 12px; color: var(--muted); }
.set-body { min-width: 0; animation: pagein .18s ease-out; }
.set-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.set-h h2 { margin: 0; font-size: 18px; }
.set-h p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; max-width: 640px; }
.set-h .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.set-hi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); flex: none; }
.set-hi.sm { width: 30px; height: 30px; border-radius: 9px; }
.set-card { padding: 16px 18px; margin-bottom: 14px; }
.set-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.set-inline { display: flex; gap: 10px; align-items: center; }
.gs-status { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gs-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.gs-status.ok { color: var(--ok); } .gs-status.warn { color: var(--warn); } .gs-status.bad { color: var(--bad); }
.gs-status .gs-dot { background: currentColor; }
.gs-status > div b { color: var(--ink); }
.gs-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gs-sources .set-card { margin-bottom: 14px; }
.gs-src-h { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.gs-src-h small { display: block; font-size: 12px; color: var(--muted); }
.gs-health { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 7px 10px; border-radius: 8px; margin-bottom: 12px; }
.gs-health.ok { background: var(--ok-soft); color: var(--ok); } .gs-health.warn { background: var(--warn-soft); color: var(--warn); } .gs-health.bad { background: var(--bad-soft); color: var(--bad); }
.lk-grp { margin-bottom: 18px; }
.lk-grp-h { display: flex; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.lk-grp-h span { background: var(--surface-3); color: var(--ink-2); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.lk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lk-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; transition: border-color .12s, box-shadow .12s; }
.lk-card.dirty { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn) inset; }
.lk-logo { position: relative; cursor: pointer; flex: none; border-radius: 12px; }
.lk-logo .lg.big { width: 48px; height: 48px; border-radius: 12px; font-size: 18px; }
.lk-logo-ov { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; background: rgba(16,24,40,.55); color: #fff; opacity: 0; transition: opacity .12s; }
.lk-logo:hover .lk-logo-ov { opacity: 1; }
.lk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lk-t b { display: block; font-weight: 600; }
.lk-t small { font-size: 12px; color: var(--muted); }
.lk-url { display: flex; gap: 6px; }
.lk-url .input { flex: 1; min-width: 0; }
.lk-foot { display: flex; gap: 12px; justify-content: space-between; font-size: 12px; min-height: 16px; }
.linkish { border: 0; background: none; padding: 0; color: var(--brand-text); cursor: pointer; font: inherit; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.linkish:hover { text-decoration: underline; }
.save-bar { position: sticky; bottom: 16px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); margin-top: 8px; z-index: 5; animation: pagein .15s ease-out; }
.save-bar .btn:not(.primary) { background: transparent; color: var(--surface); border-color: color-mix(in srgb, var(--surface) 35%, transparent); }
.save-bar span { display: inline-flex; gap: 8px; align-items: center; }
.sch .tgl.big { font-size: 15px; gap: 10px; margin-bottom: 16px; }
.tgl.big > span:first-of-type { width: 40px; height: 22px; }
.tgl.big > span:first-of-type::after { width: 18px; height: 18px; }
.tgl.big input:checked + span::after { left: 20px; }
.sch-grid { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 22px; transition: opacity .15s; }
.sch-grid.dim { opacity: .45; pointer-events: none; }
.sch-l { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.day-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.day-chips button { width: 42px; height: 34px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.day-chips button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.sch-quick { display: flex; gap: 12px; margin-top: 8px; }
.sch-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.sch-opt input { accent-color: var(--brand); width: 16px; height: 16px; margin-top: 2px; }
.sch-opt span { display: flex; flex-direction: column; }
.sch-opt small { font-size: 12px; color: var(--muted); }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.more-t { display: flex; gap: 14px; align-items: center; padding: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--border); }
.more-t:hover { border-color: var(--brand); }
.more-t > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.more-t small { font-size: 12.5px; color: var(--muted); }
.more-t > .i:last-child { color: var(--muted); }
@media (max-width: 1100px) { .set-wrap { grid-template-columns: 1fr; } .set-nav { position: static; flex-direction: row; overflow-x: auto; } .set-nav button small { display: none; } .set-nav button { white-space: nowrap; } }
@media (max-width: 900px) { .gs-sources, .lk-grid, .more-grid { grid-template-columns: 1fr; } .sch-grid { grid-template-columns: 1fr; } }
.save-bar[hidden] { display: none; }