/* =====================================================================================
   Athena premium layer (loaded last). One type family (Geist, with Noto Sans Tamil for Tamil),
   one cool neutral family, one accent. Ink carries actions; Athena gold marks what is active or
   important. The older layers in app.css stay as they are; this one settles their conflicts.
   ===================================================================================== */
:root {
  --font: 'Geist', 'Noto Sans Tamil', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --bg: #F3F4F6; --surface: #FFFFFF; --surface-2: #F8F9FA; --surface-3: #EEF0F3;
  --text: #15171C; --text-2: #4A515E; --text-3: #737B89; --line: #E2E5EA; --line-2: #ECEEF1;
  --rail: #FAFAFB; --rail-2: #F4F5F7; --rail-ic: #6B7280; --rail-active: #ECEEF1;
  --nav: #FAFAFB; --nav-text: #3D4450; --nav-muted: #858C98; --nav-hover: #EEF0F3; --nav-active: #E8EAEE;

  --primary: #16181D; --primary-h: #2C3039; --primary-soft: #EEF0F3; --on-primary: #FFFFFF;
  --accent: #DC9E3A; --accent-strong: #C4851C; --accent-ink: #875A0E; --accent-soft: #FBF2E2;
  --brand: #16181D; --brand-dark: #000000; --brand-gold: #DC9E3A; --brand-marigold: #DC9E3A;

  --ok: #1D8659; --ok-soft: #E5F3EB; --warn: #A2670F; --warn-soft: #FAF0DD; --danger: #C4423A; --danger-soft: #FAEAE8;
  /* Sentiment (owner, 6 Oct 2026: "light pastel green and red, not bright"): pastel fills; the -ink shades are for text. */
  --pos: #8FCFAA; --neg: #F0A5A0; --neu: #C9CDD3; --pos-ink: #2F7A55; --neg-ink: #B24E47;

  --shadow: 0 1px 2px rgba(21, 23, 28, .05), 0 0 0 1px rgba(21, 23, 28, .02);
  --shadow-md: 0 6px 16px -8px rgba(21, 23, 28, .16), 0 1px 2px rgba(21, 23, 28, .05);
  --shadow-lg: 0 28px 56px -20px rgba(21, 23, 28, .28), 0 2px 8px rgba(21, 23, 28, .06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="dark"] {
  --bg: #0D0E11; --surface: #15171B; --surface-2: #1A1C21; --surface-3: #22252B;
  --text: #ECEDF0; --text-2: #A8AEB9; --text-3: #7A818D; --line: #2A2D34; --line-2: #212429;
  --rail: #111215; --rail-2: #0D0E11; --rail-ic: #8C929D; --rail-active: #22252B;
  --nav: #111215; --nav-text: #C9CDD4; --nav-muted: #7A818D; --nav-hover: #1C1E23; --nav-active: #22252B;
  --primary: #ECEDF0; --primary-h: #FFFFFF; --primary-soft: #22252B; --on-primary: #15171C;
  --accent: #E3AA4C; --accent-strong: #EDB85E; --accent-ink: #EDBE6E; --accent-soft: #2B2317;
  --brand: #ECEDF0; --brand-gold: #E3AA4C; --brand-marigold: #E3AA4C;
  --ok: #3FB47E; --ok-soft: #13271D; --warn: #D29B3B; --warn-soft: #2B2317; --danger: #E0675F; --danger-soft: #2E1715;
  --pos: #6DB58C; --neg: #D9867F; --neu: #5E646E; --pos-ink: #8ED1A9; --neg-ink: #EE9E98;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow-md: 0 8px 20px -10px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------- type ---------- */
body { font-family: var(--font); font-size: 13.5px; line-height: 1.5; letter-spacing: -.003em; font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.018em; text-wrap: balance; }
p { text-wrap: pretty; }
code, kbd, .code, .mono { font-family: var(--font-mono); }
.page-h h1 { font-size: 20px; font-weight: 600; letter-spacing: -.024em; }
.page-h .sub { color: var(--text-3); }
.card-h h3 { font-weight: 600; letter-spacing: -.012em; }
.kpi-v, .yt-metrics b { font-weight: 600; letter-spacing: -.028em; }
b, strong, .bold { font-weight: 600; }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
html { scroll-behavior: smooth; }

/* Small uppercase labels ("eyebrows") on every block read as a template. Sentence case, quieter. */
.table th, .nw-table th, .sx-tbl th, .nw-brief-nums span, .nw-hero-nums span, .nw-mh0, .nw-event, .sx-sub, .fs-h,
.feeds-side .fs-h, .fp-rail-title, .cmdk-g, .nw-chips .chip small, .grp-head, .sx-insight .k {
  text-transform: none !important; letter-spacing: 0 !important;
}
.table th, .nw-table th, .sx-tbl th { font-size: 12px; font-weight: 500; color: var(--text-3); background: transparent; border-bottom: 1px solid var(--line); }
.nw-kicker, .sx-kicker { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px; font-weight: 600; color: var(--accent-ink) !important; }
.sx-kicker { font-weight: 600; }

/* ---------- links ---------- */
a { color: var(--text); }
a:hover { text-decoration: none; }
.page-body a:not([class]), .card a:not([class]), .modal a:not([class]), .callout a:not([class]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--text) 28%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .15s; }
.page-body a:not([class]):hover, .card a:not([class]):hover, .modal a:not([class]):hover, .callout a:not([class]):hover { text-decoration-color: var(--accent); }
.subnav a, .rail a, .today-tile, .setup-step, .mood-card { text-decoration: none !important; }

/* ---------- focus ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.input:focus, select.input:focus, textarea.input:focus { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: var(--ring); outline: none; }

/* ---------- shell ---------- */
.rail { background: var(--rail); border-right: 1px solid var(--line-2); }
.rail-btn { border-radius: 9px; color: var(--rail-ic); }
.rail-btn:hover { background: var(--nav-hover); color: var(--text); }
.rail-btn.active { background: var(--rail-active); color: var(--text); }
.rail-btn.active::before { background: var(--accent); width: 3px; left: -8px; }
.rail-btn.compose { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 14px -6px rgba(21, 23, 28, .55), inset 0 1px 0 rgba(255, 255, 255, .08); }
.rail-btn.compose:hover { background: var(--primary-h); color: var(--on-primary); }
.rail-mod .athena-icon, .rail-mod svg { filter: saturate(.82); transition: filter .2s; }
.rail-mod:hover .athena-icon, .rail-mod.active .athena-icon, .rail-mod:hover svg, .rail-mod.active svg { filter: none; }
.rail-sep { background: var(--line-2); }
.tip[data-tip]:hover::after { background: var(--primary); color: var(--on-primary); border-radius: 7px; box-shadow: var(--shadow-md); }

.subnav { background: var(--nav); border-right: 1px solid var(--line-2); }
.subnav a, .subnav .nav-i { border-radius: 8px; color: var(--nav-text); }
.subnav a:hover, .subnav .nav-i:hover { background: var(--nav-hover); color: var(--text); }
.subnav a.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.subnav a.active .ic { color: var(--accent-strong); }
.subnav .nav-section { color: var(--nav-muted); font-weight: 500; }
.subnav .nav-count { background: var(--surface-3); color: var(--text-2); font-weight: 500; }
.subnav a.active .nav-count { background: var(--primary); color: var(--on-primary); }
.subnav-card { background: transparent; border: 1px solid var(--line); box-shadow: none; }
/* The group card's button is a quiet secondary action: "Connect profiles" already lives in the page header. */
.subnav .subnav-card a.btn { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.subnav .subnav-card a.btn:hover { background: var(--surface-3); color: var(--text); }
.subnav .new-post.btn { background: var(--primary); color: var(--on-primary); }
.main { background: var(--bg); }
.page-h { background: var(--surface); border-bottom: 1px solid var(--line-2); }

/* ---------- buttons ---------- */
/* Base look stays in app.css (it comes before the variants); only feel is set here, so .btn-danger etc. keep their colours. */
.btn { border-radius: var(--r-sm); font-weight: 500; letter-spacing: -.005em;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .08s; }
.btn:not(.btn-primary, .btn-danger, .btn-dark, .btn-accent, .btn-ghost, .on):hover:not(:disabled) { background: var(--surface-2); border-color: color-mix(in srgb, var(--text-3) 40%, var(--line)); }
.btn-dark { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-dark:hover:not(:disabled) { background: var(--primary-h); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary, .fp-canvas .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(21, 23, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-primary:hover:not(:disabled) { background: var(--primary-h); border-color: var(--primary-h); color: var(--on-primary); box-shadow: 0 4px 12px -4px rgba(21, 23, 28, .4); }
.btn-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-ink); }
.btn-accent:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); border-color: transparent; }
.btn-group .btn.on, .toggle input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sx-q .a .btn.on, .igc-why .btn.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sx-tabs button.on .sx-count, .nw-livebtn { background: var(--primary); color: var(--on-primary); }
.icon-btn { border-radius: 8px; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

/* segmented controls (date ranges, view toggles): the selected option is a raised white chip */
.seg { background: var(--surface-3); border-radius: 9px; padding: 3px; }
.seg button { border-radius: 7px; color: var(--text-2); font-weight: 500; }
.seg button:hover { color: var(--text); }
.seg button.on, .seg button.active, .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }
.sx-viewtoggle button.on { color: var(--text); box-shadow: var(--shadow); }

/* ---------- surfaces ---------- */
.card { border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); background: var(--surface); }
.callout { border-radius: 10px; }
.modal { border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--line-2); }
.popover { border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--line-2); }
.toast { border-radius: 12px; box-shadow: var(--shadow-lg); }
.cmdk { border-radius: 16px; box-shadow: var(--shadow-lg); }
.cmdk-i.on { background: var(--surface-3); color: var(--text); } .cmdk-i.on .ic { color: var(--accent-strong); }
.yt-metrics > div, .yt-metrics > a { border-color: var(--line-2); }
.yt-metrics > a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-md); }
.promo { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }
.promo .ic { color: var(--accent-strong); }
.badge { border-radius: 6px; font-weight: 500; }
.acc-av { background: var(--accent-soft); color: var(--accent-ink); }
.msg:hover { border-color: color-mix(in srgb, var(--text-3) 35%, var(--line)); }
.msg.open { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-md); }
.menu-check { color: var(--accent-strong); }
.table tbody tr:hover td { background: var(--surface-2); }

