/* ===== CSS Variables ===== */
:root {
  --bg: #0f0f1a;
  --glass-bg: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.12);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --primary: #6c5ce7;
  --primary-hover: #5a4bd1;
  --success: #00b894;
  --danger: #e17055;
  --warning: #fdcb6e;
  --text: #e8e8f0;
  --text-dim: #9898b0;
  --card-bg: rgba(255,255,255,0.06);
  --radius: 16px;
  --transition: 0.3s ease;
}

/* ===== Custom scrollbars (professional, replaces the plain OS bar) ===== */
* { scrollbar-width: thin; scrollbar-color: rgba(108, 92, 231, 0.6) var(--c-surface-2); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--c-surface-2); border-radius: 999px; }
*::-webkit-scrollbar-thumb {
  background: var(--c-primary-press);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #8a7bf5, var(--primary)); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* thin, low-profile bars for horizontal scrolling inside cards, tables and the nav */
.chart-wrap::-webkit-scrollbar, .data-table::-webkit-scrollbar, .sidebar::-webkit-scrollbar,
.chart-wrap::-webkit-scrollbar-thumb, .data-table::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
  height: 8px;
  width: 8px;
}
::selection { background: var(--c-primary-soft-2); color: var(--c-text); }
html { scroll-behavior: smooth; }

/* ===== Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  direction: rtl;
}

/* ===== Glass Background ===== */
.glass-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--c-bg);
}
.glass-bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-primary-soft-2), transparent 70%);
  top: -200px; left: -200px;
  animation: float 20s ease-in-out infinite;
}
.glass-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-ok-soft), transparent 70%);
  bottom: -150px; right: -150px;
  animation: float 25s ease-in-out infinite reverse;
}
@keyframes float {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(30px,-30px) scale(1.05); }
}

/* ===== Glass utility ===== */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ===== Layout ===== */
/* One scroll container (`.content`) instead of page+nested scrolling: on desktop
   the old max-height caused two scrollbars and a jumping layout. */
.dashboard {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  gap: 0;
}
.header {
  grid-column: 1 / -1;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  border-bottom: 1px solid var(--glass-border);
}
.header h1 { font-size: 1.3rem; font-weight: 700; color: var(--c-text); }
.header h1 i { color: var(--primary); margin-left: 8px; }
.header-subtitle { font-size: 0.8rem; color: var(--text-dim); }

.sidebar {
  grid-row: 2;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--glass-border);
  overflow-y: auto;
  min-height: 0;
  height: 100%;
}
.nav-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  text-align: right;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-btn i { width: 20px; text-align: center; font-size: 1rem; }
.nav-btn:hover { background: var(--c-nav-hover-bg); color: var(--c-nav-text-hover); }
.nav-btn.active { background: var(--c-nav-active-bg); color: var(--c-nav-active-text); }

/* ===== Main Content ===== */
.content {
  grid-row: 2;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  min-width: 0;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-content h2 { font-size: 1.2rem; margin-bottom: 20px; color: var(--c-text); }

/* ===== Cards ===== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.form-row > * { flex: 1; min-width: 140px; }

input, select, textarea {
  background: var(--c-surface);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--c-text);
  font-size: 0.85rem;
  font-family: inherit;
  transition: var(--transition);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary);
  background: var(--c-surface);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
select { cursor: pointer; }
select option { background: var(--c-surface); color: var(--c-text); }
textarea { resize: vertical; min-height: 60px; }

/* Message bodies of the scheduler / instant send: a real writing area instead of a
   3-line box (the owner types whole posts here), and the scheduler's Shamsi date is a
   select so a day can be picked, never typed. */
.msg-body {
  width: 100%;
  min-height: 220px;
  line-height: 1.9;
}

.sched-date { min-width: 190px; }

/* Weekly recurrence (AC-1): the weekday picker of the scheduler and the repeat marker of
   the calendar chips. A ticking badge the owner can read at a glance. */
.repeat-row { align-items: center; }
.repeat-once { display: inline-flex; align-items: center; gap: 8px; }
.repeat-once input { accent-color: var(--primary); }
.repeat-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.repeat-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--card-bg);
  font-size: 0.85rem;
  cursor: pointer;
}
.repeat-day input { accent-color: var(--primary); cursor: pointer; }
.repeat-day:has(input:checked) { border-color: var(--primary); color: var(--primary); }
.repeat-day:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.repeat-day input:disabled { cursor: not-allowed; }
.cal-chip.is-repeat { border-inline-start: 3px solid var(--primary); }
.cal-chip.is-virtual { border-style: dashed; opacity: 0.9; }

/* ===== Buttons ===== */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-success { background: var(--c-ok); color: var(--c-on-primary); }
.btn-success:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-danger { background: var(--c-crit); color: var(--c-on-primary); }
.btn-danger:hover { filter: brightness(1.1); }
.btn-sm { padding: 6px 12px; font-size: 0.75rem; border-radius: 8px; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text);
}

/* ===== Platform Cards ===== */
.platform-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.platform-card {
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  transition: var(--transition);
}
.platform-card:hover { border-color: var(--primary); }
.platform-card h3 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.platform-card .form-group { margin-bottom: 10px; }
.platform-card .form-group label { display: block; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px; }
.platform-card .form-group input { width: 100%; }

/* ===== Data Table ===== */
/* Wide tables scroll inside their card (styled bar) instead of widening the page. */
.data-table { margin-top: 16px; overflow-x: auto; }
.table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table th {
  background: var(--c-surface-2);
  padding: 10px 14px;
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}
.table td {
  padding: 10px 14px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--c-border);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--c-surface-2); }

/* ===== Channel Checkbox Group ===== */
.channel-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.channel-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface-2);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  transition: var(--transition);
}
.channel-checkbox-group label:hover {
  background: var(--c-surface);
}
.channel-checkbox-group input[type="checkbox"] {
  accent-color: var(--primary);
}

/* ===== Badge / Status ===== */
.status-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
}
.status-badge.active { background: var(--c-ok-soft); color: var(--c-ok-text); }
.status-badge.inactive { background: var(--c-crit-soft); color: var(--c-crit-text); }
.status-badge.pending { background: var(--c-warn-soft); color: var(--c-warn-text); }
.status-badge.success { background: var(--c-ok-soft); color: var(--c-ok-text); }
.status-badge.failed { background: var(--c-crit-soft); color: var(--c-crit-text); }

.hint { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 16px; }

