/* =============================================================================
   Downloader Admin — Design System
   Re-skinned to the "Clipframe" editorial design (imported via claude_design MCP).
   Off-white canvas, warm near-black ink, NO saturated accent — the action color
   is ink itself. Light editorial serif for display, Inter for UI, pill CTAs,
   hairline + soft-shadow cards, pastel atmospheric orbs as the only "color".
   Dual-theme (light default + warm near-black dark, derived). Vanilla CSS, no deps.

   NOTE ON FONTS: the source design loads Cormorant Garamond / Inter / IBM Plex Mono
   from a Google Fonts CDN and ships no self-hostable binaries. Per the project's
   no-CDN constraint we use graceful system fallback stacks instead: real Cormorant/
   Inter/Plex render if installed, otherwise the closest system face — zero network.
   ============================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  /* ink ramp — warm near-black "stone" (repurposed from a colored brand ramp).
     Drives graphite gradients on the wordmark / avatar; per-theme --brand below. */
  --brand-50:  #faf9f8;
  --brand-100: #f0efed;
  --brand-300: #a8a29e;
  --brand-400: #57534e;
  --brand-500: #292524;   /* primary ink action */
  --brand-600: #1c1917;
  --brand-700: #0c0a09;

  /* semantic accents */
  --amber:   #c8963f;     /* premium / stars (warm gold) */
  --amber-weak: #e6c68a;

  /* status hues (theme-agnostic base — used for card accent bars) */
  --success: #16a34a;
  --danger:  #dc2626;
  --warning: #d97706;
  --info:    #5b7fa6;     /* muted "sky" — editorial, not a loud blue */

  /* radius scale — pill CTAs, soft cards, 8px inputs */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* typography */
  --font-sans:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Cormorant Garamond', 'Cormorant', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;

  /* motion — restrained editorial easing */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: .18s;
}

/* -------- LIGHT (default) -------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f5f5f4;   /* off-white canvas floor */
  --bg-tint:   radial-gradient(1200px 720px at 82% -8%, rgba(244,197,168,.30) 0%, transparent 60%),
               radial-gradient(900px 620px at -6% 6%, rgba(167,229,211,.24) 0%, transparent 58%),
               radial-gradient(720px 620px at 62% 112%, rgba(200,184,224,.18) 0%, transparent 60%);
  --surface:   #ffffff;   /* pure white card */
  --surface-2: #fafafa;   /* inset / soft band */
  --surface-3: #f0efed;   /* hover fills / plates / badge.plain */
  --line:      #e7e5e4;   /* default hairline */
  --line-strong:#d6d3d1;  /* strong hairline / inputs */

  --text:      #0c0a09;   /* strongest ink */
  --text-2:    #4e4e4e;   /* body / secondary */
  --muted:     #6f6a63;   /* muted (AA on white) */

  --brand:      #292524;  /* ink action */
  --brand-ink:  #ffffff;  /* text on ink */
  --brand-soft: #f0efed;  /* soft ink plate (chips / active tool / icon plate) */
  --on-brand-soft: #292524;

  --sidebar-bg:        #fafafa;
  --sidebar-text:      #4e4e4e;
  --sidebar-muted:     #78716c;
  --sidebar-active:    #0c0a09;             /* active/hover label ink */
  --sidebar-active-bg: #f0efed;             /* active plate */
  --sidebar-hover:     rgba(12,10,9,.045);
  --sidebar-line:      #e7e5e4;

  /* elevation — hairline system, one soft tier; near-flat at rest */
  --shadow-sm: 0 1px 2px rgba(12,10,9,.03), 0 1px 2px rgba(12,10,9,.02);
  --shadow-md: 0 4px 16px rgba(12,10,9,.05), 0 2px 6px rgba(12,10,9,.03);
  --shadow-lg: 0 8px 28px rgba(12,10,9,.07), 0 16px 44px -20px rgba(12,10,9,.12);

  --ok-bg:    #e8f6ee;  --ok-fg:    #107a4d;  --ok-bd:  #c4e6d3;
  --bad-bg:   #fdecec;  --bad-fg:   #c62828;  --bad-bd: #f6cdcd;
  --warn-bg:  #fbf1e0;  --warn-fg:  #9a5b0e;  --warn-bd:#f0dcb6;
  --info-bg:  #eef2f7;  --info-fg:  #3f5f83;  --info-bd:#d5dfea;
  --amber-bg: #f7efdd;  --amber-fg: #8a600f;  --amber-bd:#ecdcb2;
}

