/* Console frame (Intercom-style): icon rail, settings menu, content. Loaded after admin.css; the theme is chosen
   server-side (cookie) as data-theme on <html>, so it works under the admin pages' no-script CSP. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1013; --panel: #15171b; --card: #1b1d22; --rail: #0a0b0d; --text: #ececef; --muted: #a4a8b0;
  --line: #2b2e35; --chip: #262931; --input: #121317; --rail-active: #2a1418; --accent: #d4213d; --accent-text: #ff8b99;
  --surface: #1b1d22; --surface-strong: #1b1d22; --red: #d4213d;
}
/* No choice yet: follow the device (day/night). */
html[data-theme="auto"] {
  color-scheme: light;
  --bg: #f6f5f3; --panel: #fbfaf8; --card: #ffffff; --rail: #141418; --text: #16171a; --muted: #5d6168;
  --line: #e4e1dc; --chip: #f0eeea; --input: #ffffff; --rail-active: #3a1a20; --accent: #c41f38; --accent-text: #b0182f;
  --surface: #ffffff; --surface-strong: #ffffff; --red: #c41f38; --red-soft: #fbe7ea; --green: #17643a;
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] {
  color-scheme: dark;
  --bg: #0f1013; --panel: #15171b; --card: #1b1d22; --rail: #0a0b0d; --text: #ececef; --muted: #a4a8b0;
  --line: #2b2e35; --chip: #262931; --input: #121317; --rail-active: #2a1418; --accent: #d4213d; --accent-text: #ff8b99;
  --surface: #1b1d22; --surface-strong: #1b1d22; --red: #d4213d;
}
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f3; --panel: #fbfaf8; --card: #ffffff; --rail: #141418; --text: #16171a; --muted: #5d6168;
  --line: #e4e1dc; --chip: #f0eeea; --input: #ffffff; --rail-active: #3a1a20; --accent: #c41f38; --accent-text: #b0182f;
  --surface: #ffffff; --surface-strong: #ffffff; --red: #c41f38; --red-soft: #fbe7ea; --green: #17643a;
}
html[data-theme] body { background: var(--bg); color: var(--text); }
html[data-theme] a { color: var(--accent-text); }
.console .orb { display: none; }
.console { display: flex; flex-wrap: wrap; min-height: 100vh; }

