/* Zinc skin — a visual layer loaded AFTER app.css. It only restyles: no selector here is read
   by app.js and no markup changes, so removing the <link> in index.html returns the panel to
   its previous look. shadcn-style: zinc greys, ink primary, 6px controls, bordered cards. */
:root {
  --color-background-primary: #ffffff;
  --color-background-secondary: #f4f4f5;
  --color-background-tertiary: #e4e4e7;
  --color-page: #ffffff;
  --color-text-primary: #09090b;
  --color-text-secondary: #52525b;
  --color-text-tertiary: #71717a;
  --color-border-primary: #d4d4d8;
  --color-border-secondary: #e4e4e7;
  --color-border-tertiary: #e4e4e7;
  /* "Active" surfaces are neutral zinc rather than a tint of the brand colour. --primary itself
     is untouched, so the Branding colour still drives focus rings, links and charts. */
  --color-background-info: #f4f4f5;
  --color-text-info: #18181b;
  --color-border-info: #18181b;
  --color-text-secondary-tag: #52525b; --color-background-secondary-tag: #f4f4f5;
  --radius-sm: 6px; --radius-card: 10px;
  --font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --zn-side: #fafafa;
  --zn-seg-on: #ffffff;
  --zn-nav-on: #e4e4e7;
  --zn-dash: #a1a1aa;
}
[data-theme="dark"] {
  --color-background-primary: #0c0c0e;
  --color-background-secondary: #18181b;
  --color-background-tertiary: #27272a;
  --color-page: #09090b;
  --color-text-primary: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #8b8b94;
  --color-border-primary: #3f3f46;
  --color-border-secondary: #27272a;
  --color-border-tertiary: #27272a;
  --color-background-info: #27272a;
  --color-text-info: #fafafa;
  --color-border-info: #fafafa;
  --color-text-secondary-tag: #a1a1aa; --color-background-secondary-tag: #27272a;
  --zn-side: #0c0c0e;
  --zn-seg-on: #3f3f46;
  --zn-nav-on: #27272a;
  --zn-dash: #52525b;
}

/* ------------------------------ sidebar ------------------------------ */
.side { background: var(--zn-side); border-right: 1px solid var(--color-border-tertiary); }
.side .brand .logo { border-radius: 8px; background: var(--color-text-primary); color: var(--color-background-primary); }

.side nav a, .nav-item { font-size: 13px; color: var(--color-text-secondary); }
.nav-item .ico { color: currentColor; }
.nav-item:hover { background: var(--color-background-tertiary); }
.nav-item.active { background: var(--zn-nav-on); color: var(--color-text-primary); font-weight: 500; }
.nav-item.active .ico { color: var(--color-text-primary); }
.side-user { border-width: 1px; background: var(--color-background-primary); }
.side-user .av { background: var(--color-background-tertiary); color: var(--color-text-primary); }

/* ------------------------------ controls ------------------------------ */
.btn { border-width: 1px; background: var(--color-background-primary); height: 34px; }
.btn:hover { background: var(--color-background-secondary); }
.btn-ghost { background: var(--color-background-primary); }
.btn-primary, .btn-accent { background: var(--color-text-primary); color: var(--color-background-primary); border: 1px solid var(--color-text-primary); }
.btn-primary .ico, .btn-accent .ico { color: inherit; }
.btn-primary:hover, .btn-accent:hover { background: color-mix(in srgb, var(--color-text-primary) 86%, var(--color-background-primary)); }
.btn-sm { height: 30px; }
.icon-btn { border-width: 1px; }
.icon-btn.on { background: var(--color-background-secondary); color: var(--color-text-primary); border-color: var(--color-border-primary); }
.seg { border: 0; border-radius: 8px; background: var(--color-background-secondary); }
.seg button { border-radius: 6px; }
.seg button.active { background: var(--zn-seg-on); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.searchbox input { border-width: 1px; height: 34px; }
.srv-time { border-width: 1px; height: 34px; font-family: var(--mono); font-size: 12px; }
.dd-panel { border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }

.panel { border-width: 1px; }

/* ------------------------------ page head + tables ------------------------------ */
.topbar h2 { letter-spacing: -0.02em; }
.topbar .sub { font-size: 13px; }
table.tbl { font-size: 13px; }
table.tbl th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
  color: var(--color-text-secondary); background: var(--zn-side); border-bottom-width: 1px; }
table.tbl td { border-bottom-width: 1px; }

/* totals as bordered cards */

/* ------------------------------ Campaign toolbar ------------------------------ */
/* Filters read as "add a filter" chips (dashed); the right-hand Views / Columns / Import-Export
   menus stay solid. Both are the same <details class="dd"> the page already renders. */
#ctoolbar .dd > summary.btn, #ctoolbar #archBtn.btn-ghost { border: 1px dashed var(--zn-dash); }
#ctoolbar .dd:has(> .dd-panel.right) > summary.btn { border: 1px solid var(--color-border-tertiary); }
#cmain tr:has(.rowsel:checked) { background: var(--color-background-secondary); }

/* selection bar */
.bulkbar { background: #18181b; border-radius: 12px; padding: 8px 8px 8px 16px; border: 1px solid #27272a; }
.bulkbar .btn { border-radius: 6px; background: #27272a; }
.bulkbar .btn:hover { background: #3f3f46; }
.bulkbar .btn.btn-ghost { background: transparent; }
.bulkbar .btn.btn-ghost:hover { background: #27272a; }
.bulkbar .btn.btn-danger { background: #dc2626; }
.bulkbar .btn.btn-danger:hover { background: #b91c1c; }

/* The version label is a link to Docs & roadmap (v4.07). */
.side .brand a.brand-ver { text-decoration: none; cursor: pointer; }
.side .brand a.brand-ver:hover { text-decoration: underline; text-decoration-color: var(--color-text-secondary); text-underline-offset: 2px; }

/* ── Settings → Account & Security (v4.10) ─────────────────────────────────────
   A row is a title + description on the left and one card on the right. A card is a
   body plus an optional footer bar. Scoped to .set-pro so no other tab is touched. */
.set-pro { max-width: 1120px; }
.set-pro .stab-body > div { margin-top: 0 !important; }

.scard { border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-card); background: var(--color-background-primary); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.scard-b { padding: 20px; }
.scard-b.flush { padding: 0; }
.scard-b > .field:last-child, .scard-b > .row:last-child > .field { margin-bottom: 0; }
.scard-b > .switch-row { border: 0; border-radius: 0; padding: 0; margin-bottom: 16px; }
.scard-f { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary); }
.scard-f > span { flex: 1 1 220px; min-width: 0; }
.scard-f b { color: var(--color-text-primary); font-weight: 500; }
.sf-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sdirty:not(:empty) { color: var(--color-text-warning); font-weight: 500; }

/* profile */
.sprof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sprof .acct-av { width: 56px; height: 56px; }
.sprof-main { flex: 1 1 140px; min-width: 0; }
.sprof-name { font-size: 14px; font-weight: 600; }
.sprof-role { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.spw-meter { margin: 10px 0 0; }
.spw-meter:empty { display: none; }

/* divided lists */
.slist > .sitem { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.slist > .sitem + .sitem { border-top: 1px solid var(--color-border-tertiary); }
.sitem-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); color: var(--color-text-secondary); }

.sitem-main { flex: 1; min-width: 0; }
.sitem-t { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sitem-s { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem-s.wrap { white-space: normal; }

.sempty { padding: 22px 20px; text-align: center; font-size: 12.5px; color: var(--color-text-secondary); }

/* sessions keep their own classes (the multi-select handlers use them) */
.set-pro .sess-map { margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--color-border-tertiary); align-items: center; }
.sess-count { font-size: 12.5px; font-weight: 500; color: var(--color-text-primary); margin-right: 4px; }
.set-pro .sess-list { gap: 0; }
.set-pro .sess-row { border: 0; border-radius: 0; padding: 12px 20px; }
.set-pro .sess-row + .sess-row { border-top: 1px solid var(--color-border-tertiary); }
.set-pro .sess-row.current { background: var(--color-background-secondary); }
.set-pro .sess-line2 { color: var(--color-text-secondary); font-size: 12px; }
.sess-bulk { align-items: center; gap: 10px; margin: 0; padding: 10px 20px; border-top: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); }
.sinput { height: 30px; width: 190px; padding: 0 10px; border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary); color: var(--color-text-primary); font: inherit; font-size: 12.5px; outline: none; }
.sinput:focus { border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* access control */
.sbanner { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 500; border: 1px solid var(--color-border-tertiary); }
.sstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.sstat { border: 1px solid var(--color-border-tertiary); border-radius: 8px; padding: 10px 12px; background: var(--color-background-secondary); min-width: 0; }
.sstat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); }
.sstat-v { margin-top: 4px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-pro .field .sfield-hint { margin: -2px 0 8px; }
.schips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; min-height: 4px; }

/* tables inside a card run edge to edge */
.set-pro .scard .tbl-wrap { border: 0; border-radius: 0; }

/* destructive actions: outlined, not solid */
.set-pro .btn.btn-danger { background: transparent; color: var(--color-text-danger); border: 1px solid color-mix(in srgb, var(--color-text-danger) 32%, var(--color-border-tertiary)); filter: none; }
.set-pro .btn.btn-danger .ico { color: currentColor; }
.set-pro .btn.btn-danger:hover { background: color-mix(in srgb, var(--color-text-danger) 8%, transparent); filter: none; }

@media (max-width: 900px) {
  
  .sstats { grid-template-columns: minmax(0, 1fr); }
  .sinput { width: 100%; }}

/* ── Command bar (v4.13) ───────────────────────────────────────────────────────
   One sticky header: brand · nav · search · clock · grouped controls · account.
   It reuses the old sidebar class names because the avatar, logo and brand-name
   updaters look them up. */

.hgrow { flex: 1 1 0; min-width: 0; }

.hsearch { flex: 0 1 340px; min-width: 0; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px;
  border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-secondary);
  color: var(--color-text-secondary); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.hsearch > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsearch kbd { flex: none; font-family: var(--mono); font-size: 10.5px; line-height: 1; padding: 3px 5px; border-radius: 5px;
  border: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); color: var(--color-text-secondary); }
.hsearch:hover { border-color: var(--color-border-primary); color: var(--color-text-primary); }
.hsearch:focus-visible { outline: 0; border-color: var(--color-border-info); box-shadow: 0 0 0 3px var(--color-focus-ring); }

.hgrp { display: inline-flex; flex: none; border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-sm); background: var(--color-background-primary); }
.hgrp .icon-btn { width: 32px; height: 30px; border: 0; border-radius: 0; }
.hgrp .icon-btn + .icon-btn { border-left: 1px solid var(--color-border-tertiary); }
.hgrp .icon-btn:first-child { border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px); }
.hgrp .icon-btn:last-child { border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; }