/* -------- DARK (derived warm near-black counterpart) -------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #100c0b;   /* warm near-black floor */
  --bg-tint:   radial-gradient(1100px 640px at 84% -10%, rgba(244,197,168,.055) 0%, transparent 60%),
               radial-gradient(820px 520px at -6% 4%, rgba(167,229,211,.045) 0%, transparent 55%),
               radial-gradient(680px 560px at 62% 112%, rgba(200,184,224,.04) 0%, transparent 60%);
  --surface:   #1b1615;   /* elevated card */
  --surface-2: #221c1a;   /* inset / inputs */
  --surface-3: #2a2321;   /* hover fills / plates */
  --line:      #2b2422;
  --line-strong:#3b3330;

  --text:      #f4f2f0;
  --text-2:    #c4bcb5;
  --muted:     #948b84;

  --brand:      #f4f2f0;  /* inverted ink action -> near-white pill */
  --brand-ink:  #0c0a09;  /* dark text on the near-white pill */
  --brand-soft: rgba(244,242,240,.11);
  --on-brand-soft: #e7e5e4;

  --sidebar-bg:        #0b0908;
  --sidebar-text:      #c4bcb5;
  --sidebar-muted:     #948b84;
  --sidebar-active:    #f4f2f0;
  --sidebar-active-bg: rgba(255,255,255,.07);
  --sidebar-hover:     rgba(255,255,255,.05);
  --sidebar-line:      rgba(255,255,255,.07);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,.42);
  --shadow-lg: 0 22px 46px -14px rgba(0,0,0,.6);

  --ok-bg:   rgba(22,163,74,.16);   --ok-fg:   #5cce8d;  --ok-bd:  rgba(22,163,74,.32);
  --bad-bg:  rgba(220,38,38,.16);   --bad-fg:  #f28b8b;  --bad-bd: rgba(220,38,38,.34);
  --warn-bg: rgba(217,119,6,.16);   --warn-fg: #e0a95f;  --warn-bd:rgba(217,119,6,.34);
  --info-bg: rgba(120,150,190,.16); --info-fg: #a3bad6;  --info-bd:rgba(120,150,190,.32);
  --amber-bg:rgba(200,150,63,.15);  --amber-fg:#e3b878;  --amber-bd:rgba(200,150,63,.32);
}

/* Fallback: no explicit theme set yet -> respect OS (theme.js normally sets it) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#100c0b; --surface:#1b1615; --surface-2:#221c1a; --surface-3:#2a2321;
    --line:#2b2422; --line-strong:#3b3330; --text:#f4f2f0; --text-2:#c4bcb5; --muted:#948b84;
    --brand:#f4f2f0; --brand-ink:#0c0a09; --brand-soft:rgba(244,242,240,.11); --on-brand-soft:#e7e5e4;
    --sidebar-bg:#0b0908; --sidebar-text:#c4bcb5; --sidebar-muted:#948b84;
    --sidebar-active:#f4f2f0; --sidebar-active-bg:rgba(255,255,255,.07);
    --sidebar-hover:rgba(255,255,255,.05); --sidebar-line:rgba(255,255,255,.07);
    --ok-bg:rgba(22,163,74,.16); --ok-fg:#5cce8d; --ok-bd:rgba(22,163,74,.32);
    --bad-bg:rgba(220,38,38,.16); --bad-fg:#f28b8b; --bad-bd:rgba(220,38,38,.34);
    --warn-bg:rgba(217,119,6,.16); --warn-fg:#e0a95f; --warn-bd:rgba(217,119,6,.34);
    --info-bg:rgba(120,150,190,.16); --info-fg:#a3bad6; --info-bd:rgba(120,150,190,.32);
    --amber-bg:rgba(200,150,63,.15); --amber-fg:#e3b878; --amber-bd:rgba(200,150,63,.32);
  }
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-tint);
  background-attachment: fixed;
  color: var(--text-2);
  font: 400 14px/1.55 var(--font-sans);
  letter-spacing: .009em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

::selection { background: #d6d3d1; color: #0c0a09; }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }

/* ------------------------------------------------------------------ layout */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--text);
  padding: 4px 8px 2px;
  margin-bottom: var(--s-6);
}
.brand .brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-600));
  box-shadow: 0 4px 14px rgba(12,10,9,.14);
  color: #fff;
  flex-shrink: 0;
}
.brand .brand-mark svg { width: 17px; height: 17px; display: block; }

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--sidebar-text);
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar nav a svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .78; }
.sidebar nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-active); text-decoration: none; }
.sidebar nav a.on {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-weight: 600;
}
.sidebar nav a.on svg { opacity: 1; color: var(--sidebar-active); }