/* ===== Login Page ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 28px;
  border-radius: var(--radius);
}
.login-card h1, .login-card h2 { font-size: 1.1rem; margin-bottom: 8px; color: var(--c-text); display: flex; align-items: center; gap: 8px; }
.login-card .hint { margin-bottom: 18px; }
.login-card .form-group { margin-bottom: 14px; }
.login-card .form-group label { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.login-card input { width: 100%; }
.error { color: var(--danger); padding: 10px 0; text-align: center; font-size: 0.85rem; }

/* ===== Header user area ===== */
.header-user { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  .sidebar {
    grid-row: 2;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 12px;
    border-left: none;
    border-bottom: 1px solid var(--glass-border);
    gap: 4px;
  }
  .nav-btn {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.75rem;
  }
  .content {
    grid-row: 3;
    padding: 16px;
  }
  .form-row > * { min-width: 100%; }
  .platform-cards { grid-template-columns: 1fr; }
/* ===== Dashboard (owner-scoped reports) ===== */
.dash-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.dash-filters select { flex: 1; min-width: 130px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-card { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--card-bg); }
.kpi-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; }
.kpi-value { font-size: 1.6rem; font-weight: 700; }
.kpi-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; }
.chart-wrap { margin-top: 12px; overflow-x: auto; display: flex; align-items: center; min-height: 200px; }
.chart-wrap svg { display: block; max-width: none; }
/* Side-by-side analytics on desktop; stacked on mobile (see media query). */
.dash-cols > .card { min-width: 0; }
.legend { display: flex; gap: 16px; font-size: 0.78rem; color: var(--text-dim); margin-top: 8px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.82rem; }
.bar-label { width: 70px; color: var(--text-dim); flex: none; }
.bar-track { flex: 1; height: 12px; background: var(--card-bg); border-radius: 8px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); }
.bar-value { width: 140px; text-align: end; flex: none; }
.bar-value small { color: var(--text-dim); }
.dash-empty { color: var(--text-dim); text-align: center; padding: 20px; }
@media (max-width: 768px) {
  .bar-label { width: 56px; }
  .bar-value { width: 110px; font-size: 0.75rem; }
  .kpi-value { font-size: 1.3rem; }
}
}

/* ===== Connection guide ===== */
.guide-status { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--glass-border); background: var(--card-bg); }
.guide-status-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.guide-status-note { color: var(--text-dim); font-size: 0.78rem; }
.guide-chip { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--glass-border); }
.guide-chip.ok { color: var(--success); border-color: var(--success); }
.guide-chip.off { color: var(--text-dim); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.guide-card { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--card-bg); }
.guide-card h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.guide-steps { padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; line-height: 1.8; }
.guide-steps code { background: var(--c-bg-sunken); color: var(--c-text); padding: 1px 6px; border-radius: 6px; font-size: 0.78rem; direction: ltr; display: inline-block; }
.guide-copy { margin-inline-start: 6px; }
.guide-note { margin-top: 10px; font-size: 0.78rem; color: var(--text-dim); border-inline-start: 3px solid var(--primary); padding-inline-start: 10px; }
/* ===== Desktop refinements (>= 1024px) =====
   The dashboard was designed mobile-first: on a wide screen the KPI cards, the
   filter row and the chart stretched to the full width and looked unbalanced.
   These rules give the desktop view a proper grid, a measured filter row and a
   chart that fills the card (and scrolls inside it when there are many bars). */
@media (min-width: 1024px) {
  .content { padding: 28px 32px; }
  .tab-content h2 { font-size: 1.35rem; margin-bottom: 24px; }

  .dash-filters { gap: 12px; }
  .dash-filters select { flex: 0 1 190px; }
  .dash-filters .btn { margin-inline-start: auto; }

  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kpi-card { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; min-height: 108px; }
  .kpi-label { font-size: 0.85rem; }
  .kpi-value { font-size: 2rem; line-height: 1.15; }
  .kpi-sub { font-size: 0.75rem; }

  .dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .dash-cols > .card { margin-bottom: 20px; }

  .chart-wrap { min-height: 240px; }
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-steps { font-size: 0.88rem; line-height: 1.9; }
  .guide-card { padding: 20px 22px; }

  .platform-cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

@media (min-width: 1500px) {
  .kpi-grid { gap: 20px; }
  .kpi-card { padding: 22px 24px; min-height: 120px; }
  .kpi-value { font-size: 2.2rem; }
}
/* ===== News agent (خبرخوان هوشمند) ===== */
.news-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--text-dim);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.news-details { margin: 10px 0; }
.news-details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.tabs-mini { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#tab-news textarea {
  width: 100%;
  min-height: 84px;
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--c-surface);
  color: inherit;
  border: 1px solid var(--c-border-strong);
}
#tab-news select[multiple] { min-height: 96px; }
#tab-news h3 { margin: 0 0 10px; font-size: 1rem; }

/* ==========================================================================
   ===== DESIGN SYSTEM v2 - Modern SaaS UI (AC-3) ===========================
   An additive layer: nothing above this line was removed or renamed, so every
   existing selector (and the wiring checks that pin them) keeps working. New
   features (collapsible sidebar, contextual sidebar, resizable panes, command
   palette, KPI/feed/gauge components) are defined here.
   ========================================================================== */
:root {
  /* spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* elevation */
  --e1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --e2: 0 6px 18px rgba(0, 0, 0, 0.32);
  --e3: 0 18px 48px rgba(0, 0, 0, 0.42);

  /* type scale */
  --t-xs: 0.72rem; --t-sm: 0.8rem; --t-md: 0.88rem;
  --t-lg: 1rem;    --t-xl: 1.25rem; --t-2xl: 1.6rem; --t-3xl: 2.1rem;

  /* brand accents */
  --accent-2: #00cec9;
  --grad-brand: linear-gradient(135deg, #6c5ce7 0%, #4b3fb5 60%, #00b894 140%);
  --grad-bar: linear-gradient(90deg, var(--primary), var(--accent-2));
  --ring: 0 0 0 3px rgba(108, 92, 231, 0.45);

  /* semantic tones (ok / warn / critical) with soft fills */
  --ok: #00b894;   --ok-soft: rgba(0, 184, 148, 0.14);
  --warn: #fdcb6e; --warn-soft: rgba(253, 203, 110, 0.14);
  --crit: #e17055; --crit-soft: rgba(225, 112, 85, 0.14);

  /* shell geometry - the DOM writes these vars while the user resizes */
  --nav-w: 240px;
  --nav-w-collapsed: 76px;
  --ctx-w: 300px;
  --pane-a: 58%;
  --pane-b: 42%;
  --gutter: 10px;
}

/* ===== Shell: header + collapsible nav + workspace + contextual sidebar ===== */
.dashboard {
  grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--ctx-w);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
}
.dashboard.collapsed { --nav-w: var(--nav-w-collapsed); }
.dashboard.no-ctx { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.dashboard.no-ctx .context-panel { display: none; }

/* The nav toggle sits in the header and is the only control of its own state. */
.sidebar-toggle {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
  flex: none;
}
.sidebar-toggle:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* Nav labels collapse to icons; the tooltip keeps them discoverable (AC-13). */
.nav-btn, .nav-link {
  position: relative;
  overflow: visible;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
}
.nav-link {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  text-align: right;
  transition: var(--transition);
  display: flex; align-items: center; gap: 10px;
}
.nav-link:hover { background: var(--c-nav-hover-bg); color: var(--c-nav-text-hover); }
.dashboard.collapsed .nav-btn,
.dashboard.collapsed .nav-link { justify-content: center; padding-inline: 0; }
.dashboard.collapsed .nav-btn .nav-text,
.dashboard.collapsed .nav-link .nav-text { display: none; }
.dashboard.collapsed .nav-btn::after,
.dashboard.collapsed .nav-link::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-nav-bg);
  color: var(--c-nav-active-text);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  box-shadow: var(--e2);
  padding: 5px 10px;
  font-size: var(--t-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 40;
}
.dashboard.collapsed .nav-btn:hover::after,
.dashboard.collapsed .nav-link:hover::after { opacity: 1; }