/* page title row: only the screen's own actions now */
.topbar { align-items: flex-end; margin-bottom: 1.25rem; }
.cmeta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -10px 0 16px; font-size: 13px; color: var(--color-text-secondary); }
.cmeta-live { display: inline-flex; align-items: center; gap: 6px; }
.cmeta-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-success); }
.cmeta-live b { color: var(--color-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
  .hsearch { flex: 0 0 32px; padding: 0; justify-content: center; }
  .hsearch > span, .hsearch kbd { display: none; }
  .topbar { flex-wrap: wrap; }
  .topbar .actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; gap: 8px; }}

/* ── Domains card + connect wizard (v4.16) ────────────────────────────────────── */
.vt-n { font-size: 11px; font-weight: 500; padding: 0 6px; border-radius: 99px; background: var(--color-background-tertiary); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.dcard { border: 1px solid var(--color-border-tertiary); border-radius: var(--radius-card); background: var(--color-background-primary); overflow: hidden; }
.dcard-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--color-border-tertiary); }
.dcard-h .seg button { gap: 7px; }
.dcard-f { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); font-size: 12.5px; color: var(--color-text-secondary); }
.dcard table.tbl td { padding: 10px 16px; }
.dcard table.tbl th { padding: 9px 16px; }
.d-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.d-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); color: var(--color-text-secondary); }
.switch.sm { width: 34px; height: 20px; }
.switch.sm .slider::before { width: 14px; height: 14px; left: 3px; top: 3px; }
.switch.sm input:checked + .slider::before { transform: translateX(14px); }
.switch.sm input:checked + .slider { background: var(--color-text-primary); }
.dw-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--color-border-tertiary); border-top-color: var(--color-text-primary); animation: dwspin .7s linear infinite; vertical-align: -3px; }
@keyframes dwspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dw-spin { animation-duration: 2.4s; }}

.dw { display: flex; flex-direction: column; gap: 16px; }
.dw-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px -20px 0; padding: 0 20px 16px; border-bottom: 1px solid var(--color-border-tertiary); }
.dw-step { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.dw-n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-border-tertiary); font-size: 11px; font-variant-numeric: tabular-nums; }
.dw-step.on { color: var(--color-text-primary); }
.dw-step.on .dw-n { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-background-primary); }
.dw-step.done .dw-n { background: var(--color-text-success); border-color: var(--color-text-success); color: #fff; }
.dw-bar { flex: 1 1 24px; min-width: 16px; height: 1px; background: var(--color-border-tertiary); }
.dw-sec { display: flex; flex-direction: column; gap: 8px; }
.dw-sec > .seg { align-self: flex-start; }
.dw-lb { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.dw-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dw-op { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-primary); color: var(--color-text-primary); }
.dw-op:hover { border-color: var(--color-border-primary); }
.dw-op.on { border-color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-text-primary); }
.dw-op b { font-weight: 600; font-size: 13px; }
.dw-op > span { font-size: 12px; line-height: 1.4; color: var(--color-text-secondary); }
.dw-op .ico { color: var(--color-text-secondary); }
.dw-rec { margin: 0; border: 1px solid var(--color-border-tertiary); border-radius: 10px; overflow: hidden; }
.dw-rr { display: grid; grid-template-columns: 70px minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 8px 12px; min-height: 44px; }
.dw-rr + .dw-rr, .dw-chk + .dw-chk { border-top: 1px solid var(--color-border-tertiary); }
.dw-rr dt { font-size: 12px; color: var(--color-text-secondary); }
.dw-rr dd { margin: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-vh { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-status { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.dw-link { border: 0; background: none; padding: 0; font: inherit; color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dw-chk, .dw-done { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.dw-done { border: 1px solid var(--color-border-tertiary); border-radius: 10px; }
.dw-ct { font-size: 13px; font-weight: 500; }
.dw-ci { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--color-background-tertiary); color: var(--color-text-secondary); font-size: 11px; font-weight: 500; }
.dw-ci.ok { background: var(--color-text-success); color: #fff; }
.dw-ci.wait { background: none; border: 2px solid var(--color-border-tertiary); border-top-color: var(--color-text-primary); animation: dwspin .7s linear infinite; }
.dw-work { display: flex; align-items: center; gap: 10px; padding: 18px 12px; border: 1px solid var(--color-border-tertiary); border-radius: 10px; color: var(--color-text-secondary); }
.dw-err { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 10px; font-size: 13px; color: var(--color-text-danger);
  border: 1px solid color-mix(in srgb, var(--color-text-danger) 32%, var(--color-border-tertiary)); background: color-mix(in srgb, var(--color-text-danger) 6%, transparent); }
.dw-ok { color: var(--color-text-success); font-weight: 500; }
.dw-bad { color: var(--color-text-danger); }
.dw-note { margin-right: auto; font-size: 12px; color: var(--color-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .dw-opts { grid-template-columns: minmax(0, 1fr); }}

/* ── Settings → Traffic & Filtering (v4.17) ───────────────────────────────────── */
.s-lb { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 8px; }
.rm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rm-card { display: flex; flex-direction: column; gap: 5px; padding: 12px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-primary); color: var(--color-text-primary); }
.rm-card:hover { border-color: var(--color-border-primary); }
.rm-card.on { border-color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-text-primary); }
.rm-card b { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.rm-card b i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rm-card > span { font-size: 12px; line-height: 1.4; color: var(--color-text-secondary); }
.ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--color-border-tertiary); }
.ts-item:nth-child(odd) { border-right: 1px solid var(--color-border-tertiary); }
.ts-grid .ts-item:nth-last-child(1), .ts-grid .ts-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.ts-mark { width: 22px; height: 22px; flex: none; border-radius: 6px; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 600; }
.ts-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-split { display: flex; gap: 1px; height: 6px; margin-top: 7px; border-radius: 99px; overflow: hidden; background: var(--color-background-tertiary); max-width: 420px; }
.ag-split i { display: block; height: 100%; }
.set-pro .sitem-s.mono { font-size: 11.5px; margin-top: 5px; }
.agw-bar { flex: 0 0 90px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--color-background-tertiary); }
.agw-bar i { display: block; height: 100%; width: 0; background: var(--color-text-primary); transition: width .15s; }
#ag_total b { color: var(--color-text-primary); font-weight: 600; }
@media (max-width: 900px) {
  .rm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-grid { grid-template-columns: minmax(0, 1fr); }
  .ts-item:nth-child(odd) { border-right: 0; }
  .ts-grid .ts-item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--color-border-tertiary); }
  .agw-bar { display: none; }}

/* ── Settings → Appearance (v4.18) ─────────────────────────────────────────────── */
.ap-verrow { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-verrow > input { flex: 1 1 160px; width: auto; }
.ap-verrow .btn { height: 36px; }
.ap-logo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-logot { width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); color: var(--color-text-secondary); }
.ap-logom { flex: 1 1 200px; min-width: 0; }
.ap-imgrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ap-imgrow .sinput { flex: 1 1 240px; width: auto; font-family: var(--mono); }