.side-foot {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--sidebar-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-user {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--sidebar-muted);
  padding: 0 6px;
}
.side-user .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-700));
  color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.side-user b { color: var(--sidebar-text); font-weight: 600; }
.side-actions { display: flex; gap: 8px; align-items: center; }
.side-logout {
  flex: 1;
  color: var(--sidebar-muted);
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.side-logout:hover { background: var(--sidebar-hover); color: var(--sidebar-active); text-decoration: none; }
.side-logout svg { width: 15px; height: 15px; }

/* theme toggle */
.theme-toggle {
  width: 38px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-line);
  color: var(--sidebar-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-toggle:hover { background: var(--sidebar-active-bg); color: var(--sidebar-active); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }

.content {
  flex: 1;
  min-width: 0;
  padding: var(--s-8) var(--s-10);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

/* topbar (mobile brand row, hidden on desktop) */
.topbar { display: none; }

/* ------------------------------------------------------------------ headings */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}
h1 .count { color: var(--muted); font-weight: 400; font-size: 22px; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 6px; letter-spacing: 0; }

h2 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin: var(--s-8) 0 var(--s-3);
}

/* ------------------------------------------------------------------ stat cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s-4);
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card:hover::before { opacity: .0; }
.card .l {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex; align-items: center; gap: 7px;
}
.card .l svg { width: 15px; height: 15px; opacity: .7; }
.card .n {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -.02em;
  margin-top: 8px;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.card.ok  .n { color: var(--ok-fg); }
.card.ok::before { background: var(--success); opacity: 1; }
.card.bad .n { color: var(--bad-fg); }
.card.bad::before { background: var(--danger); opacity: 1; }
.card.warn .n { color: var(--warn-fg); }
.card.warn::before { background: var(--warning); opacity: 1; }
.card.brandy .n { color: var(--text); }
.card.brandy::before { background: var(--brand); opacity: 1; }
.card.amberly .n { color: var(--amber-fg); }
.card.amberly::before { background: var(--amber); opacity: 1; }

/* ------------------------------------------------------------------ pills / chips */
.pills { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pill {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.pill b { color: var(--text); font-weight: 600; }

.chip {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--text); text-decoration: none; background: var(--surface-3); }
.chip.on {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
  font-weight: 600;
}
.chip.on:hover { background: var(--brand); color: var(--brand-ink); }

/* ------------------------------------------------------------------ tables */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.table-wrap.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--surface-2);
  white-space: nowrap;
  position: sticky; top: 0;
}
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { font-variant-numeric: tabular-nums; }
td.url { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.mono, .mono { font-family: var(--font-mono); font-size: 12.5px; }
.err { color: var(--bad-fg); }
.muted { color: var(--muted); }

/* full-width empty-state row */
td.empty { text-align: center; color: var(--muted); padding: var(--s-8); }
td.empty .empty-ill { font-size: 26px; display: block; margin-bottom: 8px; opacity: .5; }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  line-height: 1.5;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.done, .badge.active, .badge.running, .badge.lifetime {
  background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd);
}
.badge.failed, .badge.banned, .badge.stopped {
  background: var(--bad-bg); color: var(--bad-fg); border-color: var(--bad-bd);
}
.badge.pending, .badge.processing, .badge.off {
  background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd);
}
.badge.info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-bd); }
.badge.plain { background: var(--surface-3); color: var(--text-2); border-color: var(--line); }
.badge.plain::before { display: none; }
.badge.star { background: var(--amber-bg); color: var(--amber-fg); border-color: var(--amber-bd); }
.badge.star::before { display: none; }

