/* platformpro — premium pro design system.
   Inspired by me2: flat, no glow, CSS-var theming (light/dark), Inter, 0.5px borders,
   8/12/99px radii. Extended for a data-dense ops panel: tables, tabs, toolbars, code. */
:root {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f5f7;
  --color-background-tertiary: #ececef;
  --color-page: #fbfbfc;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e76;
  --color-text-tertiary: #a0a0a8;
  --color-text-inverse: #ffffff;
  --color-border-primary: #d6d6db;
  --color-border-secondary: #e2e2e6;
  --color-border-tertiary: #e8e8ec;
  --primary: #4f46e5;
  --accent: var(--primary);
  --color-text-info: var(--primary);
  --color-border-info: var(--primary);
  --color-background-info: color-mix(in srgb, var(--primary) 11%, var(--color-background-primary));
  --color-text-success: #1a7f43; --color-border-success: #1a7f43; --color-background-success: #e9f6ef;
  --color-text-warning: #98640f; --color-border-warning: #98640f; --color-background-warning: #fbf1e2;
  --color-text-danger: #c0322b; --color-border-danger: #c0322b; --color-background-danger: #fcece9;
  --color-text-secondary-tag: #5d5d66; --color-background-secondary-tag: #efeff1;
  --color-overlay: rgba(0,0,0,.38);
  --color-focus-ring: color-mix(in srgb, var(--primary) 22%, transparent);
  --radius-sm: 8px; --radius-card: 12px; --radius-pill: 99px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --color-background-primary: #1c1c1e;
  --color-background-secondary: #28282b;
  --color-background-tertiary: #333337;
  --color-page: #161618;
  --color-text-primary: #f2f2f5;
  --color-text-secondary: #9e9ea6;
  --color-text-tertiary: #6c6c74;
  --color-text-inverse: #ffffff;
  --color-border-primary: #48484c;
  --color-border-secondary: #313135;
  --color-border-tertiary: #38383c;
  --color-background-info: color-mix(in srgb, var(--primary) 26%, var(--color-background-primary));
  --color-text-info: color-mix(in srgb, var(--primary) 72%, #ffffff);
  --color-border-info: color-mix(in srgb, var(--primary) 72%, #ffffff);
  --color-text-success: #4ea874; --color-border-success: #2f7d50; --color-background-success: #18271d;
  --color-text-warning: #c9962f; --color-border-warning: #8a6520; --color-background-warning: #2a2114;
  --color-text-danger: #d97a72; --color-border-danger: #9a4039; --color-background-danger: #2a1816;
  --color-text-secondary-tag: #a9a9b1; --color-background-secondary-tag: #303034;
  --color-overlay: rgba(0,0,0,.55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--color-page); color: var(--color-text-primary); font-family: var(--font);
  font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: var(--font); }
code, kbd, pre { font-family: var(--mono); }
.ico { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.hidden { display: none !important; }
.muted { color: var(--color-text-secondary); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* No boot splash. The app paints in well under a second, and an indicator that appears and
   vanishes in that window is a flicker, not information — better to show nothing than to flash
   something. The inline .spin bar below is still used where a real wait happens (network calls
   behind a button), which is where a progress hint actually earns its place. */
@keyframes ppslide { 0% { transform: translateX(-110%); } 55% { transform: translateX(150%); } 100% { transform: translateX(150%); } }

/* ------------------------------ login ------------------------------ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--color-page); }
.auth-card { width: 100%; max-width: 400px; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); padding: 2rem; }
.auth-card .logo { width: 46px; height: 46px; border-radius: var(--radius-sm); margin-bottom: 1.25rem;
  background: var(--color-background-info); color: var(--color-text-info); display: grid; place-items: center; }
.auth-card h1 { font-size: 22px; margin: 0 0 4px; font-weight: 600; }
.auth-card .sub { color: var(--color-text-secondary); margin: 0 0 1.5rem; font-size: 14px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 1.125rem 0; color: var(--color-text-tertiary); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 0.5px; background: var(--color-border-tertiary); }

/* ------------------------------ shell ------------------------------ */
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--color-background-primary); border-right: 0.5px solid var(--color-border-tertiary);
  padding: 1.125rem 0.875rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.side .brand { font-weight: 600; font-size: 16px; padding: 4px 8px 1rem; display: flex; align-items: center; gap: 11px; }
.side .brand .logo { width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;
  background: var(--color-background-info); color: var(--color-text-info); display: grid; place-items: center; }
.side .brand .logo-img { width: 28px; height: 28px; border-radius: var(--radius-sm); object-fit: cover; }
.nav-group { margin-top: 10px; }
.nav-group > .nav-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); padding: 6px 11px 4px; }
.side nav, .nav-group { display: flex; flex-direction: column; gap: 2px; }
.side nav a, .nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-weight: 400; font-size: 13.5px; cursor: pointer; }
.nav-item .ico { color: var(--color-text-tertiary); }
.nav-item:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.nav-item.active { background: var(--color-background-info); color: var(--color-text-info); font-weight: 500; }
.nav-item.active .ico { color: var(--color-text-info); }
.nav-item .badge { margin-left: auto; font-size: 11.5px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-background-success); color: var(--color-text-success); }
.side .foot { margin-top: auto; padding-top: 12px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); }
.side-user .av { width: 30px; height: 30px; border-radius: var(--radius-pill); flex: none; display: grid; place-items: center;
  font-weight: 600; font-size: 13px; background: var(--color-background-info); color: var(--color-text-info); }
/* When an account photo is set the tile stops being a coloured initials chip and
   becomes the frame for the image, so the picture fills it edge to edge. */
.side-user .av.has-img { background: none; overflow: hidden; box-shadow: inset 0 0 0 0.5px var(--color-border-tertiary); }
.side-user .av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Settings → My account: the larger photo preview. */
.acct-av { width: 64px; height: 64px; flex: none; border-radius: var(--radius-pill); overflow: hidden;
  display: grid; place-items: center; font-weight: 600; font-size: 22px;
  background: var(--color-background-info); color: var(--color-text-info);
  box-shadow: inset 0 0 0 0.5px var(--color-border-tertiary); }
.acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-user .who { min-width: 0; flex: 1; }
.side-user .who .nm { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .who .em { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* collapsible sidebar — rail (icon-only) mode */
.side .brand .brand-text { flex: 1; min-width: 0; }
.side-toggle { margin-left: auto; flex: none; background: none; border: 0; cursor: pointer; color: var(--color-text-tertiary);
  width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.side-toggle:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
@media (min-width: 881px) {
  .shell.collapsed { grid-template-columns: 64px 1fr; }
  .shell.collapsed .side { padding: 1.125rem 0.5rem; }
  .shell.collapsed .side .brand { flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 12px; }
  .shell.collapsed .side .brand .brand-text { align-items: center; text-align: center; }
  .shell.collapsed .side .brand .brand-name { display: none; }      /* hide the "Catter" name… */
  .shell.collapsed .side .brand .brand-ver { display: block; }      /* …keep logo + version */
  .shell.collapsed .side-toggle { margin: 2px auto 0; }
  .shell.collapsed .nav-group { margin-top: 6px; padding-top: 6px; border-top: 0.5px solid var(--color-border-tertiary); }
  .shell.collapsed .nav-group:first-of-type { border-top: 0; padding-top: 0; }
  .shell.collapsed .nav-group > .nav-label { display: none; }
  .shell.collapsed .nav-item { justify-content: center; padding: 9px 0; gap: 0; }
  .shell.collapsed .nav-item > span { display: none; }
  .shell.collapsed .cmdk-trigger { width: 40px; margin: 2px auto 14px; padding: 0; justify-content: center; }
  .shell.collapsed .cmdk-trigger .cmdk-lbl, .shell.collapsed .cmdk-trigger kbd { display: none; }
  .shell.collapsed .side-user { justify-content: center; padding: 9px 0; gap: 0; border: 0; }
  .shell.collapsed .side-user .who, .shell.collapsed .side-user .icon-btn { display: none; }
}
/* premium file picker (backup restore drop-zone) */
.bk-drop { display: flex; align-items: center; gap: 12px; padding: 13px 15px; min-width: 300px; flex: 1;
  border: 1px dashed var(--color-border-secondary); border-radius: 12px; background: var(--color-background-secondary);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.bk-drop:hover { border-color: var(--color-text-info); background: var(--color-background-primary); }
.bk-drop.drag { border-color: var(--color-text-info); background: var(--color-background-info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-info) 18%, transparent); }
.bk-drop .bk-ic { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-background-primary); color: var(--color-text-info); border: 0.5px solid var(--color-border-tertiary); }
.bk-drop.has-file { border-style: solid; border-color: var(--color-border-tertiary); }
.bk-drop.has-file .bk-ic { color: var(--color-text-success); background: var(--color-background-success); }
.bk-drop .bk-fname { font-weight: 500; font-size: 13.5px; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-drop .bk-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* article groups — premium cards + setup form */
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 12px; }
.ag-card { border: 0.5px solid var(--color-border-tertiary); border-radius: 14px; background: var(--color-background-secondary);
  padding: 14px; display: flex; flex-direction: column; gap: 11px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ag-card:hover { border-color: var(--color-border-secondary); box-shadow: 0 8px 22px -14px rgba(0,0,0,.45); transform: translateY(-1px); }
.ag-card-top { display: flex; align-items: center; gap: 11px; }
.ag-card-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--color-background-info); color: var(--color-text-info); }
.ag-card-meta { flex: 1; min-width: 0; }
.ag-card-name { font-weight: 600; font-size: 14px; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-card-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.ag-card-actions { display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.ag-card:hover .ag-card-actions { opacity: 1; }
.ag-card-paths { display: flex; flex-wrap: wrap; gap: 5px; }
.ag-chip { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 6px; max-width: 100%;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-chip-more { color: var(--color-text-tertiary); }
.ag-empty-paths { font-size: 12px; color: var(--color-text-tertiary); font-style: italic; }
.ag-count { font-size: 11.5px; font-weight: 500; color: var(--color-text-info); background: var(--color-background-info);
  padding: 1px 9px; border-radius: var(--radius-pill); }
.ag-ta { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; }
.main { padding: 1.5rem 2rem 4rem; overflow: auto; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 16px; }
.topbar h2 { margin: 0; font-size: 22px; font-weight: 600; }
.topbar .sub { color: var(--color-text-secondary); font-size: 13.5px; margin-top: 4px; }
.topbar .actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* mobile */
.mobile-bar { display: none; }
.scrim { display: none; }
@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 50; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; }
  .scrim.show { display: block; position: fixed; inset: 0; background: var(--color-overlay); z-index: 49; }
  .main { padding: 1rem 1rem 4rem; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
  .mobile-bar .brand { font-weight: 600; font-size: 16px; }
  .row, .row-3 { grid-template-columns: 1fr; }
}

/* ------------------------------ stats ------------------------------ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1.25rem; }
.stat { background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 16px; }
.stat .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat .label { color: var(--color-text-secondary); font-size: 13px; }
.stat .si { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-background-info); color: var(--color-text-info); }
.stat .value { font-size: 26px; font-weight: 600; margin-top: 12px; font-variant-numeric: tabular-nums; }
.stat .delta { font-size: 12px; margin-top: 4px; color: var(--color-text-secondary); }
.stat.warn .si { background: var(--color-background-danger); color: var(--color-text-danger); }
.stat.ok .si { background: var(--color-background-success); color: var(--color-text-success); }

/* ------------------------- panels ------------------------- */
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.125rem; align-items: start; }
.grid-2.even { grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.125rem; align-items: start; }
@media (max-width: 1040px) { .grid-2, .grid-2.even { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }
.panel { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); overflow: hidden; }
.panel + .panel { margin-top: 1.125rem; }
/* ----- dashboard charts ----- */
@keyframes acDraw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.ac-line { stroke-dasharray: 1400; animation: acDraw 1.05s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes acGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.don-arc { animation: donSpin .9s cubic-bezier(.4,0,.2,1) forwards; transform-origin: center; }
@keyframes donSpin { from { stroke-dashoffset: 360; } }
.ac-wrap { cursor: crosshair; }
.ac-tip, .ac-dot, .ac-cursor { transition: opacity .12s ease; }
@keyframes wIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.w-in { animation: wIn .45s ease both; }
/* ----- geo country picker ----- */
.geo-regions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.geo-regions button { background: none; border: 0; padding: 0; font-size: 12.5px; color: #2f6fed; cursor: pointer; font-weight: 500; }
.geo-regions button:hover { text-decoration: underline; }
.geo-regions button.active { color: var(--color-text-primary); font-weight: 700; }
.geo-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 5px 32px 5px 8px; border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary); }
.geo-box:focus-within { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }
.geo-chips { display: contents; }
.geo-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(47,111,237,.10); color: #2f6fed; border: 1px solid rgba(47,111,237,.30); border-radius: 4px; padding: 2px 6px; font-size: 12.5px; white-space: nowrap; }
.geo-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.geo-search { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; color: var(--color-text-primary); font-size: 13px; height: 24px; }
.geo-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--color-text-tertiary); cursor: pointer; font-size: 16px; line-height: 1; }
.geo-clear:hover { color: var(--color-text-primary); }
.geo-drop { max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border-tertiary); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-background-primary); margin-top: -1px; box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 30; position: relative; }
.geo-opt { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 0.5px solid var(--color-border-tertiary); }
.geo-opt:hover { background: #2f6fed; color: #fff; }
.geo-opt:hover .geo-cc { color: rgba(255,255,255,.8); }
.geo-cc { font-size: 11px; color: var(--color-text-tertiary); font-family: var(--mono); }
.geo-none { color: var(--color-text-tertiary); cursor: default; }
.geo-none:hover { background: none; color: var(--color-text-tertiary); }
/* ----- campaign KPI bar (me2-style) ----- */
.kpibar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1200px) { .kpibar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .kpibar { grid-template-columns: repeat(2, 1fr); } }
.kpibar .kpi { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); padding: 12px 14px; }
.kpibar .kl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--color-text-tertiary); font-weight: 500; }
.kpibar .kv { font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.kpibar .kv.pos { color: var(--color-text-success); } .kpibar .kv.neg-t { color: var(--color-text-danger); }
.kpibar .ks { font-size: 11px; color: var(--color-text-tertiary); }
/* ----- status pipeline group rows + inline status select ----- */
.tbl tr.grp-row td { background: var(--color-background-secondary, rgba(125,125,125,.05)); padding: 7px 12px; position: sticky; }
.grp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }
.grp-name { font-weight: 700; font-size: 13px; }
.grp-cnt { display: inline-block; min-width: 18px; text-align: center; background: var(--color-background-tertiary, rgba(125,125,125,.14)); border-radius: 10px; padding: 0 7px; font-size: 11px; margin-left: 8px; color: var(--color-text-secondary); }
.grp-add { margin-left: 14px; background: none; border: 0; color: var(--color-text-tertiary); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.grp-add:hover { color: var(--primary); }
.pipe-sel { border: 1px solid var(--color-border-tertiary); border-radius: 5px; background: var(--color-background-primary); padding: 2px 4px; font-size: 11.5px; cursor: pointer; max-width: 110px; }
/* ----- collapsible stats templates ----- */
.st-tmpl { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); margin-bottom: 10px; overflow: hidden; background: var(--color-background-primary); }
.st-tmpl > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
.st-tmpl > summary::-webkit-details-marker { display: none; }
.st-tmpl > summary:hover { background: var(--color-background-secondary, rgba(125,125,125,.04)); }
.st-tmpl .st-dot { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.st-tmpl .st-logo-i { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; flex-shrink: 0; }
.st-tmpl .st-nm { font-weight: 600; font-size: 13px; }
.st-tmpl .st-url { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tmpl .st-chev { margin-left: auto; color: var(--color-text-tertiary); transition: transform .15s ease; }
.st-tmpl[open] > summary .st-chev { transform: rotate(180deg); }
.st-tmpl .st-body { padding: 4px 14px 14px; border-top: 0.5px solid var(--color-border-tertiary); }
/* ----- connect-source logo picker + connect animation ----- */
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cs-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s; }
.cs-card:hover { transform: translateY(-1px); border-color: var(--color-border-secondary); }
.cs-card.on { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(47,111,237,.18); }
.cs-card img { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.cs-card .cs-dot { width: 26px; height: 26px; border-radius: 7px; }
.cs-card .cs-nm { font-size: 12px; font-weight: 600; color: var(--color-text-primary); text-align: center; }
.cs-conn { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-background-secondary, rgba(125,125,125,.06)); font-size: 13px; animation: wIn .25s ease; }
.cs-conn.ok { color: var(--color-text-success); background: rgba(34,197,94,.10); }
/* ----- AI spinner + print ----- */
.spin { width: 22px; height: 3px; border-radius: 2px; background: var(--color-border-tertiary);
  display: inline-block; position: relative; overflow: hidden; flex-shrink: 0; vertical-align: middle;
  margin: 0 2px; }
.spin::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; border-radius: 2px;
  background: var(--primary); animation: ppslide 1.15s cubic-bezier(.45, .05, .35, 1) infinite; }
/* A few call sites wrap an icon in .spin to spin it; the bar replaces the icon rather than sitting
   next to a stray glyph. */
.spin > svg { display: none; }
@media print {
  .side, #scrim, .topbar .btn, .toolbar2, .bulkbar, .seg { display: none !important; }
  .shell, main { display: block !important; }
  body, .shell { background: #fff !important; }
  .panel { break-inside: avoid; border: 0.5px solid #ccc !important; box-shadow: none !important; }
  .kpibar { grid-template-columns: repeat(3, 1fr) !important; }
}
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 1.25rem; border-bottom: 0.5px solid var(--color-border-tertiary); gap: 12px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-head h3 .ico { color: var(--color-text-secondary); }
.panel-body { padding: 1rem 1.25rem; }
.panel-body.flush { padding: 0; }

/* ------------------------------ tables ------------------------------ */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th { text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-tertiary); padding: 10px 16px; border-bottom: 0.5px solid var(--color-border-tertiary); white-space: nowrap; }
table.tbl td { padding: 12px 16px; border-bottom: 0.5px solid var(--color-border-tertiary); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--color-background-secondary); }
table.tbl td .sub { color: var(--color-text-secondary); font-size: 12px; margin-top: 2px; }
.col-actions { text-align: right; white-space: nowrap; }
.col-actions .icon-btn + .icon-btn { margin-left: 4px; }

