/* Codal Analytics UI. Chart colours are the validated categorical palette (light and dark steps). */

@font-face {
  font-family: "Vazirmatn";
  src: url("vendor/fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("vendor/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font: "Vazirmatn", "Vazir", "Noto Sans Arabic UI", "Noto Sans Arabic", Tahoma, system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "DejaVu Sans Mono", monospace;
  --page: #f6f6f3;
  --page-glow: rgba(42, 120, 214, 0.10);
  --surface-1: #ffffff;
  --surface-2: #f1f0ec;
  --row-alt: #faf9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --grid: #e7e6e0;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.08);
  --border-strong: rgba(11, 11, 11, 0.18);
  --accent: #256abf;
  --accent-2: #3f8ae6;
  --accent-ink: #1c5cab;
  --accent-wash: rgba(42, 120, 214, 0.08);
  --good: #006300;
  --bad: #c03232;
  --warn-ink: #8a5a00;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.05);
  --topbar-h: 60px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;
    --page-glow: rgba(57, 135, 229, 0.14);
    --surface-1: #171716;
    --surface-2: #232321;
    --row-alt: #1b1b1a;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);
    --accent: #256abf;
    --accent-2: #3f8ae6;
    --accent-ink: #86b6ef;
    --accent-wash: rgba(57, 135, 229, 0.14);
    --good: #0ca30c;
    --bad: #e66767;
    --warn-ink: #fab219;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --page-glow: rgba(57, 135, 229, 0.14);
  --surface-1: #171716;
  --surface-2: #232321;
  --row-alt: #1b1b1a;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --accent: #256abf;
  --accent-2: #3f8ae6;
  --accent-ink: #86b6ef;
  --accent-wash: rgba(57, 135, 229, 0.14);
  --good: #0ca30c;
  --bad: #e66767;
  --warn-ink: #fab219;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.75;
  background-color: var(--page);
  background-image: radial-gradient(1100px 420px at 85% -140px, var(--page-glow), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

a { color: var(--accent-ink); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.45; font-weight: 700; }
code {
  font-family: var(--mono);
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.92em;
}

input, select, button, textarea { font: inherit; color: inherit; }
input:not([type="checkbox"]), select, textarea {
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  min-height: 38px;
  max-width: 100%;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:not([type="checkbox"]):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
input:not([type="checkbox"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
:is(button, a, summary):focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
  border-radius: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  min-height: 38px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }

.container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 24px 64px;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface-1) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s var(--ease);
}
.topbar.scrolled { box-shadow: var(--shadow-md); }
.topbar-inner {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--text-primary); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; width: 36px; height: 36px; flex: none; border-radius: 11px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform 0.2s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.05); }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name > span { font-size: 18px; font-weight: 800; }
.brand-name small { font-size: 9.5px; font-weight: 700; letter-spacing: 2.6px; color: var(--accent-ink); direction: ltr; text-align: right; }
.symbol-search { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; max-width: 420px; }
.symbol-search input { flex: 1; min-width: 0; border-radius: 999px; padding-inline: 16px; background: var(--surface-2); border-color: transparent; }
.symbol-search input:focus { background: var(--surface-1); }
.symbol-search .btn { border-radius: 999px; }
.topbar-end { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; font-size: 13px; min-width: 0; }
.health { color: var(--text-secondary); white-space: nowrap; }
.health::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 6px;
  background: var(--text-muted);
  vertical-align: middle;
}
.health[data-state="ok"]::before { background: var(--status-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-good) 20%, transparent); }
.health[data-state="down"]::before { background: var(--status-critical); }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  flex: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon { display: none; }
.theme-toggle[data-mode="system"] .icon-system,
.theme-toggle[data-mode="light"] .icon-light,
.theme-toggle[data-mode="dark"] .icon-dark { display: block; }
/* The account menu: a pill with the user's name that opens a drop-down (just the icon on phones). */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 38px;
  padding-inline: 14px 10px;
  border-radius: 999px;
  color: var(--text-primary);
  font-weight: 600;
}
.menu-toggle[aria-expanded="true"] { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.menu-toggle-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* Generic blocks */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.section { margin-block: 32px; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-block-end: 14px;
}
.section-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.section-head h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; }
.section-head h2::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  flex: none;
}
.sub-title { font-size: 15px; margin-block: 22px 10px; }
.sub, .muted { color: var(--text-secondary); }
.sub { font-size: 13px; }
.small { font-size: 12px; }

/* Companies page: the title with its count, then the pages over every company as cards. */
.companies-head { justify-content: flex-start; align-items: center; gap: 6px 12px; }
.count-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.count-pill:empty { display: none; }
.shortcuts {
  display: grid;
  gap: 12px;
  margin-block-end: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.shortcut:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.shortcut:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.shortcut-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.shortcut-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shortcut-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.shortcut-body strong { font-size: 14.5px; font-weight: 700; }
.shortcut-body span {
  font-size: 12.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shortcut-arrow { flex: none; color: var(--text-muted); transition: transform 0.15s var(--ease), color 0.15s var(--ease); }

/* FIS: the company page's lists side by side, and the admin inputs in a grid. */
.fis-lists { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-block: 12px; }
.fis-lists .card h3 { margin-block-start: 0; font-size: 15px; }
/* Chain lag (views/chain-lag.js): the three signal cards carry their state on the edge, the words carry it too. */
.chain-signal { border-inline-start: 4px solid var(--border); }
.chain-signal.tone-good { border-inline-start-color: var(--status-good); }
.chain-signal.tone-bad { border-inline-start-color: var(--status-critical); }
.chain-signal.tone-warn { border-inline-start-color: var(--status-warning); }
.chain-signal ul, .chain-summary { margin: 0; padding-inline-start: 18px; line-height: 1.9; }
details.reasons summary { cursor: pointer; font-size: 12.5px; }
details.reasons ul { margin: 4px 0 0; padding-inline-start: 16px; font-size: 12px; color: var(--text-secondary); }
.fis-inputs { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.method-list.warn li { color: var(--warn-ink); }

/* خلاصه گزارش‌های ماهانه: one card per report, its lines ready to copy. */
.brief-list { display: grid; gap: 12px; }
.brief-card { padding: 14px 16px; }
.brief-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-block-end: 8px; }
.brief-period { color: var(--text-secondary); font-size: 13px; }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brief-text { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); line-height: 2; }
.brief-text p { margin: 0; }
.brief-text p:first-child { font-weight: 700; }

/* Navigation bar: one dropdown per group of pages (core.js TOOL_GROUPS), under the top bar. */
.main-nav { border-top: 1px solid var(--border); }
.main-nav-inner {
  max-width: 1320px;
  margin-inline: auto;
  padding: 4px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
}
.nav-group { position: relative; flex: none; }
.nav-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "▾"; font-size: 11px; color: var(--text-muted); transition: transform 0.15s var(--ease); }
.nav-group[open] > summary::after { transform: rotate(180deg); }
.nav-group > summary:hover, .nav-group[open] > summary { background: var(--surface-2); color: var(--text-primary); }
.nav-group > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.nav-group.current > summary { background: var(--accent-wash); color: var(--accent-ink); }
.nav-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}
.nav-group.current .nav-count { background: var(--surface-1); }
.nav-panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - var(--topbar-h) - 16px);
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: drop 0.16s var(--ease);
}
/* One page of a group: in the dropdown and on the home page. */
.tool-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.tool-link:hover { background: var(--surface-2); text-decoration: none; }
.tool-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.tool-link.current { background: var(--accent-wash); }
.tool-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.tool-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tool-body strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.tool-body > span { font-size: 12px; line-height: 1.7; color: var(--text-secondary); }

/* Calendar (تقویم مجامع): a Jalali month as seven columns from شنبه. The cells are buttons because clicking one
   opens that day underneath, and a grid of divs with click handlers is a grid nobody can reach by keyboard. */