.set-pro .bf-prev { margin: 0; }
.set-pro .lp-prev { height: 170px; }
.fm-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fm-cards button { display: flex; flex-direction: column; gap: 8px; padding: 10px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-primary); color: var(--color-text-primary); }
.fm-cards button:hover { border-color: var(--color-border-primary); }
.fm-cards button.active { border-color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-text-primary); }
.fm-cards b { font-size: 13px; font-weight: 600; }
.fm-mini { position: relative; display: block; height: 52px; border-radius: 6px; overflow: hidden; background: var(--color-background-tertiary); }
.fm-mini i { position: absolute; border-radius: 3px; background: var(--color-text-primary); opacity: .85; }
.fm-drawer i { right: 0; top: 0; bottom: 0; width: 38%; border-radius: 3px 0 0 3px; }
.fm-popup i { left: 22%; right: 22%; top: 18%; bottom: 18%; }
.fm-inline i { left: 8%; right: 8%; top: 30%; bottom: 0; border-radius: 3px 3px 0 0; }
.fm-fullscreen i { left: 4%; right: 4%; top: 7%; bottom: 7%; }
.fm-sheet i { left: 10%; right: 10%; top: 40%; bottom: 0; border-radius: 6px 6px 0 0; }
@media (max-width: 900px) { .fm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* ── Settings → System (v4.19) ─────────────────────────────────────────────────── */
.srow-st { margin-top: 8px; font-size: 12.5px; color: var(--color-text-secondary); }
.scard-b > .switch-row:last-child { margin-bottom: 0; }
.scard-b > .switch-row + .switch-row { margin-top: 0; }
.scard-b > .stats { margin: 0 0 16px; }
.set-pro .scard-b .tbl-wrap { border: 1px solid var(--color-border-tertiary); border-radius: 8px; }
.set-pro .scard-b.flush .tbl-wrap { border: 0; border-radius: 0; }
.set-pro .bk-drop { min-width: 0; flex: 1 1 260px; }

/* ── Campaigns: premium table (v4.20) ──────────────────────────────────────────── */
.ccard { border: 1px solid var(--color-border-tertiary); border-radius: 14px; background: var(--color-background-primary); box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px -14px rgba(10, 10, 10, .12); }
.ccard > .toolbar2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--color-border-tertiary); gap: 6px; }
.ccard > .toolbar2 .btn { height: 32px; padding: 0 8px; gap: 5px; font-size: 12.5px; }
.ccard > .toolbar2 .searchbox input { height: 32px; width: 160px; }
.ccard > .toolbar2 .seg button { padding: 5px 9px; gap: 5px; }
.ccard > .toolbar2 .dd > summary .ico:last-child { display: none; }
.ccard #cmain > .panel { border: 0; border-radius: 0 0 14px 14px; background: transparent; }
.ccard #cmain > .panel + .panel { margin-top: 0; border-top: 1px solid var(--color-border-tertiary); }
.ptbl table.tbl th { background: transparent; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); padding: 11px 8px; }
.ptbl table.tbl td { padding: 12px 8px; vertical-align: middle; }
.ptbl table.tbl td[data-col="name"] { min-width: 210px; }
.ptbl table.tbl th.col-sel, .ptbl table.tbl td.col-sel { padding-left: 16px; padding-right: 0; width: 34px; }
.ptbl table.tbl td .sub { font-size: 11.5px; color: var(--color-text-tertiary); font-family: var(--mono); }
.ptbl .pgr { border-top: 1px solid var(--color-border-tertiary); }
.pt-n1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.pt-n1:hover > span:first-child { text-decoration: underline; text-underline-offset: 2px; }
.pt-n2 { margin-top: 3px; font-size: 12px; color: var(--color-text-tertiary); }
.pt-n2.mono { font-size: 11.5px; margin-top: 5px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-dots > [data-col] + [data-col]::before { content: "·"; margin-right: 6px; }

.pt-row { display: flex; align-items: center; gap: 9px; }

.pt-tile { width: 24px; height: 24px; flex: none; border-radius: 7px; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 600; }
.pt-tiles { display: inline-flex; align-items: center; gap: 4px; }
.pt-av { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 9.5px; font-weight: 600; }
.pt-st { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 2px 0 9px; border-radius: 8px; border: 1px solid transparent; }
.pt-st i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.ptbl tbody tr:hover .pt-st { border-color: var(--color-border-tertiary); background: var(--color-background-primary); }
.pt-url { display: inline-flex; max-width: 150px; font-size: 12.5px; color: var(--color-text-primary); text-decoration: none; overflow: hidden; white-space: nowrap; }
.pt-url b { font-weight: 500; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pt-url span { font-family: var(--mono); font-size: 12px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; }
.pt-url:hover b { text-decoration: underline; text-underline-offset: 2px; }
.pt-id { font-size: 12px; color: var(--color-text-tertiary); }
.pt-dash { color: var(--color-text-tertiary); }
.ptbl .icon-btn.pt-gh { border: 0; background: transparent; color: var(--color-text-tertiary); width: 24px; height: 24px; }
.ptbl tbody tr:hover .icon-btn.pt-gh { color: var(--color-text-secondary); }
.ptbl .icon-btn.pt-gh:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.ptbl .icon-btn.pt-gh.danger:hover { color: var(--color-text-danger); }
.ptbl .col-actions .icon-btn + .icon-btn { margin-left: 0; }

/* campaign meta row under the name (v4.21) */
.pt-meta { align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.ptbl td[data-col="placement"] .pt-dots { flex-wrap: nowrap; }
.pt-meta .pt-in { display: inline-flex; align-items: center; gap: 5px; }
.pt-meta .pt-in::before { margin-right: 1px; }
.pt-meta .pt-tile { width: 14px; height: 14px; border-radius: 4px; font-size: 0; }
.pt-meta .pt-tiles { gap: 3px; }
.pt-meta .pt-av { width: 14px; height: 14px; font-size: 0; }
.pt-meta .mono { font-size: 11.5px; }

.ptbl table.tbl td[data-col="name"] { min-width: 0; }
.ptbl .pt-url { max-width: 200px; }
.ptbl .pt-n2.mono { max-width: 195px; }

/* status control: Start / Stop + stage dropdown (v4.24) */
.pt-sc { display: inline-flex; align-items: center; height: 30px; padding: 2px 2px 2px 3px; border: 1px solid var(--color-border-tertiary); border-radius: 99px; background: var(--color-background-primary); }
.pt-run { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: 50%;
  border: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); color: var(--color-text-secondary); }
.pt-run:hover { border-color: var(--color-border-primary); color: var(--color-text-primary); }
.pt-sc.is-on .pt-run { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-background-primary); }
.pt-sc.is-on .pt-run:hover { opacity: .85; }
.pt-sc .pt-st { height: 24px; padding: 0 2px 0 8px; border: 0; background: none; }
.ptbl tbody tr:hover .pt-sc .pt-st { border: 0; background: none; }
.ptbl tbody tr:hover .pt-sc { border-color: var(--color-border-primary); }
.ptbl table.tbl td[data-col="status"] { padding-left: 4px; padding-right: 4px; width: 1%; }

/* domains in full (v4.25) */
.ptbl .pt-n2.mono { max-width: none; overflow: visible; text-overflow: clip; }
.ptbl .pt-url { max-width: none; overflow: visible; }
.ptbl .pt-url b { max-width: none; overflow: visible; text-overflow: clip; }
.ptbl .pt-n1 { max-width: 330px; }
/* the row buttons stay in view even when a very long domain makes the table scroll sideways */
.ptbl table.tbl th.col-actions, .ptbl table.tbl td.col-actions { position: sticky; right: 0; background: var(--color-background-primary); }
.ptbl table.tbl tbody tr:hover td.col-actions { background: var(--color-background-secondary); }
.ptbl .pt-meta { font-size: 11.5px; gap: 5px; }
.ptbl .pt-meta > [data-col] + [data-col]::before { margin-right: 5px; }
.ptbl table.tbl td[data-col="placement"] { padding-left: 6px; padding-right: 6px; }

/* ── Sidebar + command bar (v4.26) ─────────────────────────────────────────────── */
@media (min-width: 881px) {
  .shell.sbar { grid-template-columns: 216px minmax(0, 1fr); }
  .shell.sbar.collapsed { grid-template-columns: 60px minmax(0, 1fr); }
  .hbar #menuBtn { display: none; }}
.shell.sbar .side { padding: 12px 10px; gap: 2px; }
.shell.sbar .side .brand { padding: 4px 6px 14px; gap: 10px; font-size: 14px; letter-spacing: -.01em; }
.shell.sbar .side .brand .brand-text { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.shell.sbar .side .brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell.sbar .side .brand .brand-ver { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; line-height: 1.5;
  padding: 0 7px; border: 1px solid var(--color-border-tertiary); border-radius: 99px;
  background: var(--color-background-primary) !important; background-image: none !important; animation: none !important;
  color: var(--color-text-secondary); -webkit-text-fill-color: currentColor; text-decoration: none; }
.shell.sbar .side .brand a.brand-ver:hover { color: var(--color-text-primary); border-color: var(--color-border-primary); text-decoration: none; }
.shell.sbar .side-toggle { width: 26px; height: 26px; }
.shell.sbar .nav-group { margin-top: 0; }
.shell.sbar .nav-item { height: 34px; padding: 0 10px; gap: 10px; font-weight: 500; }
.shell.sbar .side .foot { padding-top: 10px; }
.shell.sbar .side-user { padding: 7px 8px; gap: 9px; border-radius: 10px; }
.shell.sbar .side-user .av { width: 28px; height: 28px; font-size: 11px; }
.shell.sbar .side-user .icon-btn { border: 0; background: transparent; }
@media (min-width: 881px) {
  .shell.sbar.collapsed .side { padding: 12px 8px; }
  .shell.sbar.collapsed .side .brand { padding: 4px 0 10px; }
  .shell.sbar.collapsed .side .brand .brand-text { display: none; }
  .shell.sbar.collapsed .nav-item { height: 36px; padding: 0; }
  .shell.sbar.collapsed .side-user { padding: 6px 0; }}
.smain { min-width: 0; display: flex; flex-direction: column; }
.hbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px 12px; min-height: 56px; padding: 10px 2rem;
  background: var(--color-background-primary); border-bottom: 1px solid var(--color-border-tertiary); }
.hbar .hsearch { flex: 0 1 360px; }
.hbar .srv-time { height: 32px; border: 0; background: none; padding: 0 4px; }
.hbar .lang-wrap .icon-btn { width: 32px; height: 32px; }
.shell.sbar .main { overflow: visible; }
@media (max-width: 880px) {
  .hbar { padding: 8px 1rem; }
  .hbar .srv-time { display: none; }
  .hbar .hsearch { flex: 1 1 auto; padding: 0 8px 0 10px; justify-content: flex-start; }
  .hbar .hsearch > span { display: inline; }
  .hbar .hsearch kbd { display: none; }}

/* compact campaign rows (v4.26) */
.ptbl table.tbl td { padding-top: 7px; padding-bottom: 7px; }
.ptbl table.tbl th { padding-top: 9px; padding-bottom: 9px; }
.ptbl .pt-n1 { font-size: 13px; }
.ptbl .pt-n2 { margin-top: 1px; }
.ptbl .pt-n2.mono { margin-top: 3px; }
.ptbl .pt-sc { height: 26px; padding: 1px 2px 1px 2px; }
.ptbl .pt-run { width: 22px; height: 22px; }
.ptbl .pt-sc .pt-st { height: 22px; }

.ptbl .sb { font-size: 11px; }
.ptbl .icon-btn.pt-gh { width: 22px; height: 22px; }
/* brand: name with the version under it, so neither is cut in the sidebar */
.shell.sbar .side .brand .brand-text { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.shell.sbar .side .brand .brand-ver { padding: 0; border: 0; background: none !important; font-size: 10.5px; line-height: 1.3; }
.shell.sbar .side .brand a.brand-ver:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Compact, premium campaign table (v4.29) ──────────────────────────────────── */
/* content no longer sprawls across very wide screens */
.shell.sbar .main > #view { max-width: 1672px; margin: 0 auto; }
/* only the campaign column stretches; every other column hugs its content */
.ptbl table.tbl td[data-col="status"], .ptbl table.tbl td[data-col="routing"], .ptbl table.tbl td[data-col="dest"],
.ptbl table.tbl td.col-actions, .ptbl table.tbl td.col-sel { width: 1%; white-space: nowrap; }
.ptbl table.tbl td[data-col="routing"], .ptbl table.tbl th[data-col="routing"],
.ptbl table.tbl td[data-col="dest"], .ptbl table.tbl th[data-col="dest"] { padding-left: 14px; padding-right: 22px; }
/* shorter rows */
.ptbl table.tbl td { padding-top: 5px; padding-bottom: 5px; line-height: 1.3; }
.ptbl table.tbl th { padding-top: 8px; padding-bottom: 8px; font-size: 10.5px; }
.ptbl .pt-n1 { font-size: 13px; line-height: 1.3; gap: 6px; }
.ptbl .pt-n2 { margin-top: 1px; font-size: 11.5px; line-height: 1.3; }
.ptbl .pt-n2.mono { margin-top: 2px; font-size: 11px; }
.ptbl .pt-meta { font-size: 11px; gap: 4px; }
.ptbl .pt-meta > [data-col] + [data-col]::before { margin-right: 4px; }
.ptbl .pt-meta .pt-tile, .ptbl .pt-meta .pt-av { width: 12px; height: 12px; border-radius: 3px; }
.ptbl .pt-meta .pt-av { border-radius: 50%; }
.ptbl .sb { height: 18px; padding: 0 7px; font-size: 10.5px; line-height: 18px; border-radius: 5px; }
.ptbl .sb .ico { width: 11px; height: 11px; }
.ptbl .pt-url { font-size: 12.5px; line-height: 1.3; }
.ptbl .pt-sc { height: 24px; padding: 1px 2px; }
.ptbl .pt-run { width: 20px; height: 20px; }
.ptbl .pt-sc .pt-st { height: 20px; padding: 0 2px 0 7px; gap: 6px; }

.ptbl .icon-btn.pt-gh { width: 24px; height: 24px; border-radius: 6px; }
.ptbl table.tbl td.col-actions { padding-left: 10px; padding-right: 12px; }
/* quieter chrome */
.ptbl table.tbl td { border-bottom-color: color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }
.ptbl table.tbl tbody tr:hover { background: color-mix(in srgb, var(--color-background-secondary) 70%, transparent); }
.ptbl table.tbl tbody tr:hover td.col-actions { background: color-mix(in srgb, var(--color-background-secondary) 70%, var(--color-background-primary)); }
.ptbl .icon-btn.pt-gh { opacity: .55; }
.ptbl tbody tr:hover .icon-btn.pt-gh { opacity: 1; }
.ptbl .pgr { padding: 8px 14px; }
.ccard > .toolbar2 { padding: 10px 14px; }
/* destination on one line: URL, copy, offer type */
.ptbl td[data-col="dest"] > .pt-row { display: inline-flex; vertical-align: middle; gap: 6px; }
.ptbl td[data-col="dest"] > .pt-n2 { display: inline-block; vertical-align: middle; margin: 0 0 0 8px; }
.ptbl td[data-col="dest"] .icon-btn.pt-gh { width: 20px; height: 20px; }
.ptbl .pt-row { gap: 6px; }
.ptbl .pt-n1 { max-width: 460px; }

/* a little more breathing room than v4.29 (v4.30) */
.ptbl table.tbl td { padding-top: 6px; padding-bottom: 6px; }
.ptbl table.tbl th { padding-top: 10px; padding-bottom: 10px; }
.ptbl .pt-n2 { margin-top: 2px; }
.ptbl .pt-n2.mono { margin-top: 4px; }
.ptbl .pt-meta { font-size: 11.5px; gap: 5px; }
.ptbl .pt-meta > [data-col] + [data-col]::before { margin-right: 5px; }
.ptbl .sb { height: 20px; line-height: 20px; }
.ptbl .pt-sc { height: 26px; }
.ptbl .pt-run { width: 22px; height: 22px; }
.ptbl .pt-sc .pt-st { height: 22px; }

/* destination: the full link, wrapping when long (v4.31) */
.ptbl table.tbl td[data-col="dest"] { white-space: normal; width: auto; }
.ptbl td[data-col="dest"] > .pt-row { max-width: 100%; align-items: flex-start; }
.ptbl .pt-url { display: inline-block; max-width: 540px; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.4; }
.ptbl .pt-url b, .ptbl .pt-url span { display: inline; overflow: visible; text-overflow: clip; white-space: normal; }
.ptbl td[data-col="dest"] > .pt-n2 { white-space: nowrap; }

/* id column (v4.33) */
.ptbl table.tbl td[data-col="cid"] { width: 1%; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.ptbl table.tbl th[data-col="cid"] { padding-left: 14px; padding-right: 14px; }

/* ── Status as a split pill (v4.35) ─────────────────────────────────────────────── */
.ptbl .pt-sc.pt-split { --c: #71717a; --pbd: color-mix(in srgb, var(--c) 40%, var(--color-border-tertiary));
  display: inline-flex; align-items: stretch; height: 26px; padding: 0; overflow: hidden; border-radius: 99px;
  border: 1px solid var(--pbd); background: color-mix(in srgb, var(--c) 10%, var(--color-background-primary)); }
.ptbl tbody tr:hover .pt-sc.pt-split { border-color: color-mix(in srgb, var(--c) 60%, var(--color-border-tertiary)); }
.ptbl .pt-split .pt-run { width: 28px; height: auto; border: 0; border-right: 1px solid var(--pbd); border-radius: 0;
  background: var(--color-background-primary); color: var(--color-text-secondary); }
.ptbl .pt-split .pt-run:hover { color: var(--color-text-primary); }
.ptbl .pt-split.is-on .pt-run { background: var(--color-text-primary); color: var(--color-background-primary); border-right-color: var(--color-text-primary); }
.ptbl .pt-split .pt-st, .ptbl tbody tr:hover .pt-split .pt-st { position: relative; height: auto; padding: 0 9px 0 9px; gap: 6px; border: 0; background: none; border-radius: 0; }
.ptbl .pt-split .pt-st i { background: var(--c); }

.ptbl .pt-split .pt-st::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; pointer-events: none;
  border-right: 1.5px solid color-mix(in srgb, var(--c) 58%, var(--color-text-primary)); border-bottom: 1.5px solid color-mix(in srgb, var(--c) 58%, var(--color-text-primary));
  transform: translateY(-70%) rotate(45deg); opacity: .75; }

/* ── Stage menu (v4.37) ─────────────────────────────────────────────────────────── */
.ptbl .pt-split button.pt-st { display: inline-flex; align-items: center; font: inherit; cursor: pointer; padding: 0 22px 0 9px;
  color: color-mix(in srgb, var(--c) 58%, var(--color-text-primary)); }
.ptbl .pt-split button.pt-st:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.ptbl .pt-split .pt-stl { font-size: 12px; font-weight: 500; white-space: nowrap; min-width: 60px; text-align: left; }
.ptbl .pt-split button.pt-st::after { transition: transform .15s; }
.ptbl .pt-split button.pt-st.is-open::after { transform: translateY(-20%) rotate(225deg); }
.stg-menu { position: fixed; z-index: 300; min-width: 176px; padding: 5px; border-radius: 10px;
  border: 1px solid var(--color-border-tertiary); background: var(--color-background-primary); color: var(--color-text-primary);
  box-shadow: 0 4px 6px -2px rgba(10, 10, 10, .05), 0 16px 36px -12px rgba(10, 10, 10, .28); animation: stgIn .12s ease-out; }
.stg-menu.up { animation-name: stgInUp; }
@keyframes stgIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes stgInUp { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .stg-menu { animation: none; }}
.stg-h { padding: 6px 9px 5px; font-size: 11px; font-weight: 500; color: var(--color-text-tertiary); }
.stg-i { display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 9px; border: 0; border-radius: 7px;
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; outline: 0; }
.stg-i > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stg-i > span { flex: 1; }
.stg-i > .ico { color: var(--color-text-primary); }
.stg-i:hover, .stg-i:focus-visible { background: var(--color-background-secondary); }
.stg-i.on { background: var(--color-background-secondary); }

/* campaign name is the anchor of the row (v4.38) */
.ptbl .pt-n1 { gap: 7px; }
.ptbl .pt-n1 > span:first-child { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--color-text-primary); }
.ptbl .pt-n1 .sb { height: 17px; line-height: 17px; padding: 0 6px; font-size: 10px; font-weight: 500; }
.ptbl .pt-n1 [data-col="offertype"] .sb { background: transparent; border: 1px solid var(--color-border-tertiary); color: var(--color-text-tertiary); line-height: 15px; }
.ptbl .pt-meta { color: var(--color-text-tertiary); margin-top: 3px; }

/* row action icons: Lucide, visible at rest (v4.39) */
.ptbl .icon-btn.pt-gh { opacity: 1; color: var(--color-text-secondary); width: 26px; height: 26px; border-radius: 7px; }
.ptbl td.col-actions .icon-btn.pt-gh + .icon-btn.pt-gh { margin-left: 2px; }
.ptbl .icon-btn.pt-gh .ico { stroke-width: 1.8; }
.ptbl tbody tr:hover .icon-btn.pt-gh { color: var(--color-text-primary); }
.ptbl .icon-btn.pt-gh.danger:hover { color: var(--color-text-danger); background: color-mix(in srgb, var(--color-text-danger) 10%, transparent); }
.ptbl td[data-col="dest"] .icon-btn.pt-gh { width: 20px; height: 20px; color: var(--color-text-tertiary); }

/* ── One dropdown (v4.40): select trigger + menu, and the shared popup surface ───── */
.psel { vertical-align: middle; max-width: 100%; }
.psel-btn { height: 36px; gap: 8px; padding: 0 10px 0 12px; border: 1px solid var(--color-border-tertiary); border-radius: 8px;
  background: var(--color-background-primary); box-shadow: 0 1px 2px rgba(10, 10, 10, .04); font-size: 13.5px; }
.psel-btn:hover { border-color: var(--color-border-tertiary); background: var(--color-background-secondary); }
.psel-btn:focus-visible, .psel.open .psel-btn { outline: 0; border-color: var(--color-text-tertiary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.psel-label { font-weight: 400; letter-spacing: 0; }
.psel-chev { opacity: .55; }
.psel-chev svg { width: 15px; height: 15px; stroke-width: 2; }
.psel.open .psel-chev { color: var(--color-text-tertiary); }
.psel.psel-sm .psel-btn { height: 30px; padding: 0 8px 0 10px; gap: 6px; font-size: 12.5px; border-radius: 7px; }
.psel.psel-sm .psel-label { font-weight: 500; }

.psel-menu, .stg-menu, .dd-panel, .pl-mdrop {
  border: 1px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-primary);
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--color-text-primary);
  box-shadow: 0 4px 6px -2px rgba(10, 10, 10, .05), 0 16px 36px -12px rgba(10, 10, 10, .28); }
.psel-menu { padding: 5px; overflow: hidden; transform: translateY(-4px) scale(.98); transition: opacity .12s ease-out, transform .12s ease-out; }
.psel-menu.up { transform: translateY(4px) scale(.98); }
.psel-menu.show { transform: none; }
@media (prefers-reduced-motion: reduce) { .psel-menu { transition: none; }}
.psel-search { height: 32px; margin: 0 0 5px; padding: 0 9px; border-radius: 7px; background: var(--color-background-secondary); border: 1px solid transparent; }
.psel-search:focus-within { border-color: var(--color-border-tertiary); box-shadow: none; background: var(--color-background-secondary); }
.psel-search input { font-size: 13px; }
.psel-list { max-height: 280px; padding: 0; }
.psel-opt { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; height: auto; padding: 6px 9px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--color-text-primary); outline: 0; transition: none; }
.psel-opt:active:not(.dis) { transform: none; }
.psel-opt:hover:not(.dis):not(.sel), .psel-opt:focus-visible { background: var(--color-background-secondary); }
.psel-opt.sel { background: var(--color-background-secondary); color: var(--color-text-primary); font-weight: 500; }
.psel-opt-ck { color: var(--color-text-primary); }
.psel-opt-ck svg { width: 14px; height: 14px; stroke-width: 2.2; }
.psel-opt.dis { color: var(--color-text-tertiary); }
.psel-grp { padding: 6px 9px 5px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-tertiary); }
.psel-none { padding: 14px 10px; font-size: 13px; }
.lsel-panel { padding: 5px; }
.lsel-opt { min-height: 32px; padding: 6px 9px; border-radius: 7px; gap: 9px; }
.lsel-multi .lsel-opt .lsel-check { color: var(--color-text-primary); }
.dd-title { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pgr .psel { margin-right: 4px; }

/* ── Campaign form (v4.41): identity header, section sidebar, section cards ─────── */
.cpro > .modal-head { padding: 14px 20px; border-bottom: 1px solid var(--color-border-tertiary); gap: 12px; }
.cpro > .modal-head h3 { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cpro-tile { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--color-text-primary); color: var(--color-background-primary); }
.cpro-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cpro-s { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--color-text-tertiary); min-width: 0; white-space: nowrap; }
.cpro-s b { font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; }
.cpro-s i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex: none; }
.cpro-st { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); background: color-mix(in srgb, var(--c) 9%, var(--color-background-primary));
  color: color-mix(in srgb, var(--c) 58%, var(--color-text-primary)); }