/* ------------------------------ buttons ------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0.5px solid var(--color-border-tertiary);
  background: transparent; color: var(--color-text-primary); border-radius: var(--radius-sm); padding: 8px 14px;
  font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; height: 36px; }
.btn:hover { background: var(--color-background-secondary); }
.btn-primary, .btn-accent { background: var(--color-background-info); color: var(--color-text-info); border: none; }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 18%, var(--color-background-primary)); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--color-background-danger); color: var(--color-text-danger); border: none; }
.btn-danger:hover { background: color-mix(in srgb, var(--color-text-danger) 14%, var(--color-background-primary)); }
.btn-sm { padding: 6px 11px; font-size: 12px; height: 30px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-tertiary); background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.icon-btn:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.danger:hover { background: var(--color-background-danger); color: var(--color-text-danger); }
.seg { display: inline-flex; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--color-text-secondary); font-weight: 400; font-size: 12.5px; padding: 6px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.seg button.active { background: var(--color-background-secondary); color: var(--color-text-primary); font-weight: 500; }

/* ------------------------------ tabs ------------------------------ */
.tabs { display: flex; gap: 4px; border-bottom: 0.5px solid var(--color-border-tertiary); margin-bottom: 1.25rem; overflow-x: auto; }
.tabs button { border: 0; background: transparent; color: var(--color-text-secondary); font-size: 13.5px; font-weight: 500;
  padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -0.5px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; }
/* Tab icons sit a shade back from the label until the tab is active. */
.tabs button .ico { color: var(--color-text-tertiary); flex: 0 0 auto; transition: color .12s; }
.tabs button:hover .ico { color: var(--color-text-secondary); }
.tabs button.active .ico { color: var(--color-text-info); }
.tabs button:hover { color: var(--color-text-primary); }
.tabs button.active { color: var(--color-text-info); border-bottom-color: var(--color-border-info); }

/* ------------------------------ form ------------------------------ */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--color-text-secondary); }
.field input, .field select, .field textarea { width: 100%; height: 36px; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); color: var(--color-text-primary);
  padding: 0 12px; font-size: 14px; font-weight: 400; outline: none; }
.field textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; font-family: var(--mono); font-size: 13px; }
.field input[type="checkbox"], .field input[type="radio"] { width: auto; height: auto; margin: 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-tertiary); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.field .hint { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 6px; }
.field .hint code { background: var(--color-background-secondary); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
input[type="color"] { padding: 3px; cursor: pointer; height: 36px; }
.err { color: var(--color-text-danger); font-size: 13px; margin-top: 8px; }

/* search box */
.searchbox { position: relative; }
.searchbox .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; }
.searchbox input { height: 36px; padding: 0 12px 0 34px; width: 240px; max-width: 100%; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: 13.5px; outline: none; }
.searchbox input:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* ------------------------- toggle switch ------------------------- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); }
.switch-row + .switch-row { margin-top: 10px; }
.switch-row .switch-label { font-size: 14px; font-weight: 500; }
.switch-row .switch-sub { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--color-background-tertiary); border-radius: var(--radius-pill); transition: background .15s; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + .slider { background: var(--color-text-success); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ------------------------- badges / pills ------------------------- */
.sb, .pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; padding: 2px 10px; }
.sb-info, .pill.active, .pill.on { background: var(--color-background-info); color: var(--color-text-info); }
.sb-success, .pill.enabled, .pill.live { background: var(--color-background-success); color: var(--color-text-success); }
.sb-warning, .pill.paused { background: var(--color-background-warning); color: var(--color-text-warning); }
.sb-danger, .pill.disabled, .pill.off { background: var(--color-background-danger); color: var(--color-text-danger); }
.sb-secondary, .pill.draft { background: var(--color-background-secondary-tag); color: var(--color-text-secondary-tag); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.live { background: var(--color-text-success); box-shadow: 0 0 0 3px var(--color-background-success); }

/* ------------------------- code / copy ------------------------- */
.codebox { display: flex; align-items: center; gap: 8px; background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 7px 10px; font-family: var(--mono); font-size: 12.5px; }
.codebox .code-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); }

/* ------------------------- empty / loading ------------------------- */
.empty { text-align: center; padding: 2.75rem 1.25rem; color: var(--color-text-secondary); }
.empty .ico { display: block; margin: 0 auto 12px; color: var(--color-text-tertiary); }
.empty h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.skel { background: var(--color-background-secondary); border-radius: 6px; height: 14px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* ------------------------- modal ------------------------- */
.modal-scrim { position: fixed; inset: 0; background: var(--color-overlay); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); }
.modal.lg { max-width: 760px; }
/* Fullscreen form: near-full viewport, fixed head/foot, scrolling body */
.modal.fullscreen { max-width: 96vw; width: 96vw; max-height: 94vh; height: 94vh; display: flex; flex-direction: column; overflow: hidden; }
.modal.fullscreen > .modal-body { flex: 1; overflow: auto; }
.modal.fullscreen > .modal-head, .modal.fullscreen > .modal-foot { flex: none; }
/* Bottom sheet: pinned to the bottom edge, slides up, rounded top corners */
.modal-scrim.scrim-sheet { place-items: end center; padding: 0; }
.modal.sheet { width: 820px; max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.modal.sheet.open { transform: none; }
.modal.sheet > .modal-body { flex: 1; overflow: auto; }
.modal.sheet > .modal-head, .modal.sheet > .modal-foot { flex: none; }
/* Wide form shell: long forms (campaign editor) get ~1280px, a pinned head/footer and a
   scrolling body. Every value is a clamp, so narrow viewports keep the old behaviour. */
.modal.lg.wide { max-width: min(1280px, 94vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.modal.lg.wide > .modal-body { flex: 1; overflow: auto; }
.modal.lg.wide > .modal-head, .modal.lg.wide > .modal-foot { flex: none; }
.drawer.wide { width: 980px; } /* wide enough that the section rail still fits beside the form */
.modal.sheet.wide { width: 1100px; }

.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 0.5px solid var(--color-border-tertiary); }

/* Custom color picker (no native OS dialog — avoids the browser freeze) */
.cpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpick-sw { width: 34px; height: 34px; border-radius: 8px; border: 0.5px solid var(--color-border-tertiary); flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.cpick-hex { width: 96px; height: 34px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm, 8px); padding: 0 10px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; text-transform: lowercase; }
.cpick-hex:focus { outline: none; border-color: var(--primary, #3b82f6); }
.cpick-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.cpick-dot { width: 20px; height: 20px; border-radius: 6px; border: 0.5px solid var(--color-border-tertiary); cursor: pointer; padding: 0; transition: transform .08s; }
.cpick-dot:hover { transform: scale(1.15); }

/* Article-group weighted rows */
.agw-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.agw-path { flex: 1; min-width: 0; height: 36px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm, 8px); padding: 0 12px; background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; }
.agw-w { width: 64px; height: 36px; text-align: center; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm, 8px); background: var(--color-background-primary); color: var(--color-text-primary); font-size: 13px; }
.agw-pct { color: var(--color-text-tertiary); font-size: 13px; margin-left: -2px; }
.agw-path:focus, .agw-w:focus { outline: none; border-color: var(--primary, #3b82f6); }

/* Premium segmented PIN input */
.pin-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-background-secondary); color: var(--primary, #3b82f6); box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }
.pin-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 9px; }
.pinbox { display: flex; gap: 10px; justify-content: center; }
.pincell { width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 600; border: 1px solid var(--color-border-tertiary); border-radius: 12px; background: var(--color-background-secondary); color: var(--color-text-primary); caret-color: var(--primary, #3b82f6); transition: border-color .12s, box-shadow .12s, transform .1s, background .12s; }
.pincell:focus { outline: none; border-color: var(--primary, #3b82f6); background: var(--color-background-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #3b82f6) 20%, transparent); transform: translateY(-1px); }
.pinbox.err .pincell { border-color: var(--color-text-danger, #ef4444); box-shadow: none; }
.pinbox.shake { animation: pinshake .4s; }
.pinerr { min-height: 16px; margin-top: 14px; font-size: 12.5px; font-weight: 500; color: var(--color-text-danger, #ef4444); text-align: center; }
@keyframes pinshake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }


/* ------------------------- board / gantt / calendar ------------------------- */
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
.board-col { flex: 0 0 270px; background: var(--color-background-secondary); border-radius: var(--radius-card); padding: 12px; }
.board-col-h { font-weight: 600; font-size: 13px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.board-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 11px; margin-bottom: 8px; }
.board-card .bc-name { font-weight: 500; font-size: 13.5px; cursor: pointer; }
.board-card .bc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.board-card .bc-act { display: flex; gap: 4px; margin-top: 8px; }

.gantt { overflow-x: auto; }
.gantt-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
.gantt-label { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.gantt-track { position: relative; height: 22px; background: var(--color-background-secondary); border-radius: var(--radius-pill); }
.gantt-bar { position: absolute; top: 3px; height: 16px; border-radius: var(--radius-pill); background: var(--primary); min-width: 6px; }
.gantt-head { display: grid; grid-template-columns: 200px 1fr; gap: 10px; font-size: 11px; color: var(--color-text-tertiary); padding-bottom: 6px; }
.gantt-ticks { display: flex; justify-content: space-between; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-align: center; padding: 4px 0; text-transform: uppercase; }
.cal-cell { min-height: 84px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 6px; background: var(--color-background-primary); }
.cal-cell.muted-day { background: var(--color-background-secondary); opacity: .6; }
.cal-day { font-size: 11px; color: var(--color-text-secondary); margin-bottom: 4px; }
.cal-ev { font-size: 11px; padding: 2px 6px; border-radius: var(--radius-pill); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  background: var(--color-background-info); color: var(--color-text-info); }

/* ------------------------- toolbar dropdowns ------------------------- */
.toolbar2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.dd { position: relative; display: inline-block; }
.dd > summary { list-style: none; cursor: pointer; }
.dd > summary::-webkit-details-marker { display: none; }
.dd[open] > summary.btn { background: var(--color-background-secondary); }
.dd-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 240px; max-height: 340px; overflow: auto;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); padding: 14px; }
.dd-panel.right { left: auto; right: 0; }
.dd-panel .ck { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.dd-panel .dd-act { display: flex; gap: 8px; margin-top: 10px; }
.dd-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); margin-bottom: 8px; }

/* ---------------- logo/avatar select (traffic source / member) ---------------- */
.lsel { display: block; width: 100%; }
.lsel > summary.lsel-trigger { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary);
  font-size: 13px; color: var(--color-text-primary); box-sizing: border-box; }
.lsel[open] > summary.lsel-trigger { border-color: var(--color-border-secondary); }
.lsel > summary.lsel-trigger .ico:last-child { margin-left: auto; color: var(--color-text-tertiary); flex: 0 0 auto; }
.lsel-panel { padding: 6px; min-width: 100%; }
.lsel-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.lsel-opt:hover { background: var(--color-background-secondary); }
.lsel-opt.on { background: var(--color-background-secondary); font-weight: 500; }
.lsel-img { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.lsel-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.lsel-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* multi-select (Traffic source): wrapping chip trigger + per-option checkmark */
.lsel-multi > summary.lsel-trigger-multi { height: auto; min-height: 36px; flex-wrap: wrap; gap: 5px; padding-top: 5px; padding-bottom: 5px; }
.lsel-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; padding: 2px 8px 2px 5px; font-size: 12.5px; max-width: 100%; }
.lsel-chip .lsel-img { width: 15px; height: 15px; border-radius: 4px; }
.lsel-chip .lsel-dot { width: 10px; height: 10px; }
.lsel-multi .lsel-opt .lsel-check { margin-left: auto; display: inline-flex; opacity: 0; color: var(--primary); flex: 0 0 auto; }
.lsel-multi .lsel-opt.on .lsel-check { opacity: 1; }

/* The domain verifier used to re-declare .spin as a rotation; it now inherits the bar above. */

/* ---------------- ⌘K command palette ---------------- */
/* Command trigger. A fixed 36px row that never wraps: the label truncates instead, because a
   two-line search box in a 200px sidebar is the fastest way to make a panel look unfinished.
   At rest it is a quiet filled field with no border; the hairline and lift arrive on hover, so
   the sidebar reads as navigation until you reach for it. */
.cmdk-trigger { display: flex; align-items: center; gap: 9px; width: calc(100% - 24px); margin: 2px 12px 14px;
  height: 36px; padding: 0 9px 0 10px; border: 0.5px solid transparent; border-radius: var(--radius-sm);
  background: var(--color-background-secondary); color: var(--color-text-tertiary);
  font-size: 13px; font-family: inherit; text-align: left; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
.cmdk-trigger:hover { background: var(--color-background-primary); border-color: var(--color-border-tertiary);
  color: var(--color-text-secondary); box-shadow: 0 1px 2px rgba(0, 0, 0, .045); }
.cmdk-trigger:active { transform: translateY(.5px); }
.cmdk-trigger:focus-visible { outline: 0; border-color: var(--color-border-info);
  box-shadow: 0 0 0 3px var(--color-focus-ring); }
.cmdk-ic { display: flex; flex: none; opacity: .75; transition: opacity .16s ease, color .16s ease; }
.cmdk-trigger:hover .cmdk-ic { opacity: 1; color: var(--color-text-info); }
.cmdk-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-trigger kbd { flex: none; font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 4px 5px;
  border-radius: 5px; border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  color: var(--color-text-tertiary); opacity: .8; transition: opacity .16s ease; }
.cmdk-trigger:hover kbd { opacity: 1; }
.cmdk-esc { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary); color: var(--color-text-tertiary); }
.cmdk-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.4); backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding-top: 12vh; animation: cmdkfade .12s ease; }
@keyframes cmdkfade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-box { width: min(560px, 92vw); background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--radius-card); box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.cmdk-input .cmdk-ico { color: var(--color-text-tertiary); display: flex; }
.cmdk-input input { flex: 1; border: 0; background: transparent; outline: none; color: var(--color-text-primary); font-size: 15px; }
.cmdk-list { max-height: 52vh; overflow: auto; padding: 6px; }
.cmdk-group { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-tertiary); padding: 8px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--color-text-primary); }
.cmdk-item .ico { color: var(--color-text-tertiary); flex: 0 0 auto; }
.cmdk-item.on, .cmdk-item:hover { background: var(--color-background-secondary); }
.cmdk-item.on .ico { color: var(--accent, var(--color-text-primary)); }
.cmdk-empty { padding: 20px; text-align: center; color: var(--color-text-tertiary); font-size: 13px; }

/* Resolved tracking-URL card, shown above the command list when you paste a link. */
.cmdk-link { margin: 10px 12px 0; padding: 12px 13px; border-radius: 10px; font-size: 12.5px;
  background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); }
.cmdk-link.busy, .cmdk-link.none { display: flex; align-items: flex-start; gap: 9px; color: var(--color-text-secondary); }
.cmdk-link.busy { align-items: center; }
.cmdk-link.none b { display: block; color: var(--color-text-primary); font-size: 13px; margin-bottom: 2px; }
.cmdk-link .cl-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.cmdk-link .cl-name { font-weight: 600; font-size: 14px; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cmdk-link .cl-by { margin-left: auto; font-size: 10.5px; color: var(--color-text-tertiary); }
.cmdk-link .cl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.cmdk-link .cl-grid > div { min-width: 0; }
.cmdk-link .cl-grid span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); }
.cmdk-link .cl-grid b { display: block; font-weight: 500; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-link .cl-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 11px; border-top: 0.5px solid var(--color-border-tertiary); }
@media (max-width: 560px) { .cmdk-link .cl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- RTB waterfall builder ---------------- */
.wf-cols { display: flex; align-items: center; gap: 10px; padding: 0 6px 6px 44px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-tertiary); }
.wf-cols span:first-child { flex: 1; }
.wf-cols span:nth-child(2) { width: 118px; }
.wf-cols span:last-child { width: 60px; }
.wf-card { display: flex; gap: 10px; align-items: stretch; padding: 10px; margin-bottom: 8px;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-secondary);
  transition: border-color .15s, opacity .15s; }
.wf-card:hover { border-color: var(--color-border-secondary); }
.wf-card.off { opacity: .5; }
.wf-num { flex: 0 0 26px; display: grid; place-items: center; align-self: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent, #4f46e5); color: #fff; font-size: 12px; font-weight: 700; }
.wf-card.off .wf-num { background: var(--color-background-tertiary, #d4d4d8); color: var(--color-text-tertiary); }
.wf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-top { display: flex; align-items: center; gap: 8px; }
/* network logo dropdown */
.wf-net { position: relative; flex: 1; min-width: 130px; }
.wf-net-trig { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary);
  color: var(--color-text-primary); font-size: 13px; cursor: pointer; }
.wf-net.open .wf-net-trig { border-color: var(--accent, var(--color-border-secondary)); }
.wf-net-trig .wf-net-nm { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-net-trig .ico:last-child { color: var(--color-text-tertiary); flex: 0 0 auto; transition: transform .15s; }
.wf-net.open .wf-net-trig .ico:last-child { transform: rotate(90deg); }
.wf-net-logo { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; background: var(--color-background-secondary); }
.wf-net-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent, #4f46e5); flex: 0 0 auto; }
.wf-net-pop { display: none; position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; min-width: 170px;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary); border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(0,0,0,.28); padding: 5px; max-height: 240px; overflow: auto; }
.wf-net.open .wf-net-pop { display: block; }
.wf-net-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.wf-net-opt:hover { background: var(--color-background-secondary); }
.wf-net-opt.on { background: var(--color-background-secondary); font-weight: 500; }

/* premium endpoint box */
.wf-ep-wrap { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary); transition: border-color .15s; }
.wf-ep-wrap:focus-within { border-color: var(--accent, var(--color-border-secondary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4f46e5) 12%, transparent); }
.wf-ep-wrap .ico { color: var(--color-text-tertiary); flex: 0 0 auto; }
.wf-ep-wrap .wf-ep { flex: 1; min-width: 0; border: 0 !important; height: 34px !important; background: transparent; padding: 0; font-size: 12.5px; }
.wf-floor-wrap { display: flex; align-items: center; height: 34px; width: 118px; flex: 0 0 118px;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary); overflow: hidden; }
.wf-floor-wrap .wf-cur { padding: 0 2px 0 8px; color: var(--color-text-tertiary); font-size: 13px; }
.wf-floor-wrap .wf-floor { flex: 1; min-width: 0; border: 0 !important; height: 32px !important; background: transparent; padding: 0 2px; text-align: right; }
.wf-floor-wrap .wf-cpm { padding: 0 8px 0 2px; color: var(--color-text-tertiary); font-size: 10px; font-weight: 600; }
.wf-sw { flex: 0 0 auto; }
.wf-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.wf-mini { display: grid; place-items: center; width: 26px; height: 30px; border: 0; background: transparent; border-radius: 6px;
  color: var(--color-text-tertiary); cursor: pointer; }