.calendar { padding: 14px 14px 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 10px; }
.cal-title { font-size: 16px; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-week { margin-block-end: 6px; }
.cal-weekday { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding-block: 4px; }
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 78px;
  padding: 6px 7px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.cal-cell:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cal-cell:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cal-empty { background: none; border: 0; cursor: default; min-height: 0; }
.cal-quiet { opacity: 0.55; }
.cal-today { border-color: var(--accent); }
.cal-focus { box-shadow: 0 0 0 2px var(--accent-2) inset; }
.cal-day { font-size: 14px; font-weight: 700; }
.cal-dot { font-size: 11px; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.cal-held { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.cal-due { color: var(--warn-ink); background: color-mix(in srgb, var(--warn-ink) 14%, transparent); }
.cal-names { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 700px) {
  /* Phones: the names do not fit beside a day number, so the cell keeps the count and drops them. */
  .cal-cell { min-height: 58px; padding: 5px; }
  .cal-names { display: none; }
  .cal-dot { padding: 1px 5px; }
}

/* Landing page: the same cards, but read rather than clicked through, so the text wraps instead of being
   clipped to one line, and a card for a section the visitor cannot open is plain rather than a link. */
.welcome-hero { padding: 22px 20px; margin-block-end: 16px; }
.welcome-hero h1 { margin: 0 0 8px; font-size: 22px; }
.welcome-hero p { margin: 0 0 14px; color: var(--text-secondary); max-width: 70ch; line-height: 1.9; }
.welcome-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.welcome-cards .shortcut { align-items: flex-start; }
.welcome-cards .shortcut-body span { white-space: normal; overflow: visible; line-height: 1.8; }
.welcome-cards .shortcut-body .badge { align-self: flex-start; margin-block-start: 6px; }
.welcome-cards div.shortcut { box-shadow: none; opacity: 0.85; }
@media (max-width: 600px) {
  .shortcuts.welcome-cards { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .shortcuts.welcome-cards .shortcut { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: start; }
  .shortcuts.welcome-cards .shortcut-body span { display: block; }
}
.shortcut:hover .shortcut-arrow { color: var(--accent-ink); transform: translateX(-3px); }
@media (max-width: 600px) {
  /* Phones: the cards side by side in one row, icon over title, so they take one short row instead of a screen. */
  .shortcuts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .shortcut { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 6px; text-align: center; }
  .shortcut:hover { transform: none; }
  .shortcut-icon { width: 36px; height: 36px; border-radius: 10px; }
  .shortcut-body strong { font-size: 12.5px; line-height: 1.45; }
  .shortcut-body span, .shortcut-arrow { display: none; }
}
.note { font-size: 12.5px; color: var(--text-secondary); margin-block: 10px 0; }
.warn { color: var(--warn-ink); }
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: 56px;
  color: var(--text-secondary);
}
.loading::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.notice {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
  color: var(--text-secondary);
  margin-block: 16px;
}
.notice p { margin: 0; }
.notice p + p { margin-block-start: 10px; }
.notice.error {
  border-style: solid;
  border-color: color-mix(in srgb, var(--bad) 35%, transparent);
  border-inline-start: 4px solid var(--bad);
  background: color-mix(in srgb, var(--bad) 6%, var(--surface-1));
  color: var(--text-primary);
}
.notice.warn {
  /* A page being updated, or a daily allowance reached: not a failure, and it must not read like one. */
  border-style: solid;
  border-color: color-mix(in srgb, var(--warn-ink) 35%, transparent);
  border-inline-start: 4px solid var(--warn-ink);
  background: color-mix(in srgb, var(--warn-ink) 6%, var(--surface-1));
  color: var(--text-primary);
}
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-end: 14px; }
.toolbar input { width: min(100%, 380px); }
.toolbar select { max-width: min(100%, 260px); }

/* Sortable column titles */
.sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: normal;
}
.sort-btn:hover { color: var(--text-primary); }
.sort-btn::after { content: "↕"; font-size: 11px; color: var(--text-muted); }
/* A unit under the title, the arrow beside the title. */
.sort-btn { flex-wrap: wrap; }
.sort-btn .unit { flex-basis: 100%; order: 2; }
th[aria-sort="ascending"] .sort-btn,
th[aria-sort="descending"] .sort-btn { color: var(--text-primary); }
th[aria-sort="ascending"] .sort-btn::after { content: "▲"; color: var(--series-1); }
th[aria-sort="descending"] .sort-btn::after { content: "▼"; color: var(--series-1); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
.badge.status-ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.badge.status-partial { color: var(--warn-ink); background: color-mix(in srgb, var(--warn-ink) 12%, transparent); }
.badge.status-failed { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* Company header and tabs */
.company-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px 32px;
  padding: 22px 24px;
  background:
    radial-gradient(600px 220px at 100% 0%, var(--accent-wash), transparent 70%),
    var(--surface-1);
}
.company-title { min-width: 0; }
.company-title h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.company-title p { margin: 0; color: var(--text-secondary); }
.company-title .meta { margin-block-start: 8px; font-size: 13px; }
.company-title .industry { font-size: 12.5px; padding: 2px 11px; }
.coverage { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: flex;
  flex-direction: column;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
  min-width: 130px;
}
.chip strong { color: var(--text-primary); font-size: 15px; }

.tabs {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-block: 16px 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
/* Wide screens: every tab in view, on as many lines as it takes. One scrolling row with its scrollbar hidden cut the
   page off at «نرخ فروش و خرید», mid-word, with nothing to say that four more tabs were there. */
@media (min-width: 761px) {
  .tabs { flex-wrap: wrap; overflow-x: visible; border-radius: 22px; scroll-snap-type: none; }
}
/* Narrow screens keep the one scrolling row, faded at the edge where more tabs wait. */
@media (max-width: 760px) {
  .tabs {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    padding-inline-end: 24px;
  }
}
.tabs a {
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--text-secondary);
  font-weight: 500;
  scroll-snap-align: start;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.tabs a:hover { color: var(--text-primary); background: var(--surface-2); text-decoration: none; }
.tabs a[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
}

/* The supply chain in three columns: what feeds this company, the company, and what it feeds. */
.chain {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-block: 20px;
}
.chain-col { min-width: 0; display: grid; gap: 12px; }
.chain-col > .section-head { margin-block-end: 0; }
.chain-group { padding: 14px 16px; }
.chain-group .section-head { margin-block-end: 8px; }
.chain-group h3 { font-size: 15px; }
.chain-centre {
  padding: 16px 18px;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-sm);
}
.chain-centre h2 { font-size: 20px; }
.chain-centre .sub-title { margin-block: 14px 6px; }
/* The arrows that say which way the goods move, drawn between the columns. */
.chain-col:first-child { position: relative; }
.chain-col:first-child::after,
.chain-col:last-child::before {
  content: "";
  position: absolute;
  inset-block-start: 14px;
  width: 18px;
  height: 2px;
  background: var(--border-strong);
}
@media (max-width: 900px) {
  .chain { grid-template-columns: 1fr; }
  .chain-centre { order: -1; }
  .chain-col:first-child::after, .chain-col:last-child::before { display: none; }
}

/* A long page's own index: sticky under the tab bar, one chip per section, the one in view lit. */
.section-index {
  position: sticky;
  /* under the company's tab bar, however many lines it took (--tabs-h: company.js measures it) */
  top: calc(var(--topbar-h) + var(--tabs-h, 52px));
  z-index: 15;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-block: 14px 0;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  scrollbar-width: none;
}
.section-index::-webkit-scrollbar { display: none; }
@media (min-width: 761px) {
  .section-index { flex-wrap: wrap; overflow-x: visible; border-radius: 20px; }
}
@media (max-width: 760px) {
  .section-index {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    padding-inline-end: 24px;
  }
}
.section-index a {
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.section-index a:hover { color: var(--text-primary); background: var(--surface-2); text-decoration: none; }
.section-index a[aria-current] {
  color: var(--text-primary);
  font-weight: 600;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* Folding a section leaves its head, so the page stays readable as a table of contents. */
.section-fold {
  margin-inline-start: auto;
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.section-fold:hover { background: var(--surface-2); color: var(--text-primary); }
.section.is-folded > *:not(.section-head) { display: none; }
.section.is-folded { margin-block-end: 14px; }
.section.is-folded .section-head { margin-block-end: 0; }

.to-top {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 40;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) {
  .to-top { inset-block-end: 14px; inset-inline-start: 14px; }
}

.tab-content { transition: opacity 0.15s; }
.tab-content.stale { opacity: 0.5; pointer-events: none; }

/* Filters: one row above everything they scope */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  margin-block: 18px;
  padding: 14px 18px;
}
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend { font-weight: 600; padding: 0; margin-block-end: 2px; }
.checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 38px; font-size: 14px; color: var(--text-primary); }
.checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.checks input { width: 16px; height: 16px; accent-color: var(--accent); }
.filter-actions { display: flex; gap: 8px; margin-inline-start: auto; }

/* Screener on the company list: a collapsible row of bounds */
.screener { margin-block-end: 14px; padding: 10px 16px; }
.screener summary { cursor: pointer; width: fit-content; font-weight: 600; list-style-position: inside; }
.screener summary .badge { margin-inline-start: 8px; }
.screener .filters { margin-block: 12px 4px; padding: 0; background: none; border: 0; box-shadow: none; }
.screener .field input { width: 7.5em; }
.screener .note { margin-block: 6px 0; }

/* Watchlists: the company header's menu and the management page */
.watch-menu { position: relative; display: inline-block; margin-block-start: 8px; margin-inline-start: 8px; }
.watch-menu summary { list-style: none; cursor: pointer; }
.watch-menu summary::-webkit-details-marker { display: none; }
.watch-menu summary.active {
  color: var(--accent-ink);
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Above the sticky company tabs (z-index 20), below the top bar (30). */
.watch-menu-body {
  position: absolute;
  z-index: 25;
  inset-inline-start: 0;
  margin-block-start: 6px;
  width: min(300px, calc(100vw - 48px));
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.checks.column { flex-direction: column; align-items: flex-start; min-height: 0; }
.watch-new { display: flex; flex-wrap: wrap; gap: 6px; }
.watch-new input { flex: 1 1 140px; min-width: 0; }
.watchlist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 10px; }
.watchlist-head input { width: min(100%, 260px); }

/* Stat tiles */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 13px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.tile::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  opacity: 0.7;
}
.tile:hover { box-shadow: var(--shadow-md); }
.tile-label { font-size: 12.5px; color: var(--text-secondary); }
.tile-value { font-size: 22px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tile-unit { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-inline-start: 6px; letter-spacing: 0; }
.delta { font-size: 12px; color: var(--text-secondary); }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }

/* Charts */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); }
.chart-card { min-width: 0; }
.chart-card h3 { font-size: 14.5px; font-weight: 700; }
.chart-card .sub { margin: 2px 0 0; font-size: 12px; }
.plot { min-height: 320px; margin-block-start: 8px; direction: ltr; }
/* Plotly measures every axis label in this hidden SVG, appended to the RTL <body>. Inherited right-to-left
   direction makes it measure labels as zero-width, so the margins never grow and dates at the bottom and
   numbers on the y axis are cut off. */
#js-plotly-tester { direction: ltr !important; }
.plot-missing { display: grid; place-items: center; min-height: 120px; direction: rtl; text-align: center; }
.table-toggle { margin-block-start: 8px; padding-block-start: 8px; border-top: 1px solid var(--grid); }
.table-toggle summary { cursor: pointer; width: fit-content; font-size: 13px; color: var(--accent-ink); }
.table-toggle[open] summary { margin-block-end: 8px; }

/* Tables: as wide as the page, with cells wrapping between words (never inside a word, date or number) so no
   horizontal scrollbar appears at desktop widths; on a screen too narrow for a table it scrolls rather than cutting
   data off. Everything is centered. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.table-wrap.tall { max-height: 75vh; }
/* The CSV button beside a table: the block around the two takes no room of its own (display: contents), so a
   table that gained a download did not gain a wrapper anywhere a layout could notice. */
.table-block { display: contents; }
.table-actions { display: flex; justify-content: flex-end; margin-block: 4px 10px; }
.csv-btn { font-size: 12px; color: var(--text-muted); }
.csv-btn:hover { color: var(--accent-ink); }
@media print { .table-actions { display: none; } }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.data th, table.data td {
  padding: 9px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--grid);
  background-color: var(--surface-1);
  transition: background-color 0.12s var(--ease);
}
table.data tbody tr:nth-child(even) > * { background-color: var(--row-alt); }
table.data thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}
table.data tbody th { font-weight: 500; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data tbody tr:hover > * { background-color: color-mix(in srgb, var(--accent) 7%, var(--surface-1)); }
table.data td.num { text-align: center; font-variant-numeric: tabular-nums; }
table.data td.neg { color: var(--bad); }
.change-up { color: var(--good); }
.change-down { color: var(--bad); }
table.data td.wrap { min-width: 140px; }
table.data .unit { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.symbol-link { font-weight: 800; font-size: 15px; }
/* The company list keeps its symbol column in view while the rest scrolls sideways. */
table.sticky-first tbody th[scope="row"], table.sticky-first thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  box-shadow: inset -1px 0 0 var(--grid);
}
table.sticky-first thead th:first-child { z-index: 3; }

/* Pivot tables: one row per field, one column per period */
table.pivot tbody th[scope="row"], table.pivot thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-width: 160px;
  background: var(--surface-1);
  box-shadow: inset -1px 0 0 var(--grid);
}
table.pivot thead th:first-child { z-index: 3; background: var(--surface-2); }
table.pivot thead th { vertical-align: bottom; }
table.pivot tr.group > * { background: var(--surface-2); color: var(--text-primary); font-weight: 700; font-size: 12.5px; }
table.pivot tbody tr.group:hover > * { background: var(--surface-2); }
.col-head { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.col-head strong { color: var(--text-primary); }
.source-label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }

/* Key-value lists */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px 24px; margin: 0; }
.kv > div { padding-block-end: 8px; border-bottom: 1px dashed var(--grid); min-width: 0; }
.kv dt { font-size: 12px; color: var(--text-secondary); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Segmented control */
.period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block: 20px 0; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.segmented button { border: 0; background: transparent; padding: 5px 14px; border-radius: 9px; cursor: pointer; color: var(--text-secondary); transition: background-color 0.15s var(--ease); }
.segmented button:hover { color: var(--text-primary); }
.segmented button[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.report-head h2 { font-size: 16px; margin-block-end: 12px; }

/* Valuation basis */
.basis { margin-block-start: 12px; }
.basis summary, .override-editor summary, .table-toggle summary { list-style-position: inside; }
.basis summary { cursor: pointer; width: fit-content; font-weight: 600; color: var(--accent-ink); }
.basis[open] summary { margin-block-end: 12px; }
.formulas { margin: 14px 0 0; padding-inline-start: 20px; font-size: 12.5px; color: var(--text-secondary); }
.formulas li + li { margin-block-start: 4px; }
.income-lines { margin: 0; padding-inline-start: 18px; }
.income-lines li + li { margin-block-start: 2px; }
.notes-list { margin: 0; padding-inline-start: 20px; }
.notes-list li + li { margin-block-start: 8px; }

/* Account menu, login and admin panel */
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 16px;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 230px;
  max-height: calc(100vh - var(--topbar-h) - 24px);
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  white-space: nowrap;
}
.user-menu.open { display: flex; animation: drop 0.16s var(--ease); }
.user-menu a, .user-menu .link-btn {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-align: start;
}
.user-menu a:hover, .user-menu .link-btn:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.user-menu .user-name {
  color: var(--text-primary);
  font-weight: 700;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
}
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent-ink); cursor: pointer; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.auth-card { max-width: 420px; margin: 64px auto; display: flex; flex-direction: column; gap: 14px; padding: 28px; box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: 21px; font-weight: 800; }
.auth-card .field input { width: 100%; }
.form-error { color: var(--bad); font-size: 13px; margin: 0; }
.form-ok { color: var(--good); font-size: 13px; margin: 0; }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 8%, var(--surface-1)); }
.btn.small { padding: 2px 10px; min-height: 30px; font-size: 12px; }
.badge.status-running { color: var(--accent-ink); background: var(--accent-wash); }
.badge.status-queued { color: var(--warn-ink); background: color-mix(in srgb, var(--warn-ink) 12%, transparent); }
.badge.status-cancelled { color: var(--text-muted); }
.queue-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge.policy-dividend { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.badge.policy-growth { color: var(--accent-ink); background: var(--accent-wash); }
.badge.trade-buy { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); font-weight: 700; }
.buy-plan { display: grid; gap: 12px; margin-block-end: 12px; }
.buy-plan h3 { margin: 0; font-size: 15px; }
.buy-plan h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
.buy-plan-head { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border-inline-start: 4px solid var(--text-muted); line-height: 1.8; }
.buy-plan-head strong { font-size: 15px; }
.buy-plan-head.active { background: color-mix(in srgb, var(--good) 9%, var(--surface-1)); border-inline-start-color: var(--good); }
.buy-plan-head.active strong { color: var(--good); }
.buy-plan-head.waiting { border-inline-start-color: var(--accent); }
table.data.buy-steps th, table.data.buy-steps td { white-space: nowrap; }
@media (max-width: 600px) {
  table.data.buy-steps th, table.data.buy-steps td { padding: 8px 5px; font-size: 12px; }
}
table.data.buy-steps tr.reached th, table.data.buy-steps tr.reached td { background-color: color-mix(in srgb, var(--good) 7%, var(--surface-1)); }
.buy-plan ul.checks { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.8; }
.buy-plan .note { margin: 0; }
table.data td.range-cell, table.data td.range-cell > * { white-space: nowrap; }
table.data td.range-cell .range-drop { font-weight: 600; margin-block-start: 2px; }
.outlier-list { display: grid; gap: 12px; }
.outlier-card { display: grid; gap: 10px; }
.outlier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.outlier-head .severity { margin-inline-start: auto; }
.finding-list, .reason-list { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.reason-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.reason-kind { font-size: 11px; }
.queue-controls .note { margin: 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.admin-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.admin-form .checks { max-width: 100%; }
.admin-users .checks { justify-content: center; font-size: 12.5px; }
.admin-users input[type="text"], .admin-users input[type="password"] { width: 100%; min-width: 110px; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* Peer comparison */
table.data tbody tr.is-current > * { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); font-weight: 600; }
table.data tbody tr.is-average > * { background: var(--surface-2); font-weight: 600; }

/* Admin run log */
.tile-value.bad { color: var(--bad); }
.tile-value.warn { color: var(--warn-ink); }
.error-text { display: inline-block; max-width: 420px; font-family: var(--mono); font-size: 12px; text-align: left; overflow-wrap: anywhere; }

/* Market state: queue badges and daily change (green up, red down, always with a text label) */
.badge.market-buy { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.badge.market-sell { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.badge.market-stopped { color: var(--warn-ink); background: color-mix(in srgb, var(--warn-ink) 14%, transparent); }
.change-up { color: var(--good); font-weight: 600; }
.change-down { color: var(--bad); font-weight: 600; }
.market-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-block-start: 8px; font-size: 13px; color: var(--text-secondary); }
.market-line strong { color: var(--text-primary); }
.market-card { margin-block: 12px; }
.market-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-block-end: 12px; }

/* Investment screening report */
.rec-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.rec-card { display: flex; flex-direction: column; gap: 12px; transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.rec-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rec-head { display: flex; align-items: center; gap: 12px; }
.rec-rank {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  color: #fff;
  font-weight: 800;
  flex: none;
}
.rec-score { margin-inline-start: auto; text-align: center; line-height: 1.2; }
.rec-score strong { display: block; font-size: 28px; font-weight: 800; color: var(--accent-ink); }
.rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.rec-factors { display: grid; gap: 7px; margin: 0; }
.rec-factors > div { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px; font-size: 12.5px; }
.rec-factors dt { color: var(--text-secondary); }
.rec-factors dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.score-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.score-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.rec-card h4 { margin: 0 0 4px; font-size: 13px; }
.rec-list { margin: 0; padding-inline-start: 18px; font-size: 12.5px; }
.rec-list li + li { margin-block-start: 2px; }
.method-list { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--text-secondary); }
.method-list li + li { margin-block-start: 6px; }
.guide-group { margin-block-start: 12px; }

/* Military risk */
.risk-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-block: 12px; }
.risk-level { font-weight: 700; }
.risk-level.level-3 { color: var(--warn-ink); }
.risk-level.level-4 { color: var(--bad); }
.risk-form .table-wrap { margin-block-start: 8px; }
.risk-form input[type="text"], .risk-form input[name$="_jalali"] { width: 100%; }
.risk-form input[type="number"] { width: 90px; }

.risk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 12px; }
.risk-tabs a { padding: 5px 14px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px;
  color: inherit; text-decoration: none; }