.cpro-st i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.cpro > .modal-head .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.cpro > .modal-body.cform-body { padding: 0; gap: 0; grid-template-columns: 236px minmax(0, 1fr); align-items: stretch; }
.cpro .cform-rail { position: static; align-self: stretch; padding: 0 10px; background: var(--color-background-secondary); border-right: 1px solid var(--color-border-tertiary); }
.cpro .cform-rail-t { position: sticky; top: 0; margin: 0; padding: 16px 10px 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
  background: var(--color-background-secondary); z-index: 1; }
.cpro .cform-rail-list { position: sticky; top: 40px; border-left: 0; gap: 2px; padding-bottom: 14px; }
.cpro .cform-rail-i { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--color-text-secondary); }
.cpro .cform-rail-i::before { display: none; }
.cpro .cform-rail-i .ico { flex: none; color: var(--color-text-tertiary); }
.cpro .cform-rail-i:hover { background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
.cpro .cform-rail-i.on { background: var(--color-background-primary); color: var(--color-text-primary); font-weight: 500;
  box-shadow: 0 0 0 1px var(--color-border-tertiary), 0 1px 2px rgba(10, 10, 10, .05); }
.cpro .cform-rail-i.on .ico { color: var(--color-text-primary); }
.cpro .cform-main { padding: 20px 24px 24px; }
.cpro .cform-main > * { max-width: 1040px; }
.cpro .fsec { margin: 0 0 18px; }
.cpro .fsec:last-child { margin-bottom: 0; }
.cpro .fsec-h { margin: 0 0 8px; padding: 0 2px; border: 0; font-size: 14px; font-weight: 600; letter-spacing: -.005em; text-transform: none;
  color: var(--color-text-primary); scroll-margin-top: 16px; }
.cpro .fsec-b { border: 1px solid var(--color-border-tertiary); border-radius: 12px; background: var(--color-background-primary); padding: 16px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .04); }
.cpro .fsec-b:empty { display: none; }
.cpro .fsec-b > .field:last-child, .cpro .fsec-b > .row:last-child { margin-bottom: 0; }
.cpro > .modal-foot { padding: 12px 20px; border-top: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); }
.cpro .cform-body.cform-narrow .cform-main { padding: 16px; }