.wf-mini:hover:not(:disabled) { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.wf-mini.danger:hover:not(:disabled) { color: var(--color-text-danger); }
.wf-mini:disabled { opacity: .3; cursor: default; }
.wf-ep { width: 100%; box-sizing: border-box; }
.wf-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; text-align: center;
  color: var(--color-text-tertiary); border: 1px dashed var(--color-border-tertiary); border-radius: var(--radius-sm); margin-bottom: 8px; }
.wf-empty div { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.wf-empty span { font-size: 12px; }

/* ---------------- macro reference chips ---------------- */
.macro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.macro-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 9px; cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary); border-radius: 7px; background: var(--color-background-secondary); text-align: left; }
.macro-chip:hover { border-color: var(--accent); }
.macro-chip .mono { font-size: 12px; color: var(--color-text-primary); }
.macro-chip span:last-child { font-size: 10.5px; color: var(--color-text-tertiary); }

/* ---------------- traffic-light policy segments ---------------- */
.seg-tl button { text-transform: capitalize; transition: background-color .28s ease, color .28s ease, box-shadow .28s ease; }
.seg-tl button.active { color: #fff; font-weight: 600; animation: tlpop .32s cubic-bezier(.34,1.56,.64,1); }
.seg-tl button.active[data-v="allow"] { background: #16a34a; box-shadow: 0 2px 10px rgba(22,163,74,.35); }
.seg-tl button.active[data-v="soft"]  { background: #f59e0b; box-shadow: 0 2px 10px rgba(245,158,11,.35); }
.seg-tl button.active[data-v="block"] { background: #dc2626; box-shadow: 0 2px 10px rgba(220,38,38,.4); }
@keyframes tlpop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---------------- conversion funnel ---------------- */
.fn-stage { margin-bottom: 14px; }
.fn-stage:last-child { margin-bottom: 0; }
.fn-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.fn-label { font-size: 13px; color: var(--color-text-secondary); }
.fn-val { font-size: 15px; font-weight: 600; }
.fn-rate { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); margin-left: 4px; }
.fn-bar { height: 12px; border-radius: 7px; background: var(--color-background-tertiary); overflow: hidden; }
.fn-fill { height: 100%; border-radius: 7px; transition: width .5s cubic-bezier(.22,1,.36,1); }

/* ---------------- notifications center ---------------- */
.bell-btn { position: relative; }
.bell-dot { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--color-text-danger, #c0322b); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
.notifpop { position: fixed; z-index: 210; width: min(340px, 92vw); background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary); border-radius: var(--radius-card); box-shadow: 0 16px 40px rgba(0,0,0,.3); overflow: hidden; animation: cmdkfade .12s ease; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 13px; font-weight: 600; }
.notif-list { max-height: 60vh; overflow: auto; }
.notif-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.notif-item:last-child { border-bottom: 0; }
.notif-ic { flex: 0 0 auto; margin-top: 1px; }
.notif-t { font-size: 13px; font-weight: 500; }
.notif-b { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.notif-time { font-size: 11px; color: var(--color-text-tertiary); margin-top: 3px; }
.notif-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px; color: var(--color-text-tertiary); font-size: 13px; }
/* staggered entrance for popover items */
.notif-item { animation: notifItem .26s ease both; }
@keyframes notifItem { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* bell ring + dot pop when something new arrives */
.bell-btn.has-new { animation: bellRing .6s ease; }
@keyframes bellRing { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-13deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
.bell-dot { animation: dotPop .3s cubic-bezier(.2,.9,.3,1.4); }
@keyframes dotPop { from { transform: scale(0); } to { transform: scale(1); } }
/* live notification toasts — minimalist premium (glass, no boxy tile, subtle countdown) */
.notif-toasts { position: fixed; top: 60px; right: 18px; z-index: 240; display: flex; flex-direction: column; gap: 9px; width: min(318px, 90vw); pointer-events: none; }
.notif-toast { pointer-events: auto; position: relative; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; overflow: hidden;
  background: color-mix(in srgb, var(--color-background-primary) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 15px;
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.55); padding: 12px 14px 13px;
  animation: notifIn .45s cubic-bezier(.16,1,.3,1) both; }
.notif-toast.out { animation: notifOut .25s ease forwards; }
.notif-toast .nt-ic { flex: none; margin-top: 1px; opacity: .95; }
.notif-toast .nt-t { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; padding-right: 14px; }
.notif-toast .nt-b { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-toast .nt-x { position: absolute; top: 9px; right: 9px; color: var(--color-text-tertiary); opacity: 0; transition: opacity .15s; display: grid; place-items: center; }
.notif-toast:hover .nt-x { opacity: .75; }
.notif-toast .nt-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left;
  background: var(--ntc, var(--color-text-info)); opacity: .45; animation: ntBar 6.5s linear forwards; }
@keyframes ntBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes notifIn { from { opacity: 0; transform: translateY(-9px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes notifOut { to { opacity: 0; transform: translateX(28px); } }

/* ---------------- active sessions & login map ---------------- */
.sess-map { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sess-flag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary); font-size: 16px; }
.sess-flag b { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.sess-flag span { font-size: 11px; color: var(--color-text-tertiary); }
.sess-list { display: flex; flex-direction: column; gap: 8px; }
.sess-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); }
.sess-row.current { border-color: var(--color-border-success); background: var(--color-background-success); }
.sess-ico { color: var(--color-text-secondary); flex: 0 0 auto; }
.sess-main { flex: 1; min-width: 0; }
.sess-line1 { font-size: 13px; font-weight: 500; }
.sess-line2 { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- bulk operations ---------------- */
.tbl th.col-sel, .tbl td.col-sel { width: 36px; text-align: center; padding-left: 12px; padding-right: 0; }
.col-sel input[type=checkbox] { cursor: pointer; }
.bulkbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 120;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--radius-pill);
  background: #1f1f23; color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.45); border: 0.5px solid rgba(255,255,255,.08); animation: cmdkfade .14s ease; }
.bulkbar .bulk-count { font-size: 13px; font-weight: 600; padding-left: 4px; color: #fff; }
.bulkbar .bulk-acts { display: flex; gap: 6px; }
.bulkbar .btn { height: 30px; padding: 0 12px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.14); color: #fff; font-weight: 500; transition: background-color .15s; }
.bulkbar .btn .ico { color: #fff; }
.bulkbar .btn:hover { background: rgba(255,255,255,.26); }
.bulkbar .btn.btn-ghost { background: transparent; }
.bulkbar .btn.btn-ghost:hover { background: rgba(255,255,255,.14); }
.bulkbar .btn.btn-danger { background: #dc2626; }
.bulkbar .btn.btn-danger .ico { color: #fff; }
.bulkbar .btn.btn-danger:hover { background: #ef4444; }

/* ------------------------- targeting cards ------------------------- */
.tcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tcards.os { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.tcard { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 14px 8px; text-align: center;
  cursor: pointer; background: var(--color-background-primary); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tcard:hover { background: var(--color-background-secondary); }
.tcard.on { border: 2px solid var(--color-border-info); background: var(--color-background-info); padding: 13px 7px; }
.tcard .ico { color: var(--color-text-secondary); }
.tcard.on .ico { color: var(--color-text-info); }
.tcard .tc-l { font-size: 13px; font-weight: 500; }
.tcard .tc-s { font-size: 10.5px; color: var(--color-text-secondary); }

/* ------------------------- long-form section rail ------------------------- */
.cform-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 28px; align-items: start; }
.cform-body.cform-narrow { display: block; }
.cform-body.cform-narrow .cform-rail { display: none; }
.cform-main { min-width: 0; }
.cform-rail { position: sticky; top: 0; align-self: start; padding-top: 2px; }
.cform-rail-t { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-tertiary); padding: 0 10px; margin-bottom: 8px; }
.cform-rail-list { display: flex; flex-direction: column; gap: 1px; max-height: calc(92vh - 190px); overflow: auto;
  border-left: 0.5px solid var(--color-border-tertiary); }
.cform-rail-i { position: relative; text-align: left; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; line-height: 1.3; color: var(--color-text-secondary);
  padding: 7px 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: background-color .12s, color .12s; }
.cform-rail-i::before { content: ""; position: absolute; left: -0.5px; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: transparent; transition: background-color .12s; }
.cform-rail-i:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.cform-rail-i.on { color: var(--color-text-primary); font-weight: 600; background: var(--color-background-secondary); }
.cform-rail-i.on::before { background: var(--primary); }

/* Section heading inside a long form (anchor target for the rail above) */
.fsec-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); margin: 18px 0 10px; border-bottom: 0.5px solid var(--color-border-tertiary);
  padding-bottom: 6px; scroll-margin-top: 12px; }
.cform-main > .fsec-h:first-child { margin-top: 0; }

/* ------------------------- anti-fraud filter panel ------------------------- */
.af-wrap { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card);
  background: var(--color-background-primary); padding: 14px; container-type: inline-size; }
.af-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.af-head-l { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.af-head-l .ico { color: var(--color-text-tertiary); }
.af-score { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--radius-pill);
  border: 0.5px solid var(--color-border-tertiary); color: var(--color-text-secondary); background: var(--color-background-secondary);
  white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s, border-color .15s; }
.af-score.off, .af-score.low { background: var(--color-background-warning); color: var(--color-text-warning); border-color: var(--color-border-warning); }
.af-score.std { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }
.af-score.max { background: var(--color-background-success); color: var(--color-text-success); border-color: var(--color-border-success); }

/* Two cards per row once the panel itself is wide enough — a container query, not a viewport one,
   because this panel sits in shells from ~460px (drawer) to ~1000px (wide popup). */
.af-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@container (min-width: 620px) { .af-grid { grid-template-columns: 1fr 1fr; } }
.af-card { display: flex; align-items: center; gap: 11px; padding: 11px 12px; cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
  background: var(--color-background-primary); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.af-card:hover { background: var(--color-background-secondary); border-color: var(--color-border-secondary); }
.af-card.on { border-color: var(--color-border-success); background: var(--color-background-success);
  box-shadow: inset 2px 0 0 var(--color-text-success); }
.af-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--color-background-tertiary); transition: background-color .15s; }
.af-ico .ico { color: var(--color-text-secondary); }
.af-card.on .af-ico { background: var(--color-text-success); }
.af-card.on .af-ico .ico { color: #fff; }
.af-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.af-t { font-size: 13px; font-weight: 500; line-height: 1.25; }
.af-d { font-size: 11px; line-height: 1.35; color: var(--color-text-tertiary); }
.af-sw { width: 38px; height: 21px; }
.af-sw .slider::before { height: 15px; width: 15px; }
.af-sw input:checked + .slider::before { transform: translateX(17px); }
.af-sep { height: 0.5px; background: var(--color-border-tertiary); margin: 14px -14px; }

/* ------------------------- dayparting grid ------------------------- */
.dp-grid { display: grid; grid-template-columns: 38px repeat(24, 1fr); gap: 2px; user-select: none; }
.dp-h { font-size: 9px; color: var(--color-text-tertiary); text-align: center; }
.dp-d { font-size: 11px; color: var(--color-text-secondary); display: flex; align-items: center; }
.dp-cell { height: 16px; border-radius: 3px; background: var(--color-background-tertiary); cursor: pointer; }
.dp-cell:hover { outline: 1px solid var(--color-border-info); }
.dp-cell.on { background: var(--primary); }

/* ------------------------- server time + privacy/lock ------------------------- */
.srv-time { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-tertiary); font-size: 12.5px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-time .ico { color: var(--color-text-tertiary); }
.srv-time .srv-tz { font-size: 10px; opacity: .75; font-weight: 500; }
.icon-btn.on { background: var(--color-background-info); color: var(--color-text-info); border-color: var(--color-border-info); }

body.pp-privacy [data-privacy-target] { filter: blur(6px); user-select: none; transition: filter .12s; }
body.pp-privacy [data-privacy-target]:hover, body.pp-privacy [data-privacy-target]:focus-within { filter: blur(0); user-select: text; }

body.pp-locked #view > *:not(.topbar) { filter: blur(13px); pointer-events: none; user-select: none; }

/* ------------------------- drawer / inline form ------------------------- */
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 620px; max-width: 96vw; z-index: 110;
  background: var(--color-background-primary); border-left: 0.5px solid var(--color-border-tertiary);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; }
.drawer.open { transform: none; }
.drawer .modal-body { flex: 1; overflow: auto; }
.drawer .modal-head { flex: none; }
.drawer .modal-foot { flex: none; }
.inline-form { margin-bottom: 1.25rem; }
.inline-form .modal-head { border-bottom: 0.5px solid var(--color-border-tertiary); }

/* ------------------------- liquid-glass date/time picker ------------------------- */
.dtx { position: relative; }
.dtx-input { width: 100%; height: 36px; background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); color: var(--color-text-primary); padding: 0 36px 0 12px; font-size: 14px; cursor: pointer; outline: none; }
.dtx-input::placeholder { color: var(--color-text-tertiary); }
.dtx-input:hover { border-color: var(--color-border-info); }
.dtx-input:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.dtx-cal { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--color-text-tertiary); pointer-events: none; display: inline-flex; }

.dtpop { position: fixed; z-index: 250; width: 284px; padding: 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--color-background-primary) 72%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  border: 0.5px solid color-mix(in srgb, var(--color-border-primary) 55%, transparent);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18), inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  animation: dtpop-in .14s ease; }
[data-theme="dark"] .dtpop { background: color-mix(in srgb, var(--color-background-secondary) 64%, transparent);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); }
@keyframes dtpop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.dtpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dtpop-title { font-weight: 600; font-size: 14px; }
.dtpop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtpop-dow { font-size: 10px; color: var(--color-text-tertiary); text-align: center; padding: 4px 0; font-weight: 600; text-transform: uppercase; }
.dtpop-day { height: 32px; display: grid; place-items: center; border-radius: 9px; font-size: 12.5px; cursor: pointer; color: var(--color-text-primary); font-variant-numeric: tabular-nums; transition: background .1s; }
.dtpop-day:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.dtpop-day.muted { visibility: hidden; }
.dtpop-day.today { outline: 1px solid var(--color-border-info); }
.dtpop-day.sel { background: var(--primary); color: #fff; font-weight: 600; }
.dtpop-time { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid color-mix(in srgb, var(--color-border-tertiary) 70%, transparent); }
.dtpop-time input { width: 56px; height: 32px; text-align: center; font-variant-numeric: tabular-nums; border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; background: var(--color-background-primary); color: var(--color-text-primary); outline: none; }
.dtpop-foot { display: flex; justify-content: space-between; margin-top: 12px; }

/* ------------------------- context menu ------------------------- */
.ctxmenu { position: fixed; z-index: 300; min-width: 190px; padding: 6px; border-radius: 14px;
  background: color-mix(in srgb, var(--color-background-primary) 80%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 0.5px solid color-mix(in srgb, var(--color-border-primary) 55%, transparent);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.2); animation: dtpop-in .12s ease; }
.ctxmenu .ctx-title { font-size: 11px; color: var(--color-text-tertiary); padding: 4px 10px 6px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctxmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--color-text-primary); font-size: 13px; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.ctxmenu button .ico { color: var(--color-text-secondary); }
.ctxmenu button:hover { background: var(--color-background-secondary); }
.ctxmenu button.danger, .ctxmenu button.danger .ico { color: var(--color-text-danger); }
.ctxmenu button.danger:hover { background: var(--color-background-danger); }
.ctxmenu .sep { height: 0.5px; background: var(--color-border-tertiary); margin: 4px 6px; }

/* ------------------------- toast ------------------------- */
/* Minimalist premium: one hairline glass surface with a small status dot. Deliberately NOT a
   full-bleed red/green block — colour is carried by the 6px dot, so even a failure reads as a
   quiet note rather than an alarm. Same glass language as .notif-toast above. */
.toast { position: fixed; bottom: 26px; left: 50%; z-index: 200;
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  transform: translateX(-50%) translateY(14px) scale(.97);
  background: color-mix(in srgb, var(--color-background-primary) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 13px;
  box-shadow: 0 14px 38px -16px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.05);
  padding: 10px 15px 11px 13px;
  font-size: 13px; font-weight: 500; letter-spacing: -.01em; line-height: 1.45;
  opacity: 0; pointer-events: none; max-width: min(420px, 90vw);
  transition: opacity .22s ease, transform .38s cubic-bezier(.16,1,.3,1); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* dot sits on the first text line even when the message wraps to two */
.toast .tst-dot { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%;
  background: var(--color-text-tertiary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-tertiary) 15%, transparent); }
.toast .tst-msg { min-width: 0; }
.toast.err .tst-dot { background: var(--color-text-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-danger) 18%, transparent); }
.toast.ok .tst-dot { background: var(--color-text-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-success) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .15s ease; } }

/* ── Ad-network console: supply / demand endpoints ── */
.ep-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.fmt-badge { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: var(--color-background-info); color: var(--color-text-info); border-radius: var(--radius-pill); padding: 2px 8px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding: 4px 0 8px; }
/* Integration method rows */
.int-row { margin-bottom: 14px; }
.int-row:last-child { margin-bottom: 0; }
.int-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--color-text-primary); }
.int-hint { font-size: 12px; font-weight: 400; color: var(--color-text-tertiary); margin-left: 6px; }
.int-row .codebox { overflow: hidden; }
.int-row .code-t { font-size: 12px; }
/* Key/value configuration grid */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; }
.kv { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--color-border-secondary); }
.kv-k { font-size: 12px; color: var(--color-text-secondary); }
.kv-v { font-size: 13.5px; font-weight: 500; color: var(--color-text-primary); }
/* Test-endpoint result */
.ok-box, .err-box { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; }
.ok-box { background: var(--color-background-success); color: var(--color-text-success); border: 1px solid var(--color-border-success); }
.err-box { background: var(--color-background-danger); color: var(--color-text-danger); }
.codeblock { background: var(--color-background-secondary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-sm);
  padding: 12px; font-size: 12px; line-height: 1.5; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--color-text-primary); }