.risk-tabs a:hover { background: var(--surface-2); }
.risk-tabs a.active { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: var(--accent); color: #fff; }
.risk-form select { max-width: 100%; }

/* Free-market dollar rate at the top of the dashboard */
.usd-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-block: 0 16px; }
.usd-rate-label { font-weight: 700; }
.usd-rate-value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.badge.market-closed { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }

/* Admin: valuation inputs set by hand */
.override-mark { color: var(--warn-ink); font-size: 12px; }
.override-editor { margin-block-start: 12px; }
.override-editor summary { cursor: pointer; font-weight: 600; }
.override-form textarea { width: 100%; }

/* Admin: every risk at a glance */
.risk-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-block: 12px; }
.risk-summary { display: flex; flex-direction: column; gap: 6px; }
.risk-summary h3 { margin: 0; font-size: 15px; }
.risk-summary p { margin: 0; }
.risk-summary .btn { align-self: flex-start; margin-block-start: auto; }
.risk-weight { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.weight-bar { display: flex; gap: 2px; height: 18px; border-radius: 6px; overflow: hidden; }
.weight-bar span { display: block; height: 100%; }
.weight-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.weight-legend .swatch { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 3px; }

/* Admin: the company report as one image */
.poster-link { margin-block-start: 12px; }
.poster-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.poster-stage { margin-block-start: 16px; }
.poster-preview {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--surface-2);
}

/* ------------------------------------------------------------------
   Narrower screens
   ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .container { padding-inline: 14px; padding-block: 16px 48px; }
  .topbar-inner { padding-inline: 14px; gap: 8px 10px; }
  .brand { font-size: 14.5px; }
  .brand-logo { width: 32px; height: 32px; border-radius: 10px; }
  /* Search gets its own full-width row under the brand, folded away until the dock's search button opens it. */
  .symbol-search { order: 3; flex: 1 1 100%; max-width: none; display: none; }
  .search-open .symbol-search { display: flex; animation: drop 0.18s var(--ease); }
  .topbar-end { gap: 8px; }
  .health, .docs-link { display: none; }
  .menu-toggle { display: none; }
  .section { margin-block: 24px; }
  .section-head h1 { font-size: 21px; }
  .company-head { padding: 16px; }
  /* Narrow screens: the watchlist menu opens inside the header, pushing the rest down, so nothing covers or clips it. */
  .watch-menu { display: block; margin-inline-start: 0; }
  .watch-menu-body { position: static; width: auto; box-shadow: none; }
  .company-title h1 { font-size: 24px; }
  .coverage { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-block-end: 4px; scrollbar-width: none; }
  .coverage::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .tabs { margin-inline: -4px; border-radius: 14px; }
  .card { padding: 14px 16px; }
  .filters { padding: 12px 14px; }
  .filters .field { flex: 1 1 140px; }
  .filters .field input, .filters .field select { width: 100%; }
  .filter-actions { margin-inline-start: 0; width: 100%; }
  .filter-actions .btn { flex: 1; }
  .toolbar > * { flex: 1 1 100%; }
  .toolbar input, .toolbar select { width: 100%; max-width: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px 13px 11px; }
  .tile-value { font-size: 18px; }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .plot { min-height: 280px; }
  .grid { gap: 12px; }
  table.data { font-size: 12.5px; }
  table.data th, table.data td { padding: 8px 9px; }
  table.data .hide-narrow { display: none; }
  table.pivot tbody th[scope="row"], table.pivot thead th:first-child { min-width: 110px; }
  .rec-factors > div { grid-template-columns: minmax(96px, 38%) 1fr; }
  .rec-score strong { font-size: 24px; }
  .auth-card { margin: 28px auto; padding: 20px; }
  .error-text { max-width: 240px; }
}

@media (max-width: 380px) {
  .tiles, .kv { grid-template-columns: minmax(0, 1fr); }
  .brand-name > span { font-size: 16px; }
}