/* Profile analytics and report chrome that carried the old indigo */
.fp-topbar nav a.active, .fp-subtabs a.active { color: var(--text); border-bottom-color: var(--accent); }
.fp-report-toolbar .icon-btn:hover { color: var(--text); background: var(--surface-3); }
.fp-brand:hover { color: var(--text); }
.reports-hero { background: radial-gradient(120% 160% at 0% 0%, #2C3039 0%, #16181D 55%, #0D0E11 100%); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-primary-link { color: var(--accent-strong) !important; background: var(--accent-soft) !important; }

/* sign-in */
body.signin-mode { background: radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--bg); }

/* ---------- loading ---------- */
.loading.skel { padding: 28px 24px; display: grid; gap: 12px; max-width: 760px; }
.loading.skel .skel-line { height: 12px; }
.loading.skel .skel-line.lg { height: 22px; width: 38%; border-radius: 7px; }
.skel-line { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* home: best-times heatmap legend follows the gold scale; profile analytics used its own font */
.heat-legend .bar { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, var(--surface-3)), var(--accent)); }
.fp-shell { font-family: var(--font); }

/* ---------- Settings: connected accounts ---------- */
.settings-account-shell { width: min(1180px, 100%); margin: 0 auto; }
.settings-account-shell .settings-sec { overflow: hidden; }
.account-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2px 0 22px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.account-summary > div { display: grid; gap: 1px; padding: 12px 16px; border-right: 1px solid var(--line-2); }
.account-summary > div:last-child { border-right: 0; }
.account-summary b { font-size: 19px; line-height: 1.2; letter-spacing: -.025em; }
.account-summary span { color: var(--text-3); font-size: 11.5px; }
.account-groups { display: grid; gap: 22px; }
.account-network-group { min-width: 0; }
.account-network-head { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 0 2px 8px; color: var(--text-2); }
.account-network-head > span:first-child { display: inline-grid; place-items: center; color: var(--text-3); }
.account-network-head b { color: var(--text); font-size: 13px; }
.account-network-head .badge { margin-left: 2px; }
.account-network-list { display: grid; gap: 8px; }
.account-card { min-width: 0; padding: 15px 16px 13px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); box-shadow: 0 1px 2px rgba(13, 15, 18, .025); transition: border-color .15s, box-shadow .15s; }
.account-card:hover { border-color: color-mix(in srgb, var(--text-3) 34%, var(--line)); box-shadow: var(--shadow); }
.account-card-main { min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.account-card-main > .avatar { flex: 0 0 auto; }
.account-card-identity { min-width: 0; flex: 1; }
.account-card-title { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.3; }
.account-card-title > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.account-card-handle { margin-top: 2px; color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card-metrics { margin-top: 7px; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.account-card-metrics b { color: var(--text); font-weight: 600; }
.account-card-status { margin-top: 4px; }
.account-card-status > .small { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; line-height: 1.4; }
.account-connection { gap: 4px; }
.account-connection.proxy { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); }
.account-card-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 13px 0 0 56px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.account-role { display: grid; gap: 5px; flex: 0 1 220px; min-width: 180px; }
.account-role > span { color: var(--text-3); font-size: 11px; font-weight: 500; }
.account-role-select { width: 100%; max-width: 220px; }
.account-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.account-actions .btn { white-space: nowrap; }
.account-remove { margin-left: 2px; color: var(--text-3); }
.account-remove:hover { color: var(--danger); background: var(--danger-soft); }

@media (max-width: 900px) {
  /* app.css has an older phone header rule; keep the title clear of the current drawer button. */
  .page-h { padding-left: 62px; }
  .settings-account-shell { width: 100%; }
  .account-card-controls { align-items: stretch; flex-direction: column; margin-left: 0; }
  .account-role { width: 100%; max-width: 280px; flex-basis: auto; }
  .account-role-select { max-width: none; }
  .account-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .account-summary { grid-template-columns: 1fr; }
  .account-summary > div { grid-template-columns: 48px 1fr; align-items: center; gap: 8px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .account-summary > div:last-child { border-bottom: 0; }
  .account-card { padding: 14px 12px 12px; }
  .account-card-main { gap: 10px; }
  .account-card-controls { margin-top: 11px; }
  .account-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-actions .btn { width: 100%; justify-content: center; }
  .account-actions .account-remove { width: 30px; margin: 0; }
}

/* ---------- Ads intelligence ---------- */
.ads { max-width: 1640px; margin: 0 auto; display: grid; gap: 16px; }
.ads-page-h .actions { margin-left: auto; }
.ads-titlemark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.ads-filterbar { flex: none; display: grid; grid-template-columns: 150px 125px 170px 130px minmax(220px, 1fr) auto; gap: 8px; align-items: center; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.ads-filterbar .input { height: 32px; }
.ads-search { height: 32px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); display: flex; align-items: center; gap: 7px; padding: 0 10px; color: var(--text-3); }
.ads-search:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); box-shadow: var(--ring); }
.ads-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.ads-net { width: var(--size); height: var(--size); flex: 0 0 var(--size); display: inline-grid; place-items: center; border-radius: 6px; font-size: calc(var(--size) * .53); font-weight: 700; vertical-align: middle; }
.ads-net.meta { color: #0866FF; background: color-mix(in srgb, #0866FF 10%, var(--surface)); }
.ads-net.google { color: #4285F4; background: color-mix(in srgb, #4285F4 10%, var(--surface)); }
.ads-truth { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.ads-truth > div { display: grid; gap: 1px; }.ads-truth span { color: var(--text-2); font-size: 12px; }
.ads-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.ads-kpi { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--line-2); display: grid; gap: 2px; }.ads-kpi:last-child { border-right: 0; }
.ads-kpi > span { color: var(--text-3); display: flex; align-items: center; gap: 5px; font-size: 12px; }.ads-kpi > b { font-size: 23px; line-height: 1.25; letter-spacing: -.035em; }.ads-kpi small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-grid { display: grid; gap: 16px; }.ads-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-card { min-width: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); padding: 16px; }
.ads-card-h, .ads-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }.ads-card-h { margin-bottom: 14px; }
.ads-card h2, .ads-section-head h2 { margin: 0; font-size: 15px; }.ads-card-h p, .ads-section-head p { margin: 2px 0 0; color: var(--text-3); font-size: 12px; }.ads-card-h > a { font-size: 12px; white-space: nowrap; }
.ads-bars { display: grid; gap: 13px; }.ads-bars > div > div { display: flex; justify-content: space-between; gap: 8px; }.ads-bars i { display: block; margin-top: 5px; height: 6px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }.ads-bars em { display: block; height: 100%; background: var(--accent); border-radius: inherit; }.ads-bars small { color: var(--text-3); }
.ads-list { display: grid; gap: 10px; }.ads-list.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-item { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 14px; align-items: stretch; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); transition: border-color .18s, box-shadow .18s, transform .18s; }
.ads-item:hover { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ads-list.compact .ads-item { grid-template-columns: 84px minmax(0, 1fr); }.ads-list.compact .ads-item-actions { grid-column: 2; justify-content: flex-start; }.ads-list.compact .ads-creative { min-height: 100px; }
.ads-creative { min-height: 132px; border-radius: 8px; overflow: hidden; background: var(--surface-3); position: relative; display: grid; place-items: center; color: var(--text-3); }.ads-creative img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.ads-creative > span { z-index: 1; display: flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ads-item-main { min-width: 0; display: grid; align-content: start; gap: 8px; }.ads-item-main > p { margin: 0; color: var(--text-2); line-height: 1.48; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ads-advertiser { display: flex; align-items: center; gap: 8px; min-width: 0; }.ads-advertiser > div { min-width: 0; display: grid; }.ads-advertiser b, .ads-advertiser small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.ads-advertiser small { color: var(--text-3); }.ads-advertiser .ads-chip { margin-left: auto; }
.ads-chips { display: flex; flex-wrap: wrap; gap: 5px; }.ads-chip { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); font-size: 11px; line-height: 1.15; }.ads-chip.active { background: var(--ok-soft); color: var(--ok); }.ads-chip.inactive { background: var(--surface-3); color: var(--text-3); }.ads-chip.cta { border: 1px solid var(--line); background: var(--surface); }.ads-chip.repeat { background: var(--accent-soft); color: var(--accent-ink); }
.ads-evidence { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-3); font-size: 11px; }.ads-evidence span { display: flex; align-items: center; gap: 4px; }
.ads-item-actions { align-self: center; display: flex; align-items: center; gap: 5px; }.ads-item-actions .btn { white-space: nowrap; }
.ads-date { display: flex; align-items: center; gap: 7px; }.ads-date .input { width: 145px; }.ads-check { display: flex; gap: 6px; align-items: center; }
.ads-table-wrap { overflow-x: auto; padding: 0; }.ads-table { width: 100%; border-collapse: collapse; }.ads-table th, .ads-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }.ads-table th { color: var(--text-3); font-size: 12px; font-weight: 500; }.ads-table tbody tr:hover { background: var(--surface-2); }.ads-table tbody tr:last-child td { border-bottom: 0; }.ads-person { min-width: 220px; display: flex; align-items: center; gap: 9px; }.ads-person > div { display: grid; }.ads-person small { color: var(--text-3); }
.ads-compare { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }.ads-compare-col { min-width: 220px; display: grid; align-content: start; gap: 14px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }.ads-compare-col header { display: flex; align-items: center; gap: 8px; min-height: 44px; }.ads-compare-col header h3 { margin: 0; font-size: 14px; }.ads-compare-col header span { color: var(--text-3); font-size: 11px; }.ads-compare-metric { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-2); }.ads-compare-metric span { color: var(--text-3); }.ads-compare-metric b { font-size: 19px; }.ads-compare-col > div:last-child .ads-chip, .ads-compare-col > div:nth-last-child(2) .ads-chip, .ads-compare-col > div:nth-last-child(3) .ads-chip { margin: 7px 4px 0 0; }
.ads-event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.ads-mini-list { display: grid; gap: 3px; }.ads-mini-list > a { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 8px; }.ads-mini-list > a:hover { background: var(--surface-2); }.ads-mini-list span:nth-child(2) { min-width: 0; flex: 1; display: grid; }.ads-mini-list small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-runs { display: grid; }.ads-runs > div { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line-2); }.ads-runs > div:last-child { border: 0; }.ads-runs > div > span:nth-child(3) { min-width: 0; flex: 1; display: grid; }.ads-runs small { color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.ads-run-status { width: 20px; color: var(--ok); }.ads-run-status.failed { color: var(--danger); }.ads-run-status.running { color: var(--accent-ink); }
.ads-setup-hero { min-height: 150px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 30px; border-radius: var(--r); background: radial-gradient(110% 170% at 0 0, color-mix(in srgb, var(--accent) 25%, var(--primary)) 0%, var(--primary) 65%); color: var(--on-primary); box-shadow: var(--shadow-md); }.ads-setup-hero > div { display: flex; gap: 16px; align-items: flex-start; }.ads-setup-hero h2 { margin: 0; font-size: 23px; }.ads-setup-hero p { margin: 4px 0; max-width: 720px; opacity: .75; }.ads-setup-hero .btn { background: var(--surface); color: var(--text); border-color: var(--surface); white-space: nowrap; }
.ads-source header { display: flex; gap: 10px; }.ads-source h2 { margin: 0; }.ads-source p { margin: 2px 0; color: var(--text-3); }.ads-source ul { color: var(--text-2); padding-left: 20px; line-height: 1.7; }
.ads-source-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 9px; background: var(--surface-3); margin-bottom: 16px; }.ads-source-tabs button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; padding: 9px; border-radius: 7px; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 7px; }.ads-source-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ads-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.fld > span i { color: var(--text-3); font-weight: 400; font-style: normal; }.ads-collect-note { display: flex; gap: 7px; align-items: flex-start; padding: 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-3); font-size: 12px; }
.ads-event-picker, .ads-choose { display: grid; gap: 6px; }.ads-event-picker button, .ads-choose label { width: 100%; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--text); padding: 10px; text-align: left; font: inherit; cursor: pointer; }.ads-event-picker button:hover, .ads-choose label:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--surface-2); }.ads-event-picker button > span:nth-child(2), .ads-choose label > span { flex: 1; display: grid; }.ads-event-picker small, .ads-choose small { color: var(--text-3); }