/* ===== Optimizer · Track tab (goal · runway · pipeline · activity calendar) ===== */
.opt-tabs { display: inline-flex; }
.opt-goal { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card, 12px); padding: 12px 14px; background: var(--color-background-secondary); }
.opt-goal.empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.og-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.og-title { font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.og-bar { height: 8px; border-radius: 6px; background: var(--color-background-tertiary); overflow: hidden; }
.og-fill { height: 100%; border-radius: 6px; background: var(--primary); transition: width .4s ease; }
.og-foot { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 8px; }
.opt-runway { display: flex; align-items: center; gap: 10px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card, 12px); padding: 11px 14px; background: var(--color-background-secondary); font-size: 13px; }
.opt-runway.warn { border-color: var(--color-border-warning); background: var(--color-background-warning); color: var(--color-text-warning); }
.opt-runway.danger { border-color: var(--color-border-danger); background: var(--color-background-danger); color: var(--color-text-danger); }
.orw-ic { display: inline-flex; }
.orw-main b { font-size: 14px; }
.orw-days { margin-left: auto; font-weight: 500; }
.orw-tag { background: var(--color-text-danger); color: var(--color-text-inverse); border-radius: var(--radius-pill); padding: 2px 9px; font-size: 11px; font-weight: 600; }
.opt-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.opt-pipe-col { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); overflow: hidden; }
.opp-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--color-background-secondary); border-bottom: 0.5px solid var(--color-border-tertiary); }
.opp-cnt { font-weight: 700; font-size: 13px; }
.opp-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow: auto; }
.opp-chip { font-size: 12px; padding: 5px 8px; border-radius: 6px; background: var(--color-background-tertiary); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-chip:hover { background: var(--color-background-secondary-tag); }
.opt-pcal { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card, 12px); padding: 14px; background: var(--color-background-secondary); }
.pcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pcal-title { font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.pcal-stats { font-size: 12.5px; color: var(--color-text-secondary); }
.pcal-grid { display: flex; gap: 3px; overflow-x: auto; }
.pcal-col { display: flex; flex-direction: column; gap: 3px; }
.pcal-cell { width: 12px; height: 12px; border-radius: 3px; background: var(--color-background-tertiary); }
.pcal-cell.on { outline: none; }
@media (max-width: 760px) { .opt-pipe { grid-template-columns: repeat(2, 1fr); } }

/* ===== Autopilot · rules engine modal ===== */
.ap-err { color: var(--color-text-danger); font-size: 13px; padding: 10px; }
.ap-master { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card, 12px); padding: 12px 14px; background: var(--color-background-secondary); margin-bottom: 12px; }
.ap-ml { font-weight: 600; font-size: 14px; }
.ap-ms { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; max-width: 540px; }
.ap-sw { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.ap-sw.sm { width: 34px; height: 19px; }
.ap-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.ap-sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--color-background-tertiary); transition: .2s; }
.ap-sw span::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ap-sw.sm span::before { height: 13px; width: 13px; }
.ap-sw input:checked + span { background: var(--primary); }
.ap-sw input:checked + span::before { transform: translateX(18px); }
.ap-sw.sm input:checked + span::before { transform: translateX(15px); }
.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ap-killbox { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--color-background-secondary); font-size: 13px; }
.ap-killbox.on { border-color: var(--color-border-warning); background: var(--color-background-warning); }
.ap-opts { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; }
.ap-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-dollar { display: inline-flex; align-items: center; gap: 2px; }
.ap-killbox input[type=number], .ap-opts input[type=number], .ap-cap input[type=number], .ap-rule input[type=number], .ap-rule input.ap-name, .ap-cron input { background: var(--color-page); border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; padding: 3px 6px; font-size: 12.5px; color: var(--color-text-primary); width: 70px; }
.ap-rule input.ap-name { width: auto; flex: 1; font-weight: 500; }
.ap-sect { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); margin: 16px 0 8px; border-bottom: 0.5px solid var(--color-border-tertiary); padding-bottom: 6px; }
.ap-cap-hint { font-size: 11.5px; margin-bottom: 8px; }
.ap-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; font-size: 13px; }
.ap-lbl { color: var(--color-text-secondary); font-size: 12.5px; }
.ap-cap select, .ap-rule select, .ap-cron select, #ap-bt-days { background: var(--color-page); border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; padding: 3px 6px; font-size: 12.5px; color: var(--color-text-primary); }
.ap-rule { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--color-background-secondary); }
.ap-rule.off { opacity: .6; }
.ap-rule-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ap-rule-body { display: flex; flex-direction: column; gap: 8px; }
.ap-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ap-conds { display: flex; flex-direction: column; gap: 6px; }
.ap-cond { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.icon-btn.xs { width: 22px; height: 22px; padding: 0; }
.ap-actbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ap-btwrap { display: inline-flex; gap: 4px; align-items: center; }
.ap-cron { margin-top: 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 10px 12px; }
.ap-cron summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.ap-cronurl { display: flex; gap: 6px; }
.ap-cronurl input { flex: 1; font-family: var(--mono); font-size: 11.5px; }
.ap-logtable { display: flex; flex-direction: column; gap: 2px; }
.ap-logrow { display: grid; grid-template-columns: 18px auto 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 6px; border-radius: 5px; }
.ap-logrow:hover { background: var(--color-background-secondary); }
.ap-logrow.bad { color: var(--color-text-danger); }
.ap-log-act { font-weight: 600; text-transform: capitalize; }
.ap-log-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-runout { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 8px; margin-top: 8px; }
.ap-runout.sim { border-style: dashed; }
.ap-bt-top { display: flex; align-items: center; gap: 12px; }
.ap-bt-big { font-size: 26px; font-weight: 700; }
.ap-bt-ev { margin-top: 8px; }
.ap-bt-ev summary { cursor: pointer; font-size: 12.5px; color: var(--color-text-secondary); }
.btn.ap-live { color: var(--color-text-success); border-color: var(--color-border-success); }
@media (max-width: 720px) { .ap-grid { grid-template-columns: 1fr; } }

/* ===== Monthly profit goal modal ===== */
.goal-input { display: flex; align-items: center; gap: 6px; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-card, 12px); padding: 14px 18px; background: var(--color-background-secondary); transition: border-color .15s, box-shadow .15s; }
.goal-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(99,102,241,.2)); }
.goal-cur { font-size: 30px; font-weight: 600; color: var(--color-text-secondary); }
.goal-input input { flex: 1; border: none; background: transparent; outline: none; font-size: 34px; font-weight: 700; color: var(--color-text-primary); width: 100%; padding: 0; letter-spacing: -.01em; }
.goal-input input::-webkit-outer-spin-button, .goal-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.goal-suf { font-size: 15px; color: var(--color-text-tertiary); font-weight: 500; }
.goal-presets { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.goal-chip { flex: 1; min-width: 56px; padding: 8px 0; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-pill); background: var(--color-background-secondary); color: var(--color-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; }
.goal-chip:hover { border-color: var(--primary); color: var(--color-text-primary); }
.goal-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.goal-preview { margin-top: 16px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--color-page); min-height: 40px; }
.goal-pv-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.goal-pv-row b { font-size: 15px; }

/* ===== Premium redirect-mode picker (colour per mode) ===== */
.rmode-sel > summary.rm-trigger { height: 40px; font-weight: 600; }
.rmode-sel > summary.rm-trigger .rm-name { font-size: 13.5px; letter-spacing: .01em; }
.rmode-sel .rm-dot { width: 10px; height: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.rm-panel { padding: 6px; max-height: 340px; overflow: auto; }
.rm-opt { align-items: center; gap: 10px; padding: 8px 10px; position: relative; border-left: 3px solid transparent; }
.rm-opt .rm-dot { width: 11px; height: 11px; box-shadow: 0 0 8px -1px var(--rm); }
.rm-opt .rm-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rm-opt .rm-name { font-weight: 600; font-size: 13px; }
.rm-opt .rm-desc { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-opt .ico:last-child { margin-left: auto; opacity: 0; color: var(--rm); flex: 0 0 auto; }
.rm-opt:hover { background: color-mix(in srgb, var(--rm) 9%, transparent); border-left-color: var(--rm); }
.rm-opt.on { background: color-mix(in srgb, var(--rm) 12%, transparent); border-left-color: var(--rm); }
.rm-opt.on .ico:last-child { opacity: 1; }

/* ===== Optimizer period bar (time-range selector) ===== */
.opt-periodbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.opt-periodbar .opp-lbl { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.opt-periodbar .seg.sm button { font-size: 12.5px; padding: 5px 11px; }
.opt-datein { background: var(--color-page); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 12.5px; color: var(--color-text-primary); font-family: inherit; cursor: pointer; }
.opt-datein.active { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--color-focus-ring, rgba(99,102,241,.18)); }
.opt-rangelbl { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; }

/* date box inside the optimizer period bar */
.opt-datebox { width: 188px; }
.opt-datebox .dtx-input { height: 32px; font-size: 12.5px; }
.opt-datebox.active .dtx-input { border-color: var(--primary); box-shadow: 0 0 0 2px var(--color-focus-ring, rgba(99,102,241,.18)); color: var(--primary); }

/* ===== Zone & Source Killer (segment drill-down) ===== */
.opt-drill { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary); color: var(--color-text-secondary); cursor: pointer; vertical-align: middle; }
.opt-drill:hover { border-color: var(--primary); color: var(--primary); }
.seg-ctrlbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-secondary); margin-bottom: 6px; }
.seg-pace { display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.seg-pacebar { height: 5px; border-radius: 4px; background: var(--color-background-tertiary); overflow: hidden; }
.seg-pacebar span { display: block; height: 100%; border-radius: 4px; }
.seg-bidwrap { display: inline-flex; align-items: center; gap: 5px; }
.seg-bidwrap input { width: 86px; height: 28px; background: var(--color-page); border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; padding: 0 8px; font-size: 12.5px; color: var(--color-text-primary); }
.seg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.seg-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--color-background-danger); border: 0.5px solid var(--color-border-danger); color: var(--color-text-danger); font-size: 13px; margin-bottom: 10px; }
.seg-tbl td, .seg-tbl th { white-space: nowrap; }
.seg-keycell { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }
.seg-key { font-weight: 600; font-size: 12.5px; }
.seg-spark { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 55%, transparent); }
.seg-loser { background: color-mix(in srgb, var(--color-text-danger) 7%, transparent); }
.seg-loser:hover { background: color-mix(in srgb, var(--color-text-danger) 12%, transparent); }
.btn.btn-danger { background: var(--color-text-danger); color: #fff; border-color: var(--color-text-danger); }
.btn.btn-danger:hover { filter: brightness(1.08); }

/* ===== Catter Copilot (floating AI chat) ===== */
.cat-fab { position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--primary) 60%, transparent); z-index: 300; transition: transform .15s, opacity .15s; }
.cat-fab:hover { transform: scale(1.06); }
.cat-fab.hidden { opacity: 0; pointer-events: none; transform: scale(.6); }
.cat-chat { position: fixed; right: 22px; bottom: 22px; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 44px); background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary); border-radius: 18px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; z-index: 301; opacity: 0; pointer-events: none; transform: translateY(16px) scale(.98); transition: opacity .18s, transform .18s; }
.cat-chat.open { opacity: 1; pointer-events: auto; transform: none; }
[data-theme="dark"] .cat-chat { background: color-mix(in srgb, var(--color-background-secondary) 80%, transparent); backdrop-filter: blur(14px); }
.cc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.cc-title { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.cc-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cc-empty { margin: auto; text-align: center; color: var(--color-text-secondary); font-size: 13px; max-width: 280px; }
.cc-empty p { margin: 8px 0 12px; line-height: 1.5; }
.cc-sugg { display: flex; flex-direction: column; gap: 6px; }
.cc-chip { padding: 8px 11px; border: 0.5px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-secondary); color: var(--color-text-primary); font-size: 12.5px; cursor: pointer; text-align: left; }
.cc-chip:hover { border-color: var(--primary); }
.cc-msg { font-size: 13.5px; line-height: 1.55; padding: 9px 12px; border-radius: 13px; max-width: 88%; word-wrap: break-word; }
.cc-user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.cc-ai { align-self: flex-start; background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-bottom-left-radius: 4px; }
.cc-ai code { background: var(--color-background-tertiary); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cc-actbtn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; border: 0.5px solid var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.cc-actbtn:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.cc-actbtn:disabled { opacity: .5; cursor: default; }
.cc-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 0.5px solid var(--color-border-tertiary); }
.cc-input textarea { flex: 1; resize: none; max-height: 120px; border: 0.5px solid var(--color-border-tertiary); border-radius: 10px; padding: 9px 11px; font-size: 13px; font-family: inherit; background: var(--color-page); color: var(--color-text-primary); }
.cc-input textarea:focus { outline: none; border-color: var(--primary); }
.cc-input .btn { height: 36px; width: 38px; padding: 0; flex: 0 0 auto; }
@media print { .cat-fab, .cat-chat { display: none !important; } }

/* ===== Autonomous AI Buyer modal ===== */
.aib-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.aib-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-secondary); cursor: pointer; text-align: left; border-left: 3px solid transparent; }
.aib-mode:hover { border-color: color-mix(in srgb, var(--mc) 60%, transparent); }
.aib-mode.on { border-color: var(--mc); border-left-color: var(--mc); background: color-mix(in srgb, var(--mc) 10%, transparent); }
.aib-mode b { font-size: 13px; }
.aib-md { font-size: 11px; color: var(--color-text-secondary); line-height: 1.35; }
.aib-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.aib-opts { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; }
.aib-opts input[type=number] { background: var(--color-page); border: 0.5px solid var(--color-border-tertiary); border-radius: 6px; padding: 3px 6px; color: var(--color-text-primary); font-size: 12.5px; }
.aib-q { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--color-background-secondary); }
.aib-q-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 600; gap: 2px; }
.aib-conf { background: var(--color-background-tertiary); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.aib-q-acts { display: flex; align-items: center; gap: 4px; }
.aib-cyc { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; }
.aib-cyc > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; display: flex; align-items: center; gap: 7px; background: var(--color-background-secondary); }
.aib-cyc-body { padding: 10px 12px; }
.aib-sum { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.aib-dec { padding: 6px 0; border-top: 0.5px solid var(--color-border-tertiary); font-size: 12.5px; }
.aib-dec:first-child { border-top: none; }
.aib-runout { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; }
.aib-runout.sim { border-style: dashed; }
@media (max-width: 720px) { .aib-modes { grid-template-columns: 1fr; } }

/* ── Selling-side revenue strip (Optimizer) ── */
.opt-sell { margin: 10px 0 2px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-md); padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, #0ea5e9 6%, transparent), transparent); }
.opt-sell-load { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); }
.opt-sell-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.opt-sell-ttl { font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.opt-sell-tot { font-size: 12.5px; color: var(--color-text-secondary); }
.opt-sell-tot b { color: var(--color-text-primary); font-size: 14px; }
.opt-sell-margin { font-size: 12.5px; color: var(--color-text-secondary); margin-left: auto; }
.opt-sell-margin b { font-size: 14px; }
.opt-sell-margin.pos b { color: var(--color-text-success); }
.opt-sell-margin.neg b { color: var(--color-text-danger); }
.opt-sellnets { display: flex; gap: 10px; flex-wrap: wrap; }
.opt-sellnet { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-bg-primary); min-width: 150px; }
.opt-sellnet img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.opt-selldot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.opt-sellnet-nm { font-weight: 600; font-size: 12.5px; }
.opt-sellnet-v { font-size: 13.5px; font-weight: 700; margin-top: 1px; }