/* ===== Contextual sidebar (AC-14): the panel reflects the active tab ===== */
.context-panel {
  grid-row: 2;
  padding: 16px 14px;
  border-inline-start: 1px solid var(--glass-border);
  overflow-y: auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.ctx-title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-text);
  display: flex; align-items: center; gap: var(--s2);
}
.ctx-title i { color: var(--primary); }
.ctx-note { font-size: var(--t-xs); color: var(--text-dim); line-height: 1.9; }
.ctx-actions { display: flex; flex-direction: column; gap: 6px; }
.ctx-action {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--c-surface-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-sm);
  padding: 9px 12px;
  cursor: pointer;
  text-align: right;
  transition: var(--transition);
}
.ctx-action:hover { background: var(--c-primary); color: var(--c-on-primary); border-color: transparent; }
.ctx-action i { width: 18px; text-align: center; color: var(--primary); }
.ctx-action:hover i { color: var(--c-on-primary); }


/* ===== Section header / hero (product dashboard, AC-4) ===== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.section-head h2 { margin-bottom: 0 !important; }
.section-sub { font-size: var(--t-sm); color: var(--text-dim); margin-top: 4px; }
.hero {
  background: var(--grad-brand);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--e2);
  padding: var(--s6);
  margin-bottom: var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.hero h2 { font-size: var(--t-xl); color: var(--c-on-primary); margin: 0 0 6px; }
.hero p { font-size: var(--t-sm); color: color-mix(in srgb, var(--c-on-primary) 86%, transparent); margin: 0; line-height: 1.9; }
.hero-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero .btn-outline { background: color-mix(in srgb, var(--c-on-primary) 14%, transparent); border-color: color-mix(in srgb, var(--c-on-primary) 35%, transparent); color: var(--c-on-primary); }

/* ===== Segmented control (product vs analytics view) ===== */
.segmented {
  display: inline-flex;
  background: var(--c-bg-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--t-sm);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--c-shadow-sm); }

/* ===== KPI cards v2 (AC-6) ===== */
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 3px;
  background: var(--grad-bar);
  opacity: 0.85;
}
.kpi-card.tone-ok::before { background: var(--ok); }
.kpi-card.tone-warn::before { background: var(--warn); }
.kpi-card.tone-crit::before { background: var(--crit); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.kpi-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-primary-soft-2);
  color: var(--primary);
  flex: none;
}
.kpi-card.tone-ok .kpi-icon { background: var(--ok-soft); color: var(--ok); }
.kpi-card.tone-warn .kpi-icon { background: var(--warn-soft); color: var(--warn); }
.kpi-card.tone-crit .kpi-icon { background: var(--crit-soft); color: var(--crit); }
.kpi-row { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.kpi-delta { font-size: var(--t-xs); display: inline-flex; align-items: center; gap: 4px; }
.kpi-delta.up { color: var(--ok); }
.kpi-delta.down { color: var(--crit); }
.kpi-delta.flat { color: var(--text-dim); }
.kpi-unit { font-size: var(--t-sm); color: var(--text-dim); font-weight: 500; }
.kpi-spark { display: block; margin-top: var(--s2); width: 100%; height: 28px; }
.kpi-spark path { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kpi-foot { font-size: var(--t-xs); color: var(--text-dim); margin-top: var(--s2); }

/* ===== Chips / badges ===== */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  font-size: var(--t-xs);
  white-space: nowrap;
  color: var(--text-dim);
}
.chip.ok   { color: var(--c-ok-text);   border-color: color-mix(in srgb, var(--c-ok) 45%, transparent);   background: var(--c-ok-soft); }
.chip.warn { color: var(--c-warn-text); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); background: var(--c-warn-soft); }
.chip.crit { color: var(--c-crit-text); border-color: color-mix(in srgb, var(--c-crit) 45%, transparent);  background: var(--c-crit-soft); }


/* ===== Activity feed (AC-8) ===== */
.feed { position: relative; margin-top: var(--s2); }
.feed::before {
  content: '';
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 9px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), transparent);
  opacity: 0.5;
}
.feed-item { display: flex; gap: var(--s3); padding: 10px 0; position: relative; }
.feed-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6rem;
  background: var(--ok-soft);
  color: var(--ok);
  border: 2px solid var(--bg);
  z-index: 1;
}
.feed-dot.failed { background: var(--crit-soft); color: var(--crit); }
.feed-body { min-width: 0; flex: 1; }
.feed-title { font-size: var(--t-md); color: var(--text); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.feed-meta { font-size: var(--t-xs); color: var(--text-dim); margin-top: 3px; }
.feed-text {
  font-size: var(--t-sm);
  color: var(--text-dim);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Process gauge (command centre - AC-1 / AC-9) ===== */
.gauge { margin-top: var(--s2); }
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.gauge-value { font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; }
.gauge-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  overflow: hidden;
  margin: var(--s2) 0;
}
.gauge-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ok); transition: width 0.4s ease; }
.gauge-fill.warn { background: var(--warn); }
.gauge-fill.crit { background: var(--crit); }
.gauge-foot { font-size: var(--t-xs); color: var(--text-dim); line-height: 1.9; }

/* ===== Stat list ===== */
.stat-list { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.stat-row + .stat-row { border-top: 1px dashed var(--c-border); }
.stat-row:hover { background: var(--c-surface-2); }
.stat-key { color: var(--text-dim); display: flex; align-items: center; gap: var(--s2); }
.stat-val { font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ===== Empty / loading states ===== */
.empty-state {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-dim);
  border: 1px dashed var(--glass-border);
  border-radius: var(--r-lg);
  font-size: var(--t-sm);
  line-height: 2;
}
.empty-state i { font-size: 1.6rem; display: block; margin-bottom: var(--s2); color: var(--primary); opacity: 0.7; }
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--c-bg-sunken) 25%, var(--c-surface-2) 37%, var(--c-bg-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  min-height: 14px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }


/* ===== Command palette (AC-15) ===== */
.cmd-backdrop {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 900;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
}
.cmd-backdrop.open { display: flex; }
.cmd-palette {
  width: min(620px, 100%);
  background: var(--c-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--e3);
  overflow: hidden;
  animation: cmdIn 0.16s ease;
}
@keyframes cmdIn { from { opacity: 0; transform: translateY(-10px) scale(0.99); } to { opacity: 1; transform: none; } }
.cmd-input-row { display: flex; align-items: center; gap: var(--s3); padding: 14px 18px; border-bottom: 1px solid var(--glass-border); }
.cmd-input-row i { color: var(--primary); }
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-lg);
  padding: 0;
}
.cmd-hint { font-size: var(--t-xs); color: var(--text-dim); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 2px 6px; }
.cmd-list { max-height: min(58vh, 460px); overflow-y: auto; padding: 8px; }
.cmd-group { font-size: var(--t-xs); color: var(--text-dim); padding: 8px 12px 4px; letter-spacing: 0.02em; }
.cmd-item {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-md);
  text-align: right;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.cmd-item i { width: 18px; text-align: center; color: var(--primary); }
.cmd-item .cmd-scope { margin-inline-start: auto; font-size: var(--t-xs); color: var(--text-dim); }
.cmd-item.active, .cmd-item:hover { background: var(--c-primary); color: var(--c-on-primary); }
.cmd-item.active i, .cmd-item:hover i, .cmd-item.active .cmd-scope, .cmd-item:hover .cmd-scope { color: var(--c-on-primary); }
.cmd-empty { padding: 18px; text-align: center; color: var(--text-dim); font-size: var(--t-sm); }
.cmd-foot { padding: 8px 14px; border-top: 1px solid var(--glass-border); font-size: var(--t-xs); color: var(--text-dim); display: flex; gap: var(--s4); flex-wrap: wrap; }

/* ===== Workspace: multi-panel + resizable gutter (AC-10 / AC-11 / AC-12) ===== */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, var(--pane-a)) minmax(0, var(--pane-b));
  gap: 0;
  align-items: start;
  margin-bottom: var(--s4);
}
.workspace > .pane { min-width: 0; }
.pane-gutter {
  display: none;
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  border: none;
  padding: 0;
}
.pane-gutter::before {
  content: '';
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--glass-border);
  transition: background var(--transition), width var(--transition);
}
.pane-gutter:hover::before, .pane-gutter.dragging::before { background: var(--primary); width: 5px; }
body.pane-resizing { cursor: col-resize; user-select: none; }
body.pane-resizing * { cursor: col-resize !important; }
/* The gutter only makes sense with a mouse; on touch it would fight scrolling. */
@media (min-width: 1024px) {
  .workspace { grid-template-columns: minmax(320px, var(--pane-a)) var(--gutter) minmax(280px, var(--pane-b)); }
  .pane-gutter { display: block; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .kpi-card { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; min-height: 112px; }
  .kpi-value { font-size: var(--t-2xl); line-height: 1.15; }
  .dash-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chart-wrap { min-height: 240px; }
}
@media (max-width: 1100px) {
  .dashboard.no-ctx { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .context-panel { display: none; }
  .dashboard { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .workspace { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Accessibility helpers ===== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ===== Dashboard view switch (AC-4 product / AC-5 analytics) ===== */
#tab-dashboard[data-view="product"] .analytics-only { display: none; }
#tab-dashboard[data-view="analytics"] .product-only { display: none; }

/* ===== Donut + legend rows (analytics) ===== */
.donut-wrap { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s2); }
.donut-legend { display: flex; flex-direction: column; gap: 6px; }
.legend-row { font-size: var(--t-sm); color: var(--text-dim); display: flex; align-items: center; gap: var(--s2); }
.legend-row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-row strong { color: var(--text); }


/* ===== Trend chart internals (AC-7) ===== */
.chart-grid { stroke: var(--c-chart-grid); stroke-width: 1; }
.chart-axis { fill: var(--text-dim); font-size: 9px; font-family: 'Vazirmatn', sans-serif; direction: rtl; }
.chart-total { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--c-chart-1); stroke: var(--c-surface); stroke-width: 1.5; }


/* ==========================================================================
   ===== Shell placement fix ================================================
   The three-column shell only declared `grid-row`, so CSS auto-placement followed
   DOM order (header, sidebar, context-panel, content) and filled the row left to
   right: the context panel took the WIDE `minmax(0, 1fr)` column and `.content`
   was pushed into the fixed `--ctx-w` (300px) column. In RTL that put the whole
   dashboard/mainContent area at the far left and squeezed it, while the contextual
   panel grew. Each item now states its own column.
   ========================================================================== */
.sidebar { grid-column: 1; grid-row: 2; }
.content { grid-column: 2; grid-row: 2; }
.context-panel { grid-column: 3; grid-row: 2; }

/* Tablet: the contextual panel is not shown, so the shell is exactly two columns
   [nav | content] and the content must stay in the wide one. */
@media (max-width: 1100px) {
  .context-panel { display: none; }
  .dashboard,
  .dashboard.no-ctx { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .content { grid-column: 2; }
}

/* Phone: one column with the nav as a horizontal strip above the content. This is
   the original mobile layout, re-stated AFTER the desktop rules above (they would
   otherwise win, because they come later in the file than the first mobile block). */
@media (max-width: 768px) {
  .dashboard,
  .dashboard.no-ctx { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .sidebar {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 12px;
    border-left: none;
    border-bottom: 1px solid var(--glass-border);
  }
  .nav-btn, .nav-link { white-space: nowrap; padding: 8px 12px; font-size: 0.75rem; }
  .content { grid-column: 1; grid-row: 3; }
  /* A collapsed state carried over from a wide screen must not hide labels here. */
  .dashboard.collapsed .nav-btn,
  .dashboard.collapsed .nav-link { justify-content: flex-start; padding-inline: 12px; }
  .dashboard.collapsed .nav-btn .nav-text,
  .dashboard.collapsed .nav-link .nav-text { display: inline; }
  .dashboard.collapsed .nav-btn::after,
  .dashboard.collapsed .nav-link::after { display: none; }
}


/* ---------- Media library tab (AC-1) ---------- */
.media-usage { margin-bottom: var(--s4, 16px); }
.media-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.media-bar {
  height: 10px;
  border-radius: var(--r-pill, 999px);
  background: var(--c-surface-2);
  overflow: hidden;
}
.media-bar-fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill, 999px);
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width 0.3s ease;
}
.media-bar-fill.warn { background: linear-gradient(90deg, var(--warning), var(--danger)); }
.media-bar-fill.full { background: linear-gradient(90deg, var(--danger), var(--danger)); }
.media-drop {
  border: 2px dashed var(--glass-border);
  border-radius: var(--r-lg, 16px);
  padding: var(--s5, 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: var(--transition, 0.3s ease);
}
.media-drop.over {
  border-color: var(--primary);
  background: var(--c-surface-2);
}
.media-drop > i { font-size: 1.8rem; opacity: 0.85; }
.media-drop input[type="file"] { display: none; }
.media-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
  font-size: 0.72rem;
  background: var(--c-surface-2);
  color: var(--text);
}

/* ---------- Media selection / bulk actions (AC-2) ---------- */
.media-select-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s3, 12px);
  margin-top: var(--s4, 16px);
}
.media-select-bar .hint { margin: 0; }
.media-select-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2, 8px);
}
.media-select-row select {
  flex: 0 1 180px;
}
.media-check-col {
  width: 44px;
  text-align: center;
}
.media-check-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.media-row-check { accent-color: var(--primary); }
.media-row-selected {
  background: var(--c-bg-sunken);
  /* RTL: the accent marks the row's START, i.e. its right edge. */
  box-shadow: inset -3px 0 0 var(--primary);
}