/* ------------------------------------------------------------------ toolbar / forms */
.toolbar {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  align-items: center;
  flex-wrap: wrap;
}
.toolbar.filters { gap: 8px; }

label { color: var(--text-2); }

input[type=text], input[type=password], input[type=number], input[type=search],
textarea, select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 10px 13px;
  border-radius: var(--r-sm);
  outline: none;
  font: inherit;
  letter-spacing: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; line-height: 1.6; }
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }

/* buttons — pill CTAs. Base = primary ink pill; .btn = ghost/secondary. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid transparent;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
  transition: filter var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .btn:hover { filter: brightness(1.06); text-decoration: none; }
button:active, .btn:active { transform: scale(.98); }
button svg, .btn svg { width: 15px; height: 15px; }

/* ghost / secondary button */
.btn {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); filter: none; }
.btn.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-bd); }
.btn.ok:hover { background: var(--ok-bg); filter: brightness(.97); }
.btn.danger { background: transparent; color: var(--bad-fg); border-color: var(--bad-bd); }
.btn.danger:hover { background: var(--bad-bg); color: var(--bad-fg); filter: none; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; box-shadow: none; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.sm { padding: 6px 13px; font-size: 12px; }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions form { display: inline; margin: 0; }

/* ------------------------------------------------------------------ notices */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  color: var(--info-fg);
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  font-size: 13.5px;
  line-height: 1.5;
}
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.notice.danger { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad-fg); }
.notice.good { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.notice code { background: color-mix(in srgb, currentColor 12%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
.notice a { color: currentColor; text-decoration: underline; }

/* ------------------------------------------------------------------ pager */
.pager {
  display: flex; gap: var(--s-4); align-items: center; justify-content: center;
  margin-top: var(--s-5); color: var(--muted); font-size: 13px;
}
.pager a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); box-shadow: var(--shadow-sm);
}
.pager a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.pager .page-info { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ panels / sections */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
}
.section > .sec-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--s-2);
}
.section > .sec-head h3 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.section > .sec-head .sec-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--text);
}
.section > .sec-head .sec-ico svg { width: 16px; height: 16px; }
.section .sec-desc { color: var(--muted); font-size: 13px; margin: 0 0 var(--s-5); }

/* ------------------------------------------------------------------ inline "add" form card */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.form-card .toolbar { margin-bottom: 0; }

/* stacked vertical form (broadcast / settings) */
.stack-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
  max-width: 720px;
}
.stack-form .field { display: flex; flex-direction: column; gap: 7px; }
.stack-form .field > .label { color: var(--text); font-weight: 600; font-size: 13.5px; }
.stack-form .field > .hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.stack-form > button, .stack-form .actions button { align-self: flex-start; padding: 11px 22px; }
.stack-form .actions { display: flex; gap: 10px; align-items: center; }

/* toggle switch */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.switch-row:last-of-type { border-bottom: none; }
.switch-row .switch-text { display: flex; flex-direction: column; }
.switch-row .switch-text .t { font-weight: 600; color: var(--text); font-size: 13.5px; }
.switch-row .switch-text .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.switch {
  position: relative; display: inline-flex; flex-shrink: 0;
  width: 46px; height: 26px; cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--line-strong); box-shadow: 0 1px 3px rgba(12,10,9,.2);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.switch input:checked + .track { background: var(--brand); border-color: var(--brand); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--brand-ink); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 2px var(--brand); }