/* ── Opportunity Radar ── */
.radar-spot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
@media (max-width: 720px) { .radar-spot { grid-template-columns: 1fr; } }
.rspot { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-md); padding: 13px 15px; cursor: pointer; transition: border-color .12s, transform .12s; }
.rspot:hover { transform: translateY(-1px); }
.rspot-good { background: linear-gradient(180deg, color-mix(in srgb, #16a34a 8%, transparent), transparent); }
.rspot-good:hover { border-color: color-mix(in srgb, #16a34a 50%, var(--color-border-tertiary)); }
.rspot-bad { background: linear-gradient(180deg, color-mix(in srgb, #ef4444 8%, transparent), transparent); }
.rspot-bad:hover { border-color: color-mix(in srgb, #ef4444 50%, var(--color-border-tertiary)); }
.rspot-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.rspot-nm { font-weight: 650; font-size: 15px; margin: 5px 0 3px; }
.rspot-sub { font-size: 12.5px; color: var(--color-text-secondary); }
.rspot-sub b { color: var(--color-text-primary); }
.rd-up { color: var(--color-text-success); font-weight: 600; font-size: 12px; }
.rd-down { color: var(--color-text-danger); font-weight: 600; font-size: 12px; }
.rd-flat { color: var(--color-text-tertiary); font-size: 12px; }

/* ── Dashboard money-loop command center ── */
.loop-band { margin-bottom: 14px; }
.loop-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent); }
.loop-kpis { margin-bottom: 12px; }
.kpi-link { cursor: pointer; transition: border-color .12s, transform .12s; }
.kpi-link:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border-tertiary)); }
.loop-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .loop-actions { grid-template-columns: 1fr; } }
.loop-act { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; transition: border-color .12s, transform .12s; background: var(--color-bg-primary); }
.loop-act:hover { transform: translateY(-1px); }
.loop-good { background: linear-gradient(180deg, color-mix(in srgb, #16a34a 8%, transparent), transparent); }
.loop-good:hover { border-color: color-mix(in srgb, #16a34a 50%, var(--color-border-tertiary)); }
.loop-bad { background: linear-gradient(180deg, color-mix(in srgb, #ef4444 8%, transparent), transparent); }
.loop-bad:hover { border-color: color-mix(in srgb, #ef4444 50%, var(--color-border-tertiary)); }
.loop-neutral:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--color-border-tertiary)); }
.la-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.la-nm { font-weight: 600; font-size: 14px; margin: 4px 0 2px; }
.la-sub { font-size: 12px; color: var(--color-text-secondary); }
.loop-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.loop-empty .le-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.loop-empty .le-txt b { font-size: 14px; }
.loop-empty .le-txt span { font-size: 12.5px; color: var(--color-text-secondary); }

/* ── Verdict-aware Killer banner + radar row action ── */
.seg-intent { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 9px 12px; border-radius: var(--radius-sm); margin-bottom: 10px; border: 0.5px solid var(--color-border-tertiary); }
.seg-intent.sb-danger { background: color-mix(in srgb, #ef4444 12%, transparent); border-color: color-mix(in srgb, #ef4444 35%, var(--color-border-tertiary)); }
.seg-intent.sb-success { background: color-mix(in srgb, #16a34a 12%, transparent); border-color: color-mix(in srgb, #16a34a 35%, var(--color-border-tertiary)); }
.seg-intent.sb-warning { background: color-mix(in srgb, #f59e0b 12%, transparent); border-color: color-mix(in srgb, #f59e0b 35%, var(--color-border-tertiary)); }
.seg-intent b { font-weight: 700; }
.radar-act { white-space: nowrap; }

/* ============================ premium dropdowns ============================ */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23909099' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.field select {
  background-color: var(--color-background-primary);
  padding: 0 32px 0 12px;
  box-shadow: 0 1px 2px rgba(16, 17, 26, .03);
  transition: border-color .14s, box-shadow .17s cubic-bezier(.2,.9,.3,1), background-color .13s;
}
.field select:hover { border-color: var(--color-border-primary); }
.field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--color-focus-ring); }
/* bare selects used in the campaign buying/selling pickers + any modal select */
.modal select, #c_sell_src, #c_sell_sel, #c_sell_zsel, #c_buy_sel {
  background-color: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
  height: 36px; color: var(--color-text-primary); padding: 0 32px 0 12px; font-size: 14px;
  box-shadow: 0 1px 2px rgba(16, 17, 26, .03);
  transition: border-color .14s, box-shadow .17s cubic-bezier(.2,.9,.3,1), background-color .13s;
}
.modal select:hover, #c_sell_src:hover, #c_sell_sel:hover, #c_sell_zsel:hover, #c_buy_sel:hover { border-color: var(--color-border-primary); }
.modal select:focus, #c_sell_src:focus, #c_sell_sel:focus, #c_sell_zsel:focus, #c_buy_sel:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--color-focus-ring); }
/* compact selects (optimizer / autopilot bars) — keep small, add a tidy chevron */
.ap-cap select, .ap-rule select, .ap-cron select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23909099' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 5px center; background-size: 11px; padding-right: 20px;
}
/* the option list itself — honored by Chromium */
select option, select optgroup { background: var(--color-background-primary); color: var(--color-text-primary); }
select option { padding: 8px 10px; font-weight: 400; }
select optgroup { font-weight: 600; color: var(--color-text-tertiary); }
select option:checked { background: color-mix(in srgb, var(--primary) 18%, var(--color-background-primary)); color: var(--primary); font-weight: 500; }

/* ===== premium custom dropdown (.psel replaces native <select> in modals) ===== */
.psel { position: relative; display: inline-block; vertical-align: top; }
.psel-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px 0 12px; cursor: pointer;
  font-family: var(--font); font-size: 14px; text-align: left; color: var(--color-text-primary);
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(16, 17, 26, .03); transition: border-color .14s, box-shadow .17s cubic-bezier(.2,.9,.3,1), background .13s; }
.psel-btn:hover { border-color: var(--color-border-primary); }
.psel-btn:disabled { opacity: .55; cursor: not-allowed; }
.psel.open .psel-btn { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--color-focus-ring); }
.psel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; letter-spacing: -.006em; }
.psel-label.ph { color: var(--color-text-tertiary); font-weight: 400; }
.psel-chev { display: inline-flex; color: var(--color-text-tertiary); flex: none; transition: transform .18s cubic-bezier(.2,.9,.3,1), color .13s; }
.psel.open .psel-chev { transform: rotate(180deg); color: var(--primary); }
.psel-menu { z-index: 6000; background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: 13px;
  box-shadow: 0 20px 54px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.12); overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top center;
  transition: opacity .15s cubic-bezier(.2,.9,.3,1), transform .15s cubic-bezier(.2,.9,.3,1); }
.psel-menu.show { opacity: 1; transform: none; }
.psel-search { padding: 9px 10px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.psel-search input { width: 100%; height: 32px; padding: 0 11px; font-size: 13px; font-family: var(--font); outline: none;
  color: var(--color-text-primary); background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; }
.psel-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.psel-list { max-height: 268px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.psel-list::-webkit-scrollbar { width: 8px; }
.psel-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-text-tertiary) 40%, transparent); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
.psel-grp { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 8px 10px 4px; }
.psel-opt { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font-family: var(--font);
  font-size: 13.5px; font-weight: 500; color: var(--color-text-primary); padding: 9px 11px; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .1s; }
.psel-opt:hover { background: var(--color-background-secondary); }
.psel-opt.sel { background: color-mix(in srgb, var(--primary) 14%, var(--color-background-primary)); color: var(--primary); font-weight: 600; }
.psel-opt.dis { color: var(--color-text-tertiary); font-weight: 400; cursor: default; }
.psel-opt.dis:hover { background: transparent; }
.psel-none { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--color-text-tertiary); }

/* ===== premium dropdown — v2 polish (glassy panel, accent rows, check, search) ===== */
.psel-menu { padding: 5px; border-radius: 16px;
  background: color-mix(in srgb, var(--color-background-primary) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 0.5px solid color-mix(in srgb, var(--color-text-primary) 13%, transparent);
  box-shadow: 0 24px 64px rgba(0,0,0,.36), 0 3px 12px rgba(0,0,0,.16), inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent); }
.psel-search { display: flex; align-items: center; gap: 8px; margin: 3px 3px 6px; padding: 0 11px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); border: 0.5px solid transparent; transition: border-color .13s, box-shadow .16s; }
.psel-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--color-focus-ring); background: var(--color-background-primary); }
.psel-search-ic { color: var(--color-text-tertiary); flex: none; }
.psel-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; height: 100%; padding: 0;
  font-size: 13.5px; font-family: var(--font); color: var(--color-text-primary); }
.psel-search input:focus { box-shadow: none; border: 0; }
.psel-list { max-height: 300px; padding: 3px; }
.psel-opt { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 500;
  transition: background .12s, transform .06s; }
.psel-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psel-opt-ck { display: none; color: var(--primary); flex: none; }
.psel-opt:hover:not(.dis):not(.sel) { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.psel-opt:active:not(.dis) { transform: scale(.988); }
.psel-opt.sel { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 600; }
.psel-opt.sel .psel-opt-ck { display: inline-flex; }
.psel-opt.dis { color: var(--color-text-tertiary); font-weight: 400; }
.psel-grp { padding: 9px 12px 4px; }

/* ============================================================
   Collapsible panels · pagination · GA multi-site (v2.61)
   ============================================================ */

/* ---- collapsible panel (settings widgets that get tall) ---- */
.panel.pnl-c > .panel-head { cursor: pointer; user-select: none; }
.panel.pnl-c > .panel-head h3 { flex: 1 1 auto; min-width: 0; }
.panel.pnl-c > .panel-head .pnl-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; cursor: default; }
.pnl-sum { font-size: 11.5px; font-weight: 500; color: var(--color-text-tertiary); white-space: nowrap; }
.pnl-caret { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; color: var(--color-text-tertiary); transition: transform .18s ease, background .12s; flex: 0 0 auto; cursor: pointer; }
.panel.pnl-c > .panel-head:hover .pnl-caret { background: var(--color-background-secondary); color: var(--color-text-primary); }
.panel.pnl-c.is-collapsed .pnl-caret { transform: rotate(-90deg); }
.panel.pnl-c.is-collapsed > .panel-body { display: none; }
.panel.pnl-c.is-off > .panel-head h3 { opacity: .55; }

/* ---- table pagination ---- */
.pgr { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 0.5px solid var(--color-border-tertiary); }
.pgr-info { font-size: 12px; color: var(--color-text-tertiary); margin-right: auto; }
.pgr-btn { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  color: var(--color-text-secondary); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.pgr-btn:hover:not(:disabled) { background: var(--color-background-secondary); color: var(--color-text-primary); }
.pgr-btn.on { background: var(--color-accent, #84cc16); border-color: transparent; color: #0b0f14; }
.pgr-btn:disabled { opacity: .38; cursor: default; }
.pgr-gap { color: var(--color-text-tertiary); font-size: 12px; padding: 0 1px; }
.pgr-size { height: 30px; border-radius: 8px; padding: 0 6px; cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  color: var(--color-text-secondary); font-size: 12px; }

/* ---- GA multi-site cards ---- */
.ga-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ga-tools .searchbox { flex: 1; min-width: 170px; }
.gaw { border: 0.5px solid var(--color-border-tertiary); border-radius: 10px; overflow: hidden;
  background: var(--color-background-primary); }
.gaw + .gaw { margin-top: 8px; }
.gaw.open { border-color: var(--color-accent, #84cc16); }
.ga-h { display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer; }
.ga-h:hover { background: var(--color-background-secondary); }
.gaw.open .ga-h { border-bottom: 0.5px solid var(--color-border-tertiary); }
.ga-av { width: 27px; height: 27px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.ga-nm { font-weight: 600; font-size: 13px; line-height: 1.3; }
.ga-sub { font-size: 11px; color: var(--color-text-tertiary); display: flex; gap: 7px; flex-wrap: wrap; }
.ga-b { display: none; padding: 12px 12px 6px; }
.gaw.open .ga-b { display: block; }
.ga-empty { font-size: 12.5px; color: var(--color-text-tertiary); padding: 10px 2px; }

/* ---- brand font preview ---- */
.bf-prev { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 10px;
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary); margin-bottom: 12px; }
.bf-prev b { font-size: 21px; font-weight: 600; line-height: 1.1; }
.bf-prev span { font-size: 11px; color: var(--color-text-tertiary); }
.ver-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ver-pill { font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 0.5px solid var(--color-border-tertiary); color: var(--color-text-secondary); }

/* Brand font — set from Settings → Branding; falls back to the panel font. */
.side .brand .brand-name,
.mobile-bar .brand,
.auth-card h1 { font-family: var(--brand-font, inherit); }
.bf-prev b { font-family: inherit; }

/* ---------- version tag under the brand name: a flame drawn from the brand colour ----------
   The ramp is mixed FROM --primary (the saved brand colour) rather than hard-coded, so it
   re-tints itself whenever the brand colour changes and never clashes with it. Light theme
   keeps the accent as the deep end; dark theme lifts the whole ramp so a dark brand colour
   (e.g. #795548) stays legible against the dark sidebar. */
.side .brand .brand-ver {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  color: var(--primary);   /* solid fallback wherever background-clip:text is unsupported */
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .side .brand .brand-ver {
    background-image: linear-gradient(96deg,
      color-mix(in oklab, var(--primary) 42%, #FFC53D) 0%,
      color-mix(in oklab, var(--primary) 58%, #FF7A18) 42%,
      color-mix(in oklab, var(--primary) 88%, #E0452C) 74%,
      var(--primary) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* Dark sidebar: pull more heat into the mix so a dark brand colour still reads. */
  :root[data-theme="dark"] .side .brand .brand-ver {
    background-image: linear-gradient(96deg,
      color-mix(in oklab, var(--primary) 22%, #FFD65C) 0%,
      color-mix(in oklab, var(--primary) 38%, #FF9438) 44%,
      color-mix(in oklab, var(--primary) 62%, #FF6A3D) 76%,
      color-mix(in oklab, var(--primary) 78%, #F0563C) 100%);
  }
}
/* Slow drift so it reads as flame rather than a flat gradient. Motion is decorative
   only — the colour is already fully legible when it is switched off. */
@media (prefers-reduced-motion: no-preference) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .side .brand .brand-ver { animation: brandFlame 6s ease-in-out infinite; }
  }
}
@keyframes brandFlame {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Side-by-side dashboard panels share one row height. Without this the grid's
   align-items:start sizes each panel to its own content, so the shorter one stops
   early and the pair looks misaligned. Bodies flex so their empty states centre
   in the shared height rather than hugging the top. */
.grid-2.level { align-items: stretch; }
/* `.panel + .panel { margin-top }` is meant for stacked panels, but grid children are
   siblings too — so it was pushing the second column down by 18px and knocking the pair
   out of alignment. Cancel it inside this row. */
.grid-2.level > .panel + .panel { margin-top: 0; }
.grid-2.level > .panel { display: flex; flex-direction: column; }
.grid-2.level > .panel > .panel-body { flex: 1 1 auto; }
.grid-2.level > .panel > .panel-body.flush { display: flex; flex-direction: column; }
.grid-2.level > .panel > .panel-body.flush > * { flex: 1 1 auto; }

/* ============================ PLANNER ============================
   The two-pane trading sheet (sell side / buy side), the verdict strip under it,
   and the analysis panels. Everything inherits the panel/table/badge system —
   only the sheet layout, the numeric inputs with $ and % affixes, the sensitivity
   grid and the profit chart need rules of their own. */
.pl-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.pl-name { flex: 1 1 260px; min-width: 220px; height: 40px; font-size: 17px; font-weight: 600;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); padding: 0 12px; color: var(--color-text-primary); }
.pl-name:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); outline: 0; }
.pl-dirtytag { font-size: 11.5px; font-weight: 600; color: var(--color-text-warning);
  background: var(--color-background-warning); padding: 4px 9px; border-radius: var(--radius-pill); }

.pl-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.pl-sheet > .panel + .panel { margin-top: 0; }
.pl-side .panel-head h3 { display: flex; align-items: center; gap: 8px; }
.pl-tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); background: var(--color-background-secondary); padding: 2px 7px; border-radius: var(--radius-pill); }
.pl-sell .panel-head { border-left: 3px solid var(--color-text-success); }
.pl-buy  .panel-head { border-left: 3px solid var(--color-text-info); }
@media (max-width: 1080px) { .pl-sheet { grid-template-columns: 1fr; } }

.pl-f { margin-bottom: 12px; }
.pl-inp { position: relative; display: flex; align-items: center; }
.pl-inp.has-pre input { padding-left: 26px; }
.pl-inp.has-suf input { padding-right: 44px; }
.pl-suf { font-size: 11px; max-width: 38px; text-align: right; }
.pl-pre, .pl-suf { position: absolute; font-size: 12.5px; color: var(--color-text-tertiary); pointer-events: none; }
.pl-pre { left: 11px; } .pl-suf { right: 11px; }
.pl-sub { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 5px; min-height: 16px; }
.pl-hint { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-background-secondary); color: var(--color-text-tertiary);
  font-size: 10px; font-weight: 700; cursor: help; vertical-align: middle; }
.pl-auto { border: 0; background: var(--color-background-info); color: var(--color-text-info); cursor: pointer;
  font-size: 11.5px; font-weight: 500; border-radius: var(--radius-pill); padding: 3px 9px;
  display: inline-flex; align-items: center; gap: 5px; }
.pl-auto:hover { filter: brightness(1.06); }
.pl-auto .sb { font-size: 10px; padding: 1px 6px; }
.pl-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pl-grid3.is-off { opacity: .45; }
.pl-basis { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.pl-blbl { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.pl-note { margin: 2px 0 12px; }
.pl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; margin-bottom: 8px; }
.pl-check input { width: auto; height: auto; }
.pl-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px;
  background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 10px 12px; }
.pl-mini > div { display: flex; justify-content: space-between; font-size: 12px; }
.pl-mini span { color: var(--color-text-tertiary); }

/* Verdict strip — the eight numbers that decide the trade. */
.pl-verdict { margin: 14px 0; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card);
  background: var(--color-background-primary); padding: 14px 16px; border-left-width: 3px; border-left-style: solid; }
.pl-v-strong { border-left-color: var(--color-text-success); }
.pl-v-thin { border-left-color: var(--color-text-warning); }
.pl-v-negative { border-left-color: var(--color-text-danger); }
.pl-v-incomplete { border-left-color: var(--color-border-tertiary); }
.pl-vhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pl-vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; }
@media (max-width: 900px) { .pl-vgrid { grid-template-columns: repeat(2, 1fr); } }
.pl-vl { font-size: 11.5px; color: var(--color-text-tertiary); font-weight: 500; }
.pl-vv { font-size: 20px; font-weight: 700; margin: 3px 0 1px; }
.pl-vv.pos { color: var(--color-text-success); } .pl-vv.neg-t { color: var(--color-text-danger); }
.pl-vs { font-size: 11px; color: var(--color-text-tertiary); }
.pl-risk { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600;
  border-radius: var(--radius-pill); padding: 3px 9px; }
.pl-risk-low { background: var(--color-background-success); color: var(--color-text-success); }
.pl-risk-med { background: var(--color-background-warning); color: var(--color-text-warning); }
.pl-risk-high { background: var(--color-background-danger); color: var(--color-text-danger); }

/* Sensitivity grid. */
.pl-mtx td, .pl-mtx th { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-mtx .pl-mtxc { font-size: 11px; color: var(--color-text-tertiary); text-align: left; }
.pl-cell { font-size: 12.5px; font-weight: 500; }
.pl-cell.is-here { outline: 2px solid var(--primary); outline-offset: -2px; font-weight: 700; }
.pl-now { font-size: 9.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.pl-need { margin-top: 12px; font-size: 12.5px; color: var(--color-text-secondary);
  background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; align-items: flex-start; gap: 8px; }
.pl-need svg { flex: 0 0 auto; margin-top: 2px; }
.pl-need > span { flex: 1 1 auto; }
.pl-need + .tbl-wrap { margin-top: 12px; }

/* Profit curve. The SVG carries real pixel width/height (see plChart), so nothing here may
   stretch it — and no text-anchor lives in CSS, because CSS would override the per-element
   presentation attributes the chart sets. */
.pl-chartwrap { width: 100%; overflow-x: auto; }
.pl-chart { display: block; max-width: 100%; }
.pl-grid { stroke: var(--color-border-tertiary); stroke-width: 1; opacity: .55; }
.pl-zero { stroke: var(--color-text-tertiary); stroke-width: 1.25; opacity: .8; }
.pl-area-pos { fill: var(--color-text-success); opacity: .13; }
.pl-area-neg { fill: var(--color-text-danger); opacity: .13; }
.pl-curve { fill: none; stroke: var(--primary); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pl-be { stroke: var(--color-text-warning); stroke-width: 1.25; stroke-dasharray: 4 4; }
.pl-belbl { fill: var(--color-text-warning); font-size: 11px; font-weight: 600; }
.pl-belbl-bg { fill: var(--color-background-warning); }
.pl-nowlbl { fill: var(--color-text-primary); font-size: 11px; font-weight: 600; }
.pl-nowlbl-bg { fill: var(--color-background-secondary); stroke: var(--color-border-tertiary); stroke-width: .5; }
.pl-dot { fill: var(--primary); stroke: var(--color-background-primary); stroke-width: 2.5; }
.pl-ax { fill: var(--color-text-tertiary); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.pl-axt { fill: var(--color-text-secondary); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

/* Monte Carlo + test-back. */
.pl-mcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pl-mcrow { background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; }
.pl-mcrow span { font-size: 11.5px; color: var(--color-text-tertiary); }
.pl-mcrow b { font-size: 17px; }
.pl-mcrow b.pos { color: var(--color-text-success); } .pl-mcrow b.neg-t { color: var(--color-text-danger); }
.pl-testbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pl-callist { margin: 8px 0 0 18px; font-size: 13px; line-height: 1.7; }
.pl-goalbar { position: relative; height: 26px; border-radius: var(--radius-pill); margin-top: 12px;
  background: var(--color-background-secondary); overflow: hidden; }
.pl-goalfill { position: absolute; inset: 0 auto 0 0; background: var(--color-background-success); }
.pl-goalbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--color-text-primary); }
.pl-hist { margin-top: 16px; }
.pl-histh { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; }
.pl-histrow { display: grid; grid-template-columns: 1.4fr 1.2fr .7fr .7fr; gap: 10px; font-size: 12px;
  padding: 7px 10px; border-radius: var(--radius-sm); }
.pl-histrow:nth-child(odd) { background: var(--color-background-secondary); }
.pl-histrow b.pos { color: var(--color-text-success); } .pl-histrow b.neg-t { color: var(--color-text-danger); }

/* Planner: linked-campaign bar, compare table, post-mortem. */
.pl-linkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 9px 12px; }
.pl-linkbar select { height: 32px; min-width: 200px; max-width: 320px; flex: 0 1 auto;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: 13px; padding: 0 8px; }
.pl-linkbar .pl-blbl { display: inline-flex; align-items: center; gap: 6px; }
.pl-pullnote { font-size: 11.5px; color: var(--color-text-success); font-weight: 500; }
.pl-cmpsel { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pl-cmpsel select { flex: 1 1 0; height: 36px; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
  color: var(--color-text-primary); font-size: 13px; padding: 0 10px; }
.pl-cmp td:first-child { color: var(--color-text-secondary); }
.pl-cmp .pl-win { font-weight: 700; color: var(--color-text-success); }
.pl-cmp .pos { color: var(--color-text-success); } .pl-cmp .neg-t { color: var(--color-text-danger); }
.pl-pm { border: 0.5px solid var(--color-border-tertiary); border-left: 3px solid var(--color-text-info);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 14px; }
.pl-pmh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-pml { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
.pl-tally { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-tallyh { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.pl-tallyc { font-size: 11.5px; color: var(--color-text-secondary); background: var(--color-background-secondary);
  border-radius: var(--radius-pill); padding: 4px 10px; }
.pl-tallyc b { color: var(--color-text-primary); }

/* ===================== PLANNER · LEDGER =====================
   Gallery of records, the spreadsheet view with its summary row, and the entry editor. */
.pl-vswitch { margin: 0 0 14px; }
.pl-vswitch .seg button { font-size: 13px; padding: 8px 16px; }
.pl-cnt { font-size: 10.5px; font-weight: 700; background: var(--color-background-secondary-tag);
  color: var(--color-text-secondary-tag); border-radius: var(--radius-pill); padding: 1px 6px; margin-left: 2px; }
.pl-geosel { height: 32px; background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: 13px; padding: 0 10px; }

.pl-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.pl-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); padding: 13px 14px; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.pl-card:hover { transform: translateY(-2px); border-color: var(--color-border-info);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07); }
.pl-chead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pl-geo { font-size: 14px; font-weight: 700; letter-spacing: .04em; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.pl-cdate { font-size: 11px; color: var(--color-text-tertiary); flex: 1; }
.pl-cnet { font-size: 26px; font-weight: 700; line-height: 1.1; display: flex; align-items: baseline; gap: 8px; }
.pl-cnet.pos { color: var(--color-text-success); } .pl-cnet.neg-t { color: var(--color-text-danger); }
.pl-croi { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); }
.pl-stack { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 10px 0 9px;
  background: var(--color-background-secondary); }
.pl-stack span { display: block; height: 100%; }
.pl-crow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.pl-crow > span:first-child { flex: 1; color: var(--color-text-secondary); display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-crow b { font-variant-numeric: tabular-nums; }
.pl-ccpm { font-size: 11px; color: var(--color-text-tertiary); min-width: 46px; text-align: right; }
.pl-cbuy { border-bottom: 0.5px solid var(--color-border-tertiary); padding-bottom: 7px; margin-bottom: 4px; }
.pl-dotc { display: inline-block; width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; margin-right: 5px; }
.pl-cfoot { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; padding-top: 8px;
  border-top: 0.5px solid var(--color-border-tertiary); font-size: 11px; color: var(--color-text-tertiary); }
.pl-cfoot .pos { color: var(--color-text-success); } .pl-cfoot .neg-t { color: var(--color-text-danger); }
.pl-cact { display: flex; gap: 6px; margin-top: 9px; }
.pl-cact .btn { flex: 0 0 auto; }

.pl-ltbl tbody tr:hover { background: var(--color-background-secondary); }
.pl-sumrow td { border-top: 1px solid var(--color-border-tertiary); font-weight: 700;
  background: var(--color-background-secondary); }
.pl-sumrow td:first-child { font-weight: 500; color: var(--color-text-tertiary); }

.pl-flag { font-size: 12.5px; line-height: 1.6; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px;
  border-left: 3px solid transparent; }
.pl-flag-success { background: var(--color-background-success); color: var(--color-text-success); border-left-color: var(--color-text-success); }
.pl-flag-warning { background: var(--color-background-warning); color: var(--color-text-warning); border-left-color: var(--color-text-warning); }
.pl-flag-danger  { background: var(--color-background-danger);  color: var(--color-text-danger);  border-left-color: var(--color-text-danger); }
.pl-flag-info    { background: var(--color-background-info);    color: var(--color-text-info);    border-left-color: var(--color-text-info); }
.pl-flag b { font-weight: 700; }

.pl-esec { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px; }
.pl-esech { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary); margin-bottom: 10px; }
.pl-buygrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.pl-leg { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.pl-buygrid input, .pl-leg input { width: 100%; height: 34px; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
  color: var(--color-text-primary); font-size: 13px; padding: 0 10px; }
.pl-buygrid input:focus, .pl-leg input:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); outline: 0; }
.pl-buygrid .pl-inp.has-pre input, .pl-leg .pl-inp.has-pre input { padding-left: 24px; }
.pl-epreview { margin-top: 4px; }
.pl-epv { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; background: var(--color-background-secondary);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12px; color: var(--color-text-secondary); }
.pl-epv b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pl-epv b.pos { color: var(--color-text-success); } .pl-epv b.neg-t { color: var(--color-text-danger); }
@media (max-width: 720px) { .pl-buygrid, .pl-leg { grid-template-columns: 1fr; } }

/* Ledger: four-field buy/sell rows, and the geo x network compare matrix. */
.pl-lhead { display: grid; grid-template-columns: 1.3fr 0.7fr 1fr 1fr 1fr 30px; gap: 8px; margin-bottom: 6px; }
.pl-lhead span { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: .03em; }
.pl-buygrid { grid-template-columns: 1.3fr 1fr 1fr 1fr 30px; align-items: center; }
.pl-leg { grid-template-columns: 1.3fr 0.7fr 1fr 1fr 1fr auto; }
.pl-epvr { flex-basis: 100%; padding-top: 8px; border-top: 0.5px solid var(--color-border-tertiary); }

.pl-mx td, .pl-mx th { white-space: nowrap; }
.pl-mx .pl-mxg { font-weight: 600; }
.pl-mxc { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pl-mxc.is-best { font-weight: 700; outline: 1.5px solid var(--color-text-success); outline-offset: -2px; }
.pl-mxc.is-worst { color: var(--color-text-tertiary); }
.pl-mx0 { text-align: right; color: var(--color-text-tertiary); }
@media (max-width: 860px) { .pl-lhead { display: none; } }

/* Ledger: segment chips (device / OS) and the spend-vs-profit share bars. */
.pl-seg4 { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px; }
.pl-seg { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  color: var(--color-text-secondary); background: var(--color-background-secondary);
  border-radius: var(--radius-pill); padding: 2px 7px; white-space: nowrap; }
.pl-seg svg { opacity: .75; }
.pl-sharebar { height: 4px; border-radius: 2px; background: var(--color-background-secondary);
  margin: 4px 0 3px; overflow: hidden; }
.pl-sharebar span { display: block; height: 100%; background: var(--primary); opacity: .7; }
.pl-sharelbl { font-size: 10px; color: var(--color-text-tertiary); font-weight: 400; }
@media (max-width: 760px) { .pl-seg4 { grid-template-columns: 1fr 1fr; } }

/* Planner: single-select geo picker (campaign box, one choice). */
.pl-geobox { min-height: 36px; padding: 4px 30px 4px 8px; }
.pl-geobox .geo-search { flex: 1 1 90px; min-width: 90px; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--color-text-primary); height: 26px; }
.pl-geodrop { position: absolute; left: 0; right: 0; max-height: 260px; overflow-y: auto; }
/* The highlighted row is the one Enter will take, so it has to read as the strongest thing in
   the list. The free-text fallback is deliberately quiet until it is the highlighted row itself. */
.geo-opt.is-on { background: rgba(47,111,237,.12); box-shadow: inset 3px 0 0 #2f6fed; font-weight: 500; }
.geo-opt.geo-free { color: var(--color-text-tertiary); font-style: italic; }
.geo-opt.geo-free .geo-cc { text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
.geo-opt.geo-free.is-on { color: var(--color-text-primary); font-style: normal; }
.geo-opt.geo-free:hover { background: rgba(47,111,237,.12); color: var(--color-text-primary); }
.pl-geoquick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.pl-geoquick > span { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--color-text-tertiary); margin-right: 2px; }
.pl-geoquick button { border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  color: var(--color-text-secondary); border-radius: var(--radius-pill); padding: 3px 9px;
  font-size: 11.5px; cursor: pointer; text-transform: capitalize; }
.pl-geoquick button:hover { border-color: var(--color-border-info); color: var(--color-text-info); }
/* The picker sits inside a grid cell, so its dropdown needs a positioning context and a layer. */
.pl-seg4 .field { position: relative; }
.pl-seg4 .field:has(.pl-geodrop) { z-index: 5; }

/* Ledger: batch entry session list + run label on cards. */
.pl-batch { border: 0.5px solid var(--color-border-tertiary); border-left: 3px solid var(--color-text-success);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 4px 0 12px; }
.pl-batchh { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 7px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-batchh .pos { color: var(--color-text-success); } .pl-batchh .neg-t { color: var(--color-text-danger); }
.pl-brow { display: grid; grid-template-columns: 1.3fr 1.4fr .8fr .6fr; gap: 10px; align-items: center;
  font-size: 12px; padding: 5px 8px; border-radius: var(--radius-sm); }
.pl-brow:nth-child(odd) { background: var(--color-background-secondary); }
.pl-bgeo { font-weight: 600; text-transform: capitalize; display: flex; align-items: center; gap: 6px; }
.pl-brow b.pos, .pl-brow .pos { color: var(--color-text-success); }
.pl-brow b.neg-t, .pl-brow .neg-t { color: var(--color-text-danger); }
.pl-cname { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ledger entry: stat chips + the live insight lines under the form. */
.pl-st { display: inline-flex; flex-direction: column; gap: 1px; }
.pl-st i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-tertiary); font-weight: 600; }
.pl-st b { font-size: 13.5px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pl-st b.pos { color: var(--color-text-success); } .pl-st b.neg-t { color: var(--color-text-danger); }
.pl-ins { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pl-inl { font-size: 12.5px; line-height: 1.55; padding: 8px 11px; border-radius: var(--radius-sm);
  border-left: 3px solid transparent; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.pl-inl b { color: var(--color-text-primary); }
.pl-inl-success { background: var(--color-background-success); border-left-color: var(--color-text-success); color: var(--color-text-success); }
.pl-inl-warning { background: var(--color-background-warning); border-left-color: var(--color-text-warning); color: var(--color-text-warning); }
.pl-inl-danger { background: var(--color-background-danger); border-left-color: var(--color-text-danger); color: var(--color-text-danger); }
.pl-inl-info { background: var(--color-background-info); border-left-color: var(--color-text-info); color: var(--color-text-info); }
.pl-inl-success b, .pl-inl-warning b, .pl-inl-danger b, .pl-inl-info b { color: inherit; }

/* Ledger: run cards — wider, with the per-geo rows inside. */
.pl-gal-wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.pl-gcard { cursor: default; }
.pl-gcard:hover { transform: none; box-shadow: none; border-color: var(--color-border-tertiary); }
.pl-ginner { margin-top: 10px; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 6px; }
.pl-grow { display: grid; grid-template-columns: 1.1fr .8fr 1.4fr .8fr .6fr auto auto; gap: 8px;
  align-items: center; font-size: 11.5px; padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.pl-grow:hover { background: var(--color-background-secondary); }
.pl-ggeo { font-weight: 600; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-gunits, .pl-gmoney { color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.pl-grow b { font-variant-numeric: tabular-nums; }
.pl-grow b.pos, .pl-grow .pos { color: var(--color-text-success); }
.pl-grow b.neg-t, .pl-grow .neg-t { color: var(--color-text-danger); }
.pl-gv { font-size: 9.5px; padding: 1px 6px; }
.pl-gdel { border: 0; background: none; color: var(--color-text-tertiary); cursor: pointer; padding: 2px;
  opacity: 0; transition: opacity .12s ease; }
.pl-grow:hover .pl-gdel { opacity: 1; }
.pl-gdel:hover { color: var(--color-text-danger); }

/* Ledger: run header actions and the full-size run view. */
.pl-cname { display: flex; align-items: center; gap: 4px; }
.pl-cnametxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-ghbtn { flex: none; border: 0; background: none; padding: 2px; border-radius: 4px; cursor: pointer;
  color: var(--color-text-tertiary); opacity: 0; transition: opacity .14s ease, color .14s ease, background .14s ease; }
.pl-gcard:hover .pl-ghbtn { opacity: 1; }
.pl-ghbtn:hover { color: var(--color-text-info); background: var(--color-background-secondary); }
.pl-cnet[data-gopen]:hover { text-decoration-color: currentColor; opacity: .88; }
.pl-rhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-rkpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pl-rk { background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 10px 12px; }
.pl-rkl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-tertiary); font-weight: 600; }
.pl-rkv { font-size: 18px; font-weight: 700; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.pl-rkv.pos { color: var(--color-text-success); } .pl-rkv.neg-t { color: var(--color-text-danger); }
.pl-rks { font-size: 10.5px; color: var(--color-text-tertiary); }
.pl-rsec { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin: 18px 0 8px; }
.pl-rtbl td, .pl-rtbl th { white-space: nowrap; }

/* Ledger · Decay Watch: sparklines and the deadline list. */
.pl-spark { display: block; overflow: visible; }
.pl-spark path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pl-sparkd { stroke: var(--color-text-danger); }
.pl-sparku { stroke: var(--color-text-success); }
.pl-sparkdotd { fill: var(--color-text-danger); }
.pl-sparkdotu { fill: var(--color-text-success); }
.pl-dl { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--color-background-secondary); margin-bottom: 8px; border-left: 3px solid var(--color-text-warning); }
.pl-dl.is-soon { border-left-color: var(--color-text-danger); background: var(--color-background-danger); }
.pl-dld { flex: none; min-width: 54px; text-align: center; font-size: 24px; font-weight: 700; line-height: 1;
  color: var(--color-text-warning); font-variant-numeric: tabular-nums; }
.pl-dl.is-soon .pl-dld { color: var(--color-text-danger); }
.pl-dld span { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; opacity: .8; margin-top: 2px; }
.pl-dlt { font-size: 12.5px; line-height: 1.6; color: var(--color-text-secondary); }
.pl-dlt b { color: var(--color-text-primary); }
.pl-dl.is-soon .pl-dlt, .pl-dl.is-soon .pl-dlt b { color: var(--color-text-danger); }
.pl-dlm { font-size: 11px; color: var(--color-text-tertiary); margin-top: 4px; }
.pl-dl.is-soon .pl-dlm { color: var(--color-text-danger); opacity: .75; }
.pl-dtbl td, .pl-dtbl th { white-space: nowrap; }

/* Ledger: network marks (logo, or a coloured initial) and the network picker rows. */
.pl-nlogo { border-radius: 4px; object-fit: contain; background: var(--color-background-primary);
  vertical-align: -3px; margin-right: 6px; flex: none; }
.pl-ninit { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px;
  color: #fff; font-weight: 700; vertical-align: -3px; margin-right: 6px; flex: none; letter-spacing: 0; }
.pl-netbox { min-height: 34px; padding: 3px 26px 3px 7px; }
.pl-netchip { padding: 2px 6px 2px 4px; }
.pl-netchip .pl-nlogo, .pl-netchip .pl-ninit { margin-right: 4px; vertical-align: -2px; }
.pl-netopt { gap: 4px; }
.pl-netopt > span:first-of-type { flex: 1; }
.pl-netopt .geo-cc { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }
.pl-crow .pl-nlogo, .pl-crow .pl-ninit { margin-right: 5px; }

.pl-netwrap { position: relative; min-width: 0; }
.pl-f { position: relative; }

.pl-geodrop { max-width: 420px; border-radius: var(--radius-sm); border-top: 0.5px solid var(--color-border-tertiary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16); margin-top: 3px; }
.pl-netwrap { position: relative; min-width: 0; }

/* Planner: real dropdown menus (replacing native selects) and the run bulk-edit grid. */
.pl-menu { display: inline-block; }
.pl-mbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 10px;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: 12.5px;
  font-family: inherit; cursor: pointer; max-width: 210px;
  transition: border-color .14s ease, color .14s ease, background .14s ease; }
.pl-mbtn:hover { border-color: var(--color-border-secondary); color: var(--color-text-primary); }
.pl-mbtn.is-set { color: var(--color-text-primary); font-weight: 500; border-color: var(--color-border-info); }
.pl-mbtn[aria-expanded="true"] { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.pl-mlbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.pl-mcar { display: flex; opacity: .5; transform: rotate(90deg); }
.pl-mbtn[aria-expanded="true"] .pl-mcar { transform: rotate(-90deg); }
.pl-mdrop { position: absolute; top: calc(100% + 4px); left: 0; min-width: 190px; max-width: 320px;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, .16); z-index: 40; overflow: hidden; }
.pl-msearch { padding: 7px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.pl-msearch input { width: 100%; height: 28px; border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); background: var(--color-background-secondary); padding: 0 9px;
  font-size: 12.5px; color: var(--color-text-primary); outline: 0; }
.pl-mlist { max-height: 260px; overflow-y: auto; padding: 4px; }
.pl-mitem { display: flex; align-items: center; gap: 5px; padding: 7px 8px; border-radius: 6px;
  font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; }
.pl-mitem.is-on { background: var(--color-background-secondary); color: var(--color-text-primary); }
.pl-mitem.is-cur { color: var(--color-text-primary); font-weight: 500; }
.pl-mitem.is-empty { color: var(--color-text-tertiary); cursor: default; }
.pl-mtick { width: 14px; display: inline-flex; color: var(--color-text-info); flex: none; }
.pl-mnote { margin-left: auto; font-size: 10.5px; color: var(--color-text-tertiary); }

.pl-ewrap { max-height: 46vh; overflow: auto; border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); }
.pl-etbl { font-size: 12px; }
.pl-etbl th { position: sticky; top: 0; background: var(--color-background-primary); z-index: 2; white-space: nowrap; }
.pl-etbl .pl-esub th { top: 28px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-tertiary); font-weight: 500; }
.pl-ecolh { text-align: center; border-left: 0.5px solid var(--color-border-tertiary); }
.pl-etbl td { padding: 4px 6px; }
.pl-ei { width: 100%; min-width: 68px; height: 28px; border: 0.5px solid transparent; border-radius: 5px;
  background: transparent; color: var(--color-text-primary); font-size: 12px; padding: 0 6px;
  font-variant-numeric: tabular-nums; }
.pl-ei:hover { border-color: var(--color-border-tertiary); }
.pl-ei:focus { outline: 0; border-color: var(--color-border-info); background: var(--color-background-primary);
  box-shadow: 0 0 0 2px var(--color-focus-ring); }
.pl-ei-geo { min-width: 96px; font-weight: 600; }
.pl-ei-sm { min-width: 58px; color: var(--color-text-secondary); }
.pl-ecalc { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.pl-erow.is-dead td { opacity: .38; text-decoration: line-through; }
.pl-erow.is-dead .pl-ei { pointer-events: none; }
.pl-etbl tfoot .pl-sumrow td { position: sticky; bottom: 0; }
.pl-ebtns { display: flex; gap: 8px; margin-top: 10px; }

/* A dialog sized for a whole run: wide enough that the table is not a scrollbar with data in it. */
.modal.xl { max-width: min(1240px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.modal.xl > .modal-body { flex: 1; overflow: auto; }
.modal.xl > .modal-head, .modal.xl > .modal-foot { flex: none; }
.modal.xl .pl-ewrap { max-height: none; }
.modal.xl .tbl-wrap { overflow-x: auto; }

/* Compare: headline, per-cell bars, lead badges. */
.pl-cmphead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
  color: var(--color-text-secondary); background: var(--color-background-secondary);
  border-radius: var(--radius-sm); padding: 10px 13px; margin: 0 0 12px; }
.pl-cmphead b { color: var(--color-text-primary); }
.pl-cmpnote { margin-left: auto; font-size: 11.5px; color: var(--color-text-tertiary); }
.pl-mx th, .pl-mx td { width: 1%; }
.pl-mx th:first-child, .pl-mx td:first-child { width: auto; min-width: 150px; }
.pl-mxvol { color: var(--color-text-tertiary); font-size: 11.5px; }
.pl-mxc { text-align: right; min-width: 96px; padding-top: 6px; padding-bottom: 6px; }
.pl-mxv { display: block; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.pl-mxbar { display: block; height: 3px; border-radius: 2px; background: var(--color-background-secondary);
  margin-top: 4px; overflow: hidden; }
.pl-mxbar i { display: block; height: 100%; border-radius: 2px; opacity: .75; }
.pl-mxc.is-best .pl-mxv { font-weight: 700; color: var(--color-text-success); }
.pl-mxc.is-worst .pl-mxv { color: var(--color-text-tertiary); }
.pl-mxc.is-solo .pl-mxv { color: var(--color-text-primary); }
.pl-lead { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 600;
  border-radius: var(--radius-pill); padding: 1px 6px; background: var(--color-background-secondary);
  color: var(--color-text-tertiary); }
.pl-lead.is-clear { background: var(--color-background-success); color: var(--color-text-success); }
.pl-lead.is-solo { background: transparent; color: var(--color-text-tertiary); font-weight: 400; font-style: italic; }

/* Saved views + run-vs-run. */
.pl-bmrow { position: relative; padding-right: 26px; }
.pl-bmdel { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0;
  background: none; color: var(--color-text-tertiary); cursor: pointer; padding: 3px; border-radius: 4px;
  opacity: 0; transition: opacity .12s ease; }
.pl-bmrow:hover .pl-bmdel { opacity: 1; }
.pl-bmdel:hover { color: var(--color-text-danger); background: var(--color-background-secondary); }
.pl-bmfoot { padding: 8px; border-top: 0.5px solid var(--color-border-tertiary); }
.pl-bmfoot .btn { width: 100%; justify-content: center; }
.pl-vsrel { font-size: 10.5px; color: var(--color-text-tertiary); font-weight: 500; }
.pl-cmp .pl-win { font-weight: 700; color: var(--color-text-success); }

/* ===================== LOGIN — split shell =====================
   Form left at a fixed reading width, branded panel right. The panel is decoration and is the
   first thing dropped on a narrow screen; nothing required to sign in is ever inside it. */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--color-page); }
.auth-split:has(.auth-side.on) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-main { display: grid; place-items: center; padding: 40px 24px; min-width: 0; }
.auth-card { width: 100%; max-width: 384px; background: transparent; border: 0; padding: 0; }
.auth-card .logo { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 22px;
  background: var(--color-background-info); color: var(--color-text-info); display: grid; place-items: center;
  overflow: hidden; }
.auth-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.auth-card h1 { font-size: 26px; letter-spacing: -.015em; margin: 0 0 6px; font-weight: 650; }
.auth-card .sub { color: var(--color-text-secondary); margin: 0 0 26px; font-size: 14px; }
.auth-card .field label { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.auth-card .field input { height: 40px; border-radius: 9px; font-size: 14px; }
.auth-card .btn-block { height: 42px; border-radius: 9px; font-size: 14px; font-weight: 550; }
.auth-foot { margin-top: 26px; font-size: 11.5px; color: var(--color-text-tertiary); }

/* The panel. An uploaded image fills it; with none set it is a wash mixed from the brand colour —
   a placeholder photograph would look like a mistake, a tinted field looks deliberate. */
.auth-side { position: relative; display: none; overflow: hidden; isolation: isolate;
  background: var(--color-background-secondary); }
.auth-side.on { display: block; }
.auth-side-img { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.auth-side-img.ready { opacity: 1; transform: none; }
.auth-side.on::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .48) 100%); }
.auth-side.no-img { background:
  radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 60%),
  radial-gradient(100% 80% at 85% 90%, color-mix(in srgb, var(--primary) 26%, transparent) 0%, transparent 55%),
  var(--color-background-secondary); }
.auth-side.no-img::after { background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .28) 100%); }
.auth-side-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 44px; }
.auth-side-mark { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.auth-side-mark img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.auth-side-tag { color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.55; margin-top: 12px;
  max-width: 460px; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.auth-side-tag:empty { display: none; }

.auth-split.is-centered .auth-side { display: none; }
@media (max-width: 900px) { .auth-side.on { display: none; } .auth-split:has(.auth-side.on) { grid-template-columns: 1fr; } }

/* Appearance → login preview */
.lp-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 190px; border-radius: var(--radius-sm);
  overflow: hidden; border: 0.5px solid var(--color-border-tertiary); }
.lp-prev-form { background: var(--color-background-primary); padding: 18px; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.lp-prev-form span { display: block; height: 8px; border-radius: 4px; background: var(--color-background-secondary); }
.lp-prev-form .w1 { width: 42%; height: 11px; } .lp-prev-form .w2 { width: 68%; }
.lp-prev-form .w3 { width: 100%; height: 22px; } .lp-prev-form .w4 { width: 100%; height: 22px; }
.lp-prev-form .w5 { width: 100%; height: 24px; background: var(--primary); opacity: .85; }
/* The preview paints the chosen appearance with fixed colours rather than the panel variables:
   the point is to show what a stranger sees on the sign-in page, which has nothing to do with the
   theme the person editing this setting happens to be using. "Auto" shows what THIS device would
   get, since that is the only honest answer it can give. */
.lp-prev.lp-t-light .lp-prev-form { background: #ffffff; }
.lp-prev.lp-t-light .lp-prev-form span { background: #ebebef; }
.lp-prev.lp-t-dark .lp-prev-form { background: #141416; }
.lp-prev.lp-t-dark .lp-prev-form span { background: #2a2a2f; }
@media (prefers-color-scheme: light) {
  .lp-prev.lp-t-auto .lp-prev-form { background: #ffffff; }
  .lp-prev.lp-t-auto .lp-prev-form span { background: #ebebef; }
}
@media (prefers-color-scheme: dark) {
  .lp-prev.lp-t-auto .lp-prev-form { background: #141416; }
  .lp-prev.lp-t-auto .lp-prev-form span { background: #2a2a2f; }
}
.lp-prev-side { background-size: cover; background-position: center; position: relative;
  background-color: var(--color-background-secondary); }
.lp-prev-side.no-img { background:
  radial-gradient(120% 90% at 15% 10%, color-mix(in srgb, var(--primary) 42%, transparent) 0%, transparent 60%),
  var(--color-background-secondary); }
.lp-prev-side::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .45) 100%); }
.lp-prev-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: #fff;
  font-size: 11px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* Inline campaign editor: a full-width row directly under the campaign being edited. */
tr.inline-edit-row > td { padding: 0 !important; background: var(--color-background-secondary); }
tr.inline-edit-row .inline-form { margin: 10px 12px 16px; border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10); animation: inlineOpen .18s cubic-bezier(.2, .7, .3, 1); }
@keyframes inlineOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* The row being edited stays visibly the subject while its form is open. */
tr.is-editing > td { background: var(--color-background-secondary); }
tr.is-editing > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
tr.is-editing [data-edit] { font-weight: 650; }

/* Login: version beside the brand name, and the theme toggle. */
.auth-name { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.auth-ver { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--color-text-tertiary);
  background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-pill); padding: 2px 8px; position: relative; top: -2px; }
.auth-ver:empty { display: none; }
.auth-theme { position: absolute; top: 18px; right: 18px; z-index: 3; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 9px; cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  color: var(--color-text-secondary);
  transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease; }
.auth-theme:hover { color: var(--color-text-primary); border-color: var(--color-border-secondary); }
.auth-theme:active { transform: translateY(.5px); }
.auth-theme:focus-visible { outline: 0; border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }
/* It lives in the form column, never over the panel: the panel image is whatever was uploaded,
   so contrast there cannot be guaranteed in either theme. */
.auth-main { position: relative; }

/* ===================== i18n: language menu + right-to-left =====================
   RTL is applied where direction actually matters — the sidebar edge, text alignment, and the few
   places something is pinned to a physical side. The rest of the layout is flex and grid, which
   mirror on their own once dir="rtl" is set. */
.lang-wrap { display: inline-flex; }
.lang-drop { right: 0; left: auto; min-width: 190px; }
[dir="rtl"] .lang-drop { left: 0; right: auto; }
.auth-tools { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; gap: 8px; }
[dir="rtl"] .auth-tools { right: auto; left: 18px; }
.auth-theme { position: static; }
/* Sits beside the theme button and matches its height and border exactly, so the pair reads as one
   control group rather than two unrelated widgets. The code is the label — a globe alone does not
   tell you which language you are already in, which is the one thing the button should answer. */
.auth-lang { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 9px;
  border-radius: 9px; cursor: pointer; border: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-primary); color: var(--color-text-secondary);
  transition: color .14s ease, border-color .14s ease, background .14s ease, transform .14s ease; }
.auth-lang:hover { color: var(--color-text-primary); border-color: var(--color-border-secondary); }
.auth-lang:active { transform: translateY(.5px); }
.auth-lang:focus-visible { outline: 0; border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.al-globe { display: inline-flex; opacity: .82; }
.auth-lang:hover .al-globe { opacity: 1; }
.al-code { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  color: var(--color-text-primary); }
/* The shared chevron glyph points right; pointing it down is what makes it read as a menu. */
.al-car { display: inline-flex; color: var(--color-text-tertiary); transform: rotate(90deg);
  transition: transform .16s ease; }
.auth-lang.is-open .al-car { transform: rotate(-90deg); }
#authLangWrap .lang-drop { top: calc(100% + 6px); }

[dir="rtl"] .side { border-right: 0; border-left: 0.5px solid var(--color-border-tertiary); }
[dir="rtl"] .nav-item { text-align: right; }
[dir="rtl"] .cmdk-lbl, [dir="rtl"] .pl-mlbl { text-align: right; }
[dir="rtl"] .tbl th, [dir="rtl"] .tbl td { text-align: right; }
[dir="rtl"] .tbl th.tnum, [dir="rtl"] .tbl td.tnum { text-align: left; }
[dir="rtl"] .pl-mcar { transform: rotate(-90deg); }
[dir="rtl"] .auth-side-body { text-align: right; }
[dir="rtl"] tr.is-editing > td:first-child { box-shadow: inset -3px 0 0 var(--primary); }
/* Numbers stay left-to-right inside a right-to-left page: a CPM rendered RTL is unreadable. */
[dir="rtl"] .tnum, [dir="rtl"] .mono, [dir="rtl"] .pl-mxv, [dir="rtl"] .kv { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Screen bodies are not translated yet, and English sentences inside an RTL container get their
   punctuation relocated — ".one place" instead of "one place." That is a worse mistake than not
   mirroring, so the RTL flip is scoped to the chrome that IS translated (sidebar, top bar, menus)
   and the screen body stays left-to-right until its strings are translated too. Remove this block
   the day the screens are localised. */
[dir="rtl"] #view { direction: ltr; text-align: left; }
[dir="rtl"] #view .tbl th, [dir="rtl"] #view .tbl td { text-align: left; }
[dir="rtl"] #view .tbl th.tnum, [dir="rtl"] #view .tbl td.tnum { text-align: right; }
[dir="rtl"] #modal-root { direction: ltr; text-align: left; }

/* ============================== publisher portal ==============================
   A quieter room than the admin panel, on purpose. One accent, one card weight, no
   gradients, and figures big enough to read from across a desk. Everything here is
   namespaced .pub-* so it can be lifted into its own bundle later without untangling
   it from the panel's styles. Uses the same tokens, so it themes for free. */
.auth-card-wide { max-width: 460px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-alt { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--color-text-secondary); }
.auth-alt a { color: var(--primary); font-weight: 500; }
.auth-alt a:hover { text-decoration: underline; }
.field label .opt { color: var(--color-text-tertiary); font-weight: 400; margin-left: 4px; }
@media (max-width: 520px) { .auth-row { grid-template-columns: 1fr; } }

.pub { min-height: 100vh; background: var(--color-page); }
.pub-top { position: sticky; top: 0; z-index: 20; background: var(--color-background-primary);
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.pub-top-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; gap: 28px; }
.pub-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; flex: none; }
.pub-logo { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-background-info); color: var(--color-text-info); overflow: hidden; }
.pub-logo img { width: 100%; height: 100%; object-fit: cover; }
.pub-nav { display: flex; gap: 4px; flex: 1; }
.pub-nav a { padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500;
  color: var(--color-text-secondary); }
.pub-nav a:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.pub-nav a.on { background: var(--color-background-secondary); color: var(--color-text-primary); }
.pub-top-right { display: flex; align-items: center; gap: 10px; flex: none; }
.pub-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 0.5px solid var(--color-border-tertiary);
  background: transparent; color: var(--color-text-secondary); display: grid; place-items: center; cursor: pointer; }
.pub-icon:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.pub-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
.pub-av { width: 26px; height: 26px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--color-background-secondary-tag); color: var(--color-text-secondary-tag); font-size: 12px; font-weight: 600; }
.pub-pill { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-background-secondary-tag); color: var(--color-text-secondary-tag); white-space: nowrap; }
.pub-pill.ok { background: var(--color-background-success); color: var(--color-text-success); }
.pub-pill.warn { background: var(--color-background-warning); color: var(--color-text-warning); }
.pub-pill.bad { background: var(--color-background-danger); color: var(--color-text-danger); }

.pub-main { max-width: 1080px; margin: 0 auto; padding: 34px 24px 64px; }
.pub-wrap { display: flex; flex-direction: column; gap: 20px; }
.pub-narrow { max-width: 620px; }
.pub-head h1 { font-size: 26px; font-weight: 600; margin: 0 0 5px; letter-spacing: -0.01em; }
.pub-head p { margin: 0; color: var(--color-text-secondary); font-size: 14px; }

.pub-banner { display: flex; gap: 13px; padding: 16px 18px; border-radius: var(--radius-card);
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary); }
.pub-banner.warn { background: var(--color-background-warning); border-color: transparent; }
.pub-banner.bad { background: var(--color-background-danger); border-color: transparent; }
.pub-banner-ic { flex: none; margin-top: 1px; }
.pub-banner.warn .pub-banner-ic { color: var(--color-text-warning); }
.pub-banner.bad .pub-banner-ic { color: var(--color-text-danger); }
.pub-banner h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.pub-banner p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.pub-banner.warn p, .pub-banner.warn h3 { color: var(--color-text-warning); }
.pub-banner.bad p, .pub-banner.bad h3 { color: var(--color-text-danger); }
.pub-banner-note { margin-top: 8px !important; }

.pub-balance { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 1px;
  background: var(--color-border-tertiary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); overflow: hidden; }
.pub-balance-main { background: var(--color-background-primary); padding: 26px 24px; }
.pub-balance-l { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.pub-balance-v { font-size: 40px; font-weight: 600; letter-spacing: -0.025em; margin: 6px 0 4px;
  font-variant-numeric: tabular-nums; line-height: 1.05; }
.pub-balance-s { font-size: 12.5px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
/* Auto-fit rather than a fixed count: the dashboard shows four tiles, Payouts three, and a
   hard-coded column count leaves a dead cell on whichever screen has fewer. */
.pub-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--color-border-tertiary); }
.pub-stat { background: var(--color-background-primary); padding: 26px 24px; }
.pub-stat-l { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.pub-stat-v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px;
  font-variant-numeric: tabular-nums; }
.pub-stat-s { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
@media (max-width: 860px) {
  .pub-balance { grid-template-columns: 1fr; }
  .pub-balance-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 560px) { .pub-balance-grid { grid-template-columns: 1fr; } }

.pub-card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); overflow: hidden; }
.pub-card-h { padding: 16px 20px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.pub-card-h h2 { margin: 0; font-size: 14.5px; font-weight: 600; }
.pub-empty { padding: 52px 24px; text-align: center; color: var(--color-text-tertiary); }
.pub-empty h4 { margin: 12px 0 4px; font-size: 14.5px; font-weight: 600; color: var(--color-text-primary); }
.pub-empty p { margin: 0 auto; max-width: 440px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary); }
.pub-form { padding: 20px; display: flex; flex-direction: column; gap: 2px; }
.pub-form .btn { align-self: flex-start; margin-top: 10px; }
.pub-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.pub-sec-row:last-child { border-bottom: 0; }
.pub-sec-row b { display: block; font-size: 13.5px; font-weight: 600; }
.pub-sec-row span { display: block; font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }
@media (max-width: 640px) {
  .pub-top-in { gap: 14px; padding: 0 16px; }
  .pub-nav { order: 3; flex-basis: 100%; }
  .pub-who span:last-child { display: none; }
  .pub-main { padding: 24px 16px 48px; }
}

/* ── publisher portal: inventory, verification, payouts (v3.60) ────────────────
   Same token set as everything above, so it themes for free. Added here rather
   than woven into the earlier block so the whole portal stays liftable into its
   own bundle in one cut. */
.pub-nav a { display: inline-flex; align-items: center; gap: 7px; }
.pub-nav a .ico { opacity: .65; }
.pub-nav a.on .ico { opacity: 1; }

.pub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pub-head-act { display: flex; gap: 8px; }
.pub-mid { max-width: 760px; }
.pub-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .pub-cols { grid-template-columns: 1fr; } }

.pub-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pub-card-note { font-size: 12px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.pub-card-body { padding: 18px 20px; }
.pub-balance-pay { margin-top: 12px; font-size: 12.5px; color: var(--color-text-secondary);
  display: inline-flex; align-items: center; gap: 6px; }
.pub-note { font-size: 12px; line-height: 1.5; color: var(--color-text-tertiary); margin-top: 14px; }
.pub-empty.sm { padding: 30px 16px; }
.pub-empty.sm h4 { font-size: 13.5px; }

/* Getting started — a checklist of things the server can confirm, not a tour. */
.pub-prog { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pub-prog-bar { display: block; width: 84px; height: 4px; border-radius: 99px;
  background: var(--color-background-tertiary); overflow: hidden; }
.pub-prog-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px;
  transition: width .35s ease; }
.pub-steps { list-style: none; margin: 0; padding: 0; }
.pub-steps li { display: flex; align-items: center; gap: 13px; padding: 13px 20px;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.pub-steps li:last-child { border-bottom: 0; }
.pub-steps li > div { flex: 1; min-width: 0; }
.pub-steps b { display: block; font-size: 13.5px; font-weight: 600; }
.pub-steps span:not(.pub-step-n) { display: block; font-size: 12.5px; color: var(--color-text-secondary); margin-top: 1px; }
.pub-step-n { width: 24px; height: 24px; flex: none; border-radius: var(--radius-pill); display: grid;
  place-items: center; font-size: 12px; font-weight: 600; background: var(--color-background-tertiary);
  color: var(--color-text-secondary); }
.pub-steps li.done .pub-step-n { background: var(--color-background-success); color: var(--color-text-success); }
.pub-steps li.done b { color: var(--color-text-secondary); }

/* Declared audience bars. */
.pub-geo { display: flex; flex-direction: column; gap: 11px; }
.pub-geo-row { display: grid; grid-template-columns: 1fr 84px 26px; align-items: center; gap: 10px; }
.pub-geo-c { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-geo-bar { height: 6px; border-radius: 99px; background: var(--color-background-tertiary); overflow: hidden; }
.pub-geo-bar i { display: block; height: 100%; border-radius: 99px;
  background: color-mix(in srgb, var(--primary) 80%, transparent); }
.pub-geo-v { font-size: 11.5px; color: var(--color-text-tertiary); text-align: right;
  font-variant-numeric: tabular-nums; }
.pub-geo-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 3px 8px;
  border-radius: var(--radius-pill); background: var(--color-background-secondary-tag);
  color: var(--color-text-secondary-tag); margin-right: 5px; margin-bottom: 4px; white-space: nowrap; }

/* Compact table used inside portal cards. */
.pub-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pub-tbl th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-tertiary); padding: 10px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary); white-space: nowrap; }
.pub-tbl td { padding: 12px 14px; border-bottom: 0.5px solid var(--color-border-tertiary); vertical-align: middle; }
.pub-tbl tbody tr:last-child td { border-bottom: 0; }
.pub-tbl tbody tr { cursor: pointer; }
.pub-tbl tbody tr:hover { background: var(--color-background-secondary); }
.pub-t-main { font-weight: 500; }
.pub-t-sub { font-size: 12px; color: var(--color-text-tertiary); margin-top: 1px; }
.pub-t-act { text-align: right; color: var(--color-text-tertiary); width: 34px; }

/* Site cards — a small dossier each, which reads badly as table columns. */
.pub-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.pub-site { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 13px; }
.pub-site.unverified { border-color: color-mix(in srgb, var(--color-border-warning) 45%, var(--color-border-tertiary)); }
.pub-site.suspended { opacity: .7; }
.pub-site-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pub-site-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pub-site-fav { width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); display: grid;
  place-items: center; font-size: 15px; font-weight: 600; background: var(--color-background-info);
  color: var(--color-text-info); }
.pub-site-id b { display: block; font-size: 14px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pub-site-id span { display: block; font-size: 12px; color: var(--color-text-tertiary); margin-top: 1px; }
.pub-site-m { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pub-site-m span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); }
.pub-site-m b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.pub-site-geo { display: flex; flex-wrap: wrap; }
.pub-site-warn { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45;
  padding: 9px 11px; border-radius: var(--radius-sm); background: var(--color-background-warning);
  color: var(--color-text-warning); }
.pub-site-warn .ico { flex: none; margin-top: 1px; }
.pub-site-f { display: flex; gap: 8px; margin-top: auto; padding-top: 2px; }

/* Verification block — the instructions, and the token, copyable in one click. */
.pub-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 18px; }
.pub-modal-head h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.pub-verify { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; border-radius: var(--radius-card);
  background: var(--color-background-secondary); }
.pub-vmethod h4 { margin: 0 0 5px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.pub-vmethod h4 span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--radius-pill); background: var(--color-background-info);
  color: var(--color-text-info); }
.pub-vmethod p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
.pub-code { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-radius: var(--radius-sm);
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); margin-bottom: 7px; }
.pub-code code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; overflow-x: auto;
  white-space: nowrap; color: var(--color-text-primary); }
.pub-copy { flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: var(--color-background-secondary); color: var(--color-text-secondary); display: grid; place-items: center; }
.pub-copy:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.pub-verified-note { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--radius-card);
  background: var(--color-background-success); color: var(--color-text-success); font-size: 13px; }

.pub-kvs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 18px;
  background: var(--color-border-tertiary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); overflow: hidden; }
.pub-kv { background: var(--color-background-primary); padding: 12px 14px; }
.pub-kv span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); }
.pub-kv b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pub-msec { margin-top: 18px; }
.pub-msec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-tertiary); }
.pub-desc { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); }
@media (max-width: 560px) { .pub-kvs { grid-template-columns: 1fr; } }