/* ---------- Price preview + schedules (AC-2) ---------- */
.price-preview {
  margin-top: var(--s4, 16px);
  padding: var(--s4, 16px);
  border-radius: var(--r-md, 12px);
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 24px;
}
.price-preview:empty { display: none; }

/* ===== Forex calendar (تقویم فارکس) ===== */
.forex-impacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0;
}
.forex-impact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}
.forex-note {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin: 2px 0 10px;
}
.forex-armed {
  color: var(--c-warn-text);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---------- Message calendar (AC-3) ---------- */
.sched-cal-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3, 12px);
  margin-bottom: var(--s4, 16px);
}
.sched-cal-head h3 { margin: 0; }
.cal-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-title { font-weight: 600; min-width: 150px; text-align: center; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { margin-bottom: 6px; }
.cal-weekday {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 4px 0;
}
.cal-cell {
  min-height: 84px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-cell.empty { background: transparent; border-style: dashed; opacity: 0.35; }
.cal-cell.has { border-color: var(--primary); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--success); }
.cal-daynum {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cal-count {
  font-size: 0.68rem;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--r-pill, 999px);
  padding: 0 6px;
}
.cal-chip {
  display: block;
  width: 100%;
  text-align: start;
  font-size: 0.72rem;
  line-height: 1.6;
  padding: 3px 6px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition, 0.3s ease);
}
.cal-chip:hover { border-color: var(--c-primary); background: var(--c-primary-soft-2); }
.cal-more { font-size: 0.68rem; color: var(--text-dim); }
.cal-week { display: flex; flex-direction: column; gap: 8px; }
.cal-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--glass-border);
  background: var(--c-surface-2);
}
.cal-row.today { box-shadow: inset 0 0 0 2px var(--success); }
.cal-rowday { font-size: 0.8rem; color: var(--text-dim); }
.cal-rowitems { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-rowitems .cal-chip { width: auto; }

@media (max-width: 768px) {
  .cal-row { grid-template-columns: 1fr; }
  .cal-cell { min-height: 64px; }
}




/* ===== Smart news crawler (TASK 4) ===== */
.crawler-card { position: relative; overflow: hidden; }
.crawler-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), var(--success), transparent); opacity: .8; }
.crawler-card-head, .card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.crawler-card-head h3 { margin-block-start: var(--s2); }
.eyebrow { color: var(--primary); font-size: var(--t-xs); letter-spacing: .04em; }
.crawler-status { color: var(--success); font-size: var(--t-xs); white-space: nowrap; }
.crawler-form { align-items: end; }
.crawler-form label { display: grid; gap: var(--s1); color: var(--text-dim); font-size: var(--t-xs); flex: 1 1 170px; }
.crawler-options { gap: var(--s4); margin-block: var(--s3); }
.check-row { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-dim); font-size: var(--t-sm); }
.crawler-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.crawler-preview { margin-block-start: var(--s3); }
.crawler-preview-head { display: flex; justify-content: space-between; gap: var(--s3); color: var(--text-dim); font-size: var(--t-sm); }
.crawler-link-list { display: grid; gap: var(--s2); margin-block-start: var(--s3); padding-inline-start: 0; list-style: none; }
.crawler-link-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2); border: 1px solid var(--glass-border); border-radius: var(--r-sm); background: var(--card-bg); transition: transform var(--transition), border-color var(--transition); }
.crawler-link-list li:hover { transform: translateY(-2px); border-color: var(--primary); }
.crawler-link-list strong, .crawler-link-list a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crawler-link-list a { color: var(--text-dim); font-size: var(--t-xs); margin-block-start: var(--s1); }
.crawler-rank, .crawler-score { color: var(--primary); font-variant-numeric: tabular-nums; }
.crawler-empty { padding: var(--s4); color: var(--text-dim); text-align: center; border: 1px dashed var(--glass-border); border-radius: var(--r-sm); }
.crawler-table td { vertical-align: middle; }
.crawler-table td a { display: block; color: var(--text-dim); font-size: var(--t-xs); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crawler-error { display: block; color: var(--danger); max-width: 230px; margin-block-start: var(--s1); }
.nowrap { white-space: nowrap; }
@media (max-width: 768px) {
  .crawler-card-head, .card-title-row { align-items: stretch; flex-direction: column; }
  .crawler-preview-head { flex-direction: column; }
  .crawler-table { min-width: 680px; }
  .crawler-table-card .data-table { overflow-x: auto; }
}
/* =====================================================================
   COLOR SYSTEM v1 — Social Center  (COLOR_SYSTEM.md §8 / §9 / §13)
   Additive layer: no selector or class above was removed or renamed.
   Legacy token names are re-pointed at the new semantic tokens (§9) so
   every existing rule keeps working; the bridge rules after the alias
   replace legacy hard-coded whites that would be unreadable on the new
   light surfaces. Component-level migration continues in later tasks.
   ===================================================================== */
:root {
  color-scheme: light;

  /* --- Brand ramp --- */
  --c-brand-50:  #EEF3FF;
  --c-brand-100: #DCE6FF;
  --c-brand-200: #BBCFFF;
  --c-brand-300: #8EAEFF;
  --c-brand-400: #5F87FA;
  --c-brand-500: #3A64F0;
  --c-brand-600: #2A4ED6;
  --c-brand-700: #223FB0;
  --c-brand-800: #1E3589;
  --c-brand-900: #1B2D6B;
  --c-brand-950: #121C45;

  /* --- Surfaces & lines --- */
  --c-bg:            #F5F7FB;
  --c-bg-sunken:     #EDF1F8;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #F9FAFD;
  --c-border:        #E3E8F1;
  --c-border-strong: #CBD3E1;
  --c-overlay:       rgba(15, 23, 42, .55);
  --c-grid-line:     rgba(42, 78, 214, .055);

  /* --- Text --- */
  --c-text:          #0F172A;
  --c-text-2:        #475569;
  --c-text-3:        #5B6A82;
  --c-text-disabled: #94A3B8;
  --c-on-primary:    #FFFFFF;

  /* --- Primary --- */
  --c-primary:         var(--c-brand-600);
  --c-primary-hover:   var(--c-brand-700);
  --c-primary-press:   var(--c-brand-800);
  --c-primary-soft:    var(--c-brand-50);
  --c-primary-soft-2:  var(--c-brand-100);
  --c-primary-text:    var(--c-brand-700);
  --c-link:            var(--c-brand-600);

  /* --- CTA فروش (کمیاب!) --- */
  --c-cta:           #FF8A1F;
  --c-cta-hover:     #F57A0A;
  --c-cta-press:     #E06A00;
  --c-cta-text:      #1F1300;
  --c-cta-soft:      #FFF1E3;
  --c-cta-soft-text: #8A3B00;

  /* --- Semantic --- */
  --c-ok:        #15803D;  --c-ok-soft:   #E7F7EC;  --c-ok-text:   #166534;
  --c-warn:      #F2A900;  --c-warn-soft: #FFF4D6;  --c-warn-text: #8A5A00;
  --c-crit:      #D92D20;  --c-crit-soft: #FDECEA;  --c-crit-text: #B42318;
  --c-info:      #0E8FCB;  --c-info-soft: #E5F4FC;  --c-info-text: #0B6A9A;

  /* --- Navigation (سرمه‌ای؛ در هر دو تم) --- */
  --c-nav-bg:          #101B45;
  --c-nav-border:      rgba(255, 255, 255, .08);
  --c-nav-text:        #B9C4E6;
  --c-nav-text-hover:  #FFFFFF;
  --c-nav-hover-bg:    rgba(255, 255, 255, .06);
  --c-nav-active-bg:   rgba(255, 255, 255, .10);
  --c-nav-active-text: #FFFFFF;
  --c-nav-indicator:   var(--c-brand-300);

  /* --- Platforms --- */
  --c-plat-telegram: #1B8FD0;
  --c-plat-bale:     #0F9D6B;
  --c-plat-eitaa:    #D9610C;
  --c-plat-rubika:   #7A4FE0;

  /* --- Charts --- */
  --c-chart-1: #2A4ED6;  --c-chart-2: #0FA3A3;  --c-chart-3: #8B5CF6;
  --c-chart-4: #16A34A;  --c-chart-5: #D99A00;  --c-chart-6: #DB4F8A;
  --c-chart-grid: #E3E8F1;
  --c-chart-axis: #5B6A82;

  /* --- Effects & motion --- */
  --c-ring:        0 0 0 3px rgba(42, 78, 214, .30);
  --c-shadow-sm:   0 1px 2px rgba(15, 23, 42, .06);
  --c-shadow-md:   0 4px 14px rgba(15, 23, 42, .08);
  --c-shadow-lg:   0 12px 32px rgba(15, 23, 42, .14);
  --c-ease:        cubic-bezier(.2, .8, .2, 1);
  --c-dur:         180ms;
  --c-brand-gradient: linear-gradient(135deg, #2A4ED6 0%, #3A64F0 55%, #5F87FA 100%);
  --c-hero-gradient:  linear-gradient(135deg, #121C45 0%, #1E3589 55%, #2A4ED6 100%);
  --c-cta-gradient:   linear-gradient(135deg, #FF9A33 0%, #FF7A00 100%);
}

/* ------------------------- Dark theme ------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:            #0B1020;
  --c-bg-sunken:     #080C18;
  --c-surface:       #121A33;
  --c-surface-2:     #172143;
  --c-border:        #243056;
  --c-border-strong: #33426F;
  --c-overlay:       rgba(0, 0, 0, .65);
  --c-grid-line:     rgba(124, 155, 255, .07);

  --c-text:          #E8ECF6;
  --c-text-2:        #A6B0C8;
  --c-text-3:        #8792AD;
  --c-text-disabled: #5D6A8C;

  --c-primary:        var(--c-brand-500);
  --c-primary-hover:  var(--c-brand-400);
  --c-primary-press:  var(--c-brand-600);
  --c-primary-soft:   #1B2754;
  --c-primary-soft-2: #243472;
  --c-primary-text:   #B4C6FF;
  --c-link:           #7C9BFF;

  --c-cta-soft:      #3A2108;
  --c-cta-soft-text: #FFC58A;

  --c-ok:   #4ADE80;  --c-ok-soft:   #10321F;  --c-ok-text:   #86EFAC;
  --c-warn: #FBC548;  --c-warn-soft: #3A2C08;  --c-warn-text: #FCD579;
  --c-crit: #FF8A80;  --c-crit-soft: #3B1517;  --c-crit-text: #FFB4AB;
  --c-info: #5CC8F5;  --c-info-soft: #0E2E40;  --c-info-text: #8ADBF8;

  --c-nav-bg:     #080D20;
  --c-nav-text:   #A9B5DA;

  --c-plat-telegram: #4DB3EE;
  --c-plat-bale:     #2DD4A0;
  --c-plat-eitaa:    #FF9A4D;
  --c-plat-rubika:   #A78BFA;

  --c-chart-1: #7C9BFF;  --c-chart-2: #2DD4D4;  --c-chart-3: #A78BFA;
  --c-chart-4: #4ADE80;  --c-chart-5: #FBC548;  --c-chart-6: #F472B6;
  --c-chart-grid: #243056;
  --c-chart-axis: #8792AD;

  --c-ring:      0 0 0 3px rgba(124, 155, 255, .40);
  --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --c-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --c-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
  --c-hero-gradient: linear-gradient(135deg, #0E1638 0%, #1B2D6B 55%, #2A4ED6 100%);
}

/* --- §9 alias: legacy token names -> new semantic tokens (last wins) --- */
:root {
  --bg:            var(--c-bg);
  --glass-bg:      var(--c-surface);
  --glass-border:  var(--c-border);
  --glass-shadow:  var(--c-shadow-sm);
  --primary:       var(--c-primary);
  --primary-hover: var(--c-primary-hover);
  --success:       var(--c-ok);
  --danger:        var(--c-crit);
  --warning:       var(--c-warn);
  --text:          var(--c-text);
  --text-dim:      var(--c-text-3);
  --card-bg:       var(--c-surface);
  --radius:        var(--r-md);
  --transition:    var(--c-dur) var(--c-ease);
  --ring:          var(--c-ring);
  --ok:            var(--c-ok);   --ok-soft:   var(--c-ok-soft);
  --warn:          var(--c-warn); --warn-soft: var(--c-warn-soft);
  --crit:          var(--c-crit); --crit-soft: var(--c-crit-soft);
  --e1:            var(--c-shadow-sm);
  --e2:            var(--c-shadow-md);
  --e3:            var(--c-shadow-lg);
  --accent-2:      var(--c-chart-2);
  --grad-brand:    var(--c-brand-gradient);
  /* legacy names referenced by newsroom.css / news.css with hard-coded fallbacks */
  --brand:         var(--c-primary);
  --muted:         var(--c-text-3);
}

/* --- §5/§10 bridge: frame, surfaces, controls, states --- */

/* Atmospheric background + grid pattern (replaces the old dark gradient). */
.glass-bg {
  background:
    radial-gradient(58% 46% at 88% 0%, color-mix(in srgb, var(--c-brand-200) 55%, transparent), transparent 72%),
    radial-gradient(46% 40% at 0% 100%, color-mix(in srgb, var(--c-brand-100) 60%, transparent), transparent 72%),
    linear-gradient(var(--c-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px),
    var(--c-bg);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
}
.glass-bg::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--c-brand-300) 20%, transparent), transparent 70%);
}
.glass-bg::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--c-plat-bale) 12%, transparent), transparent 70%);
}

