/* Sarepa — approved visual direction.
   Dark purple to black, Liquid Glass surfaces, glowing violet accents.
   Every class name here already existed; this file changes the skin only,
   never the structure or the behaviour. */

:root {
  color-scheme: dark;

  /* Ground: deep violet fading to black. */
  --bg-0: #08040f;
  --bg-1: #150b28;
  --bg-2: #1d1038;

  /* Liquid Glass: translucent panes over the ground, hairline violet edge. */
  --glass: rgba(255, 255, 255, .052);
  --glass-strong: rgba(255, 255, 255, .085);
  --glass-line: rgba(173, 137, 255, .17);
  --glass-line-strong: rgba(173, 137, 255, .32);

  --ink: #efeaff;
  --muted: #a297c6;
  --violet: #a274ff;
  --violet-deep: #7434f0;
  --violet-ink: #ffffff;
  --glow: 0 0 34px rgba(140, 84, 255, .34);
  --glow-strong: 0 0 54px rgba(150, 90, 255, .5);

  --warn: #ff8b7a;
  --ok: #55e0a5;
  --attention: #ffc46b;

  --radius: 22px;
  --radius-sm: 15px;
}

/* The owner may force light; the brand stays dark, but contrast is re-tuned so
   nothing is unreadable on a bright screen. */
:root[data-theme="light"] {
  --bg-0: #17102b;
  --bg-1: #241645;
  --bg-2: #2e1c56;
  --glass: rgba(255, 255, 255, .1);
  --glass-strong: rgba(255, 255, 255, .15);
  --glass-line: rgba(190, 160, 255, .3);
  --ink: #f6f3ff;
  --muted: #c3b8e4;
}

* { box-sizing: border-box; }

/* `label { display: block }` below outranks the browser's rule for [hidden],
   which is why the register-only name field used to show on the login tab. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  background:
    radial-gradient(70rem 40rem at 82% -12%, rgba(122, 60, 240, .40), transparent 62%),
    radial-gradient(52rem 34rem at 8% 8%, rgba(70, 40, 180, .30), transparent 58%),
    radial-gradient(46rem 40rem at 50% 108%, rgba(160, 90, 255, .20), transparent 60%),
    linear-gradient(178deg, var(--bg-1) 0%, var(--bg-0) 58%, #05030a 100%);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------- chrome */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(12, 6, 24, .62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .01em; }

.mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--violet), var(--violet-deep));
  color: var(--violet-ink);
  font-weight: 700;
  box-shadow: var(--glow);
}

.business-name { color: var(--muted); font-size: 14px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

main { max-width: 640px; margin: 0 auto; padding: 20px 16px 108px; }

/* ---------------------------------------------------------------- glass */
.card {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 18px 44px rgba(4, 2, 12, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}

h1 { font-size: 22px; margin: 4px 0 10px; line-height: 1.6; text-wrap: balance; }
h2 { font-size: 20px; margin: 4px 0 10px; line-height: 1.6; text-wrap: balance; }
.eyebrow { color: var(--muted); font-size: 13px; margin: 0; letter-spacing: .02em; }
.muted { color: var(--muted); }
.reason { margin: 6px 0 14px; }
.error { color: var(--warn); margin: 8px 0 0; }
.error:empty { display: none; }

/* ---------------------------------------------------------------- forms */
label { display: block; margin-bottom: 13px; font-size: 14px; color: var(--muted); }

input, select, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, .045);
  transition: border-color .18s, box-shadow .18s;
}
input::placeholder { color: rgba(162, 151, 198, .7); }

/* Autofill ignores background-color, so the fill is faked with an inset shadow. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #1c1230 inset;
  box-shadow: 0 0 0 1000px #1c1230 inset;
  caret-color: var(--ink);
}
input:autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px #1c1230 inset;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(140, 84, 255, .2);
}
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

button {
  font: inherit;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s, background .18s;
}
button:active { transform: translateY(1px); }

.primary {
  width: 100%;
  font-weight: 700;
  color: var(--violet-ink);
  background: linear-gradient(100deg, var(--violet-deep), var(--violet));
  box-shadow: var(--glow);
}
.primary:hover { box-shadow: var(--glow-strong); }

.ghost {
  background: var(--glass-strong);
  border-color: var(--glass-line);
  color: var(--ink);
}
.ghost:hover { border-color: var(--glass-line-strong); }

button:disabled { opacity: .5; cursor: progress; box-shadow: none; }

/* ---------------------------------------------------------------- login */
.hero { padding: 24px 22px 22px; }

/* Desktop composition: the mascot greets from the right, the form sits beside it. */
@media (min-width: 900px) {
  main { max-width: 1000px; padding-top: 46px; }
  #view-auth .hero {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 44px;
    padding: 40px;
  }
  /* RTL: column 1 is the right-hand side, where the mascot greets from.
     Both need an explicit row, or auto-placement drops the panel onto row 2. */
  #view-auth .mascot { grid-column: 1; grid-row: 1; }
  #view-auth .auth-panel { grid-column: 2; grid-row: 1; }
}