/* Add / edit site form. */
.pub-form-modal { display: flex; flex-direction: column; gap: 4px; }
.pub-frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pub-fixed-domain { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--radius-sm); background: var(--color-background-secondary); font-size: 13px; }
.pub-fixed-domain b { font-weight: 600; }
.pub-fixed-domain span { color: var(--color-text-tertiary); font-size: 12px; }
.pub-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pub-chip { font-size: 12.5px; padding: 6px 13px; border-radius: var(--radius-pill); cursor: pointer;
  border: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  color: var(--color-text-secondary); }
.pub-chip:hover { border-color: var(--color-border-primary); }
.pub-chip.on { background: var(--color-background-info); border-color: transparent; color: var(--color-text-info);
  font-weight: 500; }
.pub-check { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; cursor: pointer; }
.pub-check input { width: 16px; height: 16px; accent-color: var(--primary); }

/* Country picker: search the full list, chips for what's chosen, order preserved. */
.pub-geo-pick { position: relative; border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm);
  background: var(--color-background-primary); padding: 6px 8px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; min-height: 40px; }
.pub-geo-pick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.pub-geo-sel { display: contents; }
.pub-geo-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 8px;
  border-radius: var(--radius-pill); background: var(--color-background-secondary-tag);
  color: var(--color-text-secondary-tag); cursor: pointer; }