/* Surfaces: background + hairline border instead of heavy blur. */
.glass,
.card,
.platform-card,
.kpi-card,
.guide-card,
.guide-status,
.table,
.crawler-link-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-sm);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.card, .platform-card, .guide-card { border-radius: var(--r-md); }

/* Header: transparent-looking surface with a hairline rule. */
.header {
  background: color-mix(in srgb, var(--c-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--c-border);
  box-shadow: none;
}
.header h1 { color: var(--c-text); font-size: 1.15rem; font-weight: 700; }
.header h1 i { color: var(--c-primary); }
.header-subtitle { color: var(--c-text-3); }

/* Navigation: navy frame, light labels, RTL-safe 3px start indicator. */
.sidebar {
  background: var(--c-nav-bg);
  border-left: 0;
  border-inline-end: 1px solid var(--c-nav-border);
}
.nav-btn,
.nav-link {
  color: var(--c-nav-text);
  border-radius: 10px;
  min-height: 40px;
}
.nav-btn:hover,
.nav-link:hover { background: var(--c-nav-hover-bg); color: var(--c-nav-text-hover); }
.nav-btn.active {
  background: var(--c-nav-active-bg);
  color: var(--c-nav-active-text);
}
.nav-btn.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--c-nav-indicator);
}
.nav-btn.active i { color: var(--c-nav-indicator); }
.dashboard.collapsed .nav-btn::after,
.dashboard.collapsed .nav-link::after {
  background: var(--c-nav-bg);
  color: var(--c-nav-active-text);
  border: 1px solid var(--c-nav-border);
}