@media (pointer: coarse) {
  .btn, .icon-btn { min-height: 42px; }
  .icon-btn { width: 42px; height: 42px; }
  .tabs a { padding-block: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .topbar, .tabs, .filters, .table-toggle summary { display: none !important; }
  body { background: #fff; }
  .card, .tile, .table-wrap { box-shadow: none; }
}

/* Investment companies: each calculation with its formula and the numbers that went in */
.calc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.calc {
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.calc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.calc-result { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.calc-formula { font-size: 12.5px; color: var(--text-secondary); margin-block: 2px 10px; }
.calc-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.calc-term { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.calc-op { font-size: 16px; font-weight: 700; color: var(--accent-ink); }
.calc-box {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}
.calc-box.result { background: var(--accent-wash); }
.calc-num { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-box.result .calc-num { color: var(--accent-ink); }
.calc-label { font-size: 11.5px; color: var(--text-secondary); overflow-wrap: anywhere; }

/* Portfolio suggestions: a basket's asset classes as one stacked bar */
.baskets { display: grid; gap: 16px; }
.basket { min-width: 0; }
.basket-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-block-end: 8px; }
.basket-head h3 { font-size: 17px; font-weight: 750; }
.basket-head .sub { font-size: 12.5px; color: var(--text-secondary); }
.alloc { margin-block: 6px 10px; }
.alloc-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.alloc-bar span { display: block; height: 100%; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-block-start: 8px; font-size: 12.5px; color: var(--text-secondary); }
.alloc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
input.narrow { width: 5.5em; }

/* Investment companies: an admin links an unmatched holding to a symbol */
.link-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-inline-start: 6px; }

/* Investment network: a force-directed graph of investment companies, the companies they hold and industries */
.net-card { padding: 16px; }
.net-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.net-controls input[type="search"] { width: 12em; }
.net-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block: 12px 0; font-size: 12px; color: var(--text-secondary); }
.net-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-inline-end: 6px; vertical-align: -1px; }
.net-legend i.dot.investor { background: var(--series-1); }
.net-legend i.dot.listed { background: var(--series-3); }
.net-legend i.dot.unlisted { background: var(--series-4); }
.net-legend i.dot.outside { background: transparent; border: 1.5px dashed var(--text-muted); }
.net-legend i.dot.industry { background: var(--series-7); border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.net-legend i.line { width: 20px; height: 0; border-radius: 0; border-top: 3px solid var(--axis); vertical-align: 3px; }
.net-legend i.line.cross { border-top-color: var(--series-2); }
.net-legend i.line.unlisted { border-top-style: dashed; }
.net-legend i.line.exposure { border-top-color: var(--series-7); }
.net-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); align-items: start; margin-block-start: 12px; }
@media (max-width: 960px) { .net-layout { grid-template-columns: minmax(0, 1fr); } }
.net-stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 45%, var(--accent-wash), transparent 70%), var(--surface-1);
  overflow: hidden;
}
.net-svg { display: block; width: 100%; height: clamp(440px, 70vh, 880px); touch-action: none; user-select: none; cursor: grab; }
.net-svg:active { cursor: grabbing; }
.net-tools { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: flex; flex-direction: column; gap: 6px; }
.net-tools .btn { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 16px; }
.net-count { position: absolute; inset-block-end: 8px; inset-inline-end: 12px; font-size: 12px; color: var(--text-muted); pointer-events: none; }
.net-edge { stroke: var(--axis); stroke-opacity: 0.8; }
.net-edge.cross { stroke: var(--series-2); stroke-opacity: 0.95; }
.net-edge.unlisted { stroke-dasharray: 5 4; }
.net-edge.unknown { stroke-opacity: 0.45; }
.net-edge.exposure { stroke: var(--series-7); stroke-opacity: 0.6; }
.net-edge.in-industry { stroke: var(--series-7); stroke-opacity: 0.35; stroke-dasharray: 2 3; }
.net-edge.is-near { stroke-opacity: 1; }
.net-edge.is-dim { stroke-opacity: 0.05; }
.net-arrow path { fill: var(--axis); }
.net-arrow.cross path { fill: var(--series-2); }
.net-arrow.exposure path { fill: var(--series-7); }
.net-node { cursor: pointer; }
.net-node circle, .net-node rect { stroke: var(--surface-1); stroke-width: 1.5; }
.net-node.investor circle { fill: var(--series-1); stroke-width: 2.5; }
.net-node.company.listed circle { fill: var(--series-3); }
.net-node.company.unlisted circle { fill: var(--series-4); }
.net-node.company.outside circle { fill-opacity: 0.45; stroke: var(--text-muted); stroke-dasharray: 2 2; }
.net-node.industry rect { fill: var(--series-7); }
.net-node.pinned circle, .net-node.pinned rect { stroke: var(--text-secondary); }
.net-node.is-selected circle, .net-node.is-selected rect { stroke: var(--text-primary); stroke-width: 3; }
.net-node.is-dim { opacity: 0.12; }
.net-node:hover circle, .net-node:hover rect { stroke: var(--text-primary); }
.net-label {
  display: none;
  font-size: 11px;
  fill: var(--text-secondary);
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.net-node.show-label .net-label, .net-node:hover .net-label { display: inline; }
.net-node.investor .net-label { font-size: 12.5px; font-weight: 800; fill: var(--text-primary); }
.net-node.industry .net-label { fill: var(--series-7); font-weight: 650; }
.net-edge-label { font-size: 10.5px; font-weight: 700; fill: var(--text-primary); paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; pointer-events: none; }
.net-panel { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 24px); overflow: auto; padding: 14px 16px; }
.net-panel h3 { font-size: 18px; font-weight: 800; margin: 0; }
.net-panel h4 { font-size: 13px; margin: 14px 0 4px; color: var(--text-secondary); }
.net-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.net-kind.investor { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 12%, transparent); }
.net-kind.company { color: var(--series-3); background: color-mix(in srgb, var(--series-3) 12%, transparent); }
.net-kind.industry { color: var(--series-7); background: color-mix(in srgb, var(--series-7) 12%, transparent); }
.net-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin-block: 10px; font-size: 13px; }
.net-facts dt { color: var(--text-secondary); }
.net-facts dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.net-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.net-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: 13px; }
.net-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 6px; border-radius: 7px; }
.net-list li:hover { background: var(--surface-2); }
.net-list .num { white-space: nowrap; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.net-link { font-weight: 700; text-align: start; }
.net-stakes { line-height: 1.9; }
.net-table-tools { margin-block-end: 10px; }
.net-table-tools input { width: min(100%, 260px); }
.net-heat .heat-cell { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Portfolio page (views/portfolios.js): the colour chip of an asset class, beside its name. */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }

/* The DCF tab's sensitivity grid: the cell of the chosen inputs. */
table.data td.highlight { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.filters input[type="range"] { width: 100%; accent-color: var(--accent); }
/* The screener's conditions: one row each, wrapping on a narrow screen. */
.screen-conditions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-block: 10px; }
.screen-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; width: 100%; }
/* The market report prints as a document: no controls, no navigation, tables at full length. */
@media print {
  .no-print, .main-nav, .section-index, .to-top { display: none !important; }
  .market-report .table-wrap { max-height: none !important; overflow: visible !important; }
  .market-report .card, .market-report .tile { break-inside: avoid; }
}
/* The supply-and-demand page's headlines: the largest changes, in words, before anything else. */
.sd-headlines h2 { font-size: 18px; margin: 0 0 8px; }
.sd-headlines ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; line-height: 1.8; }
.sd-headlines .sd-icon { display: inline-block; width: 1.4em; text-align: center; }
/* The scenario map's industry bars. */
.scenario-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; }
.scenario-fill { display: inline-block; height: 10px; border-radius: 5px; min-width: 2px; }
.scenario-fill.up { background: var(--good, #2e9e5b); }
.scenario-fill.down { background: var(--bad, #d0453f); }
/* «داده تا …»: how current the data is, beside the connection badge. */
.freshness { color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 760px) { .freshness { display: none; } }

/* سه نگاه به بازار (views/market-views.js): three view cards, the shares against the gold line, small month bars. */
.mv-intro h2 { margin: 0 0 6px; font-size: 18px; }
.mv-intro p { margin: 4px 0; line-height: 1.9; }
.mv-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-block: 12px; }
.mv-card { display: flex; flex-direction: column; gap: 6px; color: inherit; border: 1px solid var(--border);
  transition: border-color 0.15s, box-shadow 0.15s; }
.mv-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.mv-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.mv-card p { margin: 0; color: var(--text-secondary); line-height: 1.8; }
.mv-card-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mv-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); flex: none; }
.mv-card-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.mv-card-stats b { font-size: 17px; }
.mv-gold-text b { color: #b8860b; }
.mv-top { color: var(--text-secondary); }
.mv-split { display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-block: 12px; }
@media (max-width: 860px) { .mv-split { grid-template-columns: minmax(0, 1fr); } }
.mv-rules h3 { margin-top: 0; font-size: 15px; }
.mv-rules ul { margin: 0; padding-inline-start: 18px; line-height: 2; }
.mv-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.mv-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; }
.mv-gold-key { display: inline-block; width: 3px; height: 14px; background: #d4a017; border-radius: 2px; }
.mv-bar-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 64px; align-items: center; gap: 8px; margin-block: 5px; }
.mv-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-track { position: relative; height: 14px; border-radius: 7px; background: var(--surface-2); }
.mv-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 55%, transparent); }
.mv-fill.beats { background: linear-gradient(90deg, #e9c46a, #d4a017); }
.mv-gold-line { position: absolute; inset-block: -4px; width: 3px; margin-inline-start: -1px; background: #d4a017; border-radius: 2px; }
.mv-bar-value { font-variant-numeric: tabular-nums; text-align: end; }
.mv-potential { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge.mv-gold { background: color-mix(in srgb, #d4a017 22%, transparent); color: #8a6508; border-color: #d4a017; }
:root[data-theme="dark"] .badge.mv-gold, :root[data-theme="dark"] .mv-gold-text b { color: #f0c75e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge.mv-gold, :root:not([data-theme="light"]) .mv-gold-text b { color: #f0c75e; }
}
.mv-spark { display: inline-flex; direction: ltr; align-items: flex-end; gap: 2px; height: 26px; width: 84px; vertical-align: middle; }
.mv-spark span { flex: 1; min-height: 1px; border-radius: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.mv-spark span.last { background: var(--accent); }

/* «ذخیره PDF» (core.js savePdf): while the print dialog is open the page is laid out at the width of an A4 page, so the
   charts drawn for it fit the paper, one under another. */
.print-only { display: none; }
html.pdf-mode #app { width: 186mm; max-width: 186mm; margin-inline: auto; }
html.pdf-mode .grid, html.pdf-mode .mv-split { grid-template-columns: minmax(0, 1fr); }
html.pdf-mode .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@page { size: A4; margin: 12mm; }
@media print {
  html, body { background: #fff !important; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #app { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .print-only { display: block !important; }
  .print-header { margin: 0 0 6px; color: var(--text-secondary); font-size: 11px; }
  .main-nav, .section-index, .section-fold, .to-top, .no-print, .table-actions, .table-toggle, .btn { display: none !important; }
  .table-wrap { max-height: none !important; overflow: visible !important; }
  details:not([open]) { display: none !important; }
  .card, .tile, .chart-card, .sd-headlines, tr { break-inside: avoid; }
  h1, h2, h3, .section-head { break-after: avoid; }
}

/* «چه کسانی با این کالا درگیرند» (views/supply-demand.js): bars and badges coloured by how a company is tied to it. */
.ie-fill.producer, .ie-key.producer { background: #2e9e5b; }
.ie-fill.holder, .ie-key.holder { background: var(--accent); }
.ie-fill.indirect, .ie-key.indirect { background: #8a6fd1; }
.ie-fill.consumer, .ie-key.consumer { background: #e08a2c; }
.ie-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ie-legend { display: inline-flex; flex-wrap: wrap; gap: 12px; color: var(--text-secondary); }
.ie-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.ie-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.ie-bar-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 60px; align-items: center; gap: 8px; margin-block: 4px; }
.ie-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-track { position: relative; height: 12px; border-radius: 6px; background: var(--surface-2); }
.ie-track .ie-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; }
.ie-bar-value { font-variant-numeric: tabular-nums; text-align: end; }
.ie-cell { display: inline-flex; align-items: center; gap: 6px; }
.ie-mini { position: relative; display: inline-block; width: 56px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ie-mini .ie-fill { position: absolute; inset-block: 0; inset-inline-start: 0; }
.ie-routes { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.badge.ie-route { border-inline-start: 3px solid transparent; }
.badge.ie-route.producer { border-inline-start-color: #2e9e5b; }
.badge.ie-route.holder { border-inline-start-color: var(--accent); }
.badge.ie-route.indirect { border-inline-start-color: #8a6fd1; }
.badge.ie-route.consumer { border-inline-start-color: #e08a2c; }
.ie-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }

/* ==================================================================
   Responsive shell and motion: the desktop mega-menu, the phone drawer and dock, tables as cards on a phone,
   the loading skeleton and the page's entrance. Every animation moves only transform and opacity, so the
   compositor does the work and the page stays light on the CPU.
   ================================================================== */

:root { --glow-2: rgba(27, 175, 122, 0.08); --dock-h: 0px; }
:root[data-theme="dark"] { --glow-2: rgba(25, 158, 112, 0.10); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --glow-2: rgba(25, 158, 112, 0.10); } }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 0% 100%, var(--glow-2), transparent 70%),
    radial-gradient(700px 360px at 100% 0%, var(--page-glow), transparent 70%);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Headings grow with the screen instead of jumping at a breakpoint, and the big ones carry the accent. */
.section-head h1, .company-title h1, .welcome-hero h1 {
  font-size: clamp(21px, 1.05rem + 1.1vw, 30px);
  width: fit-content;
  max-width: 100%;
  /* to the left: the start of a right-to-left heading in the text colour, its end in the accent */
  background: linear-gradient(to left, var(--text-primary) 45%, var(--accent-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head h1 *, .company-title h1 * { -webkit-text-fill-color: initial; }
.section-head h2 { font-size: clamp(15.5px, 0.9rem + 0.35vw, 18px); }

/* Each page arrives with a short rise; «backwards» so nothing is left transformed afterwards (a transform would
   become the containing block of the fixed and sticky things inside the page). */
#app > * { animation: view-in 0.32s var(--ease) backwards; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* Loading: the outline of a page, shimmering. Inside something narrow only the title bar is drawn. */
.loading.skeleton {
  display: grid;
  gap: 14px;
  justify-content: stretch;
  padding-block: 20px;
  container-type: inline-size;
}
.loading.skeleton::before { display: none; }
.sk { position: relative; overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 70%, transparent), transparent);
  animation: shimmer 1.4s ease-in-out infinite;
}
.sk-title { height: 26px; width: min(320px, 60%); }
.sk-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sk-tile { height: 78px; }
.sk-block { height: 200px; }
@keyframes shimmer { to { transform: translateX(-100%); } }
@container (max-width: 260px) { .sk-row, .sk-block { display: none; } }

/* Stat tiles: a soft wash from the top, the edge in green or red when the figure's change is good or bad. */
.tile {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface-1)), var(--surface-1) 60%);
}
.tile:hover { transform: translateY(-2px); }
.tile:has(.delta.good)::before { background: var(--status-good); opacity: 1; }
.tile:has(.delta.bad)::before { background: var(--status-critical); opacity: 1; }
.tile-value { font-size: clamp(18px, 0.95rem + 0.55vw, 23px); }

/* Navigation group heads carry an icon. */
.nav-icon { display: inline-grid; place-items: center; color: var(--text-muted); }
.nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-group.current .nav-icon, .nav-group[open] .nav-icon { color: var(--accent-ink); }
.drawer-head { display: none; }
.dock, .scrim, .stack-sort { display: none; }

/* Wide screens: a group opens as a mega-menu under the whole bar, its pages in as many columns as fit. */
@media (min-width: 761px) {
  .main-nav-inner { position: relative; }
  .nav-group { position: static; }
  .nav-panel {
    top: calc(100% + 4px);
    inset-inline: 20px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 4px;
    padding: 10px;
    max-height: calc(100vh - var(--topbar-h) - 24px);
    border-radius: 18px;
    background:
      radial-gradient(500px 200px at 100% 0%, var(--accent-wash), transparent 70%),
      var(--surface-1);
  }
  .nav-panel .tool-link { padding: 10px 12px; border: 1px solid transparent; transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease); }
  .nav-panel .tool-link:hover { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  .nav-panel .tool-link:hover .tool-icon { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; }
  .tool-icon { transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
  .nav-panel .tool-body > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ------------------------------------------------------------------
   Phones: the top bar is one short row; the groups live in a drawer; a dock sits under the thumb.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --dock-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  /* No backdrop filter on the bar here: it would make the bar the containing block of the fixed drawer and sheet. */
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--surface-1) 96%, transparent); }
  .main-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 60;
    width: min(88vw, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: 24px;
    background: var(--surface-1);
    border: 0;
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
  }
  [dir="ltr"] .main-nav { transform: translateX(-100%); }
  .nav-open .main-nav { transform: none; visibility: visible; transition: transform 0.28s var(--ease); }
  .nav-open body { overflow: hidden; }
  .nav-open .topbar { z-index: 70; }
  .nav-open .topbar-inner { opacity: 0.35; pointer-events: none; }
  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    background:
      radial-gradient(260px 120px at 100% 0%, var(--accent-wash), transparent 70%),
      var(--surface-1);
    border-bottom: 1px solid var(--border);
    font-size: 17px;
  }
  .main-nav-inner { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; padding: 10px; }
  .nav-group { position: static; }
  .nav-group > summary { padding: 11px 12px; border-radius: 12px; font-size: 15px; gap: 10px; }
  .nav-group > summary .nav-count { margin-inline-start: auto; }
  .nav-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); }
  .nav-icon svg { width: 18px; height: 18px; }
  .nav-group.current .nav-icon, .nav-group[open] .nav-icon { background: var(--accent-wash); }
  .nav-panel {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 2px 0 8px;
    padding-inline-start: 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    animation: drop 0.18s var(--ease);
  }
  .nav-panel .tool-body > span { display: none; }
  .nav-panel .tool-link { align-items: center; padding: 9px 10px; }
  .nav-panel .tool-icon { width: 28px; height: 28px; }

  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease);
  }
  .nav-open .scrim { opacity: 1; pointer-events: auto; }

  .dock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 50;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: var(--dock-h);
    padding: 6px 8px env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface-1) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--border);
  }
  .dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-btn:hover { text-decoration: none; color: var(--text-primary); }
  .dock-btn svg {
    width: 44px;
    height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .dock-btn:active svg { transform: scale(0.92); }
  .dock-btn[aria-current], .dock-btn[aria-expanded="true"], .dock-btn.current { color: var(--accent-ink); }
  .dock-btn[aria-current] svg, .dock-btn[aria-expanded="true"] svg, .dock-btn.current svg { background: var(--accent-wash); }

  /* The account menu rises as a sheet above the dock. */
  .user-menu {
    position: fixed;
    top: auto;
    inset-inline: 10px;
    inset-block-end: calc(var(--dock-h) + 10px);
    min-width: 0;
    max-height: 70vh;
    padding: 10px;
    border-radius: 20px;
    white-space: normal;
  }
  .user-menu.open { animation: sheet 0.22s var(--ease); }
  .user-menu a, .user-menu .link-btn { padding: 12px 14px; }

  #app { padding-block-end: calc(var(--dock-h) + 28px); }
  .to-top { inset-block-end: calc(var(--dock-h) + 12px); }
}
@keyframes sheet { from { opacity: 0; transform: translateY(16px); } }