/* ── Settings as a list (v4.44) ─────────────────────────────────────────────────── */
#view:has(> .xset) > .topbar { display: none; }
.xset { display: flex; gap: 40px; align-items: flex-start; padding-top: 6px; }
.xnav { flex: 0 0 220px; position: sticky; top: 76px; display: flex; flex-direction: column; }
.xnav h1 { margin: 0; padding: 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; }
.xnav > p { margin: 2px 0 16px; padding: 0 4px; font-size: 13px; color: var(--color-text-tertiary); }
.xfind { position: relative; margin-bottom: 12px; }
.xfind-in { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--color-border-tertiary); border-radius: 9px;
  background: var(--color-background-primary); color: var(--color-text-tertiary); box-shadow: 0 1px 2px rgba(10, 10, 10, .04); cursor: text; }
.xfind-in:focus-within { border-color: var(--color-text-tertiary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.xfind-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--color-text-primary); box-shadow: none; }
.xfind-in kbd { font: 500 10.5px var(--mono); border: 1px solid var(--color-border-tertiary); border-radius: 5px; padding: 1px 5px; color: var(--color-text-tertiary); }
.xfind-res { position: absolute; z-index: 40; left: 0; top: calc(100% + 6px); width: 300px; padding: 5px; border: 1px solid var(--color-border-tertiary); border-radius: 10px;
  background: var(--color-background-primary); box-shadow: 0 4px 6px -2px rgba(10, 10, 10, .05), 0 16px 36px -12px rgba(10, 10, 10, .28); }