.rail { flex: 0 0 4rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem 0; background: var(--rail); }
.rail .rail-logo { display: block; width: 2.5rem; margin-bottom: .9rem; }
.rail .rail-logo img { display: block; width: 2.5rem; height: auto; }
.rail a.rail-item, .rail .rail-item { width: 2.75rem; height: 2.75rem; border-radius: .65rem; display: flex; align-items: center; justify-content: center; color: #9aa0a6; text-decoration: none; }
.rail a.rail-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail a.rail-item.is-active { background: var(--rail-active); color: #ff6b80; }
.rail svg { width: 1.25rem; height: 1.25rem; }
.rail .rail-spacer { flex: 1; }
.rail .rail-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; text-transform: uppercase; }

.settings-nav { flex: 0 0 15.5rem; padding: 1.4rem .75rem; border-right: 1px solid var(--line); background: var(--panel); }
.settings-nav h2 { margin: 0 0 .9rem; padding: 0 .6rem; font-size: 1.25rem; }
.settings-nav .group { padding: .9rem .6rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.settings-nav a, .settings-nav span.soon { display: flex; justify-content: space-between; align-items: center; min-height: 2.5rem; padding: 0 .6rem; border-radius: .5rem; color: var(--text); text-decoration: none; }
.settings-nav a:hover { background: var(--chip); }
.settings-nav a.is-active { background: var(--chip); font-weight: 600; }
.settings-nav span.soon { color: var(--muted); }
.settings-nav small { font-size: .7rem; color: var(--muted); }

.console-main { flex: 999 1 35rem; min-width: 0; padding: 1.75rem 2.25rem 3rem; }
.console-main > .inner { max-width: 60rem; }
.console-topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.25rem; color: var(--muted); font-size: .85rem; }
.console-topbar .workspace { color: var(--text); font-weight: 600; }
.console-topbar form { margin: 0; }

.console .panel, .console section.panel { background: var(--card); border: 1px solid var(--line); border-radius: .9rem; }
.console .button, .console button:not(.button-secondary):not(.link) { background: var(--accent); }
.console .button-secondary { background: transparent; color: var(--text); border: 1px solid var(--line); }
.console input, .console textarea, .console select { background: var(--input); color: var(--text); border-color: var(--line); }

.home-checklist { list-style: none; margin: 0; padding: 0; }
.home-checklist li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.home-checklist .dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; color: #fff; background: var(--accent); }
.home-checklist .dot.done { background: #1f8a4c; }
.home-checklist .label { flex: 1; }
.progress { height: .4rem; border-radius: .2rem; background: var(--line); margin: .9rem 0 1rem; }
.progress > span { display: block; height: .4rem; border-radius: .2rem; background: var(--accent); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.channel-card { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem; }
.tag { align-self: flex-start; font-size: .75rem; padding: .2rem .5rem; border-radius: .4rem; background: var(--chip); color: var(--muted); }
.tag.live { background: #e3f4ea; color: #17643a; }
html[data-theme="dark"] .tag.live { background: #123524; color: #7fe0a7; }

/* Light theme: the older pages' status colors were tuned for a dark background. */
html[data-theme="light"] .eyebrow, html[data-theme="light"] .client-context-bar span { color: var(--accent-text); }
html[data-theme="light"] [class*="status-"], html[data-theme="light"] [class*="exception-"], html[data-theme="light"] [class*="usage-status-"],
html[data-theme="light"] .warning-text, html[data-theme="light"] .future-actions span, html[data-theme="light"] .client-context-bar em,
html[data-theme="light"] .message, html[data-theme="light"] .privacy-note, html[data-theme="light"] .cost-note { color: var(--text); border-color: var(--line); }
html[data-theme="light"] .section-nav, html[data-theme="light"] .client-context-bar { background: var(--panel); border-color: var(--line); }

@media (max-width: 760px) {
  .rail { flex: 1 1 100%; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; padding: .5rem .75rem; }
  .rail .rail-logo { margin: 0 .5rem 0 0; }
  .rail .rail-spacer { display: none; }
  .settings-nav { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .console-main { padding: 1.25rem 1rem 2.5rem; }
}

/* Page content (inline styles are blocked by the admin CSP). */
.page-title { margin: 0 0 1.2rem; font-size: 1.75rem; letter-spacing: -.01em; }
.page-title.tight { margin-bottom: .3rem; font-size: 1.6rem; }
.page-sub { color: var(--muted); margin: 0 0 1.2rem; }
.panel.pad { padding: 1.1rem 1.3rem; }
.panel.mb { margin-bottom: 1rem; }
.card-title { margin: 0 0 .4rem; font-size: 1.05rem; }
.card-title.flush, .flush { margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.muted { color: var(--muted); }
.mt { margin: .9rem 0 0; }
.stat-label { color: var(--muted); margin-bottom: .4rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.kv.first { border-top: 0; }
.button.start { align-self: flex-start; }
.progress.p0 > span { width: 0; } .progress.p1 > span { width: 25%; } .progress.p2 > span { width: 50%; }
.progress.p3 > span { width: 75%; } .progress.p4 > span { width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fixes: links inherit the accent; buttons, menu items and the avatar keep their own colors. */
.console a.button, .console a.button:visited { color: #fff; text-decoration: none; }
.console a.button.button-secondary, .console a.button-secondary { color: var(--text); }
.console .settings-nav a, .console .settings-nav a:visited { color: var(--text); }
.console .rail a.rail-item { color: #9aa0a6; }
.console .rail a.rail-item.is-active { color: #ff6b80; }
.console .rail a.rail-avatar { color: #fff; text-decoration: none; }
.console .panel { box-shadow: none; }

/* Sign-in and other pages without the rail: center the card; labels readable in both themes. */
.console > .login-shell { flex: 1 1 100%; min-height: 100vh; }
.console label { color: var(--text); }
html[data-theme="light"] .login-card { box-shadow: 0 1rem 3rem rgba(20, 20, 24, .08); }

/* Auto (device) theme: show the matching day/night switch; light-theme fixes also apply. */
.rail .only-night { display: none; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .rail .only-day { display: none; } html[data-theme="auto"] .rail .only-night { display: flex; } }
html[data-theme="auto"] .eyebrow { color: var(--accent-text); }
html[data-theme="auto"] [class*="status-"], html[data-theme="auto"] [class*="exception-"], html[data-theme="auto"] [class*="usage-status-"],
html[data-theme="auto"] .warning-text, html[data-theme="auto"] .future-actions span, html[data-theme="auto"] .client-context-bar em,
html[data-theme="auto"] .message, html[data-theme="auto"] .privacy-note, html[data-theme="auto"] .cost-note { color: var(--text); border-color: var(--line); }

/* Channel setup steps (Telegram, SMS, Instagram) */
.console ol.steps{padding-left:1.25rem;line-height:1.6;margin:.75rem 0 1rem}
.console ol.steps li{margin:.35rem 0}
.console ol.steps code{font-size:.9em}