/* ------------------------------------------------------------------
   Tables on a phone. A narrow table (core.js marks it .stackable and labels its cells) becomes one card per row:
   the first cell its title, every other cell a «title … value» line. A wide one scrolls, first column held.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  table.data.stackable, table.data.stackable tbody { display: block; }
  table.data.stackable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  table.data.stackable tbody tr { display: block; border-bottom: 1px solid var(--grid); }
  table.data.stackable tbody tr:last-child { border-bottom: 0; }
  table.data.stackable tbody tr > * {
    display: block;
    min-width: 0;
    padding: 3px 14px;
    border: 0;
    text-align: end;
    font-size: 13px;
  }
  table.data.stackable tbody tr > [data-label]::before {
    content: attr(data-label);
    float: inline-start;
    max-width: 55%;
    margin-inline-end: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-align: start;
  }
  table.data.stackable tbody tr > :first-child {
    padding-block-start: 11px;
    text-align: start;
    font-size: 14.5px;
    font-weight: 700;
  }
  table.data.stackable tbody tr > :first-child::before { display: none; }
  table.data.stackable tbody tr > :last-child { padding-block-end: 11px; }
  table.data.stackable tbody tr > *::after { content: ""; display: block; clear: both; }
  table.data.stackable .row-actions, table.data.stackable .badges { justify-content: flex-end; }

  .stack-sort { display: flex; gap: 8px; margin-block-end: 8px; }
  .stack-sort select { flex: 1; min-width: 0; }

  table.data:not(.stackable):not(.pivot) tr > :first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    box-shadow: inset -1px 0 0 var(--grid);
  }
  table.data:not(.stackable):not(.pivot) thead tr > :first-child { z-index: 3; }
}
/* The far edge fades while more columns wait beyond it (the end side: left in a right-to-left page). */
.table-wrap.has-more {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 32px);
  mask-image: linear-gradient(to left, transparent, #000 32px);
}

@media print {
  .dock, .scrim, .stack-sort { display: none !important; }
  #app > * { animation: none; }
}

/* ------------------------------------------------------------------
   Reading a chart and a table (core.js headline, sparkline, sortedBars)
   ------------------------------------------------------------------ */

/* The strip over a chart: each series' latest figure, large, with how far it moved and against what. */
.chart-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 8px;
  margin-block: 12px 4px;
}
.chart-kpi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.chart-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.chart-kpi-label .key { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--key); }
.chart-kpi-value { font-size: clamp(17px, 0.9rem + 0.5vw, 21px); font-weight: 750; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }
.chart-kpi-delta { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.chart-kpi-delta span { font-weight: 400; color: var(--text-muted); }

/* A pivot row's trend, under its title: the line in the first series colour, the latest point ringed. */
.spark { display: block; width: 72px; height: 22px; margin-block-start: 3px; margin-inline: auto; overflow: visible; direction: ltr; }
.spark polyline { fill: none; stroke: var(--series-1); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 1.5; }
table.pivot tr.group .spark { display: none; }

/* The sorted column's bars: a band inside the cell from its start edge, as long as the figure against the largest. */
table.data td.bar-cell {
  background-image: linear-gradient(to left, var(--series-1) var(--bar), color-mix(in srgb, var(--series-1) 12%, transparent) var(--bar));
  background-size: calc(100% - 24px) 4px;
  background-position: right 12px bottom 5px;
  background-repeat: no-repeat;
}
table.data td.bar-cell.bar-neg {
  background-image: linear-gradient(to left, var(--bad) var(--bar), color-mix(in srgb, var(--bad) 12%, transparent) var(--bar));
}
@media (max-width: 600px) {
  table.data.stackable td.bar-cell { background-image: none; }
}
@media print {
  table.data td.bar-cell { background-image: none; }
}

/* ------------------------------------------------------------------
   Charts that arrive: the card's lit edge and glow, bars rising, lines drawing themselves (core.js drawIn)
   ------------------------------------------------------------------ */
.chart-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(420px 180px at 100% 0%, color-mix(in srgb, var(--series-1) 9%, transparent), transparent 70%),
    var(--surface-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chart-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(to left, var(--series-1), color-mix(in srgb, var(--series-3) 70%, transparent) 55%, transparent);
  opacity: 0.85;
}
.chart-card:hover {
  border-color: color-mix(in srgb, var(--series-1) 30%, var(--border));
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--series-1) 10%, transparent);
}
.chart-card h3 { font-size: 15px; }
/* The first figure of the strip leads: a touch larger, on a wash of the series colour. */
.chart-kpi:first-child {
  background: linear-gradient(135deg, color-mix(in srgb, var(--series-1) 14%, var(--surface-2)), var(--surface-2));
}
.chart-kpi:first-child .chart-kpi-value { font-size: clamp(19px, 1rem + 0.7vw, 25px); }
.chart-kpi-delta.up, .chart-kpi-delta.down {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  width: fit-content;
}

.plot-enter .barlayer .point path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bar-rise 0.7s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.plot-enter .scatterlayer .js-line { animation: line-draw 1.1s var(--ease) backwards; }
.plot-enter .scatterlayer .js-fill { animation: fade-up 0.9s var(--ease) 0.25s backwards; }
.plot-enter .scatterlayer .points path { animation: pop 0.4s var(--ease) 0.9s backwards; transform-box: fill-box; transform-origin: center; }
@keyframes bar-rise { from { transform: scaleY(0); opacity: 0; } }
@keyframes line-draw {
  from { stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: var(--len, 0); }
  to { stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: 0; }
}
@keyframes fade-up { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@media print {
  .chart-card::before { display: none; }
  .barlayer .point path { filter: none !important; }
}

/* ------------------------------------------------------------------
   مدیریت کاربران (views/admin.js renderAdmin): tabs, a list of people, one editor panel
   ------------------------------------------------------------------ */
.admin-tabs { margin-block: 4px 18px; }
.admin-tabs button { display: inline-flex; align-items: center; gap: 6px; padding-block: 7px; }
.admin-tabs .nav-count { background: var(--surface-1); }
.user-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-block: 18px 10px; }
.user-toolbar input[type="search"] { flex: 1 1 240px; min-width: 0; border-radius: 999px; padding-inline: 16px; }
.user-toolbar .btn.primary { margin-inline-start: auto; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-secondary); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.chip-filter span { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); font-size: 11px; text-align: center; }
.chip-filter:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip-filter[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 600; }

.user-list { display: grid; gap: 8px; }
.user-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 2fr) auto auto;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.user-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.user-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.user-card.is-inactive { opacity: 0.62; }
.user-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.user-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.user-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.user-chevron { color: var(--text-muted); font-size: 20px; line-height: 1; transition: transform 0.15s var(--ease); }
.user-card:hover .user-chevron { transform: translateX(-3px); color: var(--accent-ink); }
.user-empty { text-align: center; padding-block: 24px; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--series-3) 40%, var(--surface-2)), var(--surface-2));
  color: var(--text-primary); font-weight: 800; font-size: 16px;
}
.avatar.admin { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; }
.avatar.large { width: 52px; height: 52px; font-size: 21px; }
@media (max-width: 760px) {
  .user-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .user-tags { grid-column: 2 / -1; grid-row: 2; }
  .user-chevron { display: none; }
  .user-toolbar .btn.primary { flex: 1 1 100%; }
}

/* The editor: a panel sliding in from the side (a sheet from the bottom on a phone), a modal <dialog>. */
.user-editor {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  margin: 0;
  width: min(560px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
.user-editor[open] { animation: editor-in 0.26s var(--ease); }
.user-editor::backdrop { background: rgba(0, 0, 0, 0.45); }
@keyframes editor-in { from { opacity: 0; transform: translateX(-24px); } }
.user-editor-form { display: flex; flex-direction: column; height: 100%; }
.user-editor-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(360px 140px at 100% 0%, var(--accent-wash), transparent 70%), var(--surface-1);
}
.user-editor-head > div { flex: 1; min-width: 0; }
.user-editor-head h2 { font-size: 18px; }
.user-editor-head p { margin: 0; }
.user-editor-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 18px 18px; }
.editor-block { padding-block: 14px; border-bottom: 1px dashed var(--grid); }
.editor-block:last-of-type { border-bottom: 0; }
.editor-block h3 { font-size: 14px; margin-block-end: 10px; }
.editor-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.editor-grid .field input, .editor-grid .field select { width: 100%; }
.user-editor-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.user-editor-foot .btn.danger { margin-inline-start: auto; }
@media (max-width: 760px) {
  .user-editor { inset: auto 0 0 0; width: 100vw; height: 92dvh; border-radius: 20px 20px 0 0; border-inline-start: 0; }
  @keyframes editor-in { from { opacity: 0; transform: translateY(32px); } }
}

/* A switch: a checkbox drawn as a toggle, with its title and what it does beside it. */
.switch-row { display: flex; align-items: flex-start; gap: 12px; padding-block: 6px; cursor: pointer; }
.switch-row > span { display: flex; flex-direction: column; line-height: 1.6; }
.switch-row small { color: var(--text-secondary); font-size: 12px; }
input.switch {
  appearance: none; -webkit-appearance: none;
  flex: none; position: relative;
  width: 40px; height: 22px; margin: 2px 0 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
input.switch::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease);
}
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(-18px); }
[dir="ltr"] input.switch:checked::after { transform: translateX(18px); }
input.switch:disabled { opacity: 0.5; cursor: not-allowed; }
input.switch:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.editor-block input[type="search"] { width: 100%; margin-block: 6px 10px; border-radius: 999px; padding-inline: 14px; }
.section-groups { display: grid; gap: 10px; }
.section-group { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 0; }
.section-group legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 12.5px; font-weight: 700; }
.section-group-actions { font-weight: 400; color: var(--text-muted); }
.section-grid { display: grid; gap: 2px 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.section-pick { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.section-pick:hover { background: var(--surface-2); }
.section-pick input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.section-pick span { flex: 1; min-width: 0; }
.section-pick .from-package { display: none; font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-ink); }
.section-pick.is-package .from-package { display: inline; }
.section-pick.is-package { color: var(--text-secondary); }
.password-row { display: flex; flex-wrap: wrap; gap: 6px; }
.password-row input { flex: 1 1 200px; min-width: 0; font-family: var(--mono); letter-spacing: 0.03em; }

/* بسته‌ها as cards: how much of the site each opens, its daily limits, how many hold it. */
.package-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.package-card { display: flex; flex-direction: column; gap: 10px; }
.package-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.package-card h3 { font-size: 16px; }
.package-card p { margin: 0; }
.package-meter { display: grid; gap: 4px; }
.package-meter > span { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--series-1) 14%, var(--surface-2)); overflow: hidden; }
.package-meter > span::before { content: ""; display: block; height: 100%; width: var(--fill); border-radius: 999px; background: linear-gradient(to left, var(--accent-2), var(--accent)); }
.package-meter small { color: var(--text-secondary); }
.package-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.package-limits > div { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.package-limits dt { font-size: 11.5px; color: var(--text-secondary); }
.package-limits dd { margin: 0; font-weight: 700; }
.package-sections summary { cursor: pointer; font-size: 12.5px; color: var(--accent-ink); }
.package-sections .badges { margin-block-start: 8px; }

/* Feature states: a row not «فعال» is marked on its edge, so what is switched off stands out in a long list. */
.features-table tr[data-state="updating"] > th { box-shadow: inset -3px 0 0 var(--status-warning); }
.features-table tr[data-state="hidden"] > th { box-shadow: inset -3px 0 0 var(--status-critical); }
.features-table input[type="text"] { width: 100%; min-width: 160px; }
.sticky-actions { position: sticky; inset-block-end: 0; padding-block: 10px; background: var(--surface-1); justify-content: flex-start; }
.date-pair { display: flex; flex-direction: column; gap: 2px; } .date-pair input { width: 100%; }
@media (max-width: 760px) {
  /* Phones: the tabs and the counts are one sliding row each, so the list starts on the first screen. */
  .admin-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs button { flex: none; white-space: nowrap; }
  .admin-users-page .tiles {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr);
    overflow-x: auto; scrollbar-width: none; gap: 8px; padding-block-end: 2px;
  }
  .admin-users-page .tiles::-webkit-scrollbar { display: none; }
  .admin-users-page .tile { padding: 9px 12px; }
  .admin-users-page .tile-label { font-size: 11.5px; white-space: nowrap; }
  .admin-users-page .tile-value { font-size: 18px; }
  .user-toolbar select { flex: 1; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip-filter { flex: none; white-space: nowrap; }
}

/* ------------------------------------------------------------------
   Messages: an icon for the kind beside the sentence; the admin's technical details folded under it; the confirm box
   ------------------------------------------------------------------ */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-style: solid;
  border-color: var(--border);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-1));
  color: var(--text-primary);
}
.notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.notice-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice-body { flex: 1; min-width: 0; padding-block-start: 5px; }
.notice.warn .notice-icon, .notice-icon.danger { background: color-mix(in srgb, var(--warn-ink) 14%, transparent); color: var(--warn-ink); }
.notice.error .notice-icon { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.notice.ok { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 6%, var(--surface-1)); }
.notice.ok .notice-icon { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.notice-tech { margin-block-start: 8px; font-size: 12px; color: var(--text-secondary); }
.notice-tech summary { cursor: pointer; width: fit-content; }
.notice-tech code { display: inline-block; margin-block-start: 6px; max-width: 100%; overflow-wrap: anywhere; }

.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
.confirm-dialog[open] { animation: sheet 0.2s var(--ease); }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.confirm-body { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 8px; }
.confirm-body p { margin: 0; padding-block-start: 5px; line-height: 1.9; }
.confirm-actions { display: flex; gap: 8px; padding: 12px 20px 18px; }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger.solid:hover { filter: brightness(1.08); background: var(--bad); }

/* ------------------------------------------------------------------
   دیده‌بان‌های من (views/watchlists.js): quick add, three views (table, cards with a description, comparison)
   ------------------------------------------------------------------ */
.quick-add { display: grid; gap: 8px; margin-block: 10px 14px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 4%, var(--surface-1)); }
.quick-add-row { display: flex; gap: 8px; }
.quick-add-row input { flex: 1; min-width: 0; border-radius: 999px; padding-inline: 16px; }
.symbol-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.symbol-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); font-size: 13px; font-weight: 600; }
.symbol-chip a { color: var(--text-primary); }
.symbol-chip button:not(.link-btn) { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.symbol-chip button:not(.link-btn):hover { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.watch-views { margin-block-end: 12px; }

.watch-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.watch-card { display: flex; flex-direction: column; gap: 10px; }
.watch-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.watch-change { font-size: 15px; }
.watch-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.watch-figures > div { display: flex; flex-direction: column; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.watch-figures span { font-size: 11.5px; color: var(--text-secondary); }
.watch-figures strong { font-size: 15px; }
.watch-desc { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.9; color: var(--text-secondary); }

.compare-view { display: grid; gap: 14px; }
.compare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 6px; }
.compare-head h3 { font-size: 15px; }
.compare-bars { display: grid; gap: 6px; }
.compare-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 88px; align-items: center; gap: 10px; }
.compare-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-track { position: relative; height: 14px; border-radius: 999px; background: var(--surface-2); }
.compare-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 999px;
  background: linear-gradient(to left, color-mix(in srgb, var(--series-1) 55%, transparent), var(--series-1));
  transform-origin: right; animation: bar-grow 0.6s var(--ease) backwards; }
