:root {
  /* Legacy Lead Gen (LLG) "Ultraviolet" brand — Electric Violet #8B6CFF on Obsidian #0E0B16 */
  --bg: #0E0B16;              /* Obsidian */
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(139,108,255,0.10), transparent 60%);
  --panel: #241E36;           /* Slate Violet — cards/panels per brand */
  --panel2: #2E2748;
  --panel3: #3A3158;
  --line: #322B4A;
  --line2: #443C66;
  --text: #F1EEFB;            /* Ice */
  --muted: #7A7490;           /* Dusk */
  --faint: #55506B;
  --accent: #8B6CFF;          /* Electric Violet — primary */
  --accent2: #A78BFF;         /* lighter violet — secondary / top tier */
  --accent-deep: #6C4FE0;
  --navy: #241E36;            /* Slate Violet (legacy var name) */
  --accent-bg: rgba(139,108,255,0.16);
  --good: #57D9A3;            /* Signal Mint — positive KPIs only */
  --good-bg: rgba(87,217,163,0.12);
  --bad: #ff5c7a;
  --bad-bg: rgba(255,92,122,0.12);
  --warn: #f5b14c;
  --warn-bg: rgba(245,177,76,0.12);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(6,4,12,.45);
  --radius: 14px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; touch-action: pan-x pan-y; }  /* allow scroll, block pinch/double-tap zoom */
body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }
.error { color: var(--bad); margin-top: 10px; min-height: 18px; font-size: 13px; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* ── Login ─────────────────────────────────────────── */
.login { display: flex; align-items: center; justify-content: center; height: 100vh; padding: 20px; }
.login .card { width: 340px; text-align: center; padding: 32px; }
.login h1 { font-size: 20px; margin: 0 0 4px; }
.login input { width: 100%; margin: 16px 0; padding: 11px 13px; }
.login button { width: 100%; padding: 11px; }

/* ── Layout / sidebar ──────────────────────────────── */
.layout { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  width: 244px; flex: 0 0 244px;
  background: #14101F;  /* flat — LLG brand: no gradients */
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  padding: 6px 10px 20px;
  display: flex; gap: 10px;
}
/* LLG "Slash" lockup — mark (two slanted bars, Ice) + stacked LEGACY / LEAD GEN (Sora) */
.brand { align-items: center; }
.brand-mark { flex: 0 0 auto; }
.brand-mark path { fill: var(--text); }
.brand-stack { display: flex; flex-direction: column; line-height: 1.05; }
.brand-l1 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--text); }
.brand-l2 { font-family: 'Sora', sans-serif; font-weight: 400; font-size: 9px; letter-spacing: .345em; color: var(--muted); margin-top: 2px; }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.nav-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); font-weight: 600; margin: 18px 10px 6px;
}
.tab {
  position: relative; text-align: left; width: 100%;
  background: transparent; color: var(--muted);
  border: 0; padding: 9px 12px; border-radius: 9px;
  cursor: pointer; font-weight: 500; font-size: 13.5px;
  transition: background .14s, color .14s;
}
.tab:hover { background: var(--panel2); color: var(--text); }
.tab.active { background: var(--accent-bg); color: var(--text); font-weight: 600; }
.tab.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.sidebar-footer {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 16px; margin-top: 10px; border-top: 1px solid var(--line);
}
.period-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); font-weight: 600; padding: 0 2px;
}
.period {
  display: flex; gap: 3px; padding: 3px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
}
.seg {
  flex: 1; background: transparent; color: var(--muted);
  border: 0; padding: 7px 6px; border-radius: 7px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .14s;
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(139,108,255,.35); }

.content { flex: 1; min-width: 0; }
.tab-panel { padding: 30px 34px; max-width: 1180px; margin: 0 auto; }
/* Small inline action button (e.g. Attribution ↻ Rebuild). */
.btn-sm { font-size: 12px; padding: 6px 12px; border-radius: 9px; }
.kpi-card .k-sub { font-size: 11px; margin-top: 6px; }
/* Subscribe-age cohort accent colours (cards + comparison bars). */
.chart-svg .bar.c-new { fill: var(--good); }
.chart-svg .bar.c-med { fill: var(--accent2); }
.chart-svg .bar.c-old { fill: var(--warn); }
.chart-svg .bar.c-xold { fill: var(--bad); }
.chart-svg .bar-x.muted-x { fill: var(--faint); font-size: 10px; }
/* ROAS matrix — many day columns → scroll horizontally, sticky model column. */
.roas-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.roas-matrix { width: 100%; table-layout: fixed; }  /* all 14 day-columns fit, no scroll */
/* Wide mode (30d): too many day-columns to cram — size to content + scroll (card has overflow-x). */
.roas-matrix.roas-wide { width: auto; min-width: 100%; table-layout: auto; }
.roas-matrix.roas-wide th, .roas-matrix.roas-wide td { padding-left: 8px; padding-right: 8px; }
/* .tbl-card sets overflow:hidden (clips); win with higher specificity so 30d actually scrolls. */
.tbl-card.roas-card { overflow-x: auto; overflow-y: hidden; }
/* "Saved" toast after a manual ad-spend edit */
#_toast { position: fixed; bottom: 24px; right: 24px; background: var(--good, #3FCF8E);
  color: #06210f; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease; pointer-events: none; z-index: 9999; }
