/* Layout follows the Google Ads interface so it feels familiar:
   white top bar, left icon rail, title + date range on one line,
   a toolbar above the data, Roboto.
   Theme: Midnight + cyan. Midnight for the logo and text, cyan for
   highlights, a deeper cyan for buttons and links so text stays readable.
   Dark mode follows the computer's setting. */

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;           /* midnight */
  --muted: #526075;
  --line: #dde3ea;
  --line-soft: #eaeef3;
  --hover: #f1f5f9;
  --accent: #0e7490;         /* deep cyan: buttons, active text */
  --accent-text: #0e7490;
  --accent-soft: #dff6fa;    /* light cyan: selected nav, chips, ranges */
  --accent-bright: #06b6d4;  /* cyan: logo, small marks */
  --on-accent: #ffffff;      /* text on accent buttons */
  --midnight: #0f172a;
  --error-bg: #fdecec;
  --error: #b42318;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.18), 0 1px 3px 1px rgba(15, 23, 42, 0.08);
  --shadow-high: 0 2px 8px 2px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.2);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #111a2e;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --line: #26324a;
    --line-soft: #1c2740;
    --hover: #18233a;
    --accent: #22d3ee;
    --accent-text: #67e8f9;
    --accent-soft: #0c3a49;
    --accent-bright: #22d3ee;
    --on-accent: #04252d;
    --midnight: #1e293b;
    --error-bg: #3b1518;
    --error: #fca5a5;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-high: 0 4px 14px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/20px Roboto, "Segoe UI", Arial, sans-serif;
  display: flex; flex-direction: column;
}
.msym {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; display: inline-block; vertical-align: middle;
  -webkit-font-smoothing: antialiased; user-select: none;
}