.compare-fill.neg { background: linear-gradient(to left, color-mix(in srgb, var(--bad) 55%, transparent), var(--bad)); }
.compare-row.best .compare-fill { box-shadow: 0 0 10px color-mix(in srgb, var(--series-1) 60%, transparent); }
.compare-mid { position: absolute; inset-block: -4px; inset-inline-start: var(--m); width: 2px; border-radius: 2px; background: var(--text-muted); }
.compare-value { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; text-align: end; overflow: hidden; text-overflow: ellipsis; }
@keyframes bar-grow { from { transform: scaleX(0); } }
@media (max-width: 600px) { .compare-row { grid-template-columns: 56px minmax(0, 1fr) 72px; gap: 6px; } }
/* Diverging: the zero line in the middle; a gain grows toward the end side, a loss toward the start side. */
.compare-track.diverging::before { content: ""; position: absolute; inset-block: -3px; inset-inline-start: 50%; width: 1px; background: var(--axis); }
.compare-track.diverging .compare-fill { inset-inline-start: 50%; transform-origin: right; border-radius: 999px 0 0 999px; }
.compare-track.diverging .compare-fill.neg { inset-inline-start: auto; inset-inline-end: 50%; transform-origin: left; border-radius: 0 999px 999px 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--bad) 55%, transparent), var(--bad)); }
.search-filter { margin-block: 4px 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); width: fit-content; max-width: 100%; }

/* ------------------------------------------------------------------
   Packages as pricing cards (admin and the reader's «بسته‌ها» page) and the feature × package matrix
   ------------------------------------------------------------------ */
.price-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.price-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.price-card header h3 { font-size: 17px; margin-inline-end: auto; }
.price-card > .btn { margin-block-start: auto; }
.price-card.is-highlight {
  border-color: var(--accent);
  background: radial-gradient(320px 160px at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--surface-1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-md);
}
.price-card.is-off { opacity: 0.7; }
.price-card.is-current { border-color: var(--good); box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent); }
.price-ribbon {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%; transform: translateX(50%);
  padding: 1px 14px 3px; border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}
[dir="ltr"] .price-ribbon { transform: translateX(-50%); }
.price-card.is-highlight { padding-block-start: 26px; }
.price-tag strong { font-size: clamp(20px, 1rem + 0.8vw, 26px); font-weight: 800; }
.price-tag span { color: var(--text-secondary); font-size: 13px; }
.price-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.price-perks li { display: flex; gap: 8px; align-items: baseline; }
.price-perks li::before { content: "✓"; color: var(--good); font-weight: 800; }

.matrix-wrap { max-height: 70vh; }
table.package-matrix td { text-align: center; }
table.package-matrix td input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
table.package-matrix tbody th[scope="row"] { text-align: start; font-weight: 500; position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface-1); min-width: 220px; }
table.package-matrix tr.group > th { text-align: start; background: var(--surface-2); color: var(--text-primary); font-weight: 700; position: static; }
table.package-matrix thead th { white-space: nowrap; }

/* Nothing wider than the window may push the page sideways (an over-wide row would let the browser scroll a
   right-to-left page to the right): «clip», not «hidden», so the sticky bars keep working. Wide tables and plots
   scroll inside their own boxes. */
html, body { overflow-x: clip; }

/* بورس‌باز on the login card and the landing page. */
.auth-brand, .welcome-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand img, .welcome-brand img { border-radius: 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.auth-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.auth-brand strong { font-size: 22px; font-weight: 800; }
.auth-brand small, .welcome-tagline { color: var(--accent-ink); }
.auth-brand small { font-size: 10px; font-weight: 700; letter-spacing: 2.6px; direction: ltr; text-align: right; }
.welcome-brand { margin-block-end: 10px; }
.welcome-brand h1 { margin: 0; }
.welcome-hero .welcome-tagline { margin: 2px 0 0; font-weight: 600; color: var(--accent-ink); }
/* The holdings at the centre of an ownership graph, each removable. */
.net-focus-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px 0; }
.net-focus .symbol-chip { gap: 4px; padding-inline-start: 12px; }
.net-focus .symbol-chip .link-btn { width: auto; height: auto; padding: 0; white-space: nowrap; color: var(--text-primary); font-weight: 600; font-size: 13px; }
.net-too-big { margin-block: 10px 0; }

/* «حمایت از ما» and «ارتباط با ما» (views/site.js), and the site's footer. */
.site-page { max-width: 760px; margin-inline: auto; display: grid; gap: 16px; }
.site-hero { display: flex; align-items: flex-start; gap: 16px; padding: 22px;
  background: radial-gradient(420px 180px at 100% 0%, var(--accent-wash), transparent 70%), var(--surface-1); }
.site-hero h1 { margin: 0 0 6px; font-size: clamp(21px, 1rem + 1vw, 28px); }
.site-hero p { margin: 0; color: var(--text-secondary); line-height: 2; }
.site-hero-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.site-hero-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-card { display: grid; gap: 8px; padding: 14px; }
.site-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: inherit; }
.site-link:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.site-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-wash); color: var(--accent-ink); }
.site-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.site-row-label { font-size: 12px; color: var(--text-secondary); }
.site-row-value { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; letter-spacing: 0.02em; }
.site-row-go { color: var(--text-muted); }
.site-pay { justify-self: start; margin-block-end: 4px; }
.site-thanks { text-align: center; color: var(--text-secondary); margin: 0; }
.site-footer { border-top: 1px solid var(--border); margin-block-start: 24px; }
.site-footer-inner { max-width: 1320px; margin-inline: auto; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 18px; font-size: 13px; color: var(--text-secondary); }
.site-footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text-primary); }
.site-footer-brand img { border-radius: 6px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--accent-ink); }
@media (max-width: 760px) {
  .site-footer { padding-block-end: var(--dock-h); }
  #app { padding-block-end: 28px; }
}
@media print { .site-footer { display: none; } }
.site-editors { display: grid; gap: 14px; }
.site-editor { display: grid; gap: 10px; }
.site-editor textarea, .site-editor .field input { width: 100%; }
.wallet-rows { display: grid; gap: 6px; }
.wallet-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 6px; }
@media (max-width: 600px) { .wallet-row { grid-template-columns: minmax(0, 1fr) auto; } .wallet-row input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
.fiscal-change-list { margin: 6px 0 10px; padding-inline-start: 18px; display: grid; gap: 4px; }

/* Reading text set the Persian way: both edges flush (justified), the last line at the start, so a paragraph's lines
   no longer stop at uneven points. Short labels, numbers and centred text keep their own alignment. */
.welcome-hero > p, .welcome-cards .shortcut-body > span:nth-child(2), .notice p, p.note, .site-hero p, .mv-card p,
.chart-card > .sub, .price-card > p, .watch-desc li, .method-list li, .notes-list li, .formulas li, .rec-list li,
.mv-intro p, .sd-headlines li, .calc-formula, .brief-text p, .net-panel p, .user-editor .muted.small, .editor-block > p,
.section-head > .sub {
  text-align: justify;
  text-align-last: start;
  text-justify: inter-word;
  hyphens: none;
}
/* The landing page: its paragraph spans the card, and the actions sit at its start like the text above them. */
.welcome-hero > p { max-width: none; }
.welcome-hero .row-actions { justify-content: flex-start; }
.welcome-cards .shortcut-body > span:nth-child(3) { align-self: flex-start; margin-block-start: 6px; }

/* ------------------------------------------------------------------
   نقشه جریان ارزش (views/value-flow.js)
   ------------------------------------------------------------------ */
.vf-page { display: grid; gap: 16px; }
.vf-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: center;
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-wash), transparent 60%), var(--surface-1);
}
.vf-hero h1 { margin: 0 0 6px; font-size: 22px; }
.vf-hero p { margin: 0 0 10px; color: var(--text-secondary); }
.vf-path { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vf-path li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.vf-path li:not(:last-child)::after { content: "←"; color: var(--text-muted); font-weight: 400; }
.vf-art { width: 100%; height: auto; }
.vf-ribbon { fill: none; stroke-width: 9; stroke-linecap: round; opacity: 0.85; stroke-dasharray: 26 14; animation: vf-flow 3.2s linear infinite; }
.vf-ribbon.r1 { stroke: var(--series-1); }
.vf-ribbon.r2 { stroke: var(--series-3); animation-duration: 4s; }
.vf-ribbon.r3 { stroke: var(--series-2); animation-duration: 4.8s; }
@keyframes vf-flow { to { stroke-dashoffset: -80; } }
@media (max-width: 640px) { .vf-hero { grid-template-columns: 1fr; } .vf-art { display: none; } }

.vf-chains { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-chain {
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-secondary); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; font: inherit; font-weight: 500;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.vf-chain:hover { color: var(--text-primary); border-color: var(--accent); }
.vf-chain[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(180deg, var(--accent-2), var(--accent)); font-weight: 600; }
.vf-tabs { position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 15; justify-self: start; box-shadow: var(--shadow-sm); }
.vf-body { display: grid; gap: 16px; min-width: 0; }
.vf-body > * { min-width: 0; }
.vf-map, .vf-spread, .vf-shock, .vf-lead, .vf-journey { display: grid; gap: 16px; min-width: 0; }
.vf-summary { margin: 0; font-size: 15px; line-height: 1.9; }
.vf-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.vf-card-head h3 { margin: 0; }
.vf-notes { display: grid; gap: 6px; }

.vf-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vf-slider { flex: 1 1 220px; accent-color: var(--accent); min-width: 0; }
.vf-month { min-width: 9em; font-weight: 700; font-size: 16px; display: inline-flex; gap: 6px; align-items: center; }
.vf-play { min-width: 6em; }

.vf-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.vf-strip > li { position: relative; display: flex; min-width: 0; }
.vf-strip > li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-end: -10px; top: 50%; width: 10px; height: 2px; background: var(--border-strong);
}
.vf-stage {
  flex: 1; display: grid; gap: 3px; align-content: start; text-align: start; font: inherit; color: inherit; cursor: pointer;
  padding: 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-1); box-shadow: var(--shadow-sm);
  border-block-start: 4px solid var(--border-strong); transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
div.vf-stage { cursor: default; }
button.vf-stage:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.vf-stage.up { border-block-start-color: var(--good); background: linear-gradient(180deg, color-mix(in srgb, var(--good) 8%, transparent), transparent 70%), var(--surface-1); }
.vf-stage.down { border-block-start-color: var(--bad); background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 8%, transparent), transparent 70%), var(--surface-1); }
.vf-stage.picked { outline: 2px solid var(--accent); outline-offset: 1px; }
.vf-stage-title { font-weight: 700; }
.vf-stage-share { font-size: 22px; font-weight: 800; display: grid; line-height: 1.25; }
.vf-stage-share small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.vf-stage-delta { font-size: 12px; font-weight: 600; }
.vf-stage.up .vf-stage-delta { color: var(--good); }
.vf-stage.down .vf-stage-delta { color: var(--bad); }
.vf-stage-row { font-size: 12px; color: var(--text-secondary); }
.vf-stage-row b { color: var(--text-primary); font-weight: 600; }