/* ------------------------------------------------------------------ auth (login / setup) */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background:
    radial-gradient(900px 620px at 50% -12%, rgba(244,197,168,.32) 0%, transparent 60%),
    radial-gradient(760px 620px at 84% 112%, rgba(200,184,224,.22) 0%, transparent 60%),
    radial-gradient(680px 560px at 10% 108%, rgba(167,229,211,.18) 0%, transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--s-8);
}
.auth-card .brand {
  color: var(--text);
  justify-content: center;
  margin-bottom: var(--s-5);
  font-size: 24px;
}
.auth-card .auth-title { font-family: var(--font-display); font-size: 27px; font-weight: 400; text-align: center; margin: 0 0 6px; letter-spacing: -.01em; color: var(--text); line-height: 1.15; }
.auth-card .auth-sub { color: var(--muted); text-align: center; font-size: 13.5px; margin: 0 0 var(--s-6); line-height: 1.5; }
.auth-card form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-card .field { display: flex; flex-direction: column; gap: 6px; }
.auth-card .field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.auth-card input { width: 100%; padding: 11px 13px; }
.auth-card button { width: 100%; padding: 12px; font-size: 14px; margin-top: 4px; }
.auth-card .error {
  background: var(--bad-bg); color: var(--bad-fg); border: 1px solid var(--bad-bd);
  padding: 10px 13px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.auth-card .error svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: var(--s-6); }

/* ------------------------------------------------------------------ translations table */
table.trans td { vertical-align: top; }
table.trans .tkey {
  font-family: var(--font-mono); color: var(--text);
  white-space: nowrap; width: 220px; font-size: 12.5px; padding-top: 16px;
}
table.trans textarea { min-height: 44px; }

/* ------------------------------------------------------------------ WYSIWYG telegram editor */
.tg-editor {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tg-editor.focused { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.tg-toolbar {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 7px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.tg-toolbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: 3px 4px; }
.tg-tool {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 7px;
  background: transparent; border: 1px solid transparent; color: var(--text-2);
  border-radius: var(--r-xs); cursor: pointer; font-size: 13px; font-weight: 600;
  box-shadow: none;
}
.tg-tool:hover { background: var(--surface-3); color: var(--text); filter: none; }
.tg-tool.active { background: var(--brand-soft); color: var(--on-brand-soft); border-color: transparent; }
.tg-tool svg { width: 15px; height: 15px; }
.tg-tool .u-b { font-weight: 800; }
.tg-tool .u-i { font-style: italic; font-family: Georgia, serif; }
.tg-tool .u-u { text-decoration: underline; }
.tg-tool .u-s { text-decoration: line-through; }
.tg-tool .u-code { font-family: var(--font-mono); font-weight: 700; font-size: 12px; }

.tg-input {
  min-height: 130px;
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 16px;
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.tg-input:empty::before { content: attr(data-placeholder); color: var(--muted); }
.tg-input b, .tg-input strong { font-weight: 700; }
.tg-input i, .tg-input em { font-style: italic; }
.tg-input u { text-decoration: underline; }
.tg-input s, .tg-input strike { text-decoration: line-through; }
.tg-input a { color: var(--brand); text-decoration: underline; }
.tg-input code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); }
.tg-input pre {
  font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--line);
  padding: 10px 12px; border-radius: var(--r-sm); overflow-x: auto; margin: 8px 0; white-space: pre-wrap;
}
.tg-input .tg-spoiler {
  background: var(--surface-3); border-radius: 4px; padding: 0 3px;
  box-shadow: inset 0 0 0 1px var(--line); color: transparent;
  text-shadow: 0 0 7px var(--text);
}

/* telegram preview bubble */
.tg-preview-wrap { margin-top: var(--s-3); }
.tg-preview-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.tg-chat {
  background:
    linear-gradient(180deg, rgba(167,229,211,.06), transparent),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  min-height: 90px;
}
.tg-bubble {
  position: relative;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 13px 8px;
  box-shadow: var(--shadow-sm);
  font-size: 14px; line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}