/* Mission-grouped navigation (§nav): five life-cycle groups, one label each. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-end: var(--s2);
}
.nav-group + .nav-group {
  border-block-start: 1px solid var(--c-nav-border);
  padding-block-start: var(--s2);
}
.nav-group-label {
  padding: 6px 12px 2px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-nav-text);
  opacity: .75;
}
.dashboard.collapsed .nav-group-label { display: none; }
.dashboard.collapsed .nav-group + .nav-group { border-block-start: 0; padding-block-start: 0; }
@media (max-width: 768px) {
  .nav-group { flex-direction: row; flex-wrap: wrap; padding-block-end: 0; }
  .nav-group + .nav-group { border: 0; padding-block-start: 0; }
  .nav-group-label { display: none; }
}

/* Breadcrumb (§5): quiet, one level, always above the workspace. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-block-end: var(--s4);
  font-size: var(--t-sm);
  color: var(--c-text-3);
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  color: var(--c-text-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  padding: 2px 4px;
}
.breadcrumb a:hover { color: var(--c-primary-text); }
.breadcrumb .sep { font-size: .6rem; color: var(--c-text-disabled); }
.breadcrumb [aria-current="page"] { color: var(--c-text); font-weight: 500; }

.sidebar-toggle { background: transparent; color: var(--c-text-2); border-radius: 10px; }
.sidebar-toggle:hover { background: var(--c-primary); color: var(--c-on-primary); }

.context-panel { border-inline-start: 1px solid var(--c-border); }
.tab-content h2, .login-card h1, .login-card h2 { color: var(--c-text); }

/* Forms */
input, select, textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text);
  border-radius: 10px;
  min-height: 40px;
}
input:hover, select:hover, textarea:hover { border-color: var(--c-text-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: var(--c-ring);
}
input::placeholder, textarea::placeholder { color: var(--c-text-3); }
select option { background: var(--c-surface); color: var(--c-text); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--c-bg-sunken);
  color: var(--c-text-disabled);
  cursor: not-allowed;
}
textarea.msg-body, #tab-news textarea { background: var(--c-surface); }

/* Buttons (§10) */
.btn { min-height: 40px; border-radius: 10px; font-weight: 500; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-primary:active { background: var(--c-primary-press); }
.btn-success { background: var(--c-ok); color: var(--c-on-primary); }
.btn-success:hover { background: var(--c-ok); filter: brightness(1.06); }
.btn-danger { background: var(--c-crit); color: var(--c-on-primary); }
.btn-danger:hover { background: var(--c-crit); filter: brightness(1.06); }
.btn-outline {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text);
}
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary-text); }
.btn:disabled, .btn[disabled],
.btn.is-loading, .btn[aria-busy="true"] {
  background: var(--c-bg-sunken);
  border-color: var(--c-border);
  color: var(--c-text-disabled);
  cursor: not-allowed;
  transform: none;
}

/* Table (§10) */
.table { overflow: hidden; }
.table th {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border-bottom: 1px solid var(--c-border-strong);
}
.table td { border-bottom: 1px solid var(--c-border); color: var(--c-text); }
.table tr:hover td { background: var(--c-surface-2); }
.table { font-variant-numeric: tabular-nums; }