.xfind-i { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 5px 9px; border: 0; border-radius: 7px; background: none; color: var(--color-text-primary);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.xfind-i .ico { color: var(--color-text-tertiary); flex: none; }
.xfind-i span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.xfind-i b { font-weight: 500; }
.xfind-i i { font-style: normal; font-size: 11.5px; color: var(--color-text-tertiary); }
.xfind-i:hover, .xfind-i:focus-visible { background: var(--color-background-secondary); outline: 0; }
.xfind-none { padding: 12px 10px; font-size: 13px; color: var(--color-text-tertiary); }
.xtabs { display: flex; flex-direction: column; gap: 2px; }
.xtabs button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px;
  font-weight: 500; color: var(--color-text-secondary); text-align: left; cursor: pointer; }
.xtabs button .ico { color: var(--color-text-tertiary); flex: none; }
.xtabs button:hover { background: color-mix(in srgb, var(--color-text-primary) 5%, transparent); }
.xtabs button.active { background: var(--color-background-primary); color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-border-tertiary), 0 1px 2px rgba(10, 10, 10, .06); }
.xtabs button.active .ico { color: var(--color-text-primary); }
.xtabs button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.xcol { flex: 1 1 auto; min-width: 0; max-width: 860px; }
.xcol > #stab:not(.xpro) { max-width: none; }
.xpro { max-width: none; }
.xpro .stab-body > div { margin-top: 0 !important; }
.xgt { margin: 22px 4px 8px; font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); }
.xrow { border: 1px solid var(--color-border-tertiary); border-top-width: 0; background: var(--color-background-primary); }
.xrow.first { border-top-width: 1px; border-radius: 14px 14px 0 0; }
.xrow.last { border-radius: 0 0 14px 14px; box-shadow: 0 1px 2px rgba(10, 10, 10, .04); }
.xrow.first.last { border-radius: 14px; }
.xrow:not(.first) > .xhead { border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }
.xhead { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 11px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; border-radius: inherit; }
.xhead:hover { background: color-mix(in srgb, var(--color-text-primary) 2.5%, transparent); }
.xhead:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.xic { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.xrow.open > .xhead .xic { background: var(--color-text-primary); color: var(--color-background-primary); }
.xtt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.xt { font-size: 13.5px; font-weight: 500; color: var(--color-text-primary); }
.xd { font-size: 12.5px; color: var(--color-text-tertiary); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xsum { flex: none; display: flex; align-items: center; gap: 8px; max-width: 40%; min-width: 0; }
.xval { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xpill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  border: 1px solid var(--color-border-tertiary); color: var(--color-text-secondary); background: var(--color-background-primary); }
.xpill i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-tertiary); }
.xpill.ok { border-color: color-mix(in srgb, #16a34a 34%, transparent); background: color-mix(in srgb, #16a34a 9%, var(--color-background-primary)); color: color-mix(in srgb, #16a34a 62%, var(--color-text-primary)); }
.xpill.ok i { background: #16a34a; }
.xgo { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px 0 11px; border: 1px solid var(--color-border-tertiary); border-radius: 8px;
  background: var(--color-background-primary); font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px rgba(10, 10, 10, .04); }
.xgo .ico { color: var(--color-text-tertiary); transition: transform .15s; }
.xrow.open > .xhead .xgo .ico { transform: rotate(90deg); }
.xbody { display: none; padding: 2px 16px 18px 64px; }
.xrow.wide > .xbody { padding-left: 16px; }
.xrow.open > .xbody { display: block; }
.xdesc { font-size: 12.5px; line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 12px; }
.xdesc:empty { display: none; }
.xrow.hero { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border-width: 1px; border-radius: 16px; margin-bottom: 0;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 12px 32px -20px rgba(10, 10, 10, .18); }
.xrow.hero > .scard { flex: 1 1 auto; min-width: 0; border: 0; box-shadow: none; background: none; border-radius: 0; overflow: visible; }
.xrow.hero .scard-b { padding: 0; }
.xrow.hero .scard-f { display: none; }
.xrow.hero .acct-av { width: 56px; height: 56px; box-shadow: 0 0 0 3px var(--color-background-primary), 0 0 0 4px var(--color-border-tertiary); }
.xrow.hero .sprof-name { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.xrow.hero .sprof-role { text-transform: capitalize; }
.xmeter { flex: none; text-align: right; padding-left: 20px; border-left: 1px solid var(--color-border-tertiary); }
.xm-t { font-size: 12px; color: var(--color-text-tertiary); }
.xm-v { font-size: 13px; font-weight: 600; margin-top: 1px; }
.xm-s { display: flex; gap: 4px; margin-top: 8px; justify-content: flex-end; }
.xm-s i { width: 30px; height: 5px; border-radius: 99px; background: var(--color-border-tertiary); }
.xm-s i.y { background: #16a34a; }
@media (max-width: 980px) {
  .xset { flex-direction: column; gap: 18px; }
  .xnav { position: static; flex: none; width: 100%; }
  .xtabs { flex-direction: row; flex-wrap: wrap; }
  .xcol { max-width: none; width: 100%; }
  .xbody, .xrow.wide > .xbody { padding-left: 16px; }
  .xsum { display: none; }
  .xrow.hero { flex-wrap: wrap; }
  .xmeter { border-left: 0; padding-left: 0; text-align: left; }
  .xm-s { justify-content: flex-start; }}

/* ── Cloudflare connectivity check (v4.45): score ring + checklist ─────────────── */
.xrow[data-xk="Cloudflare connectivity"] > .xbody > .scard { border: 0; box-shadow: none; background: none; border-radius: 0; overflow: visible; }
.xrow[data-xk="Cloudflare connectivity"] > .xbody > .scard > .scard-b { padding: 0; }
.cfx { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; --cfx: var(--color-text-tertiary); }
.cfx-score { border: 1px solid var(--color-border-tertiary); border-radius: 11px; padding: 18px 14px 14px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--color-background-primary); }
.cfx-score.ok { --cfx: #16a34a; } .cfx-score.bad { --cfx: #dc2626; } .cfx-score.warn { --cfx: #d97706; }
.cfx-ring { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--cfx) 0 var(--p), var(--color-border-tertiary) 0); }
.cfx-ring > i { width: 88px; height: 88px; border-radius: 50%; background: var(--color-background-primary); display: grid; place-items: center; font-style: normal; }
.cfx-ring b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.cfx-ring small { display: block; font-size: 11px; color: var(--color-text-tertiary); margin-top: 3px; }
.cfx-s1 { font-weight: 600; margin-top: 12px; color: color-mix(in srgb, var(--cfx) 70%, var(--color-text-primary)); }
.cfx-score.idle .cfx-s1 { color: var(--color-text-primary); }
.cfx-s2 { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }
.cfx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 14px; }
.cfx-stats > div { border: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); border-radius: 9px; padding: 8px; background: var(--color-background-secondary); }
.cfx-stats b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.cfx-stats span { font-size: 11px; color: var(--color-text-tertiary); }
.cfx-score .btn { width: 100%; justify-content: center; margin-top: 14px; }
.cfx-main { min-width: 0; }
.cfx-list { border: 1px solid var(--color-border-tertiary); border-radius: 11px; overflow: hidden; background: var(--color-background-primary); }
.cfx-li { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); font-size: 13px; }
.cfx-li:first-child { border-top: 0; }
.cfx-ck { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px dashed var(--color-border-tertiary); color: var(--color-text-tertiary); }
.cfx-ck .ico { stroke-width: 3; }
.cfx-li.ok .cfx-ck { border: 0; background: color-mix(in srgb, #16a34a 16%, var(--color-background-primary)); color: color-mix(in srgb, #16a34a 70%, var(--color-text-primary)); }
.cfx-li.bad .cfx-ck { border: 0; background: color-mix(in srgb, #dc2626 14%, var(--color-background-primary)); color: #dc2626; }
.cfx-li.bad { background: color-mix(in srgb, #dc2626 4%, var(--color-background-primary)); }
.cfx-ln { font-weight: 500; flex: 0 0 112px; }
.cfx-ld { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfx-lr { flex: none; font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); }
.cfx-li.ok .cfx-lr { color: color-mix(in srgb, #16a34a 70%, var(--color-text-primary)); }
.cfx-li.bad .cfx-lr { color: #dc2626; }
.cfx-err { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, #d97706 34%, transparent); background: color-mix(in srgb, #d97706 8%, var(--color-background-primary)); color: color-mix(in srgb, #d97706 60%, var(--color-text-primary)); }
.cfx-err .ico { flex: none; margin-top: 2px; }
.cfx-rt { margin-top: 12px; border: 1px solid var(--color-border-tertiary); border-radius: 11px; overflow: hidden; background: var(--color-background-primary); }
.cfx-rh { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); background: var(--color-background-secondary); font-size: 12.5px; }
.cfx-rh b { font-weight: 500; }
.cfx-rh span, .cfx-rh .ico { color: var(--color-text-tertiary); }
.cfx-rg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfx-rg > div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; font-size: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-tertiary) 45%, transparent); border-right: 1px solid color-mix(in srgb, var(--color-border-tertiary) 45%, transparent); }
.cfx-rg > div > i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: none; }
.cfx-rg > div > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .cfx { grid-template-columns: 1fr; } .cfx-rg { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* ── In-app alert dialog (v4.46) ────────────────────────────────────────────────── */
.adlg-scrim { position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center; padding: 20px; background: rgba(10, 10, 10, .5); animation: adlgFade .12s ease-out; }
.adlg { width: 100%; max-width: 440px; border: 1px solid var(--color-border-tertiary); border-radius: 14px; background: var(--color-background-primary); color: var(--color-text-primary);
  box-shadow: 0 24px 64px -16px rgba(10, 10, 10, .45), 0 4px 12px rgba(10, 10, 10, .08); animation: adlgIn .14s ease-out; overflow: hidden; }
@keyframes adlgFade { from { opacity: 0; } }
@keyframes adlgIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .adlg-scrim, .adlg { animation: none; }}
.adlg-b { display: flex; gap: 14px; padding: 20px 20px 18px; }
.adlg-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.adlg.danger .adlg-ic { background: color-mix(in srgb, #dc2626 11%, var(--color-background-primary)); color: #dc2626; }
.adlg-tx { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.adlg-tx h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; overflow-wrap: anywhere; }
.adlg-d { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.adlg-d p { margin: 0; } .adlg-d p + p { margin-top: 4px; }
.adlg-in { width: 100%; height: 36px; margin-top: 12px; padding: 0 11px; border: 1px solid var(--color-border-tertiary); border-radius: 8px; background: var(--color-background-primary);
  color: var(--color-text-primary); font: inherit; font-size: 13.5px; outline: 0; }
.adlg-in:focus { border-color: var(--color-text-tertiary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.adlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary); }
.adlg-f .btn { height: 34px; min-width: 84px; justify-content: center; }
.adlg-f .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.adlg-f .btn.adlg-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.adlg-f .btn.adlg-danger:hover { background: #b91c1c; border-color: #b91c1c; filter: none; }
@media (max-width: 480px) { .adlg-f { flex-direction: column-reverse; } .adlg-f .btn { width: 100%; }}

/* ── What's new popup (v4.47) ───────────────────────────────────────────────────── */
.wn-scrim { position: fixed; inset: 0; z-index: 6500; display: grid; place-items: center; padding: 24px; background: rgba(10, 10, 10, .5); animation: adlgFade .12s ease-out; }
.wn { width: 100%; max-width: 780px; height: min(86vh, 860px); display: flex; flex-direction: column; overflow: hidden; outline: 0;
  border: 1px solid var(--color-border-tertiary); border-radius: 16px; background: var(--color-background-primary); color: var(--color-text-primary);
  box-shadow: 0 30px 80px -20px rgba(10, 10, 10, .5), 0 4px 14px rgba(10, 10, 10, .08); animation: adlgIn .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .wn-scrim, .wn { animation: none; }}
.wn-hd { display: flex; align-items: center; gap: 12px; padding: 16px 18px; flex: none; }
.wn-tile { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--color-text-primary); color: var(--color-background-primary); }
.wn-hx { flex: 1 1 auto; min-width: 0; }
.wn-hx h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.wn-hx p { margin: 1px 0 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-tertiary); }
.wn-hx p b { font-weight: 500; color: var(--color-text-primary); }
.wn-hx p i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.wn-hd .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.wn-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 18px 12px; border-bottom: 1px solid var(--color-border-tertiary); flex: none; }
.wn-find { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--color-border-tertiary); border-radius: 8px;
  background: var(--color-background-secondary); color: var(--color-text-tertiary); cursor: text; }
.wn-find:focus-within { border-color: var(--color-text-tertiary); box-shadow: 0 0 0 3px var(--color-focus-ring); background: var(--color-background-primary); }
.wn-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--color-text-primary); box-shadow: none; }
.wn-all { height: 32px; flex: none; }
.wn-tags { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 100%; order: 3; }
.wn-tags button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--color-border-tertiary); border-radius: 99px; background: var(--color-background-primary);
  font: inherit; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; }
.wn-tags button i { width: 6px; height: 6px; border-radius: 50%; }
.wn-tags button em { font-style: normal; font-size: 11px; color: var(--color-text-tertiary); }
.wn-tags button:hover { background: var(--color-background-secondary); }
.wn-tags button.on { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-background-primary); }
.wn-tags button.on em { color: inherit; opacity: .65; }
.wn-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 18px 18px; background: var(--color-background-secondary); }
.wn-act { margin: 2px 0 4px; border: 1px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-primary); }
.wn-act summary { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.wn-act summary::-webkit-details-marker { display: none; }
.wn-act summary span { flex: 1; }
.wn-act summary .ico:last-child { transition: transform .15s; color: var(--color-text-tertiary); }
.wn-act[open] summary .ico:last-child { transform: rotate(90deg); }
.wn-heat { padding: 4px 12px 12px; }
.wn-heat-g { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.wn-heat-l > span:first-child { margin-left: 0 !important; }
.wn-day { display: flex; align-items: center; gap: 10px; margin: 14px 2px 6px; font-size: 11.5px; font-weight: 500; color: var(--color-text-tertiary); }
.wn-day::after { content: ""; flex: 1; height: 1px; background: var(--color-border-tertiary); }
.wn-e { border: 1px solid var(--color-border-tertiary); border-radius: 10px; background: var(--color-background-primary); margin-top: 6px; }
.wn-e.open { box-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 20px -14px rgba(10, 10, 10, .2); }
.wn-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 12px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wn-h:hover { background: color-mix(in srgb, var(--color-text-primary) 2.5%, transparent); }
.wn-h:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.wn-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 16%, transparent); }
.wn-v { flex: none; font-size: 11.5px; font-weight: 500; padding: 1px 7px; border: 1px solid var(--color-border-tertiary); border-radius: 6px; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.wn-t { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-e.open .wn-t { white-space: normal; font-weight: 600; }
.wn-tag { flex: none; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
  background: color-mix(in srgb, var(--tc) 8%, var(--color-background-primary)); color: color-mix(in srgb, var(--tc) 62%, var(--color-text-primary)); }
.wn-tm { flex: none; font-size: 11.5px; color: var(--color-text-tertiary); }
.wn-h > .ico { flex: none; color: var(--color-text-tertiary); transition: transform .15s; }
.wn-e.open > .wn-h > .ico { transform: rotate(90deg); }
.wn-b { display: none; padding: 2px 14px 14px 30px; }
.wn-e.open > .wn-b { display: block; }
.wn-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-primary); }
.wn-k { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }
.wn-k > span { font-size: 11.5px; font-weight: 500; color: var(--color-text-tertiary); padding-top: 1px; }
.wn-k > p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.wn-items { list-style: none; margin: 4px 0 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 9px; background: var(--color-background-secondary); }
.wn-items li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.wn-items li .ico { flex: none; margin-top: 3px; color: #16a34a; stroke-width: 2.4; }
.wn-items li span { min-width: 0; }
.wn-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; height: 36px; }
.wn-more em { font-style: normal; font-size: 12px; color: var(--color-text-tertiary); }
.wn-none { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 48px 16px; text-align: center; color: var(--color-text-tertiary); font-size: 13px; }
.wn-none b { color: var(--color-text-primary); font-weight: 600; margin-top: 6px; }
.brand-ver { cursor: pointer; }
@media (max-width: 640px) {
  .wn-scrim { padding: 0; } .wn { height: 100%; max-width: none; border-radius: 0; border: 0; }
  .wn-tm { display: none; } .wn-k { grid-template-columns: 1fr; } .wn-b { padding-left: 14px; }}

