/* ============================================================
   Rollies Ads Studio — redesign stylesheet
   Drop-in: <link rel="stylesheet" href="/ads-studio.css"> after your existing CSS.
   Everything is namespaced under .as-* so it cannot collide.
   Fonts: Russo One (display), Rajdhani (section labels), Roboto (UI).
   <link href="https://fonts.googleapis.com/css2?family=Russo+One&family=Rajdhani:wght@600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* Brand (from the Rollies design system) */
  --rss-gold:#ad8e65;
  --rss-red:#b11217;
  --rss-red-dark:#8e0e13;
  --rss-ink:#1c1c1c;
  --rss-black:#111;

  /* Text */
  --rss-text:#383838;
  --rss-text-muted:#7a7a7a;
  --rss-text-faint:#a3a09a;

  /* Surface */
  --rss-surface:#fff;
  --rss-surface-alt:#faf8f5;
  --rss-app-bg:#f2f1ee;
  --rss-border:#e3e0da;
  --rss-border-strong:#d8d4cd;
  --rss-hairline:#f1efea;

  /* Status */
  --rss-success:#27ae60;
  --rss-success-ink:#1e7a44;
  --rss-success-bg:#eaf6ee;
  --rss-success-bd:#c9e7d4;
  --rss-danger:#c0392b;
  --rss-danger-ink:#8e2a20;
  --rss-danger-bg:#fdf2f2;
  --rss-danger-bd:#f3dede;
  --rss-warn-ink:#7a5f38;
  --rss-warn-bg:#fdf7ef;
  --rss-warn-bd:#ecdcc4;

  /* Type */
  --rss-font-display:"Russo One",Roboto,sans-serif;
  --rss-font-label:Rajdhani,Roboto,sans-serif;
  --rss-font-body:Roboto,-apple-system,"Segoe UI",sans-serif;

  /* Shape / elevation / space */
  --rss-radius-control:5px;
  --rss-radius-card:8px;
  --rss-shadow-card:0 8px 18px rgba(0,0,0,.05);
  --rss-space-2:8px; --rss-space-3:12px; --rss-space-4:16px;
  --rss-space-5:20px; --rss-space-6:24px;

  /* Focus (the current app has none — this is the fix) */
  --rss-focus-ring:2px solid #ad8e65;
  --rss-focus-offset:2px;

  /* Layout */
  --as-table-min:1086px;   /* sum of table tracks — keep in sync with .as-row */
  --as-rail:330px;
}