/* A phone scrolls the flow sideways rather than squeezing six stages' labels on top of each other. */
.vf-sankey-wrap { overflow-x: auto; }
@media (max-width: 640px) { .vf-sankey-wrap .vf-plot { min-width: 620px; } }
.vf-map-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .vf-map-grid { grid-template-columns: minmax(0, 1fr); } }
.vf-companies h3 { margin-block-end: 2px; }
.vf-bars { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.vf-bars li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.vf-bar-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vf-bar-fill { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: vf-grow 0.7s var(--ease) both; transform-origin: right; }
.vf-bar-value { font-weight: 600; font-size: 13px; display: grid; justify-items: end; }
.vf-bar-value small { font-weight: 400; color: var(--text-muted); font-size: 11px; }
@keyframes vf-grow { from { transform: scaleX(0); } }

.vf-spread-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.vf-spread-card { display: grid; gap: 4px; border-block-start: 4px solid var(--good); }
.vf-spread-card.negative { border-block-start-color: var(--bad); }
.vf-spread-name { font-weight: 700; }
.vf-spread-big { font-size: 24px; font-weight: 800; }
.vf-spread-big small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.vf-spread-pct { color: var(--text-secondary); font-size: 13px; }
.vf-spread-delta { font-size: 12px; font-weight: 600; }
.vf-spread-delta.up { color: var(--good); }
.vf-spread-delta.down { color: var(--bad); }

.vf-shock-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 14px; align-items: end; }
@media (max-width: 860px) { .vf-shock-controls { grid-template-columns: minmax(0, 1fr); } }
.vf-shock-controls select { width: 100%; }
.vf-range-row { display: flex; align-items: center; gap: 10px; }
.vf-shock-size { min-width: 4.5em; font-size: 20px; font-weight: 800; color: var(--accent-ink); text-align: center; }
.vf-ripple { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.vf-wave.go { animation: vf-pulse 0.8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes vf-pulse { 0% { transform: scale(0.94); opacity: 0.4; } 60% { transform: scale(1.04); } 100% { transform: none; opacity: 1; } }
td.good { color: var(--good); font-weight: 600; }
td.bad { color: var(--bad); font-weight: 600; }

.vf-lead-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vf-lead-card { display: grid; gap: 6px; text-align: start; font: inherit; color: inherit; cursor: pointer; line-height: 1.8; border-inline-start: 4px solid var(--border-strong); }
.vf-lead-card.strong { border-inline-start-color: var(--series-1); }
.vf-lead-card.picked { outline: 2px solid var(--accent); outline-offset: 1px; }
.vf-lead-pair { font-weight: 700; color: var(--accent-ink); }
.vf-lead-tag { justify-self: start; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); }
.vf-lead-card.strong .vf-lead-tag { background: var(--accent-wash); color: var(--accent-ink); }

.vf-journey-head p { margin: 0; font-size: 16px; line-height: 2; }
.vf-journey-head .sub { font-size: 12px; margin-block-start: 6px; }
.vf-times { font-size: 20px; color: var(--accent-ink); }
.vf-stations { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 0; list-style: none; }
.vf-stations::before {
  content: ""; position: absolute; inset-inline-start: 19px; top: 20px; bottom: 20px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--series-1), var(--series-3), var(--series-2));
}
.vf-station { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start;
  animation: vf-rise 0.6s var(--ease) both; animation-delay: calc(var(--i) * 180ms); }
.vf-station-dot {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 0 4px var(--page), var(--shadow-md);
}
.vf-station-card h3 { margin: 0 0 6px; }
.vf-station-card p { margin: 6px 0 0; }
.vf-station-big { font-size: 20px; font-weight: 800; }
.vf-station-bar { display: block; height: 8px; margin-block-start: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vf-station-bar span { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--series-3), var(--series-1));
  animation: vf-grow 0.9s var(--ease) both; animation-delay: calc(var(--i) * 180ms + 200ms); transform-origin: right; }
.vf-station-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block-start: 8px; }
.vf-station-card .good { color: var(--good); }
.vf-station-card .bad { color: var(--bad); }
@keyframes vf-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .vf-ribbon, .vf-station, .vf-station-bar span, .vf-bar-fill, .vf-wave.go { animation: none; }
}

/* ------------------------------------------------------------------
   Landing page (views/welcome.js): a night sky of drifting particles, a glowing title, the brand mark orbited by the
   Codal forms, and sections that rise in as they scroll into view. Motion is CSS keyframes plus one canvas, all of it
   stilled under prefers-reduced-motion.
   ------------------------------------------------------------------ */