.mascot { display: grid; justify-items: center; gap: 16px; }
.mascot svg { width: min(260px, 68vw); height: auto; filter: drop-shadow(0 14px 40px rgba(140, 84, 255, .45)); }

.bubble {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  padding: 16px 18px;
  margin: 0;
  font-weight: 600;
  line-height: 2;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.wordmark {
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--muted);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
}

.tabs { display: flex; gap: 8px; margin: 18px 0 16px; }
.tab {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.tab.active {
  background: linear-gradient(100deg, var(--violet-deep), var(--violet));
  color: var(--violet-ink);
  border-color: transparent;
  box-shadow: var(--glow);
}

/* ---------------------------------------------------------------- loop */
.status h1 { margin-top: 6px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.steps span {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.steps span.done {
  color: var(--ok);
  border-color: rgba(85, 224, 165, .35);
  background: rgba(85, 224, 165, .1);
}

.recommendation { border-color: var(--glass-line-strong); box-shadow: 0 18px 44px rgba(4, 2, 12, .5), var(--glow); }
.rec-actions { display: grid; gap: 9px; }

/* The one field Sarepa still needs is the warmest thing on the screen. */
.input-request {
  background: rgba(255, 196, 107, .09);
  border: 1px solid rgba(255, 196, 107, .3);
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-bottom: 14px;
}
.input-request p { margin: 0 0 4px; }

.row { display: flex; gap: 8px; align-items: flex-end; }
.row > * { flex: 1 1 auto; min-width: 0; }
.row button { flex: 0 0 auto; width: auto; }
.row input { flex: 1 1 auto; min-width: 0; }

.why {
  margin-top: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 14px;
}
.why ul { margin: 6px 0; padding-inline-start: 18px; }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  margin: 0 0 10px;
}
.badge.sim {
  background: rgba(255, 196, 107, .13);
  border: 1px solid rgba(255, 196, 107, .34);
  color: var(--attention);
}

.signals ul { margin: 8px 0 0; padding-inline-start: 18px; }
.signals li { font-size: 14px; }

.content-item {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .03);
}
.content-item .kind { font-size: 12px; color: var(--muted); display: block; margin-bottom: 5px; }
.content-item .text { display: block; white-space: pre-wrap; }
.content-item .row { margin-top: 9px; }
#campaign-media img { display: block; width: 100%; max-height: 260px; object-fit: cover;
  border-radius: 12px; margin-top: 6px; }
.gap input[type="file"] { padding: 9px 12px; font-size: 14px; }

.assumptions {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  margin: 13px 0;
  font-size: 14px;
}
.assumptions b { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.assumptions ul { margin: 0; padding-inline-start: 18px; }
.assumptions .gap { margin-top: 10px; }
.assumptions .gap-why { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }

.page-link { margin: 12px 0; font-size: 14px; word-break: break-all; }
.page-link a { color: var(--violet); }

/* Stacked actions inside a step panel share one width. */
#step-panel .card > button { width: 100%; }
#step-panel .card > button + button { margin-top: 9px; }

.choice-grid { display: grid; gap: 9px; }
.choice-grid button {
  text-align: start;
  background: var(--glass);
  border-color: var(--glass-line);
  color: var(--ink);
}
.choice-grid button:hover { border-color: var(--violet); box-shadow: var(--glow); }

details summary { cursor: pointer; color: var(--muted); margin: 14px 0 8px; }

/* ---------------------------------------------------------------- help */
.help {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  z-index: 10;
  color: var(--violet-ink);
  border: 0;
  background: linear-gradient(100deg, var(--violet-deep), var(--violet));
  box-shadow: var(--glow-strong);
}
.help-box { margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  button:active { transform: none; }
}

/* Blur is expensive on low-end phones and unsupported on a few browsers; the
   panes stay readable either way. */
@supports not (backdrop-filter: blur(2px)) {
  .card, .topbar { background: rgba(20, 11, 38, .9); }
}

/* ---------------------------------------------------------------- tabs */
/* A strip, not a dashboard. The loop keeps the first screen; the rest is
   one tap away. */
.tabs-bar {
  position: sticky;
  top: 57px;
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  background: rgba(12, 6, 24, .62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--glass-line);
}
.tab-item {
  flex: 0 0 auto;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.tab-item.active {
  background: linear-gradient(100deg, var(--violet-deep), var(--violet));
  color: var(--violet-ink);
  border-color: transparent;
  box-shadow: var(--glow);
}

/* ---------------------------------------------------------------- tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 16px 0 14px; }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}
.tile b { display: block; font-size: 20px; line-height: 1.5; }
.tile span { font-size: 12.5px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.chip.on { border-color: var(--violet); color: var(--ink); box-shadow: var(--glow); }

/* ---------------------------------------------------------------- lists */
.list-stack { display: grid; gap: 9px; margin-top: 12px; }
.row-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
}
.row-item p { margin: 4px 0 0; }
.row-item .small { font-size: 13px; }

.seg {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  margin-inline-start: 7px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  color: var(--muted);
}
.seg-VIP, .seg-DELIVERED { color: var(--ok); border-color: rgba(85, 224, 165, .35); }
.seg-LAPSED, .seg-FAILED { color: var(--warn); border-color: rgba(255, 139, 122, .35); }
.seg-NEW { color: var(--violet); border-color: var(--glass-line-strong); }

.reach {
  flex: 0 0 auto;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.reach.yes { background: rgba(85, 224, 165, .1); color: var(--ok); }
.reach.no { background: rgba(255, 196, 107, .1); color: var(--attention); }

/* ---------------------------------------------------------------- market */
/* The synthetic label is the loudest thing on the page, by design. */
.synthetic-note {
  background: rgba(255, 196, 107, .1);
  border: 1px solid rgba(255, 196, 107, .32);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--attention);
  font-size: 14px;
  margin: 12px 0 16px;
}

.compare { display: grid; gap: 9px; }
.compare-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 13px 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
}
.compare-row .metric { font-weight: 700; }
.compare-row .mine { font-variant-numeric: tabular-nums; text-align: end; }
.compare-row .peers { color: var(--muted); font-size: 13.5px; }
.compare-row .pos { font-size: 12.5px; text-align: end; }
.pos-ABOVE { color: var(--ok); }
.pos-BELOW { color: var(--attention); }
.pos-WITHIN { color: var(--muted); }