/* Chips & status: colour + soft fill + readable text (§6) */
.status-badge.active, .status-badge.success,
.chip.ok { background: var(--c-ok-soft); color: var(--c-ok-text); }
.status-badge.inactive, .status-badge.failed,
.chip.crit { background: var(--c-crit-soft); color: var(--c-crit-text); }
.status-badge.pending,
.chip.warn { background: var(--c-warn-soft); color: var(--c-warn-text); }
.guide-chip.ok { color: var(--c-ok-text); border-color: var(--c-ok); }
.news-chip { border-color: var(--c-border-strong); color: var(--c-text-2); }
.channel-checkbox-group label {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.channel-checkbox-group label:hover {
  background: var(--c-surface);
  border-color: var(--c-primary);
}
.guide-steps code { background: var(--c-bg-sunken); color: var(--c-text); }
.legend-row i, .legend i { border: 1px solid var(--c-border); }

/* Charts (§7) */
.chart-grid { stroke: var(--c-chart-grid); }
.chart-axis { fill: var(--c-chart-axis); }
.chart-total { stroke: var(--c-chart-1); }
.chart-dot { fill: var(--c-chart-1); stroke: var(--c-surface); }
.kpi-card { font-variant-numeric: tabular-nums; }
.kpi-delta.up { color: var(--c-ok-text); }
.kpi-delta.down { color: var(--c-crit-text); }
.kpi-delta.flat { color: var(--c-text-3); }

/* Scrollbars (§10) */
* { scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--c-border-strong); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); background-clip: content-box; }
::selection { background: var(--c-primary-soft-2); color: var(--c-text); }

/* Theme toggle (§13) */
.theme-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text-2);
  cursor: pointer;
  transition: color var(--c-dur) var(--c-ease), border-color var(--c-dur) var(--c-ease),
              background-color var(--c-dur) var(--c-ease);
}
.theme-toggle:hover { color: var(--c-primary-text); border-color: var(--c-primary); }
.theme-toggle:focus-visible { box-shadow: var(--c-ring); }
/* One-line switch between the login and signup cards. */
.auth-switch { margin: var(--s4) 0 0; text-align: center; }
.auth-switch a { color: var(--c-link); }
.auth-switch a:hover { color: var(--c-primary-text); }
/* Login page has no header: the toggle floats in the start corner. */
.theme-float { position: fixed; top: var(--s4); inset-inline-start: var(--s4); z-index: 20; }

/* --- Brand hub profile (TASK 6) --- */
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.field { display: grid; gap: var(--s1); flex: 1 1 220px; font-size: var(--t-xs); color: var(--c-text-2); }
.field > span { font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; }
.brand-profile h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-lg); color: var(--c-text); }
.brand-identity {
  margin-block: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.brand-identity summary { cursor: pointer; font-weight: 600; color: var(--c-text); margin-bottom: var(--s2); }
.brand-desc { font-size: var(--t-xs); color: var(--c-text-3); margin-top: 2px; }
.muted-cell { color: var(--c-text-disabled); }
.row-actions { display: flex; gap: var(--s1); flex-wrap: wrap; }
.brand-profile .check-row { margin-block: var(--s2) var(--s3); }
.brand-site { margin-block: var(--s3); padding-block-start: var(--s3); border-top: 1px solid var(--c-border); }
.brand-site h4 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: var(--t-md); color: var(--c-text); }
.brand-site-actions { display: flex; align-items: flex-end; gap: var(--s1); flex-wrap: wrap; }
.brand-site-actions > span { font-weight: 600; }
.brand-site-result { margin: var(--s2) 0 0; font-size: var(--t-sm); }
.brand-site-result.ok { color: var(--c-ok-text); }
.brand-site-result.err { color: var(--c-crit-text); }
.brand-guide { margin-block-start: var(--s2); padding: var(--s3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.brand-guide summary { cursor: pointer; font-weight: 600; color: var(--c-text); }
.brand-guide-list { margin: var(--s2) 0 0; padding-inline-start: var(--s5); display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--c-text-2); line-height: 1.8; }
.brand-guide-list code { background: var(--c-bg-sunken); padding: 1px 6px; border-radius: var(--r-sm); font-size: var(--t-xs); }

/* --- Message template layout + preview (TASK 8) --- */.tpl-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-block: var(--s2); }
.tpl-chips .btn { font-size: var(--t-xs); padding: 4px 10px; min-height: 32px; }
.tpl-preview-box {
  margin-block: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.tpl-preview-box summary { cursor: pointer; font-weight: 600; color: var(--c-text); }
.tpl-preview {
  margin: var(--s2) 0 0;
  padding: var(--s3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--t-sm);
  line-height: 1.9;
  color: var(--c-text);
  max-height: 260px;
  overflow: auto;
}
.tpl-preview.err { color: var(--c-crit-text); border-color: var(--c-crit); }

/* --- Unified send workspace (TASK 9) --- */
.send-switch { margin-block-end: var(--s4); }
.send-switch button { min-height: 40px; }
.send-switch button.active { color: var(--c-on-primary); }

/* --- Forwarder options + preview (TASK 10) --- */
.fwd-options { gap: var(--s4); align-items: center; }
.fwd-options .check-row { color: var(--c-text-2); }

/* --- Global AI settings (TASK 11) --- */
.ai-roles-title { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s1); font-size: var(--t-lg); color: var(--c-text); }
.ai-roles { display: grid; gap: var(--s1); margin-block: var(--s2) var(--s4); }
.ai-role-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 2fr) 110px 90px;
  gap: var(--s2);
  align-items: center;
}
.ai-role-row > span { font-size: var(--t-sm); color: var(--c-text-2); }
.ai-role-head > span { font-weight: 600; color: var(--c-text-3); font-size: var(--t-xs); }
.ai-role-row input { min-width: 0; }
@media (max-width: 768px) {
  .ai-role-row { grid-template-columns: 1fr 1fr; }
  .ai-role-row > span:first-child { grid-column: 1 / -1; }
}
#modelPrices .ai-role-row { grid-template-columns: 110px minmax(140px, 2fr) 120px 120px 110px 44px; }
#modelPrices .ai-role-head { grid-template-columns: 110px minmax(140px, 2fr) 120px 120px 110px 44px; }
@media (max-width: 900px) {
  #modelPrices .ai-role-row, #modelPrices .ai-role-head { grid-template-columns: 1fr 1fr; }
}
.bill-usage-days { margin-block: var(--s2); }
.bill-usage-days .nr-btn.active { background: var(--c-primary); color: var(--c-on-primary); }

/* --- News intake modes (TASK 14) --- */
.news-mode { margin-block-end: var(--s4); }
.news-mode button { min-height: 40px; }
.news-mode button.active { color: var(--c-on-primary); }
.news-mode-hidden { display: none !important; }
.manual-mode { margin-block-end: var(--s4); flex-wrap: wrap; }
.manual-mode button { min-height: 40px; }
.manual-mode button.active { color: var(--c-on-primary); }
#news-manual .field { flex: 1 1 260px; }

/* Legacy light-on-dark leftovers inside components that already use tokens. */
.ctx-title { color: var(--c-text); }
.ctx-action { background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-2); }
.ctx-action:hover { background: var(--c-primary); color: var(--c-on-primary); border-color: transparent; }
.ctx-action:hover i { color: var(--c-on-primary); }
.forex-armed { color: var(--c-warn-text); }