.lp { --lp-night: #040a14; --lp-blue: #3f8ae6; --lp-blue-2: #5fb3ff; --lp-green: #1baf7a; --lp-gold: #ffd166; }
.lp-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #eaf2ff;
  margin-inline: calc(50% - 50vw); margin-block-start: -24px; min-height: min(760px, calc(100svh - var(--topbar-h)));
  display: grid; align-items: center; padding: 56px max(20px, calc(50vw - 640px)) 84px;
  background:
    radial-gradient(60% 55% at 70% 40%, rgba(63, 138, 230, 0.22), transparent 70%),
    radial-gradient(45% 50% at 15% 80%, rgba(27, 175, 122, 0.16), transparent 70%),
    linear-gradient(180deg, #030812 0%, var(--lp-night) 60%, #06101f 100%);
}
.lp-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lp-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
.lp-glow.g1 { width: 420px; height: 420px; inset-inline-start: 8%; top: 10%; background: rgba(63, 138, 230, 0.35); animation: lp-drift 14s ease-in-out infinite alternate; }
.lp-glow.g2 { width: 360px; height: 360px; inset-inline-end: 10%; bottom: 0; background: rgba(27, 175, 122, 0.28); animation: lp-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes lp-drift { to { transform: translate(40px, -30px) scale(1.12); } }
.lp-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: 1280px; margin-inline: auto; width: 100%; }
.lp-hero-copy { display: grid; gap: 18px; justify-items: start; animation: lp-rise 0.9s var(--ease) both; }
.lp-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.lp-hero .lp-kicker { color: #bcd9ff; background: rgba(63, 138, 230, 0.14); border-color: rgba(95, 179, 255, 0.35); }
.lp-live { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 0 0 rgba(27, 175, 122, 0.7); animation: lp-ping 1.8s infinite; }
@keyframes lp-ping { 70% { box-shadow: 0 0 0 10px rgba(27, 175, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(27, 175, 122, 0); } }
.lp-title {
  margin: 0; font-size: clamp(54px, 9vw, 112px); line-height: 1.05; font-weight: 900; letter-spacing: -0.01em; color: #fff;
  text-shadow: 0 0 28px rgba(95, 179, 255, 0.45), 0 0 80px rgba(63, 138, 230, 0.35);
}
.lp-accent {
  background: linear-gradient(90deg, var(--lp-gold), #ffe9a8, var(--lp-green), var(--lp-gold)); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(255, 209, 102, 0.45)); animation: lp-shine 6s linear infinite;
}
@keyframes lp-shine { to { background-position: 300% 0; } }
.lp-lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 2; color: #b9c7dc; max-width: 36em; }
.lp-search {
  display: flex; gap: 8px; width: min(100%, 520px); padding: 6px; border-radius: 16px;
  background: rgba(10, 22, 40, 0.72); border: 1px solid rgba(95, 179, 255, 0.28);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lp-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; padding: 10px 12px; outline: none; }
.lp-search input::placeholder { color: #7d8ea8; }
.lp-search:focus-within { border-color: rgba(95, 179, 255, 0.7); box-shadow: 0 0 0 4px rgba(63, 138, 230, 0.2), 0 10px 40px rgba(0, 0, 0, 0.35); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; border-radius: 12px;
  font: inherit; font-weight: 700; cursor: pointer; border: 1px solid transparent; text-decoration: none !important; white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.lp-btn.primary { color: #fff; background: linear-gradient(135deg, var(--lp-blue-2), var(--accent) 55%, #14946a); box-shadow: 0 8px 24px rgba(37, 106, 191, 0.45); }
.lp-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 106, 191, 0.6); }
.lp-btn.ghost { color: inherit; border-color: color-mix(in srgb, currentColor 28%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); }
.lp-btn.ghost:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 12%, transparent); }
.lp-hero .lp-btn.ghost { color: #dbe8ff; }

.lp-hero-visual { position: relative; aspect-ratio: 13 / 10; width: 100%; animation: lp-rise 1.1s 0.15s var(--ease) both; }
.lp-hero-chart, .lp-hero-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-candles line { stroke: rgba(234, 242, 255, 0.35); stroke-width: 2; }
.lp-candles rect { fill: var(--lp-green); filter: drop-shadow(0 0 6px rgba(27, 175, 122, 0.6)); }
.lp-candles .dn rect { fill: #e66767; filter: drop-shadow(0 0 6px rgba(230, 103, 103, 0.5)); }
.lp-candles .c { transform-box: fill-box; transform-origin: bottom; animation: lp-candle 0.7s var(--ease) both, lp-bob 4s ease-in-out infinite; }
.lp-candles .c1 { animation-delay: 0.2s, 1.0s; } .lp-candles .c2 { animation-delay: 0.3s, 1.4s; } .lp-candles .c3 { animation-delay: 0.4s, 1.8s; }
.lp-candles .c4 { animation-delay: 0.5s, 2.2s; } .lp-candles .c5 { animation-delay: 0.6s, 2.6s; } .lp-candles .c6 { animation-delay: 0.7s, 3.0s; }
.lp-candles .c7 { animation-delay: 0.8s, 3.4s; } .lp-candles .c8 { animation-delay: 0.9s, 3.8s; } .lp-candles .c9 { animation-delay: 1.0s, 4.2s; }
.lp-candles .c10 { animation-delay: 1.1s, 4.6s; }
@keyframes lp-candle { from { transform: scaleY(0); opacity: 0; } }
@keyframes lp-bob { 50% { transform: translateY(-6px); } }
.lp-area { fill: url(#lp-fill); opacity: 0; animation: lp-area-in 1.2s 1.4s ease forwards; }
@keyframes lp-area-in { to { opacity: 0.7; } }
.lp-trend { fill: none; stroke: url(#lp-line); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700;
  filter: drop-shadow(0 0 8px rgba(95, 179, 255, 0.8)); animation: lp-draw 2s 0.6s var(--ease) forwards; }
.lp-tip { fill: var(--lp-gold); opacity: 0; animation: lp-fade 0.4s 2.4s forwards; filter: drop-shadow(0 0 10px rgba(255, 209, 102, 0.9)); }
.lp-tip-ring { fill: none; stroke: var(--lp-gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: lp-ring 2s 2.6s ease-out infinite; }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
@keyframes lp-fade { to { opacity: 1; } }
@keyframes lp-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4); opacity: 0; } }

.lp-orbit { position: absolute; left: 2%; top: -2%; width: 40%; aspect-ratio: 1; display: grid; place-items: center; }
.lp-orbit::before, .lp-orbit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(95, 179, 255, 0.35); animation: lp-spin 30s linear infinite; }
.lp-orbit::after { inset: 16%; border-style: solid; border-color: rgba(255, 209, 102, 0.18); animation-duration: 20s; animation-direction: reverse; }
.lp-mark { width: 44%; height: auto; border-radius: 26%; animation: lp-float 5s ease-in-out infinite;
  box-shadow: 0 0 0 8px rgba(63, 138, 230, 0.12), 0 0 60px rgba(63, 138, 230, 0.65), 0 0 120px rgba(27, 175, 122, 0.35); }
@keyframes lp-float { 50% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-satellite {
  position: absolute; top: 50%; left: 50%; margin: -15px 0 0 -26px; width: 52px; height: 30px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #dbe8ff; border-radius: 999px; background: rgba(10, 22, 40, 0.85);
  border: 1px solid rgba(95, 179, 255, 0.45); box-shadow: 0 0 14px rgba(63, 138, 230, 0.45);
  animation: lp-orbit-sat 16s linear infinite;
}
.lp-satellite.s2 { animation-delay: -4s; } .lp-satellite.s3 { animation-delay: -8s; } .lp-satellite.s4 { animation-delay: -12s; }
@keyframes lp-orbit-sat {
  from { transform: rotate(0deg) translateX(calc(var(--orbit, 110px))) rotate(0deg); }
  to { transform: rotate(360deg) translateX(calc(var(--orbit, 110px))) rotate(-360deg); }
}
.lp-orbit { --orbit: clamp(70px, 10vw, 112px); }
.lp-satellite { --orbit: inherit; }
.lp-scroll-hint { position: absolute; bottom: 22px; left: 50%; width: 24px; height: 38px; margin-left: -12px; border-radius: 14px; border: 2px solid rgba(219, 232, 255, 0.45); }
.lp-scroll-hint span { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #dbe8ff; animation: lp-wheel 1.6s ease-in-out infinite; }
@keyframes lp-wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(24px); } }

.lp-marquee {
  margin-inline: calc(50% - 50vw); overflow: hidden; padding-block: 14px; border-block: 1px solid var(--border);
  background: linear-gradient(90deg, var(--accent-wash), transparent 30%, transparent 70%, var(--accent-wash));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lp-marquee-track { display: flex; gap: 44px; width: max-content; animation: lp-marquee 40s linear infinite; }
.lp-marquee-track span { font-weight: 700; color: var(--text-secondary); white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; }
.lp-marquee-track span::after { content: "◆"; font-size: 9px; color: var(--accent); opacity: 0.7; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(50%); } }

.lp-body { display: grid; gap: 72px; padding-block: 56px 8px; }
.lp-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0ms); }
.lp-reveal.in { opacity: 1; transform: none; }
.lp-section { display: grid; gap: 26px; }
.lp-head { display: grid; gap: 10px; justify-items: center; text-align: center; }
.lp-head h2, .lp-showcase h2, .lp-cta h2 { margin: 0; font-size: clamp(24px, 3.2vw, 36px); font-weight: 900; line-height: 1.4; }
.lp-head p { margin: 0; color: var(--text-secondary); max-width: 46em; line-height: 1.9; }

.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lp-stat {
  display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 12px; border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 70%, var(--accent-wash)));
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.lp-stat b { font-size: clamp(32px, 4.4vw, 48px); font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, var(--accent-2), var(--series-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-stat span { color: var(--text-secondary); font-size: 14px; }
@media (max-width: 760px) { .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lp-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.lp-steps::before {
  content: ""; position: absolute; top: 30px; inset-inline: 16%; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 20px); background-size: 40px 2px;
  animation: lp-dash 1.2s linear infinite; opacity: 0.6;
}
@keyframes lp-dash { to { background-position: -40px 0; } }
.lp-steps li { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 0 8px; }
.lp-step-n {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 60%, #14946a); box-shadow: 0 0 0 8px var(--page), 0 10px 26px rgba(37, 106, 191, 0.45);
  animation: lp-pulse-n 3s ease-in-out infinite; animation-delay: calc(var(--i) * 1s);
}
@keyframes lp-pulse-n { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.12); } }
.lp-steps strong { font-size: 17px; }
.lp-steps p { margin: 0; color: var(--text-secondary); line-height: 1.8; }
@media (max-width: 760px) { .lp-steps { grid-template-columns: 1fr; } .lp-steps::before { display: none; } }

.lp-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-feature.wide { grid-column: span 2; }
@media (max-width: 1100px) { .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-feature.wide { grid-column: span 2; } }
@media (max-width: 640px) { .lp-features { grid-template-columns: minmax(0, 1fr); } .lp-feature.wide { grid-column: auto; } }
.lp-feature, .lp-principle {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; color: inherit; text-decoration: none !important;
  background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--surface-1);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: opacity 0.7s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.lp-feature::before, .lp-principle::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease);
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-2), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.lp-feature:hover, .lp-principle:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), 0 18px 40px color-mix(in srgb, var(--accent) 16%, transparent); }
.lp-feature:hover::before, .lp-principle:hover::before { opacity: 1; }
.lp-feature.lp-reveal.in:hover { transform: translateY(-4px); }
.lp-feature strong, .lp-principle strong { font-size: 17px; }
.lp-feature p, .lp-principle p { margin: 0; color: var(--text-secondary); line-height: 1.85; font-size: 14px; text-align: justify; text-align-last: start; }
.lp-feature-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-feature-icon {
  width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 60%, #14946a); box-shadow: 0 6px 16px rgba(37, 106, 191, 0.35);
}
.lp-feature-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-feature-foot { display: flex; align-items: center; justify-content: space-between; margin-block-start: auto; padding-block-start: 4px; }
.lp-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.lp-pill.open { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.lp-go { font-size: 18px; color: var(--accent-ink); transition: transform 0.25s var(--ease); }
.lp-feature:hover .lp-go { transform: translateX(-6px); }

.lp-art { display: block; width: 120px; height: 60px; flex: none; }
.lp-art svg { width: 100%; height: 100%; overflow: visible; }
.lp-art .grid { stroke: var(--grid); stroke-width: 1; fill: none; }
.lp-art .ln { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: lp-draw-loop 4s var(--ease) infinite; }
@keyframes lp-draw-loop { 0% { stroke-dashoffset: 200; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -200; } }
.lp-art .dot { fill: var(--lp-gold); animation: lp-blink 4s infinite; }
@keyframes lp-blink { 0%, 40% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
.lp-art .rb { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 18 10; animation: vf-flow 2.6s linear infinite; }
.lp-art .r1 { stroke: var(--series-1); } .lp-art .r2 { stroke: var(--series-3); animation-duration: 3.2s; } .lp-art .r3 { stroke: var(--series-2); animation-duration: 3.8s; }
.lp-art .b { fill: var(--accent-2); transform-box: fill-box; transform-origin: bottom; animation: lp-bar 2.4s var(--ease) infinite alternate; }
.lp-art .b2 { animation-delay: 0.2s; fill: var(--series-3); } .lp-art .b3 { animation-delay: 0.4s; } .lp-art .b4 { animation-delay: 0.6s; fill: var(--series-3); } .lp-art .b5 { animation-delay: 0.8s; fill: var(--lp-gold); }
@keyframes lp-bar { from { transform: scaleY(0.35); } }
.lp-art .lk { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 6 5; animation: lp-dash-s 1.5s linear infinite; }
@keyframes lp-dash-s { to { stroke-dashoffset: -22; } }
.lp-art .nd { fill: var(--accent-2); transform-box: fill-box; transform-origin: center; animation: lp-node 2.4s ease-in-out infinite; }
.lp-art .n2 { fill: var(--series-3); animation-delay: 0.6s; } .lp-art .n3 { fill: var(--lp-gold); animation-delay: 1.2s; }
@keyframes lp-node { 50% { transform: scale(1.35); } }
.lp-art .ring { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.lp-art-calendar .ring { stroke-width: 2; stroke: var(--border-strong); }
.lp-art .arc { fill: none; stroke-width: 9; stroke-linecap: round; transform-origin: 60px 30px; stroke-dasharray: 138; }
.lp-art .a1 { stroke: var(--accent-2); stroke-dashoffset: 60; animation: lp-spin 6s linear infinite; }
.lp-art .a2 { stroke: var(--lp-gold); stroke-dashoffset: 118; animation: lp-spin 9s linear infinite reverse; }
.lp-art .t { fill: var(--accent-2); opacity: 0.25; animation: lp-tile 3s ease-in-out infinite; }
.lp-art .t2 { fill: var(--series-3); animation-delay: 0.5s; } .lp-art .t3 { fill: #e66767; animation-delay: 1s; } .lp-art .t4 { fill: var(--series-3); animation-delay: 1.5s; } .lp-art .t5 { animation-delay: 2s; }
@keyframes lp-tile { 50% { opacity: 0.85; } }
.lp-art .drop { fill: var(--lp-gold); animation: lp-drop 2.4s ease-in infinite; }
.lp-art .d2 { animation-delay: 0.8s; fill: var(--accent-2); } .lp-art .d3 { animation-delay: 1.6s; fill: var(--series-3); }
@keyframes lp-drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(46px); opacity: 1; } 100% { transform: translateY(52px); opacity: 0; } }
.lp-art .sw1 { animation: lp-sw1 3s var(--ease) infinite; } .lp-art .sw2 { animation: lp-sw2 3s var(--ease) infinite; }
@keyframes lp-sw1 { 50% { transform: translateX(70px); } }
@keyframes lp-sw2 { 50% { transform: translateX(-70px); } }

.lp-showcase {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center;
  padding: clamp(22px, 4vw, 44px); border-radius: 28px; color: #eaf2ff;
  background: radial-gradient(70% 90% at 0% 100%, rgba(27, 175, 122, 0.25), transparent 60%),
    radial-gradient(60% 80% at 100% 0%, rgba(63, 138, 230, 0.3), transparent 60%), #060f1e;
  box-shadow: 0 30px 60px rgba(4, 10, 20, 0.35);
}
.lp-showcase-text { display: grid; gap: 14px; justify-items: start; }
.lp-showcase p { margin: 0; color: #b9c7dc; line-height: 2; }
.lp-showcase .lp-kicker { color: #ffe9a8; background: rgba(255, 209, 102, 0.12); border-color: rgba(255, 209, 102, 0.35); }
.lp-showcase-art { position: relative; display: grid; gap: 14px; }
.lp-art.big { width: 100%; height: auto; aspect-ratio: 2 / 1; }
.lp-art.big .rb { stroke-width: 4; stroke-dasharray: 10 6; filter: drop-shadow(0 0 4px currentColor); }
.lp-art.big .r1 { color: var(--series-1); } .lp-art.big .r2 { color: var(--series-3); } .lp-art.big .r3 { color: var(--series-2); }
.lp-stations { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-stations li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  animation: lp-station 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1s);
}
.lp-stations li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(63, 138, 230, 0.4); }
@keyframes lp-station { 0%, 12% { background: rgba(255, 209, 102, 0.22); border-color: rgba(255, 209, 102, 0.7); box-shadow: 0 0 18px rgba(255, 209, 102, 0.35); } 22%, 100% { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; } }
@media (max-width: 860px) { .lp-showcase { grid-template-columns: minmax(0, 1fr); } }

.lp-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .lp-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-principles { grid-template-columns: minmax(0, 1fr); } }

.lp-open { display: grid; gap: 10px; padding: 22px; border-radius: 20px; border: 1px dashed var(--border-strong); background: var(--surface-1); }
.lp-open h3 { margin: 0; }
.lp-chip { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; text-decoration: none !important; transition: transform 0.2s var(--ease); }
.lp-chip:hover { transform: translateY(-2px); }

.lp-faq { max-width: 860px; width: 100%; margin-inline: auto; gap: 12px; }
.lp-faq details { border-radius: 16px; border: 1px solid var(--border); background: var(--surface-1); overflow: hidden; transition: box-shadow 0.25s var(--ease); }
.lp-faq details[open] { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.lp-faq summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent-ink); transition: transform 0.25s var(--ease); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: 0; padding: 0 20px 18px; color: var(--text-secondary); line-height: 1.95; animation: lp-rise 0.35s var(--ease); }

.lp-cta {
  position: relative; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  padding: clamp(24px, 4vw, 40px); border-radius: 28px; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, #1c4f94, var(--accent) 45%, #14946a);
}
.lp-cta::before {
  content: ""; position: absolute; inset: -50%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 209, 102, 0.55) 80%, transparent 90%);
  animation: lp-spin 8s linear infinite;
}
.lp-cta::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 26px; background: linear-gradient(120deg, #173f78, #1f5daa 45%, #117a58); }
.lp-cta p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.82); }
.lp-cta .lp-btn.primary { background: #fff; color: #173f78; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.lp-cta .lp-btn.ghost { color: #fff; }
.lp-disclaimer { text-align: center; text-align-last: center; }

@media (max-width: 900px) {
  .lp-hero { padding-block: 36px 40px; min-height: auto; }
  .lp-scroll-hint { display: none; }
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-copy { justify-items: center; text-align: center; }
  .lp-lead { margin-inline: auto; }
  .lp-actions { justify-content: center; }
  .lp-hero-visual { max-width: 520px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; }
  .lp-trend { stroke-dashoffset: 0; } .lp-area, .lp-tip { opacity: 1; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
}