.plain-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 7px; }
.plain-list li { font-size: 14.5px; }

/* ---------------------------------------------------------------- messages */
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(14px) calc(50% - 2px), calc(19px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: #16102a; color: var(--ink); }

.preview {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-line);
  display: grid;
  gap: 10px;
}
.preview p { margin: 0; }

/* ---------------------------------------------------------------- charts */
/* Palette validated with the dataviz validator against this exact surface
   (#1a1230): lightness band, chroma floor, CVD separation, normal-vision
   floor and contrast all PASS. Do not re-pick these by eye. */
.viz-root {
  --viz-surface: #1a1230;
  --viz-ink: var(--ink);
  --viz-ink-2: var(--muted);
  --viz-grid: rgba(173, 137, 255, .16);

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;

  /* Ordinal ramp, single hue, validated with --ordinal. */
  --ord-1: #b7d3f6;
  --ord-2: #6da7ec;
  --ord-3: #2a78d6;

  /* Status is reserved — never reused as a series colour. */
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-critical: #d03b3b;
}

.viz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.viz-head h2 { margin-top: 2px; }
.table-toggle {
  flex: 0 0 auto; font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--muted);
}
.table-toggle:hover { border-color: var(--violet); color: var(--ink); }

.viz { margin-top: 16px; position: relative; }
/* The page is RTL, where SVG text-anchor start/end follow *logical* order and
   labels run the wrong way. Anchoring is reasoned about visually here; a pure
   Persian string is one bidi run and still shapes correctly inside it. */
.viz svg { display: block; max-width: 100%; height: auto; overflow: visible; direction: ltr; }

.ax { fill: var(--viz-ink-2); font-size: 11px; font-family: Vazirmatn, Tahoma, sans-serif; }
.ax-title { fill: var(--viz-ink-2); font-size: 11.5px; }
.grid { stroke: var(--viz-grid); stroke-width: 1; }
.val { fill: var(--viz-ink); font-size: 12px; font-family: Vazirmatn, Tahoma, sans-serif; }

.viz-empty { color: var(--muted); font-size: 14px; padding: 22px 0; text-align: center; }

/* Tooltip — the hover layer every chart ships with. */
.viz-tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: rgba(12, 6, 24, .95); border: 1px solid var(--glass-line-strong);
  border-radius: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.7;
  box-shadow: 0 10px 28px rgba(4, 2, 12, .6); white-space: nowrap;
  transform: translate(50%, -50%);
}
.viz-tip b { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.viz-tip[hidden] { display: none; }

.viz-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.viz-legend span { display: inline-flex; align-items: center; gap: 7px; }
.viz-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.viz-table { margin-top: 14px; overflow-x: auto; }
.viz-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.viz-table th, .viz-table td {
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--glass-line);
}
.viz-table th { color: var(--muted); font-weight: 500; }
.viz-table td.n { font-variant-numeric: tabular-nums; }

/* Status rows carry an icon and a label, never colour alone. */
.status-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 9px 0; }
.status-row + .status-row { border-top: 1px solid var(--glass-line); }
.status-dot { width: 11px; height: 11px; border-radius: 50%; }
.status-row .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.status-bar { height: 6px; border-radius: 3px; background: var(--glass); overflow: hidden; }
.status-bar i { display: block; height: 100%; border-radius: 3px; }


.seed-box {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 196, 107, .09);
  border: 1px solid rgba(255, 196, 107, .3);
}
.seed-box p { margin: 0 0 12px; font-size: 14.5px; }
.seed-note { margin: 10px 0 0 !important; font-size: 12.5px; color: var(--attention); }