/* ---- Top bar ---- */
.topbar {
  height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 24px;
  padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.product { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
/* Logo: BidCadence's three even beats (the last one cyan) and the wordmark in Manrope.
   The top bar stays white in dark mode too, so the logo always uses its midnight colors. */
.product-mark { width: 40px; height: 18px; flex: none; }
.product-name {
  font-family: Manrope, Roboto, Arial, sans-serif; font-size: 21px; font-weight: 700;
  color: var(--midnight); letter-spacing: -0.5px;
}
/* Account picker (like Google Ads): current account + a ▼ to switch */
.account-picker {
  position: relative; display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.picker-current {
  display: flex; align-items: center; gap: 12px; padding: 6px 14px; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 8px 0 0 8px;
}
.picker-current:hover, .picker-toggle:hover { background: var(--hover); }
.picker-icon { color: var(--muted); font-size: 24px; }
.picker-text { display: flex; flex-direction: column; min-width: 0; }
.picker-parent { display: flex; align-items: center; font-size: 12px; line-height: 16px; color: var(--muted); }
.picker-parent .msym { font-size: 16px; }
.picker-name { font-size: 16px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-id { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.picker-toggle {
  display: grid; place-items: center; width: 44px; border: 0; border-left: 1px solid var(--line);
  border-radius: 0 8px 8px 0; background: none; color: var(--muted); cursor: pointer;
}
.picker-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }
.picker-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-high); overflow: hidden;
}
.picker-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.picker-search input { flex: 1; border: 0; outline: none; font: inherit; color: var(--text); background: none; }
.picker-list { list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow-y: auto; }
.picker-list a {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 16px;
  color: var(--text); text-decoration: none; position: relative;
}
.picker-list a:hover, .picker-list a:focus { background: var(--hover); outline: none; }
.picker-list .msym { color: var(--muted); font-size: 20px; }
.picker-list li[aria-selected="true"] a { background: var(--accent-soft); }
.picker-list li[aria-selected="true"] .picker-option-name { color: var(--accent-text); font-weight: 500; }
.picker-list li:first-child { border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin-bottom: 6px; }
.picker-option-name { display: block; }
.picker-option-id { display: block; font-size: 12px; color: var(--muted); }
.picker-empty, .picker-error { margin: 0; padding: 12px 16px; color: var(--muted); }

/* ---- Shell: nav rail + content ---- */
.shell { flex: 1; display: flex; min-height: 0; }
.rail {
  width: 88px; flex-shrink: 0; padding: 12px 0; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0;
  color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 500;
}
.rail-pill { width: 56px; height: 32px; border-radius: 16px; display: grid; place-items: center; }
.rail-item:hover .rail-pill { background: var(--hover); }
.rail-item.active { color: var(--accent-text); }
.rail-item.active .rail-pill { background: var(--accent-soft); }
.rail-item.active .msym { font-variation-settings: "FILL" 1; }
.rail-item.disabled { opacity: 0.45; cursor: default; }
.rail-item.disabled:hover .rail-pill { background: none; }

main { flex: 1; min-width: 0; overflow: auto; padding: 20px 24px 40px; }

/* ---- Page header: title left, date range right ---- */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 400; }

.date-picker { position: relative; margin-left: auto; }
.date-button {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; min-width: 240px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left;
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.date-button:hover { background: var(--hover); }
.date-button[aria-expanded="true"] { border-color: var(--accent); }
.date-text { flex: 1; display: flex; flex-direction: column; }
.date-label { font-size: 12px; line-height: 16px; color: var(--muted); }
.date-dates { font-weight: 500; }

.date-panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex;
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-high);
}
.dp-left { width: 280px; display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); }
.dp-custom, .preset-list a {
  display: block; width: 100%; padding: 10px 24px; text-align: left; white-space: nowrap;
  font: inherit; font-size: 15px; color: var(--text); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.dp-custom { padding: 16px 24px; border-bottom: 1px solid var(--line-soft); border-radius: 8px 0 0 0; }
.dp-custom:hover, .dp-custom:focus, .preset-list a:hover, .preset-list a:focus { background: var(--hover); outline: none; }
.dp-custom.selected, .preset-list a.selected { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.preset-list { list-style: none; margin: 0; padding: 8px 0; }
.has-sub { position: relative; }
.has-sub .sub-arrow { position: absolute; right: 12px; top: 10px; color: var(--muted); pointer-events: none; }
.submenu {
  display: none; position: absolute; left: calc(100% - 4px); top: 0; z-index: 2; list-style: none;
  margin: 0; padding: 8px 0; min-width: 180px; background: var(--surface); border-radius: 4px; box-shadow: var(--shadow-high);
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu { display: block; }
.submenu a { padding: 12px 32px; }
.dp-rolling { border-top: 1px solid var(--line-soft); padding: 8px 0 12px; display: flex; flex-direction: column; }
.dp-rolling form { display: flex; align-items: center; gap: 12px; padding: 6px 24px; cursor: pointer; }
.dp-rolling form:hover { background: var(--hover); }
.dp-rolling form.selected { background: var(--accent-soft); }
.dp-rolling form.selected .dp-rolling-apply { color: var(--accent-text); font-weight: 500; }
.dp-rolling input {
  width: 56px; font: inherit; font-size: 15px; text-align: center; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 7px 4px; cursor: text;
}
.dp-rolling-apply {
  flex: 1; text-align: left; padding: 8px 0; font: inherit; font-size: 15px;
  color: var(--text); background: none; border: 0; cursor: pointer;
}

.custom-range { width: 380px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dp-inputs { display: flex; align-items: center; gap: 10px; }
.dp-inputs label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.dp-dash { padding-top: 18px; color: var(--muted); }
.custom-range input {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0;
}
.custom-range input:focus, .dp-rolling input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-hint { flex: 1; font-size: 12px; color: var(--muted); }
.cal-step {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: none;
  color: var(--muted); cursor: pointer; font-size: 22px;
}
.cal-step:hover { background: var(--hover); color: var(--text); }
.calendar { position: relative; height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  font-size: 12px; color: var(--muted); text-align: center; padding: 4px 0; border-bottom: 1px solid var(--line-soft);
}
.cal-title { font-size: 13px; font-weight: 700; padding: 12px 8px 6px; }
.cal-grid button {
  height: 36px; font: inherit; font-size: 13px; color: var(--text);
  background: none; border: 0; cursor: pointer; border-radius: 18px;
}
.cal-grid button:hover:not(:disabled) { background: var(--hover); }
.cal-grid button:disabled { color: var(--line); cursor: default; }
.cal-grid button.today { box-shadow: inset 0 0 0 1px var(--muted); }
.cal-grid button.in-range { background: var(--accent-soft); border-radius: 0; }
.cal-grid button.edge { background: var(--accent); color: var(--on-accent); font-weight: 500; }

.custom-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.btn-primary, .btn-text {
  font: inherit; font-weight: 500; border-radius: 4px; padding: 8px 16px; cursor: pointer; border: 0;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { box-shadow: var(--shadow); }
.btn-text { background: none; color: var(--accent-text); }
.btn-text:hover { background: var(--accent-soft); }


/* ---- Toolbar above the data ---- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 16px; background: var(--surface);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.toolbar-count { color: var(--muted); white-space: nowrap; }
.toolbar-left { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tiles-only { display: none !important; }
body[data-view="tiles"] .tiles-only { display: flex !important; }

.filter-anchor { position: relative; }
.btn-filter {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
  font: inherit; font-weight: 500; color: var(--accent-text); background: none;
  border: 0; border-radius: 4px; cursor: pointer;
}
.btn-filter:hover, .btn-filter[aria-expanded="true"] { background: var(--accent-soft); }
.filter-panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; width: 280px;
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-high);
}
.filter-fields { list-style: none; margin: 0; padding: 8px 0; }
.filter-fields button {
  display: block; width: 100%; text-align: left; padding: 8px 16px;
  font: inherit; color: var(--text); background: none; border: 0; cursor: pointer;
}
.filter-fields button:hover, .filter-fields button:focus { background: var(--hover); outline: none; }
.filter-editor { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.filter-editor-title { font-weight: 500; }
.filter-editor-body { display: flex; flex-direction: column; gap: 8px; }
.filter-editor-body label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.filter-editor-body input[type=text], .filter-editor-body input[type=number], .filter-editor-body select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0;
}
.op-row { display: flex; gap: 8px; }
.op-row select { width: 64px; }
.op-row input { flex: 1; }
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 16px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px;
  border: 1px solid var(--line); border-radius: 16px; font-size: 13px; background: var(--surface);
}
.filter-chip button {
  font-size: 18px; width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.filter-chip button:hover { background: var(--hover); color: var(--text); }
.filter-chips .btn-text { padding: 4px 8px; }

.sort-select { display: flex; align-items: center; white-space: nowrap; gap: 8px; color: var(--muted); font-size: 13px; }
.sort-select select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px;
}

.label-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.label-chip {
  font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px;
  background: var(--hover); color: var(--muted);
}
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.view-toggle button {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; font: inherit; font-weight: 500;
  background: var(--surface); color: var(--muted); border: 0; cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--line); }
.view-toggle button:hover { background: var(--hover); }
.view-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.view-toggle .msym { font-size: 20px; }

/* ---- Views ---- */
.views[data-view="table"] .tiles-view, .views[data-view="tiles"] .table-view { display: none; }
.card { background: var(--surface); border: 1px solid var(--line); }

.table-view { border-radius: 0 0 8px 8px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); vertical-align: bottom; padding: 6px 8px; }
th:first-child { padding-left: 8px; }
.sort-button {
  display: inline-flex; align-items: flex-end; gap: 2px; padding: 4px 8px; border-radius: 4px;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit;
}
th.num .sort-button { justify-content: flex-end; }
.sort-button:hover { background: var(--hover); color: var(--text); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text); }
.sort-arrow { font-size: 16px; width: 16px; }
tr.no-match td { text-align: center; color: var(--muted); padding: 24px; }
.tiles-view .no-match { grid-column: 1 / -1; text-align: center; color: var(--muted); border: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-sub { font-weight: 400; }
.acct-name { font-weight: 500; color: var(--accent-text); }
.acct-id, .cur { color: var(--muted); font-size: 12px; }
.tag {
  font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px; margin-left: 4px;
}

.tiles-view {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 8px 8px;
}
.tile { border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tile:hover { box-shadow: var(--shadow); }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tile h2 { margin: 0; font-size: 16px; line-height: 24px; }
.badge {
  flex-shrink: 0; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-text);
}
.metric-label, .tile-metrics dt { font-size: 12px; color: var(--muted); }
.metric-big { font-size: 28px; line-height: 36px; font-variant-numeric: tabular-nums; }
.tile-metrics { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.tile-metrics div:first-child { grid-column: 1 / -1; }
.tile-metrics dd { margin: 2px 0 0; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Account type: show only the matching numbers */
.account { cursor: context-menu; }
.account:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kind-ecommerce .lead-only, .kind-leadgen .ecom-only { display: none !important; }
.inactive { opacity: 0.55; }
.row-error { color: var(--error); white-space: normal; }

.error, .empty { padding: 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.error { background: var(--error-bg); color: var(--error); border-color: transparent; }
.note { color: var(--muted); font-size: 12px; line-height: 16px; margin-top: 12px; max-width: 760px; }

/* ---- Right-click menu ---- */
.context-menu {
  position: fixed; z-index: 30; min-width: 240px; padding: 8px 0;
  background: var(--surface); color: var(--text); border-radius: 4px; box-shadow: var(--shadow-high);
}
.context-menu { width: 260px; }
.context-menu .menu-title {
  padding: 4px 16px 8px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line-soft);
}
.context-menu .menu-section {
  padding: 10px 16px 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted);
}
.context-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 0 16px 0 40px;
  text-align: left; position: relative; font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.context-menu button:hover, .context-menu button:focus { background: var(--hover); outline: none; }
.context-menu button[aria-checked="true"] { color: var(--accent-text); font-weight: 500; }
.context-menu button[aria-checked="true"]::before {
  content: "check"; font-family: "Material Symbols Outlined"; font-size: 20px; font-weight: 400;
  position: absolute; left: 12px; top: 8px; color: var(--accent-text);
}
.context-menu .menu-action { padding-left: 12px; }
.context-menu .menu-action .msym { font-size: 20px; color: var(--muted); }
.context-menu .menu-trail {
  margin-left: auto; max-width: 110px; font-size: 12px; font-weight: 400; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.context-menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 0; }

/* ---- Toast (bottom-left, like Google's snackbar) ---- */
.toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 50; max-width: min(560px, calc(100vw - 48px));
  padding: 14px 16px; border-radius: 4px; background: var(--midnight); color: #f1f5f9; box-shadow: var(--shadow-high);
}
@media (prefers-color-scheme: dark) { .toast { background: #e2e8f0; color: #0f172a; } }
@media (max-width: 720px) { .toast { left: 16px; right: 16px; bottom: 80px; max-width: none; } }

.not-set { color: var(--muted); font-size: 12px; font-style: italic; }
.tile-metrics .not-set { font-size: 13px; font-weight: 400; }

/* ---- Optimization: report tiles ---- */
.page-sub { margin: 4px 0 0; color: var(--muted); }
.report-group { margin-bottom: 28px; max-width: 1280px; }
.report-group-title {
  margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--muted);
}
.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.report-action { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent-text); }
.report-action .msym { font-size: 16px; }
.report-tile {
  display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 12px;
  color: inherit; text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s;
}
.report-tile:hover, .report-tile:focus-visible { box-shadow: var(--shadow); border-color: var(--accent); outline: none; }
.report-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.report-icon .msym { font-size: 24px; }
.report-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.report-title { font-size: 16px; line-height: 24px; font-weight: 500; }
.report-summary { color: var(--muted); }
.report-segments { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.report-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.report-go { color: var(--muted); align-self: center; }
.report-last-run, .report-schedule {
  display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text);
}
.report-last-run .msym, .report-schedule .msym { font-size: 16px; color: var(--muted); }
.report-last-run.never, .report-schedule.never { color: var(--muted); font-style: italic; }
.pick-account-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 20px; max-width: 1280px;
  border-radius: 8px; background: var(--accent-soft); color: var(--text);
}
.pick-account-banner .msym { color: var(--accent-text); }
.report-run-note { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.report-run-note .msym { font-size: 18px; }
.report-tile:hover .report-go { color: var(--accent-text); }

/* ---- Report page ---- */
.breadcrumb { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--accent-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .msym { font-size: 18px; }
.report-heading { display: flex; align-items: center; gap: 12px; }
.report-plan { border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 760px; }
.report-plan-lead { margin: 0; font-size: 16px; line-height: 24px; }
.report-facts { margin: 0; display: grid; gap: 12px; width: 100%; }
.report-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.report-facts dt { color: var(--muted); }
.report-facts dd { margin: 0; }
.back-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
@media (max-width: 720px) {
  .report-tiles { grid-template-columns: 1fr; }
  .report-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Segment reports (Age, ...) ---- */
.report-heading h1 { display: flex; align-items: center; gap: 10px; }
.run-summary { border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.run-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.run-facts > div { display: flex; flex-direction: column; }
.run-label { font-size: 12px; color: var(--muted); }
.run-note { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.run-note .msym { font-size: 18px; color: var(--accent-text); }
.lag-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 13px; }
.lag-form #lag { width: 48px; text-align: center; }
.lag-form input { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }

.balance-toggle { align-self: center; }
.balance-toggle a, .balance-toggle span {
  display: flex; align-items: center; padding: 6px 14px; font-weight: 500; text-decoration: none;
  color: var(--muted); background: var(--surface);
}
.balance-toggle > * + * { border-left: 1px solid var(--line); }
.balance-toggle a:hover { background: var(--hover); }
.balance-toggle a.on { background: var(--accent-soft); color: var(--accent-text); }
.balance-toggle span.disabled { opacity: 0.5; cursor: not-allowed; }
.ad-group-card { border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.ad-group-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line-soft);
}
.ad-group-campaign { font-size: 12px; color: var(--muted); }
.ad-group-name { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.ad-group-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.ad-group-meta strong { color: var(--text); }
.ad-group-skipped { margin: 0; padding: 16px 20px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.age-table th, .age-table td { padding: 8px 12px; }
.age-table .seg-name { font-weight: 500; }
.age-table .muted, .muted { color: var(--muted); }
.age-table tr.row-action .new-setting strong { color: var(--accent-text); }
.age-table .totals-row td { font-weight: 500; border-top: 1px solid var(--line); background: var(--bg); }
.age-table .data-cell { font-size: 12px; white-space: nowrap; }
.zone {
  display: inline-block; font-size: 11px; font-weight: 500; line-height: 18px;
  padding: 0 8px; border-radius: 9px; white-space: nowrap;
}
.zone-ok { background: var(--accent-soft); color: var(--accent-text); }
.zone-under { background: #fef3c7; color: #92400e; }
.zone-bad { background: var(--error-bg); color: var(--error); }
.zone-low-data, .zone-excluded { background: var(--hover); color: var(--muted); }
.zone-retest { background: #ede9fe; color: #5b21b6; }
.zone-waiting { background: #e0f2fe; color: #075985; }
.zone-cell { white-space: nowrap; }
.zone-flagged { background: var(--error-bg); color: var(--error); outline: 1px solid currentColor; }
@media (prefers-color-scheme: dark) {
  .zone-under { background: #3d2e0a; color: #fcd34d; }
  .zone-retest { background: #2e1f5e; color: #c4b5fd; }
  .zone-waiting { background: #0c2a3d; color: #7dd3fc; }
}
.apply-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.apply-form { display: flex; align-items: center; gap: 8px; }
.apply-form .btn-primary, .apply-form .btn-text, .log-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.apply-form .msym, .log-link .msym { font-size: 18px; }
.apply-confirm { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.apply-form button:disabled { opacity: 0.6; cursor: progress; }
.log-link { margin-left: auto; }
.batch-highlight { outline: 2px solid var(--accent); }
.age-table td.arrow { color: var(--muted); padding: 0 4px; }
.age-table td.arrow .msym { font-size: 16px; }
.age-table tr.undone td { opacity: 0.6; }
.age-table td.where-cell { white-space: normal; min-width: 160px; }
.age-table td.where-cell .muted { font-size: 12px; }
.age-table td.change-cell { white-space: nowrap; }
.age-table td.change-cell .msym { font-size: 16px; color: var(--muted); margin: 0 4px; }
.age-table td.change-cell .was { color: var(--muted); }
.age-table td.why-cell { white-space: normal; min-width: 280px; }
.why-headline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.why-detail { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: normal; }
.age-table td.result-cell { white-space: normal; min-width: 120px; }
.inline-icon { font-size: 14px; vertical-align: -2px; margin-right: 2px; }
.log-table td.when-cell { white-space: nowrap; font-size: 13px; }
.log-table td.source-cell { white-space: nowrap; }
.log-table td.source-cell .why-detail { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.log-table tr.batch-highlight td { background: var(--accent-soft); }
.src { display: inline-block; font-size: 11px; font-weight: 500; line-height: 18px; padding: 0 8px; border-radius: 9px; }
.src-software { background: var(--accent-soft); color: var(--accent-text); }
.src-manual { background: var(--midnight); color: #f1f5f9; }
.src-automated { background: #ede9fe; color: #5b21b6; }
.src-other { background: var(--hover); color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .src-manual { background: #e2e8f0; color: #0f172a; }
  .src-automated { background: #2e1f5e; color: #c4b5fd; }
}
.source-filter button { padding: 5px 14px; }
.decision-card { border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; border-color: var(--accent); }
.decision-card .ad-group-name { display: flex; align-items: center; gap: 8px; }
.decision-card .ad-group-name .msym { color: var(--accent-text); }
.decision-list { list-style: none; margin: 12px 0 0; padding: 0; }
.decision-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.decision-actions { display: flex; align-items: center; gap: 8px; }
.decision-actions a.btn-primary { text-decoration: none; }
.seg-notes { margin: 0; padding: 12px 20px 16px 36px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 13px; }
.seg-notes li + li { margin-top: 4px; }
.seg-notes strong { color: var(--text); font-weight: 500; }

/* ---- Dialog (qualified leads picker) ---- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 23, 42, 0.55);
}
.dialog {
  width: min(480px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px;
  padding: 24px; background: var(--surface); color: var(--text); border-radius: 8px; box-shadow: var(--shadow-high);
}
.dialog h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 400; }
.dialog-sub { margin: 0; color: var(--muted); }
.q-list { overflow-y: auto; min-height: 48px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.q-item { align-items: flex-start; padding: 8px; border-radius: 4px; color: var(--text); }
.q-item:hover { background: var(--hover); }
.q-item input { margin-top: 1px; flex-shrink: 0; }
.q-item > span { display: flex; flex-direction: column; }
.q-item .menu-hint { font-size: 12px; color: var(--muted); }
.dialog .custom-actions { align-items: center; }
.dialog .spacer { flex: 1; }
.dialog button:disabled { opacity: 0.6; cursor: default; }

/* ---- Narrow screens ---- */
@media (max-width: 720px) {
  .topbar { gap: 12px; }
  .product-name { display: none; }
  .account-picker { flex: 1; }
  .picker-current { padding: 4px 10px; gap: 8px; }
  .picker-icon { display: none; }
  .picker-id { display: none; }
  .shell { flex-direction: column-reverse; }
  .rail { width: auto; flex-direction: row; justify-content: center; padding: 4px 0; border-right: 0; border-top: 1px solid var(--line); }
  .rail-item { flex: 1; max-width: 120px; }
  main { padding: 16px; }
  .date-picker { width: 100%; margin-left: 0; }
  .date-button { width: 100%; }
  .date-panel { left: 0; right: 0; flex-direction: column; max-height: 75vh; overflow-y: auto; }
  .dp-left, .custom-range { width: auto; }
  .dp-left { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .submenu { left: auto; right: 8px; top: 100%; }
  .calendar { height: 240px; }
  .toggle-label { display: none; }
  .tiles-view { padding: 12px; gap: 12px; }
}

/* Age report scheduler (MCC view) */
.schedule-card { padding: 20px; margin-bottom: 16px; border-radius: 8px; }
.schedule-title { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.schedule-accounts { border: 0; margin: 0; padding: 0; }
.schedule-accounts legend { font-weight: 500; margin-bottom: 8px; }
.schedule-accounts-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.schedule-accounts-tools input[type=search], .schedule-when select, .schedule-when input {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}
.schedule-accounts-tools input[type=search] { flex: 1 1 220px; max-width: 360px; }
.schedule-account-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.schedule-account { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.schedule-account:last-child { border-bottom: 0; }
.schedule-account:hover { background: var(--hover); }
.schedule-account[hidden] { display: none; }
.schedule-account .muted { font-size: 12px; }
.schedule-when { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.schedule-when label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.schedule-table td, .schedule-table th { text-align: left; }
.schedule-empty { margin: 0; }
.error-text { color: var(--error); }
.report-last-run + .report-schedule { border-top: 0; padding-top: 0; margin-top: 2px; }

/* Demo accounts */
.demo-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; padding: 4px 12px;
  border-radius: 8px; background: #fef3c7; color: #78350f; font-size: 12px;
}
.demo-bar > .msym { font-size: 16px; }
.demo-bar .btn-text { padding: 2px 8px; font-size: 12px; }
.demo-bar .muted { color: inherit; opacity: 0.8; }
.demo-bar .btn-text { color: inherit; font-weight: 500; padding: 4px 10px; }
.demo-bar .btn-text:hover { background: rgba(120, 53, 15, 0.1); }
.demo-form { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0; }
.demo-reset { margin-left: auto; }
@media (prefers-color-scheme: dark) {
  .demo-bar { background: #3d2e0a; color: #fcd34d; }
  .demo-bar .btn-text:hover { background: rgba(252, 211, 77, 0.12); }
}

/* Campaigns & ad groups filter, campaign intent */
.scope-card { margin-bottom: 16px; border-radius: 8px; }
.scope-card > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; }
.scope-card > summary::-webkit-details-marker { display: none; }
.scope-card > summary .msym { color: var(--accent-text); }
.scope-hint { margin-left: auto; color: var(--accent-text); font-weight: 500; }
.scope-form { padding: 0 16px 16px; border-top: 1px solid var(--line-soft); }
.scope-form > p { font-size: 13px; }
.scope-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.scope-tools input[type=search], .intent-label input {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}
.scope-tools input[type=search] { flex: 1 1 220px; max-width: 360px; }
.scope-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 6px; }
.scope-campaign { border-bottom: 1px solid var(--line-soft); }
.scope-campaign:last-child { border-bottom: 0; }
.scope-campaign[hidden], .scope-row[hidden] { display: none; }
.scope-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer; }
.scope-row:hover { background: var(--hover); }
.scope-row-campaign { font-weight: 500; }
.scope-row-campaign .muted { font-weight: 400; font-size: 12px; }
.scope-row-ad-group { padding-left: 36px; }
.scope-row input:disabled + span { color: var(--muted); }
.intent-chip { background: var(--accent-soft); color: var(--accent-text); }
.intent-card { padding: 16px; border-radius: 8px; margin-bottom: 16px; }
.intent-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.intent-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.intent-table td, .intent-table th { text-align: left; }

/* Age report: toolbar, action bar, columns, folded ad groups, notes */
.report-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.tool-chip:hover { background: var(--hover); }
.tool-chip .msym { font-size: 18px; color: var(--muted); }
.tool-chip[aria-expanded=true] { background: var(--accent-soft); border-color: var(--accent); }
.report-toolbar .lag-form { margin: 0; font-size: 13px; }
.report-toolbar .balance-toggle a.disabled { opacity: 0.5; }
.toolbar-spacer { flex: 1 1 auto; }
.columns-menu { position: relative; }
.columns-panel {
  position: absolute; right: 0; top: 38px; z-index: 20; display: flex; flex-direction: column; gap: 6px;
  min-width: 200px; padding: 12px; border-radius: 8px; box-shadow: var(--shadow-high); font-size: 13px;
}
.columns-panel[hidden] { display: none; }
.columns-panel label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.scope-card[hidden] { display: none; }
.scope-card .scope-form { border-top: 0; padding-top: 12px; }
.action-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; margin-bottom: 12px; border-radius: 8px; }
.action-bar .undo-form { margin-left: auto; }
.action-bar button:disabled { opacity: 0.5; cursor: not-allowed; }
.run-details { margin-bottom: 16px; border-radius: 8px; }
.run-details > summary { display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; font-weight: 500; list-style: none; }
.run-details > summary::-webkit-details-marker { display: none; }
.run-details > summary .msym { font-size: 18px; color: var(--accent-text); }
.run-details > summary .muted { font-weight: 400; font-size: 13px; }
.run-details > .run-facts, .run-details > .run-note { margin: 0 16px 12px; }
.folded { margin-bottom: 16px; }
.folded > summary { display: flex; align-items: center; gap: 6px; padding: 8px 4px; cursor: pointer; color: var(--accent-text); font-weight: 500; list-style: none; }
.folded > summary::-webkit-details-marker { display: none; }
.folded[open] > summary .msym { transform: rotate(90deg); }
.age-table .pick-col { width: 28px; padding-right: 0; }
.note-icon { font-size: 16px; vertical-align: middle; color: var(--accent-text); cursor: help; border-radius: 50%; }
.note-icon:focus { outline: 2px solid var(--accent); }
.note-tip {
  position: absolute; z-index: 50; max-width: 320px; padding: 8px 10px; border-radius: 6px; white-space: pre-line;
  background: var(--midnight); color: #fff; font-size: 12px; line-height: 1.45; box-shadow: var(--shadow-high);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.report-tables.hide-clicks .c-clicks { display: none; }
.report-tables.hide-cost .c-cost { display: none; }
.report-tables.hide-cpc .c-cpc { display: none; }
.report-tables.hide-conv .c-conv { display: none; }
.report-tables.hide-value .c-value { display: none; }
.report-tables.hide-eff .c-eff { display: none; }
.report-tables.hide-offset .c-offset { display: none; }
.report-tables.hide-current .c-current { display: none; }
.report-tables.hide-score .c-score { display: none; }
.report-tables.hide-change .c-change { display: none; }
.report-tables.hide-new .c-new { display: none; }
.report-tables.hide-zone .c-zone { display: none; }
.report-tables.hide-strikes .c-strikes { display: none; }
.report-tables.hide-data .c-data { display: none; }

/* Account settings */
.settings-form { max-width: 760px; }
.settings-card { padding: 16px 20px; margin-bottom: 16px; border-radius: 8px; }
.settings-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.settings-card > p.muted { margin: 0 0 12px; font-size: 13px; }
.settings-option { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; }
.settings-option input { margin-top: 3px; }
.settings-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.settings-row select, .settings-row .days-box {
  font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit;
}
.settings-row .days-box { width: 48px; text-align: center; }
.settings-actions { margin-bottom: 24px; }
.report-tile.planned { opacity: 0.75; }
.report-tile.planned .report-icon { filter: grayscale(1); }
.coming-soon > summary { font-size: 15px; }
.lag-hint { color: var(--muted); font-size: 12px; margin-left: 4px; }
.lag-hint strong { color: var(--text); }

/* Optimization tabs, rules */
.page-tabs { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--line); }
.page-tabs a { padding: 10px 16px; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--text); background: var(--hover); }
.page-tabs a.on { color: var(--accent-text); border-bottom-color: var(--accent); }
.new-rule { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; align-self: center; }
.rules-card { padding: 8px 0 0; border-radius: 8px; margin-bottom: 12px; }
.rules-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 4px 16px 10px; }
.rules-actions .btn-text { display: inline-flex; align-items: center; gap: 4px; }
.rules-table td, .rules-table th { text-align: left; }
.rules-table .rule-report { font-size: 12px; }
.rule-paused td { color: var(--muted); }
.rules-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; margin-bottom: 12px; border-radius: 8px; font-size: 13px; }
.rules-strip > .msym { color: var(--accent-text); }
.rules-strip-body { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.rules-strip .btn-text { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.rule-form .text-box { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; min-width: 240px; }
.rule-form .inline-option { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.rule-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rule-buttons .btn-text { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* Results since applied */
.results-link, .log-results-link a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.log-results-link { font-size: 13px; color: var(--muted); }
.results-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.results-pick select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; }
.results-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.results-cards .card { padding: 12px 16px; border-radius: 8px; }
.results-cards .label { font-size: 12px; color: var(--muted); }
.results-cards .value { font-size: 20px; font-weight: 500; margin: 2px 0; }
.results-cards .delta { font-size: 13px; }
.up { color: var(--accent-text); }
.down { color: var(--error); }
.resp { display: inline-block; font-size: 11px; font-weight: 500; line-height: 18px; padding: 0 8px; border-radius: 9px; background: var(--hover); color: var(--muted); }
.resp-responding, .resp-traffic-stopped { background: var(--accent-soft); color: var(--accent-text); }
.resp-partly { background: #fef3c7; color: #92400e; }
.resp-not-responding, .resp-still-getting-clicks { background: var(--error-bg); color: var(--error); }
@media (prefers-color-scheme: dark) { .resp-partly { background: #3d2e0a; color: #fcd34d; } }
.results-section { padding: 0 0 4px; border-radius: 8px; margin-bottom: 16px; }
.results-section h2 { margin: 0; padding: 14px 20px 8px; font-size: 16px; font-weight: 500; }
.results-section td, .results-section th { text-align: left; }
.results-section td.num, .results-section th.num { text-align: right; }
.results-explain { padding: 0 20px; }
.resp-too-small-to-judge { background: var(--hover); color: var(--muted); }

/* ---- Sign in and Google Ads connection: one centered card, no account picker ---- */
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 100%; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 32px; border-radius: 12px; box-shadow: var(--shadow); }
.auth-logo { margin-bottom: 24px; }
.auth-title { font-size: 22px; line-height: 28px; font-weight: 500; margin: 0 0 8px; }
.auth-small { font-size: 12px; line-height: 16px; }
.auth-error {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px;
  border-radius: 8px; background: var(--error-bg); color: var(--error);
}
.auth-error .msym { font-size: 20px; }
.google-button {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 16px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text);
  font-weight: 500; text-decoration: none;
}
.google-button:hover { background: var(--hover); }
.google-button svg { width: 18px; height: 18px; }
.auth-list { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 10px; }
.auth-list li { display: flex; gap: 10px; align-items: flex-start; }
.auth-list .msym { color: var(--accent-text); font-size: 20px; }
.auth-cta { display: block; text-align: center; text-decoration: none; }
.auth-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0 20px; }
.auth-facts dt { color: var(--muted); }
.auth-facts dd { margin: 0; overflow-wrap: anywhere; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-actions a { text-decoration: none; }
.auth-back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; padding-left: 8px; margin-top: 8px; }
.auth-back .msym { font-size: 18px; }
.auth-disconnect { display: grid; gap: 4px; justify-items: start; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.btn-text.danger { color: var(--error); padding-left: 8px; }
.btn-text.danger:hover { background: var(--error-bg); }
.auth-accounts { display: grid; gap: 8px; margin: 16px 0; }
.auth-account {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left;
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.auth-account:hover:not(:disabled) { background: var(--hover); }
.auth-account[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.auth-account:disabled { opacity: 0.55; cursor: default; }
.auth-account .msym { color: var(--muted); }
.auth-account-text { display: flex; flex-direction: column; min-width: 0; }
.auth-account-name { font-weight: 500; }
.auth-foot { display: flex; align-items: center; gap: 8px; }

/* Who's signed in, at the right of the top bar */
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.user-menu a.btn-text { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.user-menu .msym { font-size: 20px; }
.user-email { color: var(--muted); font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .user-email { display: none; } }

/* ---- Admin > Access and security ---- */
.access-invite { padding: 16px 20px; margin-bottom: 16px; border-radius: 8px; }
.access-invite h2, .access-teams h2, .access-levels h2 { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.access-invite-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.access-invite-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.access-invite-row input, .access-invite-row select, .access-inline select {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px;
}
.access-invite-row input { width: 280px; max-width: 100%; }
.access-invite .muted { margin: 12px 0 0; font-size: 12px; }
.access-table { border-radius: 8px; margin-bottom: 24px; }
.access-inline { display: flex; align-items: center; gap: 4px; }
.access-inline select { padding: 4px 8px; }
.access-actions { text-align: right; }
.access-pending td { background: var(--hover); }
.access-levels dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 24px; }
.access-levels dt { font-weight: 500; }
.access-levels dd { margin: 0; color: var(--muted); }
.access-teams { padding: 16px 20px; border-radius: 8px; }
.access-team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.access-team-row:first-of-type { border-top: 0; }
.activity-what { white-space: normal; }

/* ---- Privacy policy and terms: plain public pages ---- */
.legal-page { display: block; }
.legal-head { padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.legal-main { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }
.legal-body h1 { font-size: 28px; line-height: 36px; margin: 0 0 4px; }
.legal-body h2 { font-size: 18px; font-weight: 500; margin: 28px 0 8px; }
.legal-body p, .legal-body li { font-size: 15px; line-height: 24px; }
.legal-body ul { padding-left: 20px; }
.legal-body a, .legal-foot a, .auth-legal a { color: var(--accent-text); }
.legal-date { color: var(--muted); margin: 0 0 24px; }
.legal-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.auth-legal { margin: 0; }

/* ---- Public front page (signed out) ---- */
.legal-head { display: flex; align-items: center; justify-content: space-between; }
.legal-signin { text-decoration: none; }
.landing-hero { padding: 24px 0 8px; }
.landing-hero h1 { font-size: 34px; line-height: 42px; margin: 0 0 12px; }
.landing-lead { font-size: 18px; line-height: 28px; color: var(--muted); margin: 0 0 24px; }
.landing-cta { display: inline-block; text-decoration: none; padding: 12px 24px; border-radius: 24px; }
.landing-note { color: var(--muted); font-size: 13px; }
.landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 32px 0; }
.landing-features > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.landing-features h2 { margin-top: 0; }
.landing-data { background: var(--accent-soft); border-radius: 12px; padding: 4px 24px 12px; }
.legal-body a.landing-cta { color: var(--on-accent); }
.legal-head .product-name { display: inline; }  /* the public pages have room for the wordmark at any width */