@media (max-width: 1200px) { .ads-filterbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }.ads-search { grid-column: span 3; }.ads-kpis { grid-template-columns: repeat(3, 1fr); }.ads-kpi:nth-child(3) { border-right: 0; }.ads-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--line-2); }.ads-list.compact { grid-template-columns: 1fr; }.ads-item { grid-template-columns: 110px minmax(0, 1fr); }.ads-item-actions { grid-column: 2; justify-content: flex-start; } }
@media (max-width: 760px) { .ads-filterbar { grid-template-columns: 1fr 1fr; padding: 9px 12px; }.ads-search { grid-column: span 2; }.ads-kpis { grid-template-columns: 1fr 1fr; }.ads-kpi { border-bottom: 1px solid var(--line-2); }.ads-kpi:nth-child(2n) { border-right: 0; }.ads-grid.two, .ads-event-grid { grid-template-columns: 1fr; }.ads-item, .ads-list.compact .ads-item { grid-template-columns: 76px minmax(0, 1fr); }.ads-item-actions, .ads-list.compact .ads-item-actions { grid-column: 1 / -1; }.ads-creative { min-height: 86px; }.ads-date { flex-wrap: wrap; }.ads-setup-hero { padding: 20px; align-items: flex-start; flex-direction: column; }.ads-form-row { grid-template-columns: 1fr; } }