.pub-geo-chip:hover { background: var(--color-background-danger); color: var(--color-text-danger); }
.pub-geo-chip .ico { opacity: .6; }
.pub-geo-pick input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: var(--color-text-primary); padding: 4px 2px; }
.pub-geo-drop { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 40;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,.13); overflow: hidden; }
.pub-geo-drop button { display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 9px 12px; border: 0; background: transparent; cursor: pointer; font-size: 13px;
  color: var(--color-text-primary); text-align: left; }
.pub-geo-drop button:hover { background: var(--color-background-secondary); }
.pub-geo-drop button span { font-size: 11.5px; color: var(--color-text-tertiary); font-family: var(--mono); }

/* Owner-side: publisher inventory on SSP · Supply. */
.own-site-owner { font-size: 12px; color: var(--color-text-tertiary); }
/* Country pills: the ISO code carries the identity, the name carries the meaning. */
.pub-geo-tag b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; opacity: .65; }
.pub-geo-chip b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; opacity: .6; }

/* Payout address field: the one place in the portal where a typo costs real money, so the
   warning is loud and the error sits directly under the input rather than in a toast. */
.pub-payout-warn { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; margin: 0 0 14px;
  border-radius: var(--radius-sm); background: var(--color-background-warning);
  color: var(--color-text-warning); font-size: 12.5px; line-height: 1.5; }
