:root {
    --bg: #f5f5f1; --surface: #ffffff; --surface-2: #f3f3ee; --hover: #fafaf6; --ink: #121212; --muted: #5d615c; --faint: #979a95;
    --line: #e6e6e0; --line-strong: #d5d5ce;
    --accent: #b4e825; --accent-2: #a8d91c; --accent-ink: #121212; --accent-text: #4f6e00;
    --accent-soft: rgba(180,232,37,.22); --accent-line: rgba(110,150,0,.35);
    --red: #c43d2b; --red-soft: #fdeeea; --red-line: #f2c6bd;
    --amber: #d38b12;
    --hero-bg: #121212; --hero-ink: #ffffff; --hero-line: #121212;
    --glow: rgba(180,232,37,.16); --card-shadow: 0 1px 2px rgba(18,18,18,.04);
    --radius: 12px;
    --display: "Clash Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    --bg: #0c0c0c; --surface: #151515; --surface-2: #1b1b1b; --hover: #191919; --ink: #f5f5f3; --muted: #a1a1a0; --faint: #686867;
    --line: #242424; --line-strong: #323232;
    --accent-ink: #0c0c0c; --accent-text: #b4e825;
    --accent-soft: rgba(180,232,37,.10); --accent-line: rgba(180,232,37,.28);
    --red: #ff7a66; --red-soft: rgba(255,122,102,.10); --red-line: rgba(255,122,102,.30);
    --amber: #f2b441;
    --hero-bg: linear-gradient(135deg, rgba(180,232,37,.14), rgba(180,232,37,.03) 60%), #151515; --hero-ink: #f5f5f3; --hero-line: rgba(180,232,37,.28);
    --glow: rgba(180,232,37,.07); --card-shadow: none;
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0c0c0c; --surface: #151515; --surface-2: #1b1b1b; --hover: #191919; --ink: #f5f5f3; --muted: #a1a1a0; --faint: #686867;
        --line: #242424; --line-strong: #323232;
        --accent-ink: #0c0c0c; --accent-text: #b4e825;
        --accent-soft: rgba(180,232,37,.10); --accent-line: rgba(180,232,37,.28);
        --red: #ff7a66; --red-soft: rgba(255,122,102,.10); --red-line: rgba(255,122,102,.30);
        --amber: #f2b441;
        --hero-bg: linear-gradient(135deg, rgba(180,232,37,.14), rgba(180,232,37,.03) 60%), #151515; --hero-ink: #f5f5f3; --hero-line: rgba(180,232,37,.28);
        --glow: rgba(180,232,37,.07); --card-shadow: none;
        color-scheme: dark;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--ui);
         font-feature-settings: "tnum" 1, "cv11" 1; -webkit-font-smoothing: antialiased; }
  body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 420px; pointer-events: none; z-index: -1;
         background: radial-gradient(60% 100% at 12% 0%, var(--glow) 0%, transparent 70%); }
  a { color: inherit; }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 16px 16px 40px; }

  header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
               padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
  .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .brand img { height: 34px; width: auto; flex-shrink: 0; }
  /* Black artwork on light, white artwork on dark. Both triggers matter: the
     explicit toggle AND the OS preference — the colour tokens honour
     prefers-color-scheme, so without the matching rule here a viewer on a
     dark-mode machine who never touched the toggle got the black logo on a black
     page. The :not([data-theme="light"]) guard keeps an explicit light choice
     winning over OS dark, same as the tokens. */
  .logo-dark { display: none; }
  :root[data-theme="dark"] .logo-dark { display: inline; }
  :root[data-theme="dark"] .logo-light { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-dark { display: inline; }
    :root:not([data-theme="light"]) .logo-light { display: none; }
  }
  .right { display: flex; align-items: center; gap: 8px; }
  .theme { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
  .theme:hover { color: var(--ink); }
  .theme svg { width: 16px; height: 16px; }
  .theme .moon { display: block; } .theme .sun { display: none; }
  :root[data-theme="dark"] .theme .moon { display: none; } :root[data-theme="dark"] .theme .sun { display: block; }
  .brand .div { width: 1px; height: 30px; background: var(--line-strong); flex-shrink: 0; }
  .title h1 { margin: 0; font: 600 19px/1.15 var(--display); letter-spacing: .01em; }
  .title .sync { color: var(--faint); font-size: 12.5px; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
  .title .sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .title .sync a { color: var(--muted); text-underline-offset: 2px; }
  .pills { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
  .pills a, .pills span { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--muted); white-space: nowrap; }
  .pills a:hover { color: var(--ink); }
  .pills a.on { background: var(--accent); color: var(--accent-ink); }
  .pills span { color: var(--faint); }
  .pills small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }

  .alert { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }

  section { margin-top: 34px; }
  h2 { font: 600 13px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink);
       margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
  h2::before { content: ""; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
  h2 .count { font: 600 12px/1 var(--ui); letter-spacing: 0; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 4px 8px; }
  h2 .count.zero { background: var(--surface-2); color: var(--faint); }
  h3 { font: 600 12px/1.2 var(--ui); color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .08em; }

  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); }

  /* KPIs */
  .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .kpi { padding: 14px 16px; }
  .kpi .label { font-size: 12px; color: var(--muted); font-weight: 500; }
  .kpi .val { font: 600 30px/1.1 var(--display); letter-spacing: -.01em; margin-top: 6px; }
  @media (max-width: 719px) { .kpi:not(.hero) { padding: 12px; } .kpi:not(.hero) .label { font-size: 11.5px; line-height: 1.3; min-height: 2.6em; } .kpi:not(.hero) .val { font-size: 26px; } }
  .kpi.hero { grid-column: 1 / -1; background: var(--hero-bg); color: var(--hero-ink);
              border-color: var(--hero-line); position: relative; overflow: hidden; }
  .kpi.hero::after { content: ""; position: absolute; right: -90px; bottom: -120px; width: 280px; height: 280px; border-radius: 50%;
              background: radial-gradient(circle, rgba(180,232,37,.16) 0%, transparent 62%); pointer-events: none; }
  .kpi.hero .label { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
  .kpi.hero .val { font-size: 44px; color: var(--hero-ink); }
  .kpi.warn .val { color: var(--red); }

  .stages { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
  .stage { flex: 1 0 128px; padding: 12px 14px; position: relative; }
  .stage::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); opacity: .9; }
  .stage.empty::after { background: var(--line-strong); }
  .stage .n { font: 600 26px/1.1 var(--display); margin-top: 2px; }
  .stage .name { font-size: 12px; color: var(--muted); font-weight: 500; }
  .stage .v { font-size: 12px; color: var(--faint); margin: 2px 0 6px; }
  .stage.empty .n { color: var(--faint); }

  /* follow-up cards */
  .grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .fu { padding: 14px 16px; border-left: 3px solid var(--line-strong); transition: opacity .3s, border-color .3s; }
  .fu.overdue { border-left-color: var(--red); }
  .fu.soon { border-left-color: var(--amber); }
  .fu .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .fu .name { font: 600 17px/1.25 var(--display); letter-spacing: .01em; text-decoration: none; }
  .fu .name:hover { color: var(--accent-text); }
  .fu .value { font: 600 15px/1 var(--display); color: var(--accent-text); white-space: nowrap; }
  .fu .meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .fu .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .tag { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--muted); white-space: nowrap; }
  .tag b { color: var(--ink); font-weight: 600; }
  .tag.red { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
  .tag.red b { color: var(--red); }
  .action { margin-top: 12px; font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: flex-start; }
  .action::before { content: "→"; color: var(--accent-text); }
  .note { margin-top: 6px; font-size: 13px; color: var(--faint); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .empty-state { padding: 20px; color: var(--muted); font-size: 14px; text-align: center; }

  /* this week */
  .week { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .week .card { padding: 14px 16px 6px; }
  .week h3 { margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); font: 600 14px/1.3 var(--display); letter-spacing: .02em; text-transform: none; }
  .week h3 span { font: 600 18px/1 var(--display); color: var(--accent-text); }
  .week ul { list-style: none; margin: 0; padding: 0; }
  .week li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
  .week li:first-child { border-top: 0; }
  .week li a { text-decoration: none; font-weight: 500; }
  .week li a:hover { color: var(--accent-text); }
  .week li .r { color: var(--muted); font-size: 13px; white-space: nowrap; }
  .week .none { color: var(--faint); font-size: 13px; padding: 6px 0 10px; }

  /* performance */
  .perf { padding: 4px 16px 14px; }
  .perf table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .perf th { text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 12px 0 8px; }
  .perf th:first-child { text-align: left; }
  .perf td { padding: 9px 0; border-top: 1px solid var(--line); text-align: right; }
  .perf td:first-child { text-align: left; color: var(--muted); }
  .perf td.now { font: 600 16px/1 var(--display); }
  .perf td:last-child { color: var(--faint); }
  .delta { font: 600 12px/1 var(--ui); margin-left: 6px; }
  .delta.up { color: var(--accent-text); } .delta.down { color: var(--red); }
  .conv { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  .bar { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; margin-top: 8px; color: var(--muted); }
  .bar .track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
  .bar .fill { background: linear-gradient(90deg, var(--accent-2), var(--accent)); height: 100%; border-radius: 999px; }
  .bar .fill.last { background: var(--line-strong); box-shadow: none; }
  .bar .pct { text-align: right; font: 600 14px/1 var(--display); color: var(--ink); }
  .footnote { font-size: 12px; color: var(--faint); margin-top: 12px; }

  /* lead table */
  .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .tools input, .tools select { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
  .tools input:focus, .tools select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .tools input::placeholder { color: var(--faint); }
  .tools input { flex: 1 1 200px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: var(--line-strong) transparent; }
  table.leads { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 13px; }
  table.leads th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; padding: 11px 12px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; }
  table.leads th:hover { color: var(--ink); }
  table.leads th[data-dir] { color: var(--accent-text); }
  table.leads th[data-dir="asc"]::after { content: " ↑"; } table.leads th[data-dir="desc"]::after { content: " ↓"; }
  table.leads td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  table.leads tr:last-child td { border-bottom: 0; }
  table.leads tr:hover td { background: var(--hover); }
  table.leads td.name a { font-weight: 600; text-decoration: none; }
  table.leads td.name a:hover { color: var(--accent-text); }
  table.leads td a[href^="tel"], table.leads td a[href^="mailto"] { color: var(--muted); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
  table.leads td.notes { min-width: 300px; max-width: 380px; color: var(--faint); }
  table.leads td.notes div { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  table.leads td.stagecol { white-space: nowrap; }
  table.leads th:first-child, table.leads td.name { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); min-width: 150px; }
  table.leads th:first-child { z-index: 2; background: var(--surface-2); }
  table.leads tr:hover td.name { background: var(--hover); }
  table.leads .sub { color: var(--faint); font-size: 12px; }
  .status { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; }
  .status.won { background: var(--accent); color: var(--accent-ink); }
  .status.lost { background: var(--surface-2); color: var(--faint); }

  /* log contact */
  .log { margin-top: 12px; }
  .log-btn { font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: background .15s, box-shadow .15s; }
  .log-btn:hover { background: rgba(180,232,37,.32); }
  .log-form { display: grid; gap: 8px; }
  .log-form[hidden], .log-done[hidden], .log-err[hidden], .log-btn[hidden] { display: none; }
  .chips { display: flex; gap: 6px; }
  .chips label { cursor: pointer; }
  .chips input { position: absolute; opacity: 0; pointer-events: none; }
  .chips span { display: inline-block; font-size: 13px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); }
  .chips input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
  .log-form input[name=message] { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; width: 100%; background: var(--surface); color: var(--ink); }
  .log-form input[name=message]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .log-form input[name=message]::placeholder { color: var(--faint); }
  .log-actions { display: flex; gap: 8px; }
  .log-actions button { font: inherit; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
  .log-actions .save { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: var(--accent); color: var(--accent-ink); }
  .log-actions .save:hover { box-shadow: 0 0 20px rgba(180,232,37,.35); }
  .log-actions .save[disabled] { opacity: .6; }
  .log-err { color: var(--red); font-size: 13px; }
  .log-done { font-size: 13px; font-weight: 600; color: var(--accent-text); }
  .fu.logged { opacity: .5; border-left-color: var(--accent); }
  .log.compact { margin-top: 6px; }
  .log.compact .log-btn { padding: 2px 10px; font-size: 12px; }
  .log.compact .log-form { min-width: 240px; }

  footer.by { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line);
              display: flex; align-items: center; justify-content: center; gap: 12px;
              color: var(--faint); font-size: 12px; }
  footer.by img { height: 20px; opacity: .8; }
  footer.by b { color: var(--accent-text); font-weight: 600; }

  @media (min-width: 720px) {
    .wrap { padding: 24px 24px 48px; }
    .brand img { height: 40px; }
    .title h1 { font-size: 22px; }
    .kpis { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; }
    .kpi.hero { grid-column: auto; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .week { grid-template-columns: repeat(2, 1fr); }
    .conv { grid-template-columns: 1fr 1fr; gap: 28px; }
  }
  @media (min-width: 1040px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .week { grid-template-columns: repeat(4, 1fr); }
  }

  /* ---- reporting additions (evoweb-reports) ---------------------------- */

  /* Data colour is NOT brand lime. #b4e825 measures OKLCH L 0.864 and 1.45:1
     against a white card — it fails the lightness band and the 3:1 contrast
     floor for a data mark. #6e9600 passes every check in light AND dark. Lime
     stays on the chrome (pills, selected tile), where it carries no data. */
  :root { --viz-1: #6e9600; --viz-grid: rgba(18,18,18,.07); }
  :root[data-theme="dark"] { --viz-grid: rgba(245,245,243,.09); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --viz-grid: rgba(245,245,243,.09); }
  }

  .explore { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .chart-card { padding: 14px 16px 10px; min-width: 0; }
  .ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ch-metric { font-size: 12px; color: var(--muted); font-weight: 500; }
  .ch-value { font: 600 26px/1.1 var(--display); letter-spacing: -.01em; }
  .chart-wrap { position: relative; margin-top: 4px; }
  #chart-box svg { display: block; width: 100%; height: auto; }
  /* 2px line, recessive grid, marker appears on hover only. */
  #chart-box .line { fill: none; stroke: var(--viz-1); stroke-width: 2;
                     stroke-linejoin: round; stroke-linecap: round; }
  #chart-box .area { fill: var(--viz-1); opacity: .12; stroke: none; }
  #chart-box .grid { stroke: var(--viz-grid); stroke-width: 1; }
  #chart-box .axis-lbl { fill: var(--faint); font: 400 10.5px var(--ui); }
  #chart-box .cross { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3;
                      opacity: 0; }
  #chart-box .cross.on { opacity: 1; }
  /* 2px surface ring so the marker reads on top of the line. */
  #chart-box .dot { fill: var(--viz-1); stroke: var(--surface); stroke-width: 2; opacity: 0; }
  #chart-box .dot.on { opacity: 1; }
  .chart-empty { color: var(--faint); font-size: 13px; text-align: center; padding: 40px 0; margin: 0; }
  .ch-axis { display: flex; justify-content: space-between; font-size: 11px;
             color: var(--faint); padding: 2px 14px 4px 54px; }

  .tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
         background: var(--hero-bg); color: var(--hero-ink); border-radius: 8px;
         padding: 7px 10px; font-size: 12px; line-height: 1.45; white-space: nowrap;
         box-shadow: 0 6px 18px rgba(0,0,0,.22); z-index: 5; }
  .tip.on { opacity: 1; }
  .tip .d { display: block; color: var(--accent); font-weight: 600; font-size: 11px; }
  .tip .v { display: flex; align-items: center; gap: 6px; }
  .tip i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
  .tip b { font-weight: 600; }

  .side-card { padding: 14px 16px; min-width: 0; }
  .side-hd { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 12px; }
  .rank { margin-bottom: 12px; }
  .rank:last-child { margin-bottom: 0; }
  .rk-top { display: flex; align-items: baseline; justify-content: space-between;
            gap: 10px; margin-bottom: 5px; }
  .rk-name { font-size: 12.5px; color: var(--ink); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; display: flex;
             align-items: center; gap: 7px; min-width: 0; }
  .rk-name .sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
  .rk-val { font: 600 13px/1 var(--display); white-space: nowrap; }
  .rk-val em { font-style: normal; color: var(--faint); font-weight: 400; font-size: 11.5px; }
  .rank .track { display: block; background: var(--surface-2); border-radius: 999px;
                 height: 7px; overflow: hidden; }
  .rank .fill { display: block; height: 100%; border-radius: 999px; background: var(--viz-1); }

  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
           margin-bottom: 20px; }
  .tile { text-align: left; background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--radius); padding: 11px 13px; cursor: pointer;
          font: inherit; color: inherit; box-shadow: var(--card-shadow);
          display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tile:hover { border-color: var(--line-strong); }
  .tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .tile .t-label { font-size: 11.5px; color: var(--muted); font-weight: 500;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile .t-val { font: 600 20px/1.15 var(--display); letter-spacing: -.01em; }
  .tile .delta { margin-left: 0; }
  .tile .delta.flat { color: var(--faint); }

  .ads td .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ads td .camp { font-size: 11.5px; color: var(--faint); overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
  .ads .prevbtn { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px;
                  font: 600 12px var(--ui); color: var(--muted); cursor: pointer; white-space: nowrap; }
  .ads .prevbtn:hover { color: var(--ink); border-color: var(--line-strong); }
  .ads .prevbtn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

  .pills a.off { opacity: .35; cursor: not-allowed; }
  .prev-head { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; flex-wrap: wrap; padding: 14px 16px 0; }
  .prev-head #prev-title { font-weight: 600; color: var(--ink); font-size: 13px; }

  /* Preview beside the selected ad's numbers, so the panel isn't a phone in a
     field of dead space. Stacks on narrow screens. */
  .prev-stage { display: grid; grid-template-columns: 1fr; gap: 18px;
                justify-items: center; padding: 18px 16px 20px; }
  .prev-stage[data-frame="phone"] .desk,
  .prev-stage[data-frame="desk"] .phone { display: none; }
  .prev-col { width: 100%; max-width: 380px; }
  /* Desktop previews are natively 540px wide; give them room so they render at
     1:1 instead of being scaled down to fit the phone's column. */
  .prev-stage[data-frame="desk"] .prev-col { max-width: 562px; }
  .prev-cap { font-size: 12px; color: var(--faint); margin-top: 12px; text-align: center; }

  .prev-facts { width: 100%; max-width: 420px; }
  .prev-facts .hd { font: 600 15px/1.25 var(--display); margin-bottom: 2px; }
  .prev-facts .sub { font-size: 12px; color: var(--faint); margin-bottom: 14px; }
  .prev-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                   gap: 10px; margin: 0; }
  .prev-facts .fact { background: var(--surface-2); border: 1px solid var(--line);
                      border-radius: 10px; padding: 10px 12px; }
  .prev-facts dt { font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .prev-facts dd { margin: 3px 0 0; font: 600 19px/1.1 var(--display); }
  .prev-facts .hint { font-size: 12px; color: var(--faint); margin-top: 14px; line-height: 1.5; }

  /* 9:16, so it reads as a phone rather than a squat box. The screen is exactly
     as wide as Meta renders its mobile preview (335px), so the ad sits at 1:1
     with no scaling and nothing clipped. */
  .phone { width: 357px; max-width: 100%; border-radius: 42px; padding: 11px; background: #1c1c1e;
           box-shadow: 0 0 0 2px #3a3a3c, 0 18px 40px rgba(0,0,0,.35); position: relative; }
  .phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
                   width: 84px; height: 22px; border-radius: 999px; background: #1c1c1e; z-index: 2; }
  .phone .screen { width: 335px; height: 596px; max-width: 100%; border-radius: 32px;
                   overflow: hidden; background: #fff; position: relative; }
  .phone .screen iframe { position: absolute; top: 0; left: 0; border: 0; display: block; }

  .desk { width: 100%; max-width: 560px; }
  .desk .screen { width: 540px; height: 690px; max-width: 100%; border: 1px solid var(--line-strong);
                  border-radius: 10px; overflow: hidden; background: #fff; position: relative; }
  .desk .screen iframe { position: absolute; top: 0; left: 0; border: 0; display: block; }

  .adcell { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .adcell > span { display: flex; flex-direction: column; min-width: 0; }
  .thumb { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
           background: var(--surface-2); border: 1px solid var(--line); }
  .thumb.blank { display: block; }
  .ads tbody tr { cursor: pointer; }
  .ads tbody tr:hover { background: var(--hover); }

  .screen .ph { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
                margin: 0; padding: 0 30px; text-align: center; color: #8a8a8e; font: 13px/1.6 var(--ui); }

  /* The picker lives inside the pill row and opens as a small sheet under it. */
  .pills { position: relative; }
  .datepick { position: relative; }
  .datepick > summary { padding: 6px 14px; border-radius: 999px; font-size: 13px;
                        font-weight: 600; color: var(--muted); cursor: pointer;
                        white-space: nowrap; list-style: none; }
  .datepick > summary::-webkit-details-marker { display: none; }
  .datepick > summary:hover { color: var(--ink); }
  .datepick > summary.on { background: var(--accent); color: var(--accent-ink); }
  .datepick[open] > summary { color: var(--ink); }
  .datepick form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
                   background: var(--surface); border: 1px solid var(--line-strong);
                   border-radius: 12px; padding: 14px; display: grid; gap: 10px;
                   box-shadow: 0 12px 30px rgba(0,0,0,.18); min-width: 216px; }
  .datepick label { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted);
                    font-weight: 500; }
  .datepick input[type="date"] { font: 14px var(--ui); color: var(--ink);
                                 background: var(--surface-2); border: 1px solid var(--line-strong);
                                 border-radius: 8px; padding: 8px 10px; width: 100%; }
  .datepick button { background: var(--accent); color: var(--accent-ink); border: 0;
                     border-radius: 8px; padding: 9px 12px; font: 600 14px var(--ui);
                     cursor: pointer; }
  .datepick .dp-err { margin: 0; font-size: 12px; color: var(--red); }

  /* Layout editor (admin only) */
  .editor-wrap { position: relative; }
  .ed-open { list-style: none; cursor: pointer; padding: 7px 13px; border-radius: 999px;
             border: 1px solid var(--line-strong); background: var(--surface);
             font: 600 13px var(--ui); color: var(--muted); white-space: nowrap; }
  .ed-open::-webkit-details-marker { display: none; }
  .ed-open:hover { color: var(--ink); }
  .editor-wrap[open] .ed-open { background: var(--accent); color: var(--accent-ink);
                                border-color: var(--accent); }
  .editor { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px;
            max-width: calc(100vw - 32px); background: var(--surface);
            border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px;
            box-shadow: 0 14px 34px rgba(0,0,0,.2); }
  .ed-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
  .ed-link { background: none; border: 0; padding: 0; color: var(--accent-text);
             font: 600 11.5px var(--ui); cursor: pointer; }
  .ed-hint { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin: 6px 0 10px; }
  #ed-list { max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
  .ed-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
            gap: 8px; padding: 6px 6px; border-radius: 8px; background: var(--surface-2);
            border: 1px solid var(--line); margin-bottom: 5px; cursor: grab; }
  .ed-row.dragging { opacity: .45; }
  .ed-row.off { background: transparent; }
  .ed-row label { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
                  min-width: 0; cursor: pointer; }
  .ed-row label input { accent-color: var(--accent-text); flex-shrink: 0; }
  .ed-grip { color: var(--faint); font-size: 13px; line-height: 1; cursor: grab; }
  .ed-move { display: flex; gap: 2px; }
  .ed-move button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
                    background: var(--surface); color: var(--muted); cursor: pointer;
                    font-size: 11px; line-height: 1; padding: 0; }
  .ed-move button:disabled { opacity: .3; cursor: default; }
  .ed-move button:hover:not(:disabled) { color: var(--ink); }
  .ed-foot { display: flex; align-items: center; justify-content: space-between;
             gap: 8px; margin-top: 10px; }
  .ed-status { font-size: 11.5px; color: var(--muted); }
  .ed-status.bad { color: var(--red); }
  .ed-save { background: var(--accent); color: var(--accent-ink); border: 0;
             border-radius: 8px; padding: 8px 12px; font: 600 13px var(--ui); cursor: pointer; }

  h2.sect { font: 600 15px/1.2 var(--display); margin: 26px 0 12px; display: flex;
            align-items: baseline; gap: 10px; flex-wrap: wrap;
            padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  h2.sect span { font: 400 12.5px/1.4 var(--ui); color: var(--faint); }
  h2.sect:first-of-type { margin-top: 20px; }

  .camppick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
              margin: -4px 0 14px; }
  .camppick .cp-label { font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .camppick .pills { flex-wrap: wrap; }

  .srcnote { font-size: 11.5px; color: var(--faint); }
  .kpi .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .kpi.hero .sub { color: rgba(255,255,255,.72); }
  .clients { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .clients a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               padding: 14px 16px; text-decoration: none; }
  .clients a:hover { background: var(--hover); }
  .clients .nm { font: 600 16px/1.2 var(--display); }
  .clients .meta { font-size: 12px; color: var(--faint); margin-top: 3px; }
  .centre { max-width: 420px; margin: 12vh auto; padding: 0 16px; }
  .centre .card { padding: 26px; }
  .centre h1 { font: 600 20px/1.2 var(--display); margin: 0 0 6px; }
  .centre p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
  .centre input { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-strong);
                  background: var(--surface-2); color: var(--ink); font: 15px var(--ui); }
  .centre button { width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 10px;
                   background: var(--accent); color: var(--accent-ink); font: 600 15px var(--ui); cursor: pointer; }

  .kpis.solo { grid-template-columns: 1fr; }

  @media (min-width: 940px) {
    .prev-stage { grid-template-columns: auto minmax(0, 1fr); align-items: start;
                  justify-items: stretch; gap: 28px; padding: 18px 20px 22px; }
    .prev-facts { padding-top: 6px; max-width: none; }
    .prev-facts dl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  }

  @media (min-width: 640px) {
    .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (min-width: 1040px) {
    .explore { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); }
    .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }

  @media (min-width: 720px) {
    .kpis.solo { grid-template-columns: 1fr; }
    .clients { grid-template-columns: repeat(2, 1fr); }
  }