:root[data-theme="dark"] .tg-bubble { background: #221c1a; border-color: #322b28; }
.tg-bubble .tg-body b, .tg-bubble .tg-body strong { font-weight: 700; }
.tg-bubble .tg-body i, .tg-bubble .tg-body em { font-style: italic; }
.tg-bubble .tg-body u { text-decoration: underline; }
.tg-bubble .tg-body s { text-decoration: line-through; }
.tg-bubble .tg-body a { color: var(--info-fg); text-decoration: none; }
.tg-bubble .tg-body code { font-family: var(--font-mono); font-size: 13px; }
.tg-bubble .tg-body pre {
  font-family: var(--font-mono); background: color-mix(in srgb, var(--text) 7%, transparent);
  padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 6px 0; white-space: pre-wrap; font-size: 13px;
}
.tg-bubble .tg-body .tg-spoiler {
  background: color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 3px; color: transparent; filter: blur(.2px);
  transition: color .15s, background .15s; cursor: pointer;
}
.tg-bubble .tg-body .tg-spoiler:hover { background: transparent; color: inherit; }
.tg-bubble .tg-time { display: block; text-align: right; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.tg-bubble .tg-empty { color: var(--muted); font-style: italic; }
.tg-preview-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 460px; }
.tg-preview-btns .tg-pbtn {
  background: color-mix(in srgb, var(--info-fg) 12%, var(--surface));
  border: 1px solid var(--info-bd); color: var(--info-fg);
  text-align: center; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 500;
}

/* ------------------------------------------------------------------ modals */
/* Custom dialogs (modal.js) — replaces native alert/confirm/prompt. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: var(--s-6);
  background: rgba(12, 10, 9, .28);           /* design overlay scrim */
  animation: modal-fade .2s var(--ease) both;
}
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, .55); }
.modal {
  width: 100%; max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-6);
  animation: modal-pop .2s var(--ease) both;
}
.modal-overlay.closing { animation: modal-fade .16s var(--ease) reverse both; }
.modal-overlay.closing .modal { animation: modal-pop .16s var(--ease) reverse both; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal, .modal-overlay.closing, .modal-overlay.closing .modal { animation: none; }
}

.modal-head { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s-2); }
.modal-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--text);
}
.modal-ico svg { width: 17px; height: 17px; }
.modal-danger .modal-ico { background: var(--bad-bg); color: var(--bad-fg); }
.modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400; letter-spacing: -.01em;
  color: var(--text); line-height: 1.2;
}
.modal-msg { margin: 0 0 var(--s-2); color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-3); }
.modal-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.modal-input { width: 100%; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--s-5); }
.modal-ok.danger { background: var(--danger); color: #fff; }
.modal-ok.danger:hover { filter: brightness(1.08); }

/* utility */
.hidden { display: none !important; }
.mt-0 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.star-val { color: var(--amber-fg); font-weight: 600; }

/* ------------------------------------------------------------------ page-load animation */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .content > * { animation: rise .4s var(--ease) both; }
  .content > *:nth-child(2) { animation-delay: .04s; }
  .content > *:nth-child(3) { animation-delay: .08s; }
  .content > *:nth-child(4) { animation-delay: .12s; }
  .cards .card { animation: rise .45s var(--ease) both; }
  .cards .card:nth-child(2){animation-delay:.03s}.cards .card:nth-child(3){animation-delay:.06s}
  .cards .card:nth-child(4){animation-delay:.09s}.cards .card:nth-child(5){animation-delay:.12s}
  .cards .card:nth-child(6){animation-delay:.15s}.cards .card:nth-child(7){animation-delay:.18s}
  .cards .card:nth-child(8){animation-delay:.21s}.cards .card:nth-child(9){animation-delay:.24s}
  .cards .card:nth-child(10){animation-delay:.27s}
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 960px) {
  .content { padding: var(--s-6) var(--s-5); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap;
    padding: 10px 14px; gap: 8px;
  }
  .sidebar .brand { margin: 0; margin-right: auto; }
  .sidebar nav {
    order: 3; width: 100%; flex-direction: row; flex-wrap: wrap; overflow-x: auto;
    gap: 4px; margin: 4px 0 0;
  }
  .sidebar nav a { padding: 7px 11px; font-size: 12.5px; }
  .sidebar nav a span.lbl { display: inline; }
  .side-foot {
    order: 2; margin: 0; padding: 0; border: none;
    flex-direction: row; align-items: center; gap: 8px;
  }
  .side-user { display: none; }
  .side-logout { flex: 0; }
  .content { padding: var(--s-5) var(--s-4); }
  h1 { font-size: 27px; }
  .table-wrap { overflow-x: auto; }
  table { min-width: 620px; }
}