.pub-payout-warn .ico { flex: none; margin-top: 1px; }
.pub-field-err { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-danger); }
.pub-form input.bad { border-color: var(--color-border-danger); }
.pub-form input.bad:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text-danger) 18%, transparent); }

/* Support-session banner. The single most dangerous state in an admin tool is forgetting
   whose account you are looking at, so this is loud, fixed to the top, and cannot be
   dismissed — only left. */
.pub-imp { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; font-size: 13px; line-height: 1.45;
  background: var(--color-background-warning); color: var(--color-text-warning);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text-warning) 30%, transparent); }
.pub-imp span:nth-child(2) { flex: 1; }
.pub-imp b { font-weight: 600; }
.pub-imp-ic { display: grid; place-items: center; flex: none; }
.pub-imp .btn { flex: none; }
.pub.has-imp .pub-top { top: 41px; }

/* A control removed for a reason, saying which reason. Better than a disabled field, which
   invites people to try to enable it. */
.pub-locked { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px;
  color: var(--color-text-secondary); }
.pub-locked .ico { flex: none; margin-top: 1px; opacity: .7; }
.pub-locked b { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); }
.pub-locked span { display: block; font-size: 12.5px; line-height: 1.5; margin-top: 3px; }

/* A module switch that has been moved but not saved. The switch itself already looks
   "on", so the signal has to sit next to the button that actually applies it. */
.mod-dirty { display: flex; align-items: center; gap: 7px; margin: 4px 0 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); background: var(--color-background-warning);
  color: var(--color-text-warning); font-size: 12.5px; }
.btn.btn-attention { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }

/* ---- Planner segments: one row per geo / device / OS slice of the same route ---- */
.pl-segpanel { margin: 0 0 14px; }
.pl-segpanel .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-segtbl { width: 100%; }
.pl-segtbl th { white-space: nowrap; }
.pl-segtbl td { vertical-align: middle; }
.pl-segtbl .tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-segrow { cursor: pointer; }
.pl-segrow:hover { background: var(--color-background-secondary); }
.pl-segrow.is-active { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.pl-segrow.is-active > td:first-child { box-shadow: inset 2px 0 0 var(--primary); }
.pl-segdot { display: inline-flex; align-items: center; color: var(--primary); margin-right: 5px; vertical-align: -1px; }
.pl-segtbl .pl-segdim { min-width: 148px; }
.pl-segtbl .pl-segmenu { display: block; }
.pl-segtbl .pl-segmenu .pl-mbtn { width: 100%; height: 30px; font-size: 12.5px; }
.pl-segdot + .pl-segmenu { display: inline-block; width: calc(100% - 20px); vertical-align: middle; }
.pl-segtbl input.pl-si { height: 30px; width: 88px; text-align: right; border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); background: var(--color-background-primary); color: var(--color-text-primary);
  font-size: 12.5px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.pl-segtbl input.pl-si:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.pl-segbasis { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); margin-top: 1px; }
.pl-segtot td { font-weight: 700; border-top: 0.5px solid var(--color-border-secondary);
  background: var(--color-background-secondary); }
.pl-segtbl .pos { color: var(--color-text-success); }
.pl-segtbl .neg-t { color: var(--color-text-danger); }

/* Roll-up strip under the verdict — the plan as a whole, when it is more than one row. */
.pl-tstrip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--color-border-tertiary); }
.pl-tsh { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-tertiary); }
.pl-tsi { display: flex; flex-direction: column; gap: 1px; }
.pl-tsi > span { font-size: 11px; color: var(--color-text-tertiary); }
.pl-tsi > b { font-size: 14px; font-weight: 700; }
.pl-tsi > b.pos { color: var(--color-text-success); }
.pl-tsi > b.neg-t { color: var(--color-text-danger); }

/* Ledger record rows: a per-row geo, so one dialog can cover several countries. */
.pl-leg select.pl-rgeo { width: 100%; height: 34px; background: var(--color-background-primary);
  color: var(--color-text-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-sm); padding: 0 7px; font-size: 12.5px; }
.pl-leg select.pl-rgeo:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); outline: 0; }
.pl-gsplit { margin-top: 10px; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 9px; }
.pl-gsplith { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-tertiary); margin-bottom: 7px; }
.pl-grow { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 12px; align-items: center;
  font-size: 12.5px; padding: 4px 0; border-top: 0.5px solid var(--color-border-tertiary); }
.pl-grow:first-of-type { border-top: 0; }
.pl-grow .pos { color: var(--color-text-success); }
.pl-grow .neg-t { color: var(--color-text-danger); }

/* The card heads name the segment they describe; geo/device/OS are set once, in the table. */
.pl-segwho { margin-left: auto; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--color-text-secondary);
  background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; }
.pl-segwho .muted { color: var(--color-text-tertiary); font-weight: 500; }
.pl-morelink { background: none; border: 0; padding: 2px 0 6px; color: var(--primary);
  font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.pl-morelink:hover { text-decoration: underline; }

/* A menu opened from inside the scrolling segments table is pinned to the viewport, so it
   is not clipped by the table's own overflow — and has to sit above the sheet below it. */
.pl-mdrop.is-fixed { position: fixed; z-index: 6000; max-width: 330px; }
.pl-mdrop .pl-mnote { font-variant-numeric: tabular-nums; }

/* Advice: severity on the left, the reason in the middle, the fix on the right. */
.pl-adv { display: flex; flex-direction: column; }
.pl-advrow { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 2px; border-top: 0.5px solid var(--color-border-tertiary); }
.pl-advrow:first-child { border-top: 0; padding-top: 2px; }
.pl-advdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--color-text-tertiary); }
.pl-adv-danger .pl-advdot { background: var(--color-text-danger); }
.pl-adv-warning .pl-advdot { background: var(--color-text-warning); }
.pl-adv-info .pl-advdot { background: var(--color-text-info); }
.pl-adv-success .pl-advdot { background: var(--color-text-success); }
.pl-advt { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pl-advb { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; margin-top: 3px; }
.pl-advrow .btn { white-space: nowrap; }
@media (max-width: 720px) { .pl-advrow { grid-template-columns: 10px 1fr; } .pl-advrow .btn { grid-column: 2; justify-self: start; } }
.pl-segsub { display: block; font-size: 9.5px; font-weight: 500; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }
.pl-measured { border-left: 2px solid var(--color-text-info); }