#_toast.show { opacity: 1; transform: translateY(0); }
/* Meta-auto cells are editable (override) but visually softer than manual ones */
.as-in.as-in-auto { opacity: .75; font-style: italic; }
.as-in.as-in-auto:focus { opacity: 1; font-style: normal; }
.roas-matrix th, .roas-matrix td { padding: 8px 4px; font-size: 11px; white-space: nowrap; }
.roas-matrix th:first-child, .roas-matrix td:first-child {
  width: 12%; position: sticky; left: 0; z-index: 1; background: var(--panel, #11131a); text-align: left; }
.roas-matrix tfoot td:first-child { background: var(--panel, #11131a); }
/* Matrix totals ("All brands" / "Blended") — clearly set apart from the data rows */
.roas-matrix tbody td { padding-top: 10px; padding-bottom: 10px; }
.roas-matrix tfoot .totals-row td {
  border-top: 2px solid var(--line2);
  padding-top: 13px; padding-bottom: 13px;
  font-weight: 600; background: var(--accent-bg);
}
.roas-matrix tfoot .totals-row td:first-child { background: var(--panel2); font-weight: 700; }

/* ── Anonymous mode ──────────────────────────────────────────────────
   Body gets .anon → blur every identifying name (models, kuerzel badges,
   BM/account names, brand/link labels) across all tabs, for screenshots.
   Totals rows ("All brands"/"Blended") stay readable. Toggle is admin-only. */
body.anon .tag, body.anon .mbadge { filter: blur(5px); }
body.anon .content td:first-child b,
body.anon .gbrand b, body.anon #budgets .k-label,
body.anon .fchip:not(:first-child),
body.anon .a-name, body.anon .health-acct,
body.anon .abkpi-title, body.anon #abtests .page-head .muted,
body.anon .rr-group td, body.anon .rr-matrix tbody td:first-child { filter: blur(6px); }
body.anon .plan-head b, body.anon .plan-ev-models { filter: blur(6px); }
body.anon .content tfoot td:first-child b,
body.anon .content .totals-row td:first-child b { filter: none; }
/* …but the reply-rate per-brand subtotal ("<Brand> — all") IS a name → keep blurred */
body.anon .rr-matrix .totals-row td:first-child b { filter: blur(6px); }
/* Segmented Off/Anon control tint when active */
#anon-toggle .seg.active[data-anon="on"] { background: var(--warn); color: #0E0B16; box-shadow: 0 2px 8px rgba(245,177,76,.35); }
/* Reply-rate matrix: wider label col (link names), 2-line cells (rate + rep/new) */
.rr-matrix th:first-child, .rr-matrix td:first-child { width: 16%; white-space: normal; }
.rr-matrix td { padding: 6px 4px; }
.rr-matrix .rr-sub { display: block; font-size: 9px; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 1px; }
/* 30d-Ansicht: Tabelle scrollt quer; Modell links UND Summe rechts bleiben stehen. */
.rr-wide th, .rr-wide td { min-width: 56px; }
.rr-wide th:first-child, .rr-wide td:first-child { min-width: 130px; width: auto; }
.rr-wide th:last-child, .rr-wide td:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--panel, #11131a);
  box-shadow: -1px 0 0 var(--line); }
.rr-wide tfoot .totals-row td:last-child { background: var(--accent-bg); }
/* In der Tagestabelle steht der Bruch NEBEN der Prozentzahl — ohne Abstand
   klebte "15%43/279" zusammen (PL 2026-09-20). */
.ds-table .rr-sub { margin-left: 9px; font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rr-matrix .rr-group td { background: var(--bg, #0b0d12); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding-top: 12px; }
/* Users admin form */
.user-form { margin-top: 16px; }
.urow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 10px 0; }
#u-name, #u-pass { min-width: 210px; }
.uwsrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
@media (max-width: 720px) { .uwsrow { grid-template-columns: 1fr; } }
.uws { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.uws label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.uws .ustrong { font-weight: 600; }
.ubrands { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.ubrand { font-weight: 400; }
/* Compact one-line A/B KPI boxes */
.abkpi-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 16px; }
.abkpi-card .abk-val { font-size: 17px; }
/* Numbers / Charts toggle on the A/B tab */
.ab-toggle { display: inline-flex; gap: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.ab-toggle .seg { background: transparent; border: none; color: var(--muted); padding: 6px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ab-toggle .seg:hover { color: var(--text); }
.ab-toggle .seg.active { background: var(--accent); color: #fff; }
/* A/B dual-line chart colours + legend (A = purple, B = green) */
.chart-svg .cline.c-a { stroke: var(--accent2); fill: none; stroke-width: 2; }
.chart-svg .cline.c-b { stroke: var(--good); fill: none; stroke-width: 2; }
.chart-svg .dot.c-a { fill: var(--accent2); }
.chart-svg .dot.c-b { fill: var(--good); }
.chart-svg .bar-val.c-a { fill: var(--accent2); }
.chart-svg .bar-val.c-b { fill: var(--good); }
.ab-legend .leg-a { color: var(--accent2); }
.ab-legend .leg-b { color: var(--good); }
.ab-last { font-size: 12px; margin: -4px 0 8px; }
.abkpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.abkpi-card .abk-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 5px; white-space: nowrap; }
.abkpi-card .abk-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ROAS tiers: purple ≥5× · green 3–4.99× · yellow 1.5–2.99× · red below. */
.val.rt-purple { color: var(--accent2); }
.val.rt-green  { color: var(--good); }
.val.rt-yellow { color: var(--warn); }
.val.rt-red    { color: var(--bad); }
.abkpi-box { margin-bottom: 18px; }
.abkpi-title { font-size: 13px; font-weight: 600; color: var(--accent2); margin-bottom: 8px; letter-spacing: .02em; }
.exp-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.exp-head h2 { margin: 0; font-size: 16px; }
.tbl-card + .tbl-card { margin-top: 18px; }
/* Fixed layout so the Daily and Weekly tables share identical column widths. */
.exp-table { table-layout: fixed; width: 100%; }
.exp-table th:first-child, .exp-table td:first-child { width: 24%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-table th.num, .exp-table td.num { width: 15.2%; }
.legend { color: var(--muted); margin-bottom: 20px; font-size: 13px; }
.legend b { color: var(--text); }

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 16px; font-size: 15px; font-weight: 650; }
.card h3 { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }

/* ── Buttons / inputs ──────────────────────────────── */
button {
  background: var(--accent); color: #fff; border: 0; border-radius: 9px;
  padding: 9px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: background .15s, transform .04s, box-shadow .15s;
}
button:hover { background: var(--accent2); box-shadow: 0 4px 14px rgba(139,108,255,.3); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line2); box-shadow: none; }
button.ghost:hover { background: var(--panel2); color: var(--text); box-shadow: none; }
input, select, textarea {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line2); border-radius: 9px; padding: 9px 11px;
  font-family: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s;
}
textarea { width: 100%; resize: vertical; margin: 12px 0; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.grid button { grid-column: 1 / -1; justify-self: start; }
.row { display: flex; gap: 12px; align-items: end; margin-top: 14px; flex-wrap: wrap; }
.check { flex-direction: row; align-items: center; gap: 7px; }

/* ── Tables ────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 12px 14px; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th {
  color: var(--faint); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}
td { border-bottom: 1px solid var(--line); font-size: 13.5px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--panel2); }
tbody tr:last-child td { border-bottom: 0; }
.val { font-weight: 600; }
.val.good { color: var(--good); }
.val.bad { color: var(--bad); }
.val.neutral { color: var(--text); }

/* ── Tags / chips / verdicts ───────────────────────── */
.tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; margin-left: 7px;
  border: 1px solid var(--line2); color: var(--muted); letter-spacing: .03em;
}
.tag.bio { color: var(--accent2); border-color: rgba(139,108,255,.5); background: var(--accent-bg); }
.tag.fv { color: #FF8BD1; border-color: rgba(255,139,209,.5); background: rgba(255,139,209,.12); }  /* pink — violet is the brand accent now */
.tag.thin { color: var(--warn); border-color: rgba(245,177,76,.4); background: var(--warn-bg); }
.verdict {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px; letter-spacing: .01em;
}
.verdict.healthy { background: var(--good-bg); color: var(--good); }
.verdict.watch { background: var(--warn-bg); color: var(--warn); }
.verdict.problem { background: var(--bad-bg); color: var(--bad); }
.verdict.unknown, .verdict.unfit { background: var(--panel2); color: var(--muted); }
.chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.neutral { background: var(--panel2); color: var(--muted); }

/* ── Diagnosis nodes ───────────────────────────────── */
.tree { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.node {
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--line2); border-radius: 11px; padding: 14px 16px;
}
.node.cost { border-left-color: var(--bad); }
.node.value { border-left-color: var(--warn); }
.node h3 { margin: 0 0 5px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.node .big { font-size: 26px; font-weight: 700; margin: 2px 0; }
.node p { margin: 8px 0 0; }
.alert {
  background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(255,92,122,.25);
  border-radius: 10px; padding: 11px 15px; margin: 12px 0; font-size: 13px;
}
.stage-table td.label { color: var(--muted); }

/* ── Dashboard: header, KPI cards, refined table ─────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.page-head h1 { font-size: 23px; margin: 0 0 3px; font-weight: 700; letter-spacing: -.03em; }

.head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.upd-timer { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.meta-timer { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 2px; }
.date-nav { display: flex; align-items: center; gap: 8px; }
.dnav {
  background: var(--panel2); border: 1px solid var(--line2); color: var(--text);
  width: 34px; height: 34px; border-radius: 9px; font-size: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: none;
}
.dnav:hover { background: var(--panel3); color: var(--text); box-shadow: none; }
.dlabel { font-weight: 600; font-size: 13.5px; min-width: 120px; text-align: center; font-variant-numeric: tabular-nums; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.kpi-card {
  background: linear-gradient(180deg, var(--panel), #0b1a2d);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow);
}
.kpi-card .k-label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); font-weight: 600; margin-bottom: 10px; }
.kpi-card .k-value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-card .k-value.good { color: var(--good); }
.kpi-card .k-value.bad { color: var(--bad); }

.view-toggle { display: inline-flex; gap: 3px; padding: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 18px; }
.vseg { background: transparent; color: var(--muted); border: 0; padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
.vseg:hover { color: var(--text); box-shadow: none; }
.vseg.active { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(139,108,255,.3); }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.fchip {
  background: var(--panel2); color: var(--muted); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .14s;
}
.fchip:hover { color: var(--text); border-color: var(--line2); }
.fchip.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 10px rgba(139,108,255,.3); }

.tbl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.ov-table th { padding: 16px 16px 13px; }
.ov-table td { padding: 15px 16px; }
.ov-table tbody tr { cursor: pointer; }
.cell-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.mbadge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--accent-bg); color: var(--accent2); letter-spacing: .04em; }
.spend-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 84px; }
.spend-bar { height: 3px; border-radius: 2px; background: var(--accent); opacity: .7; min-width: 2px; }
.sdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.sdot.healthy { background: var(--good); }
.sdot.problem { background: var(--bad); }
.sdot.watch { background: var(--warn); }
.sdot.unknown, .sdot.unfit { background: var(--neutral); }
.miss { color: var(--warn); font-weight: 600; font-size: 11.5px; }

/* ── Health & Coverage ── */
#health .card { overflow: hidden; }
.health-tokens, .health-unmapped { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 12px; }
.health-tokens th, .health-tokens td,
.health-unmapped th, .health-unmapped td {
  padding: 12px 14px; text-align: left; vertical-align: top; word-break: break-word;
  border-top: 1px solid var(--line); font-size: 13px;
}
.health-tokens thead th, .health-unmapped thead th {
  border-top: none; color: var(--muted); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 700;
}
.health-tokens .c-status { width: 130px; }
.health-tokens .c-user   { width: 150px; }
.health-tokens .c-exp    { width: 80px; text-align: right; }
.health-tokens td.c-exp  { text-align: right; font-variant-numeric: tabular-nums; }
.health-acct { font-size: 12.5px; line-height: 1.6; }
.health-acct .a-name { color: var(--text); }
.hstat-ok  { color: var(--good); font-weight: 600; }
.hstat-bad { color: var(--bad);  font-weight: 600; }
.hwarn { color: var(--warn); }
.health-unmapped .c-spend { width: 100px; text-align: right; }
.health-unmapped td.c-spend { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.health-unmapped .c-model { width: 160px; }
.health-unmapped .c-act { width: 90px; }
.hsel { width: 100%; padding: 6px 8px; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 7px; color: var(--text); font: inherit; font-size: 12px; }

/* ── Smart Links tab ── */
.lt-table .lt-smart { background: var(--accent-bg); }
.lt-table th.lt-smart { color: var(--accent2); }
.lt-table tbody tr { cursor: default; }
.lt-table tfoot td { font-weight: 700; }
.lowbal { color: var(--bad); }
.lt-table .bb-col { background: rgba(255,138,76,.10); color: var(--warn); }
.lt-table th.bb-col { color: var(--warn); }
.bb-matrix .bb-group td { background: var(--panel2); font-weight: 700; font-size: 13px;
  color: var(--text); border-top: 2px solid var(--line2); padding: 12px 14px; }
.bb-matrix .bb-row td { font-weight: 600; }
.bb-matrix td:first-child, .bb-matrix th:first-child {
  position: sticky; left: 0; background: var(--panel); z-index: 1; }
.bb-matrix .bb-group td:first-child { background: var(--panel2); }
/* Compact one-row-per-model variant */
.bb-compact th, .bb-compact td { padding: 7px 10px; font-size: 12.5px; }
.bb-compact tbody tr { cursor: default; }
.bb-compact .bb-sep { width: 14px; padding: 0; background: var(--bg); border: none; }
.bb-compact .bb-col { background: rgba(255,138,76,.08); }
.bb-compact th.bb-col { color: var(--warn); }

/* ── Daily View: numeric table + per-model fee editing ── */
.ov-table th.num, .ov-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ov-table tfoot td { padding: 15px 16px; border-top: 2px solid var(--line2); background: var(--panel2); }
.ov-table tfoot tr { cursor: default; }
.fee-inp { width: 56px; padding: 5px 7px; text-align: right; background: var(--panel2);
  border: 1px solid var(--line2); border-radius: 7px; color: var(--text); font: inherit;
  font-variant-numeric: tabular-nums; }
.fee-inp:focus { outline: none; border-color: var(--accent); }

/* ── Notes & Playbook cards ── */
.note-card { margin-bottom: 16px; }
.note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.note-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--text);
  background: transparent; border: none; border-bottom: 1px solid transparent; padding: 4px 2px; }
.note-title:hover { border-bottom-color: var(--line2); }
.note-title:focus { outline: none; border-bottom-color: var(--accent); }
.note-del { flex: 0 0 auto; padding: 4px 9px; font-size: 13px; opacity: .55; }
.note-del:hover { opacity: 1; color: var(--bad); border-color: rgba(255,90,90,.4); }
.note-body { width: 100%; min-height: 90px; resize: none; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font: inherit; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; }
.note-body:focus { outline: none; border-color: var(--accent); }
.note-empty { padding: 24px 4px; }

/* Trello-style checklist items */
.nlist { display: flex; flex-direction: column; gap: 2px; }
.nitem { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; }
.nitem:hover { background: var(--panel2); }
.nitem-check { width: 17px; height: 17px; accent-color: var(--good); cursor: pointer; flex: 0 0 auto; }
.nitem-text { flex: 1; background: transparent; border: none; color: var(--text);
  font: inherit; font-size: 14px; padding: 5px 4px; border-bottom: 1px solid transparent; }
.nitem-text:focus { outline: none; border-bottom-color: var(--accent); }
.nitem.done .nitem-text { text-decoration: line-through; color: var(--muted); }
.nitem-del { flex: 0 0 auto; background: transparent; border: none; color: var(--muted);
  font-size: 19px; line-height: 1; cursor: pointer; padding: 0 6px; opacity: 0; }
.nitem:hover .nitem-del { opacity: .6; }
.nitem-del:hover { opacity: 1; color: var(--bad); }
.nitem-add { width: 100%; margin-top: 8px; background: var(--panel2);
  border: 1px dashed var(--line2); border-radius: 8px; padding: 9px 12px;
  color: var(--text); font: inherit; font-size: 14px; }
.nitem-add::placeholder { color: var(--muted); }
.nitem-add:focus { outline: none; border-style: solid; border-color: var(--accent); }

/* ── Fan Goals grid ── */
.goals-card { overflow-x: auto; }
.goals-table { border-collapse: collapse; min-width: 100%; }
.goals-table th, .goals-table td { text-align: center; padding: 6px 7px; border-bottom: 1px solid var(--line); }
.goals-table th { font-size: 11px; color: var(--muted); font-weight: 600; }
.goals-table th.today, .goals-table td.today { background: var(--accent-bg); }
.goals-table th.future, .goals-table td.future { opacity: .82; }
.gd-wd { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.gd-dm { font-size: 14px; font-weight: 700; color: var(--text); }
.gbrand { text-align: left !important; position: sticky; left: 0; background: var(--panel);
  z-index: 2; white-space: nowrap; font-size: 13px; }
.goals-table thead .gbrand, .goals-table tfoot .gbrand { background: var(--panel); }
.goal-cell { min-width: 56px; }
.goal-inp { width: 46px; text-align: center; background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 7px; color: var(--text); font: inherit; font-size: 13px; padding: 4px 2px;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.goal-inp::-webkit-outer-spin-button, .goal-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.goal-inp:focus { outline: none; border-color: var(--accent); }
.goal-actual { font-size: 12px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.goal-actual.hit { color: var(--good); }
.goal-actual.miss { color: var(--bad); }
.goal-actual.neu { color: var(--muted); }
.goal-spend { font-size: 11px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.goal-spend.hit { color: var(--good); }
.goal-spend.miss { color: var(--bad); }
.goal-spend.neu { color: var(--muted); }
.goal-cps { font-size: 11px; margin-top: 3px; font-variant-numeric: tabular-nums; font-weight: 600;
  border-top: 1px solid var(--line); padding-top: 3px; }
.goal-cps.hit { color: var(--good); }
.goal-cps.miss { color: var(--bad); }
.goal-cps.neu { color: var(--muted); }
.goal-cps .cps-goal { color: var(--faint); font-weight: 400; }
.spend-inp { width: 54px; text-align: center; margin-top: 5px; background: var(--panel2);
  border: 1px dashed var(--line2); border-radius: 7px; color: var(--muted); font: inherit; font-size: 11px;
  padding: 3px 2px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.spend-inp::-webkit-outer-spin-button, .spend-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spend-inp:focus { outline: none; border-style: solid; border-color: var(--accent); color: var(--text); }
.goal-tot-sp { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.goals-table tfoot td { border-top: 2px solid var(--line2); background: var(--panel2); }
.goal-tot { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Champions boards: compact numeric columns ── */
.champ-table th.num, .champ-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.champ-table th.primary, .champ-table td.primary { color: var(--text); font-weight: 700; }
.champ-table td.primary { background: var(--panel2); }
.champ-table .cell-ellip { max-width: 150px; }

/* ── Daily View: grouped columns + hover + leader highlight ── */
.daily-card { overflow-x: auto; }
.daily-table { width: 100%; }
.daily-table .grp-row th { font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 4px 16px 5px; border-bottom: none; font-weight: 700; }
.daily-table th.gstart,
.daily-table td:nth-child(2), .daily-table td:nth-child(5),
.daily-table td:nth-child(7), .daily-table td:nth-child(9) { border-left: 1px solid var(--line2); }
.daily-table tbody tr { transition: background .1s; }
.daily-table tbody tr:hover { background: var(--panel2); }
.daily-table tr.leader td { background: rgba(139, 108, 255, .07); }
.daily-table tr.leader td:first-child { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }

/* ── Charts tab ── */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.chart-grid .chart-card:nth-child(5) { grid-column: 1 / -1; }  /* ROAS full width */
.chart-card { padding: 16px 18px 10px; }
.chart-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.chart-head h2 { margin: 0; font-size: 15px; }
.chart-svg { width: 100%; height: auto; background: transparent; border: none; display: block; }
.chart-svg .bar { fill: var(--accent); }
.chart-svg .bar.c-fans { fill: var(--accent2); }
.chart-svg .bar.c-rev { fill: var(--good); }
.chart-svg .bar-val { fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.chart-svg .bar-x { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.chart-svg .cline { fill: none; stroke: var(--warn); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .cline.c-roas { stroke: var(--accent2); }
.chart-svg .dot { fill: var(--warn); }
.chart-svg .dot.c-roas { fill: var(--accent2); }
/* Reply-Diagramme: 1+ gruen, 3+ violett — dieselbe Logik wie die Tabelle. */
.chart-svg .cline.c-reply1 { stroke: var(--good); }
.chart-svg .dot.c-reply1 { fill: var(--good); }
.chart-svg .cline.c-reply3 { stroke: var(--accent2); }
.chart-svg .dot.c-reply3 { fill: var(--accent2); }
.chart-svg .cline.c-aeps { stroke: var(--good); }
.chart-svg .cline.c-crof { stroke: #FF8BD1; }
.chart-svg .dot.c-aeps { fill: var(--good); }
.chart-svg .dot.c-crof { fill: #FF8BD1; }

/* mini trend grid under a cell's diagnosis */
.trend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mini-chart { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 4px; }
.mini-chart .chart-head h2 { font-size: 13px; margin: 0 0 2px; }
@media (max-width: 900px) { .trend-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } .chart-grid .chart-card:nth-child(5) { grid-column: auto; } }

/* ── Playbook groups (Ad relevant / Setup relevant) ── */
.rule-group { margin-bottom: 26px; }
.rule-group-head { display: flex; align-items: center; gap: 12px; margin: 0 2px 12px; }
.rule-group-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; margin: 0; flex: 1; }
.rule-group-count { display: inline-block; min-width: 20px; text-align: center; font-size: 12px;
  font-weight: 700; color: var(--muted); background: var(--panel2); border: 1px solid var(--line2);
  border-radius: 20px; padding: 1px 8px; margin-left: 4px; }
.rule-group-add { padding: 5px 12px; font-size: 12.5px; }
.rule-group .note-empty { padding: 12px 4px; font-size: 13px; }
.rule-group-label { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rule-group-select { background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px; padding: 6px 9px; }
.rule-group-select:focus { outline: none; border-color: var(--accent); }

/* ── Playbook: collapsible, read-only-by-default rule cards ── */
.rule-card { margin-bottom: 10px; padding: 0; overflow: hidden; }
.rule-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; }
.rule-head:hover { background: var(--panel2); }
.rule-chevron { flex: 0 0 12px; color: var(--muted); font-size: 11px; }
.rule-headtext { flex: 1; min-width: 0; }
.rule-title { font-weight: 700; font-size: 15px; color: var(--text); }
.rule-preview { color: var(--muted); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-card.open .rule-preview { display: none; }
.rule-actions { flex: 0 0 auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.rule-card:hover .rule-actions, .rule-card.open .rule-actions { opacity: 1; }
.rule-actions .ghost { padding: 4px 9px; font-size: 13px; }
.rule-body { padding: 2px 18px 18px 42px; }
.rule-view { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--text); }
.rule-form { display: flex; flex-direction: column; gap: 10px; }
.rule-title-input { font-size: 15px; font-weight: 700; font-family: inherit; color: var(--text);
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 9px 12px; }
.rule-body-input { min-height: 110px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.6;
  color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px;
  padding: 11px 13px; white-space: pre-wrap; }
.rule-title-input:focus, .rule-body-input:focus { outline: none; border-color: var(--accent); }
.rule-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Setups table: compact + no clipped columns ── */
.setups-card { overflow-x: auto; }
.setups-table { min-width: 920px; }
.setups-table th, .setups-table td { padding: 9px 12px; font-size: 12.5px; }
.setups-table tbody tr { cursor: default; }
.cell-ellip { display: inline-block; max-width: 175px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.row-actions { white-space: nowrap; }
.row-actions .ghost { padding: 4px 9px; font-size: 12px; margin-left: 6px; }
.row-actions .ghost:first-child { margin-left: 0; }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Champions boards ──────────────────────────────── */
.boards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; margin-bottom: 20px; }
.card.decider { border-color: rgba(46,211,145,.4); box-shadow: var(--shadow), 0 0 0 1px rgba(46,211,145,.25); }
.boards-grid table th, .boards-grid table td { padding: 8px 9px; font-size: 12.5px; }
svg { max-width: 100%; height: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; }
.brand-mark, .login-mark { background: transparent; border: none; border-radius: 0; }  /* logo marks: no chart-svg chrome */
@media (max-width: 920px) { .boards-grid { grid-template-columns: 1fr; } .grid { grid-template-columns: repeat(2,1fr); } }

/* ════════════════ Mobile (phone) ════════════════ */
.mobile-bar { display: none; }
.nav-overlay { display: none; }

@media (max-width: 768px) {
  /* Fixed top bar with hamburger + brand */
  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; inset: 0 0 auto 0; height: 54px; z-index: 60; padding: 0 14px;
    background: rgba(14,17,23,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .mobile-bar .brand { font-size: 18px; padding: 0; }
  .nav-toggle {
    background: var(--panel2); color: var(--text); border: 1px solid var(--line2);
    width: 40px; height: 40px; border-radius: 11px; font-size: 19px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
  }
  .nav-toggle:active { background: var(--accent-bg); }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 272px; flex-basis: 272px; z-index: 70; padding-top: 22px;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 50px rgba(0,0,0,.55);
  }
  .layout.nav-open .sidebar { transform: translateX(0); }
  .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  .layout.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  .tab { padding: 12px 13px; font-size: 15px; }   /* bigger tap targets */
  .seg { padding: 10px 6px; }

  /* Content clears the fixed bar + tighter gutters */
  .content { padding-top: 54px; }
  .tab-panel { padding: 18px 14px 44px; }
  #tab-attribution { padding-top: 54px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .page-head h1 { font-size: 20px; }
  .head-right { align-items: flex-start; }

  /* KPIs + form grids: two up */
  .kpi-row, .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .kpi-card { padding: 16px 16px; }
  .kpi-card .k-value { font-size: 22px; }
  .card { padding: 18px 16px; }

  /* Wide data tables scroll inside their card rather than the whole page */
  .card, .tbl-card, .daily-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ov-table { min-width: 600px; }
}

@media (max-width: 430px) {
  .kpi-row, .grid { grid-template-columns: 1fr !important; }
  .kpi-card .k-value { font-size: 24px; }
}

.lt-group { font-size: 14px; font-weight: 700; margin: 22px 2px 8px; color: var(--good); letter-spacing:.01em; }
.lt-group.off { color: var(--muted); }

/* ── LLG data voice — numerics in JetBrains Mono ("measured, not marketed") ── */
.kpi-card .k-value, .abkpi-card .abk-val, .goal-actual, .goal-spend, .goal-cps, .goal-tot, .goal-tot-sp,
td.num, th.num, .val, .rr-sub, .rr-matrix tbody td:not(:first-child), .rr-matrix tfoot td:not(:first-child),
.roas-matrix tbody td:not(:first-child), .roas-matrix tfoot td:not(:first-child),
.dlabel, .upd-timer, .meta-timer, .chart-svg .bar-val,
.health-tokens td.c-exp, .health-unmapped td.c-spend { font-family: var(--mono); }
/* mono runs wider — keep the big KPI numbers inside their cards */
.kpi-card .k-value { font-size: 24px; letter-spacing: -0.03em; }
.abkpi-card .abk-val { font-size: 16px; }

/* LLG agency filter — chips wrap when several agencies exist */
#agency-filter { flex-wrap: wrap; }
#agency-filter .seg { flex: 1 1 auto; min-width: 60px; }

/* ── Plan tab (LLG) — rollout roadmap + week view ── */
.plan-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; margin-bottom: 14px; box-shadow: var(--shadow); }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-head b { font-size: 14px; }
.plan-status { font-family: var(--mono); font-size: 11.5px; }
.plan-status.pk-test { color: var(--accent2); }
.plan-status.pk-scale { color: var(--good); }
.plan-status.pk-pause { color: var(--warn); }
.plan-status.pk-stop { color: var(--bad); }
.plan-status.pk-none, .plan-status.pk-custom { color: var(--muted); }
.plan-next { font-size: 11.5px; }
.plan-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.plan-scale { position: relative; height: 14px; margin-top: 10px; }
.plan-tick-lbl { position: absolute; top: 0; font-size: 9px; color: var(--faint);
  transform: translateX(3px); font-family: var(--mono); }
.plan-bar { position: relative; height: 34px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; }
.plan-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.plan-seg { position: absolute; top: 5px; bottom: 5px; border-radius: 5px; font-size: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  white-space: nowrap; font-family: var(--mono); font-weight: 600; }
.plan-seg.editable { cursor: pointer; }
.plan-seg.pk-test { background: var(--accent); color: #fff; }
.plan-seg.pk-scale { background: var(--good); color: #0E0B16; }
.plan-seg.pk-pause { background: var(--warn); color: #0E0B16; }
.plan-seg.pk-stop { background: rgba(255,92,122,.75); color: #fff; }
.plan-seg.pk-custom { background: var(--accent2); color: #0E0B16; }
.plan-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .75; }
.plan-note { font-size: 12px; margin-top: 8px; }
.plan-note-in { width: 100%; margin-top: 8px; font-size: 12px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--text); }
.plan-editor { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px;
  padding: 10px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; }
.plan-editor label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.plan-editor input, .plan-editor select { font-size: 12px; padding: 6px 8px; }
.plan-editor #pe-label, .plan-editor #pe-note { min-width: 150px; }
.plan-editor #pe-budget { width: 76px; }
.plan-week-nav { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.plan-week-title { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.plan-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.plan-day-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.plan-dow { font-size: 11px; letter-spacing: .18em; color: var(--accent); font-weight: 600; }
.plan-date { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.plan-ev { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.plan-ev:first-of-type { border-top: 0; }
.plan-ev-kind { font-size: 12px; font-weight: 600; white-space: nowrap; }
.plan-ev-kind.pk-test { color: var(--accent2); }
.plan-ev-kind.pk-scale { color: var(--good); }
.plan-ev-kind.pk-pause { color: var(--warn); }
.plan-ev-kind.pk-stop { color: var(--bad); }
.plan-ev-models { font-size: 13px; line-height: 1.7; }
.plan-conf { margin-top: 18px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); text-align: center; }

@keyframes uflash { 0% { box-shadow: 0 0 0 2px var(--accent, #8B6CFF); } 100% { box-shadow: 0 0 0 2px transparent; } }
.user-form.flash { animation: uflash 1.2s ease-out; }

/* ── Ad Spend tab (LLG) — manual daily entry ── */
.as-status { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px; }
.as-status.as-full { border-color: rgba(87,217,163,.5); }
.as-status.as-none { border-color: rgba(255,92,122,.4); }
.as-bar { height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.as-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .2s; }
.as-full .as-bar span { background: var(--good); }
.as-status-txt { font-size: 12.5px; color: var(--muted); }
.as-status-txt b { color: var(--text); font-family: var(--mono); }
.as-miss { color: var(--warn); }
.as-ok { color: var(--good); }
.as-strip-wrap { margin-bottom: 18px; }
.as-strip-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); font-weight: 600; margin-bottom: 6px; }
.as-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.as-day { width: 40px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--muted); cursor: pointer; font-family: var(--mono);
  font-size: 11px; padding: 0; transition: transform .1s; }
.as-day:hover { transform: translateY(-1px); }
.as-day.as-full { background: rgba(87,217,163,.18); border-color: rgba(87,217,163,.5); color: var(--good); }
.as-day.as-part { background: rgba(245,177,76,.16); border-color: rgba(245,177,76,.45); color: var(--warn); }
.as-day.as-none { background: rgba(255,92,122,.12); border-color: rgba(255,92,122,.35); color: var(--bad); }
.as-day.sel { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--text); }
.as-model { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.as-model-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.as-count { font-family: var(--mono); font-size: 11px; padding: 1px 8px; border-radius: 20px;
  border: 1px solid var(--line2); color: var(--muted); }
.as-count.ok { color: var(--good); border-color: rgba(87,217,163,.5); }
.as-count.todo { color: var(--warn); border-color: rgba(245,177,76,.45); }
.as-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--line); }
.as-row:first-of-type { border-top: 0; }
.as-main { flex: 1 1 380px; min-width: 260px; }
.as-camp { font-size: 13px; }
.as-row.done .as-camp { color: var(--muted); }
.as-access { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.as-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 20px; background: var(--panel2);
  border: 1px solid var(--line2); color: var(--muted); }
.as-pill.mono { font-family: var(--mono); }
.as-inputs { display: flex; gap: 8px; align-items: center; }
.as-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.as-spend { width: 96px; font-family: var(--mono); text-align: right; padding: 7px 9px;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; color: var(--text); }
.as-note { width: 190px; padding: 7px 9px; font-size: 12px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.as-flash { font-size: 11px; color: var(--muted); min-width: 62px; }
.as-flash.ok { color: var(--good); }
.as-flash.bad { color: var(--bad); }
@media (max-width: 720px) { .as-inputs { width: 100%; } .as-note { flex: 1; width: auto; } }

/* Ad Spend — paused brands, set apart from the ones that still need entry */
.as-off-head { margin: 26px 2px 10px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 16px; }
.as-off-head .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.as-model.off { opacity: .62; }

/* Ad Spend — several brands run two identically NAMED campaigns (one per
   anti-detect browser); the platform pill is the only thing telling them apart. */
.as-pill.plat-incogniton { color: var(--accent2); border-color: rgba(167,139,255,.5);
  background: rgba(167,139,255,.12); font-weight: 600; }
.as-pill.plat-adspower { color: var(--good); border-color: rgba(87,217,163,.5);
  background: rgba(87,217,163,.12); font-weight: 600; }

/* Ad Spend — one entry per brand; its campaigns are shown as access info */
.as-brand-row .as-model-head { display: flex; align-items: center; gap: 10px; }
.as-sum-hint { font-size: 11px; color: var(--warn); font-weight: 600; }
.as-brand-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between; padding: 4px 0 2px; }
.as-access-list { display: flex; flex-direction: column; gap: 6px; flex: 1 1 420px; }
.as-camp-name { font-size: 11px; }

/* Ad Spend — one tab per anti-detect browser profile (the unit of entry work) */
.as-proftabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.as-proftab { background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .14s; }
.as-proftab:hover { color: var(--text); border-color: var(--line2); }
.as-proftab.active { background: var(--accent-bg); border-color: var(--accent); color: var(--text);
  font-weight: 600; }
.as-proftab.full .as-tabcount { color: var(--good); }
.as-proftab.part .as-tabcount { color: var(--warn); }
.as-tabcount { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.as-plat { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.as-plat.plat-incogniton { color: var(--accent2); }
.as-plat.plat-adspower { color: var(--good); }
.as-bt { font-size: 11px; color: var(--warn); margin-left: 8px; }
.as-row.off { opacity: .6; }

/* Ad Spend — label the field so nobody grabs 'Cost per result' again */
.as-hint { font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin-right: 2px; white-space: nowrap; cursor: help; }

/* Agentur-Auswahl als Dropdown — skaliert im Gegensatz zu Chips */
#agency-filter { padding: 0; background: none; border: 0; }
.agency-select { width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; cursor: pointer; }
.agency-select:hover { border-color: var(--line2); }
.agency-select:focus { outline: none; border-color: var(--accent); }

/* ── 7Automations-Branding (nur auf 7a.llgpaidads.com) ──────────────────
   Vivid Cyan #0598CE auf Midnight Navy, Google Sans. LLG bleibt Ultraviolet. */
body[data-brand="7a"] {
  --bg: #081321;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(5,152,206,0.11), transparent 60%);
  --panel: #0e2038;
  --panel2: #14273f;
  --panel3: #1b3252;
  --line: #1d3651;
  --line2: #294a68;
  --text: #eaf3fb;
  --muted: #8ca6c2;
  --faint: #5d7796;
  --accent: #0598CE;
  --accent2: #34BAEC;
  --accent-deep: #0985B3;
  --navy: #113768;
  --accent-bg: rgba(5,152,206,0.15);
  --good: #2ed391;
  --good-bg: rgba(46,211,145,0.12);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(3,12,26,.4);
  font-family: 'Google Sans', 'Product Sans', 'Google Sans Text', Roboto,
               ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* Zahlen im 7A-Look wieder in der Hausschrift (Mono ist LLG-Sprache) */
body[data-brand="7a"] .kpi-card .k-value,
body[data-brand="7a"] td.num, body[data-brand="7a"] th.num,
body[data-brand="7a"] .val, body[data-brand="7a"] .dlabel,
body[data-brand="7a"] .roas-matrix tbody td:not(:first-child),
body[data-brand="7a"] .abkpi-card .abk-val { font-family: inherit; }
body[data-brand="7a"] .sidebar { background: linear-gradient(180deg, #0d2038, #081321); }
/* 7A-Wortmarke: "Paid" im Cyan-Verlauf, "Ads" in Weiß */
body[data-brand="7a"] .brand-a {
  background: linear-gradient(180deg, #34BAEC 0%, #0598CE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800; font-size: 20px;
}
body[data-brand="7a"] .brand-b { color: #f4f6fb; font-weight: 800; font-size: 20px; }
body[data-brand="7a"] .brand-mark path { stroke: var(--accent); fill: none; }

/* ── Analytics: Zeitraum-Auswahl ── */
.an-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.an-presets { display: inline-flex; gap: 4px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.an-preset { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 7px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; transition: all .14s; }
.an-preset:hover { color: var(--text); }
.an-preset.active { background: var(--accent); color: #fff; }
.an-inputs { display: flex; align-items: center; gap: 10px; }
.an-month, .an-custom input { background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
  font-size: 12.5px; font-family: inherit; }
.an-custom { display: inline-flex; align-items: center; gap: 10px; }
.an-custom label { display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }

/* ── Ad Spend als Tabelle (Kampagnen x Tage) ── */
.as-matrix-card { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0; }
.as-matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.as-matrix th, .as-matrix td { padding: 7px 8px; font-size: 12px; white-space: nowrap;
  border-bottom: 1px solid var(--line); }
.as-matrix thead th { position: sticky; top: 0; background: var(--panel); z-index: 2;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.as-matrix thead th.today { color: var(--accent); }
.as-c-model { position: sticky; left: 0; background: var(--panel); z-index: 3;
  min-width: 210px; text-align: left; }
.as-matrix thead .as-c-model { z-index: 4; }
.as-sub { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.as-sub .as-pill { font-size: 9.5px; padding: 1px 6px; }
.as-cell { padding: 3px 4px; }
.as-cell.miss { background: rgba(245,177,76,.10); }
.as-in { width: 78px; background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 5px 6px; color: var(--text); font: inherit;
  font-variant-numeric: tabular-nums; text-align: right; }
.as-in:hover { border-color: var(--line2); }
.as-in:focus { outline: none; border-color: var(--accent); background: var(--panel2); }
.as-in.saving { opacity: .5; }
.as-in.ok { border-color: var(--good); }
.as-in.bad { border-color: var(--bad); }
.as-matrix tr.off { opacity: .55; }
.as-c-total { background: var(--panel2); }
.as-matrix tfoot .totals-row td { background: var(--panel2); font-weight: 600;
  border-top: 2px solid var(--line2); position: sticky; bottom: 0; }
.as-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.as-bar { width: 160px; height: 6px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.as-bar i { display: block; height: 100%; background: var(--accent); }

/* Ad Spend — automatisch befuellte Zeilen (Meta) */
.as-pill.auto { color: var(--good); border-color: rgba(87,217,163,.5);
  background: rgba(87,217,163,.12); font-weight: 600; }
.as-cell.auto { color: var(--muted); font-style: italic; }


/* Analytics: Model-Auswahl (Mehrfachauswahl neben den Zeitraum-Schaltern) */
.an-models { position: relative; display: inline-block; }
.an-mpanel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--panel-2, #1E1833); border: 1px solid var(--line, #2A2240);
  border-radius: 10px; padding: 8px; min-width: 210px; max-height: 340px;
  overflow: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.an-mpanel label {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  font-size: 12.5px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.an-mpanel label:hover { background: rgba(139, 108, 255, .12); }
.an-mpanel input { accent-color: var(--accent, #8B6CFF); }
.an-mhead { display: flex; gap: 6px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line, #2A2240); margin-bottom: 6px; }
.an-mhead button {
  flex: 1; background: none; border: 1px solid var(--line, #2A2240); color: var(--muted, #9A93B5);
  border-radius: 6px; padding: 4px 8px; font-size: 11px; font-family: inherit; cursor: pointer;
}
.an-mhead button:hover { color: var(--text, #EDE9F7); border-color: var(--accent, #8B6CFF); }


/* ── Charts als PDF: Druckbereich, eine Seite je Brand ────────────── */
#pdf-report { display: none; }
.fchip-pdf, .an-pdfbtn { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.an-pdfbtn { margin-left: 10px; }
.fchip-pdf:disabled { opacity: .5; }

@media print {
  /* Rand 0 + eigenes Padding: so reicht der dunkle Grund bis an die Blattkante. */
  @page { size: A4 landscape; margin: 0; }
  body > *:not(#pdf-report) { display: none !important; }
  html, body { background: #0E0B16 !important; }
  #pdf-report {
    display: block; color: #EDE9F7;
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pdf-page {
    position: relative; height: 210mm; padding: 9mm 11mm; box-sizing: border-box;
    overflow: hidden; page-break-after: always; break-after: page;
    page-break-inside: avoid; break-inside: avoid;
  }
  .pdf-page:last-child { page-break-after: auto; break-after: auto; }
  /* Hintergrund als SVG-Flaeche = Inhalt, druckt auch ohne "Background graphics" */
  .pdf-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .pdf-inner { position: relative; z-index: 1; }

  .pdf-head { display: flex; justify-content: space-between; align-items: flex-end;
              border-bottom: 1.5px solid var(--pdf-accent, #8B6CFF);
              padding-bottom: 5px; margin-bottom: 8px; }
  .pdf-head h1 { font-size: 18px; margin: 0; color: #FFFFFF; letter-spacing: -.01em; }
  .pdf-sub { font-size: 10.5px; color: #9A93B5; margin-top: 2px; }
  .pdf-brand { display: flex; align-items: center; gap: 7px; font-size: 9px;
               letter-spacing: .22em; text-transform: uppercase; color: var(--pdf-accent, #8B6CFF); }
  .pdf-mark { display: block; }

  .pdf-kpis { display: flex; gap: 6px; margin-bottom: 8px; }
  .pdf-kpis > div { flex: 1; border: 1px solid var(--pdf-line, #2A2240); border-radius: 8px;
                    padding: 5px 9px; }
  .pdf-kpis span { display: block; font-size: 8.5px; letter-spacing: .12em;
                   text-transform: uppercase; color: #9A93B5; margin-bottom: 2px; }
  .pdf-kpis b { font-size: 14px; font-family: 'JetBrains Mono', monospace; color: #FFFFFF; }

  .pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pdf-grid .chart-card { border: 1px solid var(--pdf-line, #2A2240); border-radius: 8px;
                          padding: 5px 8px 0; background: transparent; box-shadow: none;
                          break-inside: avoid; }
  .pdf-grid .chart-card:nth-child(5) { grid-column: 1 / -1; }
  .pdf-grid .chart-svg { height: 34mm; width: 100%; }
  .pdf-grid .chart-card:nth-child(5) .chart-svg { height: 30mm; }
  .pdf-grid .chart-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
  .pdf-grid .chart-head h2 { font-size: 11.5px; margin: 0; color: #EDE9F7; }
  .pdf-grid .chart-head .muted { font-size: 9.5px; color: #9A93B5; }

  /* Tabellen */
  .pdf-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 2px; }
  .pdf-table th { text-align: left; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
                  color: #9A93B5; border-bottom: 1px solid var(--pdf-line, #2A2240); padding: 6px 8px; }
  .pdf-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.06); color: #EDE9F7; }
  .pdf-table th.num, .pdf-table td.num { text-align: right; font-family: 'JetBrains Mono', monospace; }
  .pdf-table tfoot td { border-top: 1.5px solid var(--pdf-accent, #8B6CFF); border-bottom: 0;
                        font-weight: 700; color: #FFFFFF; }

  /* Diagramme behalten die Bildschirmfarben — sie sind fuer Dunkel gebaut. */
  #pdf-report .chart-svg .bar { fill: #8B6CFF; }
  #pdf-report .chart-svg .bar.c-fans { fill: #5B8DEF; }
  #pdf-report .chart-svg .bar.c-rev { fill: #3FCF8E; }
  #pdf-report .chart-svg .bar-val { fill: #EDE9F7; font-weight: 600; }
  #pdf-report .chart-svg .bar-x { fill: #7C7596; }
  #pdf-report .chart-svg .cline { fill: none; stroke-width: 2; }
  #pdf-report .chart-svg .cline.c-cps { stroke: #FFB454; }
  #pdf-report .chart-svg .cline.c-roas { stroke: #8B6CFF; }
  #pdf-report .chart-svg .dot.c-cps { fill: #FFB454; }
  #pdf-report .chart-svg .dot.c-roas { fill: #8B6CFF; }
  #pdf-report .chart-svg .cline.c-reply1 { stroke: #3FCF8E; }
  #pdf-report .chart-svg .dot.c-reply1 { fill: #3FCF8E; }
  #pdf-report .chart-svg .cline.c-reply3 { stroke: #8B6CFF; }
  #pdf-report .chart-svg .dot.c-reply3 { fill: #8B6CFF; }
}

/* Anon: die zuletzt noch sichtbaren Namen — Smart-Links-Karten, Charts-Kopf,
   Agentur-Auswahl. Zahlen bleiben lesbar, nur die Identitaeten verschwinden. */
body.anon #linktypes section.card h2,
body.anon #charts .ch-model,
body.anon #agency-filter select,
body.anon .an-mpanel label,
body.anon #an-mbtn { filter: blur(6px); }

/* ── Master overview (LLG) ─────────────────────────────────────────── */
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 20px; }
.m-d { font-size: 11px; font-weight: 600; margin-left: 4px; color: var(--faint); }
.m-d.up { color: var(--good); }
.m-d.down { color: var(--bad); }
.m-d.neu { color: var(--faint); }
.tag.m-part { color: var(--warn); border-color: rgba(245,177,76,.4); background: var(--warn-bg); }
.m-note { font-size: 12px; margin: 10px 2px 24px; }


/* ── Tagestabelle mit Notizen (Charts) ───────────────────────────────
   Zeilen flacher als die uebrigen Tabellen, damit die Notizspalte passt,
   ohne dass die Tabelle waechst. */
.ds-table th, .ds-table td { padding: 7px 14px; font-size: 12.5px; }
.ds-table th { font-size: 9.5px; }
.ds-table th.ds-note, .ds-table td.ds-note {
  text-align: left; width: 32%; padding-left: 18px; border-left: 1px solid var(--line);
}
.ds-table tbody tr:hover { background: rgba(139,108,255,.06); }
.ds-table tr.open td { background: rgba(139,108,255,.05); border-bottom: 0; }

.note-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; cursor: pointer; }
.note-chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--warn); flex: none; }
.note-chip .topic { font-size: 12px; color: var(--text); overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.note-chip .more { font-size: 9.5px; color: var(--faint); border: 1px solid var(--line);
                   border-radius: 4px; padding: 0 4px; flex: none; }
.note-add { color: var(--faint); font-size: 11.5px; cursor: pointer; opacity: 0; transition: opacity .12s; }
tr:hover .note-add { opacity: 1; color: var(--accent); }

/* Editor unter der Zeile */
tr.dn-editor td {
  background: rgba(139,108,255,.05); padding: 2px 18px 14px;
  white-space: normal;          /* Zellen sind global nowrap -> Felder lagen nebeneinander */
  text-align: left;
}
.dn-box { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2);
          padding: 12px 14px; max-width: 680px; }
.dn-box input, .dn-box textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  background: transparent; border: 0; border-radius: 0; color: var(--text);
  font-family: inherit; outline: none; padding: 0; resize: vertical;
}
.dn-box input:focus, .dn-box textarea:focus { box-shadow: none; border: 0; }
.dn-box input { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dn-box input::placeholder { color: var(--faint); font-weight: 400; }
.dn-box textarea { font-size: 12px; color: var(--muted); line-height: 1.55; }
.dn-box textarea::placeholder { color: var(--faint); }
.dn-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.dn-meta { flex: 1; font-size: 10.5px; color: var(--faint); }
.dn-foot button { font-size: 11.5px; padding: 5px 12px; border-radius: 7px; }
.dn-save { background: var(--accent); border: 1px solid var(--accent); color: #0B0714; font-weight: 600; }

/* Im Druck: Notizen als Fussnoten unter der Tagesseite */
@media print {
  #pdf-report tr.pdf-noted td { background: rgba(139,108,255,.14);
    border-top: 1px solid rgba(139,108,255,.45); border-bottom: 1px solid rgba(139,108,255,.45); }
  #pdf-report tr.pdf-noted td:first-child { font-weight: 700; color: #FFFFFF; }
  .pdf-notemark { color: #8B6CFF; font-size: 10px; }
  .pdf-noteblk { border: 1px solid var(--pdf-line, #2A2240); border-radius: 8px;
                 padding: 9px 12px; margin-bottom: 8px; background: #171226;
                 page-break-inside: avoid; }
  .pdf-noteblk-top { display: flex; align-items: baseline; gap: 10px; }
  .pdf-noteblk-date { font-family: var(--mono); font-size: 9.5px; color: #9A93B5;
                      letter-spacing: .04em; white-space: nowrap; }
  .pdf-noteblk b { font-size: 11.5px; color: #FFFFFF; }
  .pdf-noteblk p { margin: 5px 0 0; font-size: 10.5px; line-height: 1.5; color: #C9C2DE; }
  .pdf-notes { margin-top: 10px; border-top: 1px solid var(--pdf-line, #2A2240); padding-top: 8px; }
  .pdf-notes h3 { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
                  color: #9A93B5; margin: 0 0 5px; }
  .pdf-notes div { font-size: 10.5px; color: #EDE9F7; margin-bottom: 3px; }
  .pdf-notes b { color: #FFFFFF; }
  .pdf-notes span { color: #9A93B5; }
}

.m-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -10px 0 20px; font-size: 12px; }
.m-tools .m-gap { width: 10px; }
.m-date { background: var(--panel); border: 1px solid var(--line); color: inherit; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12px; color-scheme: dark; }
.m-total td { font-weight: 700; border-bottom: 2px solid var(--line); }
.m-subrow td { color: var(--faint); font-size: 12.5px; }
.m-subrow td:first-child { padding-left: 30px; }