/* ── Team & access: member table and editor (v4.48) ─────────────────────────────── */
.tm-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 0; }
.tm-sum > div { border: 1px solid var(--color-border-tertiary); border-radius: 10px; padding: 10px 12px; }
.tm-sum b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.tm-sum span { font-size: 11.5px; color: var(--color-text-tertiary); }
.tm-tb { margin: 12px 14px 14px; border: 1px solid var(--color-border-tertiary); border-radius: 11px; overflow-x: auto; }
.tm-th, .tm-tr { display: grid; grid-template-columns: minmax(150px, 1.4fr) 104px minmax(150px, 1.3fr) minmax(140px, 1fr) 100px 62px; gap: 14px; align-items: center; padding: 0 14px; min-width: 780px; }
.tm-th { height: 34px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary);
  background: var(--color-background-secondary); border-bottom: 1px solid var(--color-border-tertiary); }
.tm-tr { min-height: 58px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }
.tm-th + .tm-tr { border-top: 0; }
.tm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.tm-av.o { background: var(--color-text-primary); color: var(--color-background-primary); }
.tm-id { min-width: 0; }
.tm-nm { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px; min-width: 0; }
.tm-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-nm em { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 0 6px; border-radius: 5px; border: 1px solid var(--color-border-tertiary); color: var(--color-text-secondary); line-height: 16px; flex: none; }
.tm-sub { font-size: 12px; color: var(--color-text-tertiary); }
.tm-scope { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 500; width: max-content;
  border: 1px solid var(--color-border-tertiary); color: var(--color-text-secondary); }