.as-app *, .as-app *::before, .as-app *::after { box-sizing:border-box; }
.as-app {
  background:var(--rss-app-bg); color:var(--rss-text);
  font:400 14px/1.5 var(--rss-font-body);
  min-height:100vh; display:flex; flex-direction:column;
}
.as-app a { color:#8a6a3d; text-decoration:none; }
.as-app a:hover { color:var(--rss-gold); text-decoration:underline; }
.as-app :where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:var(--rss-focus-ring); outline-offset:var(--rss-focus-offset);
}
.as-app ::placeholder { color:#b3b0aa; }

/* ---------- 1. Shell ------------------------------------------------ */
.as-topbar {
  display:flex; align-items:center; gap:18px; height:52px; padding:0 20px;
  background:var(--rss-black); border-bottom:2px solid var(--rss-red); color:#fff; flex:0 0 auto;
}
.as-logo { font:400 17px/1 var(--rss-font-display); }
.as-logo span { color:var(--rss-red); }
.as-topbar__divider { width:1px; height:20px; background:#333; }
.as-topbar__product {
  font:700 12px/1 var(--rss-font-label); text-transform:uppercase;
  letter-spacing:.14em; color:#b9b4ab;
}
.as-spacer { flex:1; }

.as-body { flex:1; display:flex; align-items:stretch; min-height:0; }
.as-sidebar {
  flex:0 0 208px; background:#fff; border-right:1px solid var(--rss-border);
  padding:16px 12px; display:flex; flex-direction:column; gap:2px;
}
.as-sidebar__label {
  font:700 10px/1 var(--rss-font-body); letter-spacing:.12em; text-transform:uppercase;
  color:var(--rss-text-faint); padding:6px 10px 10px;
}
.as-nav {
  display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--rss-radius-control); padding:9px 10px;
  font:400 14px/1 var(--rss-font-body); color:#444; cursor:pointer;
}
.as-nav:hover { background:#f5f2ec; }
.as-nav[aria-current="page"] {
  background:var(--rss-danger-bg); border-left:3px solid var(--rss-red);
  border-radius:0 var(--rss-radius-control) var(--rss-radius-control) 0;
  color:var(--rss-ink); font-weight:500;
}
.as-main { flex:1; min-width:0; }
.as-page { padding:24px 28px 48px; max-width:1480px; }

/* ---------- 2. Page header ------------------------------------------ */
.as-pagehead { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.as-h1 { font:400 27px/1.1 var(--rss-font-display); color:var(--rss-ink); margin:0 0 5px; }
.as-sub { font-size:13px; color:var(--rss-text-muted); }
.as-actions { display:flex; align-items:center; gap:10px; }

/* ---------- 3. Buttons ---------------------------------------------- */
.as-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px; border-radius:var(--rss-radius-control);
  font:400 13px/1 var(--rss-font-body); cursor:pointer;
  background:#fff; color:var(--rss-ink); border:1px solid var(--rss-border-strong);
}
.as-btn:hover { border-color:var(--rss-gold); color:#8a6a3d; }
.as-btn--primary {
  background:var(--rss-red); color:#fff; border:0; padding:0 20px;
  font:700 13px/1 var(--rss-font-body); text-transform:uppercase; letter-spacing:.06em;
  box-shadow:0 2px 6px rgba(177,18,23,.25);
}
.as-btn--primary:hover { background:var(--rss-red-dark); color:#fff; }
.as-btn--dark { background:var(--rss-ink); color:#fff; border:0; }
.as-btn--dark:hover { background:#383838; color:#fff; }
.as-btn--ghost { background:none; border:0; }
.as-btn--danger { background:none; border:0; color:var(--rss-danger); }
.as-btn--danger:hover { background:var(--rss-danger-bg); color:var(--rss-danger); }
.as-btn--sm { height:30px; padding:0 12px; font-size:12.5px; }
.as-btn--icon { width:30px; height:30px; padding:0; color:var(--rss-text-muted); }
.as-btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---------- 4. Cards & sections -------------------------------------- */
.as-card {
  background:var(--rss-surface); border:1px solid var(--rss-border);
  border-radius:var(--rss-radius-card); box-shadow:var(--rss-shadow-card);
}
.as-card__head {
  padding:14px 20px; border-bottom:1px solid #eeebe5;
  display:flex; align-items:baseline; gap:10px;
}
.as-card__title {
  font:700 12px/1.2 var(--rss-font-label); letter-spacing:.1em;
  text-transform:uppercase; color:#2c3e50;
}
.as-card__hint { font-size:11.5px; color:var(--rss-text-faint); }
.as-card__body { padding:18px 20px; }

/* ---------- 5. Stat strip -------------------------------------------- */
.as-stats {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px; background:var(--rss-border); border:1px solid var(--rss-border);
  border-radius:var(--rss-radius-card); overflow:hidden;
  box-shadow:var(--rss-shadow-card); margin-bottom:22px;
}
.as-stat { background:#fff; padding:14px 16px 15px; }
.as-stat__label {
  font:700 10px/1 var(--rss-font-body); letter-spacing:.11em;
  text-transform:uppercase; color:#8d8a84; margin-bottom:8px;
}
.as-stat__value {
  font:400 24px/1 var(--rss-font-display); color:var(--rss-ink);
  font-variant-numeric:tabular-nums;
}
.as-stat__note { font-size:11.5px; color:var(--rss-text-faint); margin-top:6px; }

/* ---------- 6. Toolbar / filter chips -------------------------------- */
.as-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.as-chip {
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px;
  border:1px solid #ddd8cf; background:#fff; color:#444;
  border-radius:var(--rss-radius-control); font-size:13px; cursor:pointer;
}
.as-chip:hover { border-color:var(--rss-gold); }
.as-chip[aria-pressed="true"] { background:var(--rss-ink); border-color:var(--rss-ink); color:#fff; }
.as-chip__count { font-size:11.5px; color:var(--rss-text-faint); }
.as-chip[aria-pressed="true"] .as-chip__count { color:#b9b4ab; }

/* ---------- 7. Inputs ------------------------------------------------ */
.as-field { display:block; }
.as-label {
  display:flex; justify-content:space-between; gap:10px;
  font:500 12px/1.2 var(--rss-font-body); color:#555; margin-bottom:6px;
}
.as-label__aside { color:var(--rss-text-faint); font-weight:400; }
.as-input, .as-select, .as-textarea {
  width:100%; background:#fff; border:1px solid var(--rss-border-strong);
  border-radius:var(--rss-radius-control); font-size:14px; color:var(--rss-ink);
}
.as-input, .as-select { height:38px; padding:0 12px; }
.as-textarea { padding:10px 12px; font-size:13.5px; line-height:1.55; resize:vertical; }
.as-input:hover, .as-select:hover, .as-textarea:hover { border-color:#c4bfb6; }
.as-help { font-size:11.5px; color:var(--rss-text-faint); margin-top:6px; line-height:1.5; }
.as-input--invalid, .as-textarea--invalid { border-color:#e0b4b1; background:#fffafa; }
.as-count--invalid { color:var(--rss-danger); font-weight:700; }
.as-prefix { display:flex; align-items:center; height:38px; border:1px solid var(--rss-border-strong);
  border-radius:var(--rss-radius-control); background:#fff; overflow:hidden; }
.as-prefix > span { padding:0 10px; height:100%; display:flex; align-items:center;
  background:var(--rss-surface-alt); border-right:1px solid #e8e4dd; font-size:13px; color:var(--rss-text-muted); }
.as-prefix > input { flex:1; min-width:0; height:100%; border:0; padding:0 12px; font-size:14px; outline:none; }

/* Field grids: ALWAYS auto-fit, never a hard 1fr 1fr — this is what stops
   inputs from being squeezed to 120px in a narrow pane. */
.as-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.as-grid--wide { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.as-grid__full { grid-column:1 / -1; }

/* ---------- 8. Badges ------------------------------------------------ */
.as-badge {
  display:inline-block; border-radius:3px; padding:3px 8px;
  font:700 10px/1.3 var(--rss-font-body); letter-spacing:.08em; text-transform:uppercase;
}
.as-badge--ok   { background:var(--rss-success-bg); color:var(--rss-success-ink); border:1px solid var(--rss-success-bd); }
.as-badge--warn { background:var(--rss-warn-bg);    color:var(--rss-warn-ink);    border:1px solid var(--rss-warn-bd); }
.as-badge--bad  { background:var(--rss-danger-bg);  color:var(--rss-danger-ink);  border:1px solid var(--rss-danger-bd); }
.as-badge--mute { background:#f4f2ee;               color:#6b6862;                border:1px solid #e0dcd4; }

/* ---------- 9. Campaigns table --------------------------------------- */
/* Grid, not <table>: the two-line campaign cell needs block layout.
   .as-table__scroll is the ONLY clipping/scrolling element. */
.as-table { overflow:hidden; }               /* + .as-card */
.as-table__scroll { overflow-x:auto; }
.as-thead, .as-row {
  min-width:var(--as-table-min);
  display:grid;
  grid-template-columns:minmax(280px,1fr) 108px 108px 92px 104px 84px 220px;
  gap:12px; align-items:center; padding:11px 18px;
}
.as-thead {
  padding:10px 18px; background:var(--rss-surface-alt);
  border-bottom:1px solid var(--rss-border);
  font:700 10px/1.2 var(--rss-font-body); letter-spacing:.11em;
  text-transform:uppercase; color:#8d8a84;
}
.as-row { border-bottom:1px solid var(--rss-hairline); }
.as-row:last-child { border-bottom:0; }
.as-row:hover { background:var(--rss-surface-alt); }
.as-cell--num { text-align:right; font-size:13.5px; font-variant-numeric:tabular-nums; }
.as-cell--num.is-empty { color:#c2bfb9; }
.as-cell--num.is-good { color:var(--rss-success-ink); font-weight:700; }
.as-cell--actions { display:flex; justify-content:flex-end; gap:6px; }
.as-title {
  display:block; max-width:100%; text-align:left; background:none; border:0; padding:0;
  font:400 15px/1.3 var(--rss-font-display); color:var(--rss-ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.as-title:hover { color:#8a6a3d; }
.as-meta { font-size:11.5px; color:var(--rss-text-faint); margin-top:4px; }
.as-tfoot { padding:12px 18px; background:var(--rss-surface-alt);
  border-top:1px solid var(--rss-border); font-size:12.5px; color:#8d8a84; }

/* ---------- 10. Detail screen ---------------------------------------- */
.as-detailhead {
  position:sticky; top:0; z-index:5; background:#fff;
  border-bottom:1px solid var(--rss-border); padding:14px 28px 0;
}
.as-detailhead__row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:8px 0 12px; }
.as-detailhead__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--rss-text-faint); }

.as-tabs { display:flex; gap:2px; }
.as-tab {
  background:none; border:0; border-bottom:2px solid transparent; padding:10px 16px;
  font:500 13.5px/1 var(--rss-font-body); color:var(--rss-text-muted); cursor:pointer;
}
.as-tab:hover { color:var(--rss-ink); }
.as-tab[aria-selected="true"] { border-bottom-color:var(--rss-red); color:var(--rss-ink); }

/* Wrapping two-column layout — the rail drops under the form below ~900px.
   Flex-wrap, not a fixed grid track: no media query needed. */
.as-split { padding:22px 28px 60px; display:flex; flex-wrap:wrap; gap:22px;
  align-items:flex-start; max-width:1400px; }
.as-split__main { flex:1 1 560px; min-width:0; display:flex; flex-direction:column; gap:18px; }
.as-split__rail { flex:1 1 300px; max-width:var(--as-rail);
  position:sticky; top:132px; display:flex; flex-direction:column; gap:14px; }

/* ---------- 11. Ad group accordion ----------------------------------- */
.as-acc { overflow:hidden; }                  /* + .as-card */
.as-acc__head {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:#fff; border:0; padding:14px 18px; cursor:pointer;
}
.as-acc__head:hover { background:var(--rss-surface-alt); }
.as-acc__caret { width:12px; font-size:12px; color:var(--rss-text-faint); }
.as-acc__name { font:400 16px/1.2 var(--rss-font-display); color:var(--rss-ink); }
.as-acc__body { padding:4px 18px 18px; border-top:1px solid #eeebe5; }

.as-keywords { display:flex; flex-wrap:wrap; gap:6px; padding:10px;
  border:1px solid var(--rss-border-strong); border-radius:var(--rss-radius-control); background:#fff; }
.as-kw { display:inline-flex; align-items:center; gap:6px; background:#f7f5f1;
  border:1px solid var(--rss-border); border-radius:4px; padding:4px 8px; font-size:12.5px; }
.as-kw__x { color:#a41d20; font-weight:700; cursor:pointer; }
.as-keywords input { flex:1; min-width:120px; border:0; outline:none; font-size:12.5px; padding:4px; }

/* ---------- 12. Readiness rail --------------------------------------- */
.as-readiness__head { padding:13px 16px; background:var(--rss-danger-bg);
  border-bottom:1px solid var(--rss-danger-bd); display:flex; align-items:center; gap:8px;
  font:700 11px/1.2 var(--rss-font-body); letter-spacing:.09em;
  text-transform:uppercase; color:var(--rss-danger-ink); }
.as-check { display:flex; gap:9px; padding:9px 0; border-bottom:1px solid #f4f1ec;
  font-size:13px; line-height:1.45; color:#444; }
.as-check__icon { font-size:12px; padding-top:1px; }
.as-check--fail .as-check__icon { color:var(--rss-danger); }
.as-check--pass .as-check__icon { color:var(--rss-success); }

/* ---------- 13. Notices ---------------------------------------------- */
.as-note { border-left:3px solid; border-radius:0 4px 4px 0; padding:8px 11px;
  font-size:12.5px; line-height:1.5; }
.as-note--info { background:var(--rss-warn-bg); border-color:var(--rss-gold); color:var(--rss-warn-ink); }
.as-note--ok   { background:#f2faf5; border-color:var(--rss-success); color:var(--rss-success-ink); }
.as-note--err  { background:var(--rss-danger-bg); border-color:var(--rss-danger); color:var(--rss-danger-ink); }
.as-empty { border:1px dashed #ddd8cf; border-radius:6px; background:var(--rss-surface-alt);
  padding:26px; text-align:center; font-size:13px; color:var(--rss-text-faint); }

/* ---------- 14. New-campaign wizard ----------------------------------- */
.as-steps { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 18px; background:#fff; border:1px solid var(--rss-border);
  border-radius:var(--rss-radius-card); box-shadow:var(--rss-shadow-card); margin-bottom:18px; }
.as-step { display:flex; align-items:center; gap:9px; background:none; border:0; padding:0;
  cursor:pointer; font:500 13px/1 var(--rss-font-body); color:var(--rss-text-faint); }
.as-step__num { display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:50%; font:700 11px/1 var(--rss-font-body);
  background:#f4f2ee; color:var(--rss-text-faint); border:1px solid var(--rss-border); }
.as-step.is-done { color:var(--rss-success-ink); }
.as-step.is-done .as-step__num { background:var(--rss-success-bg); color:var(--rss-success-ink); border-color:var(--rss-success-bd); }
.as-step.is-current { color:var(--rss-ink); }
.as-step.is-current .as-step__num { background:var(--rss-ink); color:#fff; border-color:var(--rss-ink); }

.as-choice { flex:1; text-align:left; padding:13px 15px; border-radius:6px; cursor:pointer;
  background:#fff; border:1px solid var(--rss-border-strong); }
.as-choice__title { font:400 15px/1.2 var(--rss-font-display); color:var(--rss-ink); margin-bottom:5px; }
.as-choice__desc { font-size:12px; color:var(--rss-text-muted); line-height:1.45; }
.as-choice[aria-pressed="true"] { border:2px solid var(--rss-gold); box-shadow:0 0 0 3px rgba(173,142,101,.15); }

.as-review { border:1px solid #eeebe5; border-radius:6px; overflow:hidden;
  display:grid; grid-template-columns:minmax(140px,180px) 1fr; font-size:13.5px; }
.as-review dt { padding:11px 14px; background:var(--rss-surface-alt);
  color:var(--rss-text-muted); border-bottom:1px solid #eeebe5; }
.as-review dd { margin:0; padding:11px 14px; color:var(--rss-ink); border-bottom:1px solid #eeebe5; }
.as-review > :nth-last-child(-n+2) { border-bottom:0; }

.as-formfoot { display:flex; align-items:center; gap:10px; margin-top:22px;
  padding-top:18px; border-top:1px solid #eeebe5; }

/* ---------- 15. Metrics page ------------------------------------------ */
.as-metrics-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin-bottom:22px; }
.as-linklike { background:none; border:0; padding:0; font:500 12px/1 var(--rss-font-body); color:var(--rss-text-muted); text-decoration:underline; cursor:pointer; }
.as-linklike:hover { color:var(--rss-ink); }
.as-th-sort { cursor:pointer; user-select:none; }
.as-th-sort:hover { color:var(--rss-ink); }
.as-sort-arrow { font-size:9px; margin-left:2px; }
#metrics-thead, #metrics-tbody .as-row {
  grid-template-columns:minmax(220px,1fr) 100px 90px 100px 80px 110px 70px 70px 100px 100px;
}
/* Campaigns list -- 9 columns since Value + ROAS were added (2026-09-23); explicit, not the generic 7-col fallback. */
#campaigns-thead, #campaigns-tbody .as-row {
  grid-template-columns:minmax(280px,1fr) 108px 108px 92px 104px 84px 110px 70px 220px;
}
.as-chart-tooltip {
  position:absolute; transform:translate(-50%,-120%); pointer-events:none;
  background:var(--rss-ink); color:var(--rss-surface); font-size:11.5px; line-height:1.4;
  padding:6px 9px; border-radius:4px; white-space:nowrap; box-shadow:var(--rss-shadow-card); z-index:2;
}
.as-chart-tooltip strong { font-size:13px; }
.as-chart-table-scroll { max-height:220px; overflow-y:auto; }
.as-chart-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.as-chart-table th, .as-chart-table td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--rss-hairline); }
.as-chart-table th { font:700 10px/1.2 var(--rss-font-body); letter-spacing:.08em; text-transform:uppercase; color:#8d8a84; }
.as-chart-table td:last-child, .as-chart-table th:last-child { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- 16. Search terms page -------------------------------------- */
#searchterms-thead, #searchterms-tbody .as-row {
  grid-template-columns:30px minmax(200px,1.3fr) 150px 150px 66px 66px 90px 66px 66px 100px 190px;
}
.as-cell--truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- 17. Needs Review page --------------------------------------
   This table's row markup (checkbox, search term, campaign, reason, clicks,
   cost, conv., confidence, detected, actions -- 10 cells) never got its own
   grid-template-columns when the page was built, so it was silently falling
   back to the generic 7-column .as-thead/.as-row rule above -- the extra 3
   cells per row wrapped onto implicit extra grid rows, which is what made
   the header and every row look scrambled. */
#needsreview-thead, #needsreview-tbody .as-row {
  grid-template-columns:30px minmax(160px,1fr) 140px minmax(160px,1fr) 66px 80px 66px 90px 90px 175px;
}

/* ---------- 18. Conversions page ---------------------------------------
   Explicit rule given deliberately (not left to the generic 7-column
   .as-thead/.as-row fallback above) -- see the Needs Review note above for
   why relying on a column-count coincidence is asking for the same bug. */
#conversions-thead, #conversions-tbody .as-row {
  /* 8 columns since 2026-09-29: + Customer (dealer tier / retail) after Order */
  grid-template-columns:90px 100px 120px 90px minmax(140px,1fr) minmax(160px,1.2fr) minmax(200px,1.4fr) 110px;
}

/* Metrics: Dealer vs retail card (2026-09-29) */
.as-dvr { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-bottom:14px; }
.as-dvr__tile { border:1px solid var(--rss-border); border-left:4px solid var(--rss-text-faint); border-radius:var(--rss-radius-card); padding:14px 16px; background:var(--rss-surface-alt); }
.as-dvr__tile--dealer { border-left-color:var(--rss-red); }
.as-dvr__value { font:400 26px/1 var(--rss-font-display); color:var(--rss-ink); font-variant-numeric:tabular-nums; }
.as-dvr__share { font-size:12px; color:var(--rss-text-muted); margin:6px 0 10px; }
.as-dvr__meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--rss-text); }
.as-dvr__meta b { color:var(--rss-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.as-dvr__bar { display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--rss-hairline); margin-bottom:16px; }
.as-dvr__bar-dealer { background:var(--rss-red); }
.as-dvr__bar-retail { background:var(--rss-text-faint); }
.as-dvr-scroll { overflow-x:auto; }
.as-dvr-table { width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
.as-dvr-table th { font:700 10px/1 var(--rss-font-body); letter-spacing:.11em; text-transform:uppercase; color:var(--rss-text-muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--rss-border); }
.as-dvr-table td { padding:8px 10px; border-bottom:1px solid var(--rss-hairline); color:var(--rss-text); font-variant-numeric:tabular-nums; }
.as-dvr-table .num { text-align:right; }
.as-dvr-table tr.is-zero td { color:var(--rss-text-faint); }
.as-dvr-table tfoot td { font-weight:600; color:var(--rss-ink); border-bottom:0; }
.as-dvr-table td.as-dvr-table__kw { font-size:12px; line-height:1.45; max-width:260px; }
.as-dvr-table small, .as-dvr__kw small { color:var(--rss-text-muted); font-size:11px; }
.as-dvr__kw { margin-top:10px; padding-top:8px; border-top:1px solid var(--rss-border); font-size:12.5px; color:var(--rss-text); line-height:1.5; }
.as-dvr__kw > span { color:var(--rss-text-muted); }
.as-dvr__kw b { color:var(--rss-ink); font-weight:600; }

/* Shopping (Merchant Center) products table -- 7 columns, explicit on purpose (2026-09-23). */
#shopping-fix-thead, #shopping-fix-tbody .as-row {
  grid-template-columns:36px 170px minmax(180px,1fr) minmax(320px,2fr) 110px;
}
#shopping-thead, #shopping-tbody .as-row {
  grid-template-columns:minmax(240px,2fr) 130px 130px 90px 100px 110px minmax(200px,1.4fr);
}

/* ---------- 19. Small screens ---------------------------------------- */
@media (max-width:720px) {
  .as-sidebar { display:none; }
  .as-page, .as-split { padding-left:16px; padding-right:16px; }
  .as-detailhead { padding-left:16px; padding-right:16px; }
  .as-tabs { overflow-x:auto; }
}

/* ---------- 20. Print / Export PDF (2026-10-15) ----------------------- */
/* Metrics "Export PDF" button -> window.print(). A4 landscape, light theme
   forced (beforeprint handler in app.js), chrome hidden, sections reordered:
   stats -> trends -> campaigns -> dealer vs retail. */
.as-print-head { display:none; }
@page {
  size:A4 landscape; margin:12mm 12mm 15mm;
  @bottom-left  { content:"Rollies Speed Shop \00B7  Ads Studio"; font:400 8pt "Barlow",Arial,sans-serif; color:#8d8a84; }
  @bottom-right { content:"Page " counter(page) " of " counter(pages); font:400 8pt "Barlow",Arial,sans-serif; color:#8d8a84; }
}
@media print {
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  html, body { height:auto !important; background:#fff !important; }
  .as-topbar, .as-sidebar, .as-chart-tooltip, .as-sort-arrow,
  #panel-metrics .as-pagehead, #panel-metrics .as-linklike { display:none !important; }
  .as-app { display:block; min-height:0; background:#fff; }
  .as-body { display:block; }
  .as-main, .main { overflow:visible !important; }
  .as-page { padding:0; max-width:none; }

  #panel-metrics.active { display:flex; flex-direction:column; }
  #panel-metrics .as-print-head {
    display:flex; order:0; align-items:flex-end; justify-content:space-between; gap:20px;
    padding-bottom:9px; margin-bottom:14px; border-bottom:2px solid var(--rss-red);
  }
  .as-print-head__logo { font:400 19px/1 var(--rss-font-display); color:var(--rss-ink); }
  .as-print-head__logo span { color:var(--rss-red); }
  .as-print-head__title { font:700 10.5px/1 var(--rss-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--rss-text-muted); margin-top:7px; }
  .as-print-head__meta { text-align:right; font-size:11.5px; line-height:1.5; color:var(--rss-text-muted); }
  .as-print-head__meta #metrics-print-range { font:700 14px/1.3 var(--rss-font-body); color:var(--rss-ink); }

  #metrics-stats-strip { order:1; grid-template-columns:repeat(5,1fr); margin-bottom:14px; box-shadow:none; }
  #panel-metrics .as-metrics-charts { order:2; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  #metrics-table-wrap { order:3; margin-bottom:14px; }
  #metrics-dealer-card { order:4; margin-bottom:0 !important; }

  #panel-metrics .as-card { box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
  #panel-metrics .as-card__head { padding:10px 14px; }
  #panel-metrics .as-card__body { padding:12px 14px; }
  #panel-metrics .as-stat { padding:11px 14px 12px; }
  #panel-metrics .as-stat__value { font-size:20px; }
  #panel-metrics .as-stat__note { font-size:10px; }
  #panel-metrics .as-metrics-charts svg { height:auto !important; max-height:62mm; }
  #panel-metrics .as-metrics-charts svg text { font-size:15px; }   /* viewBox is 700 wide, drawn ~370px: bump so labels stay legible */

  #metrics-thead, #metrics-tbody .as-row {
    min-width:0; gap:8px; padding:7px 12px;
    grid-template-columns:minmax(0,1fr) 92px 62px 82px 56px 86px 58px 58px 72px 88px;
  }
  #metrics-thead { font-size:8px; letter-spacing:.06em; white-space:nowrap; }
  #metrics-tbody .as-row { break-inside:avoid; page-break-inside:avoid; }
  #metrics-thead .as-cell--num { font-size:inherit; }
  #metrics-tbody .as-cell--num { font-size:11.5px; }
  #metrics-tbody .as-title { font-size:12px; }

  .as-dvr { grid-template-columns:1fr 1fr; gap:12px; }
  .as-dvr-scroll { overflow:visible; }
  .as-dvr-table { min-width:0; font-size:11px; }
  .as-dvr-table th, .as-dvr-table td { padding:6px 8px; }
  .as-dvr-table td.as-dvr-table__kw { max-width:none; font-size:10.5px; }
  .as-dvr-table tr { break-inside:avoid; page-break-inside:avoid; }
}

/* ---------- 21. View-only role (2026-10-15) ---------------------------- */
/* app.js adds body.is-viewer for role 'viewer'. This only HIDES write controls;
   api.php's default-deny allowlist is the real enforcement. !important because
   app.js sets inline display on several of these buttons. */
body.is-viewer #nav-google-ads,
body.is-viewer #nav-needs-review,
body.is-viewer #nav-shopping,
body.is-viewer #nav-promo,
body.is-viewer #detail-tab-negkw,
body.is-viewer [onclick*="navigateToCampaign(null"],
body.is-viewer [onclick*="pushCampaign"],
body.is-viewer [onclick*="updateCampaign"],
body.is-viewer [onclick*="deleteCampaign"],
body.is-viewer [onclick*="saveCampaign"],
body.is-viewer [onclick*="generateWithAi"],
body.is-viewer [onclick*="clearSelectedProduct"],
body.is-viewer [onclick*="addNewAdGroupCard"],
body.is-viewer [onclick*="generateOneAdGroupWithAi"],
body.is-viewer [onclick*="removeKeywordChip"],
body.is-viewer [onclick*="researchNegativeKeywords"],
body.is-viewer [onclick*="applySelectedNegativeKeywords"],
body.is-viewer [onclick*="fixAllInsightsIssues"],
body.is-viewer [onclick*="fixInsightsItem"],
body.is-viewer [onclick*="runSearchTermsTriage"],
body.is-viewer [onclick*="runHealthCheck"],
body.is-viewer [onclick*="analyzeSearchTermsForNegatives"],
body.is-viewer [onclick*="applyCheckedSearchTermSuggestions"],
body.is-viewer [onclick*="excludeCheckedSearchTerms"],
body.is-viewer [onclick*="addCheckedSearchTermsAsKeywords"],
body.is-viewer [onclick*="excludeOneSearchTerm"],
body.is-viewer [onclick*="applyOneSearchTermSuggestion"],
body.is-viewer [onclick*="addSearchTermAsKeyword"],
body.is-viewer [onclick*="applySearchTermsTriage"],
body.is-viewer [onclick*="syncConversions"],
body.is-viewer [onclick*="importGoogleAdsCampaigns"] { display:none !important; }
body.is-viewer #panel-campaign-detail :is(input, textarea, select) { pointer-events:none; }

/* ---- 22. Account health card (2026-10-15) ---- */
.as-health__row { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--rss-hairline); }
.as-health__row:last-child { border-bottom:0; }
.as-health__dot { flex:0 0 10px; height:10px; border-radius:50%; margin-top:5px; background:#27ae60; }
.as-health__dot--warn { background:#e69a1c; }
.as-health__dot--fail { background:#c0392b; }
.as-health__label { font-weight:600; }
.as-health__detail { color:var(--rss-text-muted); font-size:13px; }
.as-health__items { margin:4px 0 0; padding-left:16px; font-size:12px; color:var(--rss-text-muted); }
@media print { #metrics-health-card .as-btn { display:none !important; } }

/* ---- 23. Monthly Promo screen (2026-10-15) ---- */
.as-promo__list { margin:6px 0 0; padding-left:18px; font-size:13px; }
.as-promo__warn { background:#fdf3e3; border-left:3px solid #e69a1c; padding:8px 12px; margin:0 0 8px; font-size:13px; border-radius:4px; color:#1a1a1a; }
.as-promo__bad { background:#fbeaea; border-left-color:#c0392b; }
.as-promo__ok { background:#eaf6ee; border-left-color:#27ae60; }
.as-promo__cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:14px; }
.as-promo__code { font-family:ui-monospace,Consolas,monospace; font-size:12px; background:var(--rss-hairline); padding:8px 10px; border-radius:4px; word-break:break-all; }
.as-promo__chips label { display:inline-block; margin:0 10px 6px 0; font-size:13px; }

/* 24. Monthly Promo exclusions (2026-10-15) */
.as-promo__excl { margin-top: 14px; border: 1px solid var(--rss-border, #ddd); border-radius: 8px; padding: 10px 14px; }
.as-promo__excl > summary { cursor: pointer; font-weight: 600; }
.as-promo__cats { margin-top: 8px; max-height: 240px; overflow: auto; border: 1px solid var(--rss-border, #ddd); border-radius: 6px; padding: 6px 10px; }
.as-promo__cats label { display: block; font-size: 13px; padding: 2px 0; }
body.is-viewer .as-promo__excl { display: none; }