/* home: cards in the first row keep their own height instead of stretching to the tallest */
.today-row { align-items: start; }

/* dark theme: the owl in the rail uses its light version */
:root[data-theme="dark"] .rail-logo img { content: url(/brand/athena-mark-dark.svg); }

/* Reports home: the old blue highlights become the one accent */
.reports-hero .tiny { color: color-mix(in srgb, var(--accent) 80%, #fff); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.reports-hero p { color: rgba(255, 255, 255, .72); }
.reports-hero .btn { background: #fff; border-color: #fff; color: #16181D; }
.report-tile { border-color: var(--line-2); border-radius: 10px; box-shadow: var(--shadow); }
.report-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-md); }
.report-tile-primary { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); color: var(--text); }
.report-tile-primary .ic { color: var(--accent-strong); }
/* Profile analytics rail and calendar */
.fp-profile-rail { background: var(--surface); border-right-color: var(--line-2); }
.fp-profile { color: var(--text-2); border-radius: 8px; }
.fp-profile:hover, .fp-profile.active { background: var(--surface-3); color: var(--text); }
.fp-profile small { color: var(--text-3); }
.fp-metrics-overview tbody tr:hover { background: var(--surface-2); }
.fp-editing .card { outline-color: var(--accent); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-hint { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important; background: var(--accent-soft) !important; }

/* ---------- Listening topic (AthenaPulse): calm header, one toolbar, only the metrics that exist ---------- */
.lt-head { align-items: flex-start; padding-top: 16px; padding-bottom: 14px; }
.lt-head h1 { font-size: 21px; }
.lt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; color: var(--text-3); font-size: 12.5px; }
.lt-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); margin-right: 2px; }
.lt-live.off { background: var(--text-3); box-shadow: none; }
.lt-sep { width: 1px; height: 12px; background: var(--line); margin: 0 4px; }
.lt-kw { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 500; border: 0; }
button.lt-kw.more { cursor: pointer; background: transparent; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
button.lt-kw.more:hover { color: var(--text); }
.lt-bar { display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line-2); flex: none; min-height: 48px; }
.lt-tabs { display: flex; gap: 22px; align-self: stretch; }
.lt-tabs a { display: flex; align-items: center; color: var(--text-3); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.lt-tabs a:hover { color: var(--text); text-decoration: none; }
.lt-tabs a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.lt-filters { margin-left: auto; min-width: 0; }
.lt-filters .fbar { background: none; border: 0; min-height: 0; gap: 8px; align-items: center; }
.lt-filters .fcol { flex-direction: row; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; width: auto; flex: none; }
.lt-filters .fcol:hover { background: var(--surface-2); }
.lt-filters .fcol-l { font-weight: 600; font-size: 12.5px; color: var(--text); }
.lt-filters .fcol-v { font-size: 12.5px; color: var(--text-3); }
.lt-filters .fcol-l::after { content: ':'; }
.lt-filters .fbar-r { padding: 0; }
.lt-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px 8px 12px; margin-bottom: 16px; border-radius: 10px; background: var(--warn-soft); color: var(--text-2); font-size: 12.5px; }
.lt-note > .ic { color: var(--warn); }
.lt-note > span { flex: 1; min-width: 240px; }
.lt-note details { font-size: 12px; } .lt-note summary { cursor: pointer; color: var(--text-2); }
.lt-note details[open] { flex-basis: 100%; order: 9; } .lt-note ul { margin: 6px 0 2px 16px; padding: 0; }
.lt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.lt-kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line-2); min-width: 0; }
.lt-kpi:last-child { border-right: 0; }
.lt-kpi span { font-size: 12.5px; color: var(--text-3); }
.lt-kpi b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.lt-kpi-foot { margin: 8px 2px 18px; font-size: 12px; color: var(--text-3); }
.lt-pair { align-items: stretch; }
.lt-sent { display: flex; align-items: center; gap: 24px; }
.lt-donut { position: relative; width: 140px; height: 140px; flex: none; }
.lt-donut > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.lt-donut b { font-size: 24px; font-weight: 600; letter-spacing: -.03em; } .lt-donut span { font-size: 12px; color: var(--text-3); }
.lt-sent dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; flex: 1; }
.lt-sent dt { font-size: 12px; color: var(--text-3); } .lt-sent dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.lt-ai { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); }
.lt-ai .card-h h3 .ic { color: var(--accent-strong); }
@media (max-width: 900px) { .lt-bar { flex-wrap: wrap; padding: 8px 16px; } .lt-filters { margin-left: 0; } .lt-sent { flex-direction: column; align-items: flex-start; } }
.lt-donut small { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
.lt-filters .fcol { padding: 0 8px 0 10px; }
.lt-filters .fcol-caret { position: static; transform: none; margin-left: 2px; }
.lt-donut { width: 156px; height: 156px; }
.lt-donut > div { padding: 0 28px; }
.lt-donut small { line-height: 1.25; }