.tm-scope.own { border-color: color-mix(in srgb, #4f46e5 34%, transparent); background: color-mix(in srgb, #4f46e5 9%, var(--color-background-primary)); color: color-mix(in srgb, #4f46e5 68%, var(--color-text-primary)); }
.tm-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tm-chip { font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 99px; background: var(--color-background-secondary); color: var(--color-text-secondary); white-space: nowrap; }
.tm-chip.e { background: color-mix(in srgb, #16a34a 11%, var(--color-background-primary)); color: color-mix(in srgb, #16a34a 68%, var(--color-text-primary)); }
.tm-use { font-size: 12px; color: var(--color-text-secondary); min-width: 0; }
.tm-bar { height: 5px; border-radius: 99px; background: var(--color-border-tertiary); margin-top: 5px; overflow: hidden; }
.tm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--color-text-primary); }
.tm-bar i.w { background: #d97706; }
.tm-act { display: flex; gap: 2px; justify-content: flex-end; }
.tm-act .icon-btn { border: 0; background: transparent; color: var(--color-text-tertiary); }
.tm-act .icon-btn:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.tm-act .icon-btn.danger:hover { color: var(--color-text-danger); }
@media (max-width: 720px) { .tm-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.tme { display: flex; flex-direction: column; gap: 18px; }
.tme-t { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); }
.tme .row { margin: 0; } .tme .row .field { margin-bottom: 0; }
.tme-o { font-weight: 400; color: var(--color-text-tertiary); }
.tme-h { font-size: 11.5px; color: var(--color-text-tertiary); margin-top: 6px; }
.tme-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tme-opt { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid var(--color-border-tertiary); border-radius: 11px; background: var(--color-background-primary);
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tme-opt:hover { background: var(--color-background-secondary); }
.tme-opt.on { border-color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-text-primary); background: var(--color-background-primary); }
.tme-oi { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--color-background-secondary); color: var(--color-text-secondary); }
.tme-opt.on .tme-oi { background: var(--color-text-primary); color: var(--color-background-primary); }
.tme-opt > span:nth-child(2) { flex: 1; min-width: 0; }
.tme-opt b { display: block; font-weight: 500; font-size: 13.5px; }
.tme-opt i { font-style: normal; font-size: 12px; line-height: 1.45; color: var(--color-text-tertiary); }
.tme-opt > em { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--color-border-secondary, #d4d4d8); flex: none; display: grid; place-items: center; }
.tme-opt.on > em { border-color: var(--color-text-primary); }
.tme-opt.on > em::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-primary); }
.tme-box { border: 1px solid var(--color-border-tertiary); border-radius: 11px; overflow: hidden; }
.tme-ar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }
.tme-ar:first-child { border-top: 0; }
.tme-ar b { font-weight: 500; font-size: 13.5px; flex: none; }
.tme-ar > span { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tme-ar .seg { flex: none; }
.tme-ft { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 2px 12px; }
.tme-ft label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; font-size: 13px; cursor: pointer;
  border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }
.tme-ft label:nth-child(-n+2) { border-top: 0; }
.tme-dom { display: flex; gap: 6px; flex-wrap: wrap; }
.tme-dc { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--color-border-tertiary); border-radius: 7px; background: var(--color-background-primary);
  color: var(--color-text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.tme-dc.mono { font-family: var(--mono); }
.tme-dc:hover { background: var(--color-background-secondary); }
.tme-dc.on { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-background-primary); }
.tme-dc .ico { stroke-width: 3; }
.tme-lim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tme-lim .field { margin: 0; }
.tme-err { padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--color-text-danger);
  background: color-mix(in srgb, #dc2626 6%, var(--color-background-primary)); border: 1px solid color-mix(in srgb, #dc2626 30%, transparent); }
.btn.tme-susp { color: var(--color-text-danger); }
.btn.tme-react { color: color-mix(in srgb, #d97706 70%, var(--color-text-primary)); }
.cmeta-lim { padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--color-border-tertiary); }
.cmeta-lim b { color: var(--color-text-primary); font-weight: 600; }
.cmeta-lim.full { color: color-mix(in srgb, #d97706 70%, var(--color-text-primary)); }
.io-wrap { display: inline-flex; }
@media (max-width: 640px) { .tme-opts, .tme-ft, .tme-lim { grid-template-columns: 1fr; } .tme-ft label:nth-child(2) { border-top: 1px solid color-mix(in srgb, var(--color-border-tertiary) 60%, transparent); }}
.tm-tr > .xpill { width: max-content; }
.tm-th, .tm-tr { grid-template-columns: minmax(170px, 1.5fr) 104px minmax(150px, 1.3fr) minmax(140px, 1fr) 100px 62px; }

/* own-data member: rows that are not theirs stay out of the page flow (v4.49) */
.xrow.xhide { display: none !important; }
/* version label is plain text for team members (v4.50) */
body.not-owner .brand-ver { cursor: default; pointer-events: none; }

/* Fullscreen campaign form really fills the window (v4.51): the wide-popup cap no longer wins */
.modal.lg.fullscreen.wide { width: 96vw; max-width: 96vw; height: 94vh; max-height: 94vh; }

/* ── Audit fixes (v4.53) ────────────────────────────────────────────────────────── */
/* the bulk bar belongs to the page: it must sit under an open form, not over it */
.bulkbar { z-index: 90; }
/* current page button follows the theme (it used a colour name that does not exist) */
.pgr-btn.on { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-background-primary); }
/* the pinned actions cell follows its row when the row is selected or being edited */
#cmain tr:has(.rowsel:checked) > td.col-actions, .ptbl table.tbl tr.is-editing > td.col-actions { background: var(--color-background-secondary); }
/* view-only members: no controls that the server would refuse */
body.camp-ro #newBtn, body.camp-ro #cmain [data-dup], body.camp-ro #cmain [data-arch], body.camp-ro #cmain [data-del],
body.camp-ro #cmain .col-sel, body.camp-ro #cmain .grp-add, body.camp-ro .io-wrap, body.camp-ro #bulkbar, body.camp-ro #saveC { display: none !important; }
body.camp-ro .ptbl .pt-run, body.camp-ro .ptbl .pt-st { pointer-events: none; }
body.camp-ro .ptbl .pt-split button.pt-st::after { display: none; }

/* Settings row states stay visible on narrow screens: they drop under the title (v4.55) */
@media (max-width: 980px) {
  .xhead { flex-wrap: wrap; }
  .xtt { flex: 1 1 50%; }
  .xsum { display: flex; order: 5; flex: 1 1 100%; max-width: none; padding-left: 48px; }
  .xsum:empty { display: none; }
}

/* ── v4.57: second review ─────────────────────────────────────────────────────────────────
   The view-only rules above are scoped to the campaign table (#cmain): as "#view [data-del]"
   they also hid the remove buttons of Settings, Admin access control. */
.pgr-btn.on:hover:not(:disabled) { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-background-primary); }
.ptbl table.tbl tbody tr.is-editing:hover > td.col-actions { background: var(--color-background-secondary); }
body.camp-ro #cmain tr.is-editing > td:nth-child(2) { box-shadow: inset 3px 0 0 var(--primary); }