/* ============================================================
 * UMG v3 — premium dark theme (matches UMG v2 look & feel)
 * ========================================================== */
:root {
  --bg:        #0a0a0a;
  --surface:   #111111;
  --surface-2: #1a1a1a;
  --border:    #222222;
  --border-2:  #333333;
  --text:      #ffffff;
  --muted:     #888888;
  --muted-2:   #666666;
  --accent:    #ff0050;
  --accent-2:  #ff4444;
  --green:     #22c55e;
  --amber:     #ffaa00;
  --purple:    #9933ff;
  --radius:    12px;
  --nav-h:     60px;
  --pad-x:     40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Slick dark scrollbars everywhere (Chrome/Safari + Firefox) */
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #444; }
*::-webkit-scrollbar-corner { background: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted  { color: var(--muted); }
.small  { font-size: 12px; }
.meta   { color: var(--muted-2); font-size: 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header / top nav ---------- */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
}
.header-inner {
  height: 100%; padding: 0 var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { font-size: 18px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo-accent { color: var(--accent); }
.logo-icon {
  width: 32px; height: 32px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 8px; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 12px rgba(255, 0, 80, 0.35);
}
.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--muted); text-decoration: none;
  padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  transition: all .18s ease;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.05); text-decoration: none; }
.nav a.active { color: #fff; background: rgba(255, 0, 80, .15); }
.nav-icon { font-size: 15px; opacity: .9; }

.header-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.user-email { color: var(--muted); font-size: 13px; }
.admin-badge {
  background: rgba(255,0,80,.15); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 6px;
}
.btn-signout {
  background: var(--surface-2); border: 1px solid var(--border-2); color: #fff;
  font-size: 13px; padding: 7px 14px; border-radius: 8px; cursor: pointer;
  transition: all .18s;
}
.btn-signout:hover { border-color: #555; }

/* ---------- Page layout ---------- */
.view { padding-top: var(--nav-h); min-height: 100vh; }
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 30px var(--pad-x) 20px;
}
.page-head h2 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view > *:not(.page-head) { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.view > *:last-child { padding-bottom: 48px; }

/* ---------- Cards / panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin-bottom: 22px;
}
.panel h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.panel h3 .small { font-weight: 400; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  background: var(--surface-2); border: 1px solid var(--border-2); color: #fff;
  padding: 9px 15px; border-radius: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .18s; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: #555; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #fff; font-weight: 600;
  box-shadow: 0 2px 14px rgba(255,0,80,.28);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(255,68,68,.12); border-color: rgba(255,68,68,.4); color: #ff8080; }
.btn.danger:hover { background: rgba(255,68,68,.2); border-color: rgba(255,68,68,.6); }
.btn.small { padding: 5px 11px; font-size: 12px; }

/* ---------- Forms ---------- */
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--muted); flex: 1 1 180px; }
input, select, textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 10px 12px; color: #fff; font-size: 14px;
  font-family: inherit; transition: border-color .18s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
select { cursor: pointer; }
input[type="date"] { color-scheme: dark; }
.form-error { color: var(--accent-2); font-size: 13px; min-height: 18px; }

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 22px;
}
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted-2);
  padding: 14px 16px; border-bottom: 1px solid var(--border); background: #0d0d0d;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
/* Retired accounts (shadowban swaps): kept in the list for their tracked videos,
   dimmed so the live roster reads at a glance. */
tr.retired-row td { opacity: .55; }
tbody tr:hover { background: rgba(255,255,255,.02); }
table select, table input { padding: 7px 10px; font-size: 13px; }

/* Accounts can be scanned as blocks by format, host, or posting status. */
.accounts-page-toolbar { flex-wrap: nowrap; }
.accounts-group-label {
  color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; white-space: nowrap;
}
.accounts-group-switch { flex: none; }
.account-group-row td {
  padding: 10px 16px; color: var(--text); background: #0d0d0d;
  border-top: 8px solid var(--bg); border-bottom: 1px solid var(--border-2);
  font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
}
.account-group-row:first-child td { border-top: 0; }
.account-group-row em {
  margin-left: 9px; color: var(--muted-2); font-size: 10px; font-style: normal;
  font-weight: 550; letter-spacing: 0; text-transform: none;
}
table select[data-field="status"] { min-width: 185px; }
.account-replace-link {
  width: max-content; padding: 2px 0; color: #aaa; background: none; border: 0;
  border-bottom: 1px solid #666; cursor: pointer; font: inherit; font-size: 12px;
  line-height: 1.1; transition: color .15s, border-color .15s;
}
.account-replace-link:hover { color: #fff; border-bottom-color: #fff; }
.account-tiktok-btn {
  justify-content: center; min-width: 104px; color: #fff;
  background: rgba(255,0,80,.12); border-color: rgba(255,0,80,.5);
  text-decoration: none;
}
.account-tiktok-btn:hover {
  color: #fff; background: rgba(255,0,80,.22); border-color: var(--accent); text-decoration: none;
}

/* Ops deep links turn the Accounts table into a one-action walkthrough. */
.account-guide-missing { color: var(--amber); }
.accounts-guided tbody tr:not(.account-guide-callout):not(.account-guide-row) {
  opacity: .16; filter: saturate(.25); transition: opacity .2s;
}
.accounts-guided tbody tr:not(.account-guide-callout):not(.account-guide-row):hover { opacity: .42; }
.account-guide-callout { scroll-margin-top: calc(var(--nav-h) + 22px); }
.account-guide-callout > td { padding: 14px 16px 8px; border-bottom: 0; }
.account-guide-card {
  display: flex; align-items: center; gap: 22px; min-width: 760px; padding: 15px 17px;
  background: linear-gradient(110deg, rgba(255,0,80,.16), rgba(255,0,80,.035));
  border: 1px solid rgba(255,0,80,.65); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(255,0,80,.12);
}
.account-guide-origin { display: grid; flex: none; gap: 2px; }
.account-guide-origin span {
  color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.account-guide-origin strong { color: var(--text); font-size: 13px; white-space: nowrap; }
.account-guide-flow { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.account-guide-flow > div { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.account-guide-flow b {
  display: grid; place-items: center; flex: none; width: 23px; height: 23px;
  color: #fff; background: var(--accent); border-radius: 50%; font-size: 11px;
}
.account-guide-flow p { display: grid; gap: 2px; min-width: 0; }
.account-guide-flow small {
  color: var(--muted); font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.account-guide-flow strong { color: var(--text); font-size: 13px; font-weight: 680; white-space: nowrap; }
.account-guide-flow span { color: #c3c3c3; font-size: 11px; line-height: 1.35; }
.account-guide-flow > i { color: var(--accent); font-size: 17px; font-style: normal; }
.account-guide-buttons { display: flex; gap: 7px; margin-left: auto; flex: none; }
.account-guide-buttons a { color: var(--text); text-decoration: none; }
.account-guide-row { position: relative; background: rgba(255,0,80,.075); }
.account-guide-row:hover { background: rgba(255,0,80,.1); }
.accounts-guided .account-guide-row td {
  opacity: 1; border-top: 1px solid rgba(255,0,80,.45); border-bottom: 1px solid rgba(255,0,80,.45);
}
.accounts-guided .account-guide-row td:first-child { border-left: 1px solid rgba(255,0,80,.45); }
.accounts-guided .account-guide-row td:last-child { border-right: 1px solid rgba(255,0,80,.45); }
.account-guide-target { position: relative; padding-top: 28px !important; }
.account-guide-target::before {
  content: attr(data-guide-label); position: absolute; top: 5px; left: 16px;
  color: #ff8aaf; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.account-guide-control {
  position: relative; z-index: 1; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,0,80,.2), 0 0 22px rgba(255,0,80,.25);
  animation: accountGuidePulse 1.5s ease-in-out infinite;
}
@keyframes accountGuidePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,0,80,.17), 0 0 16px rgba(255,0,80,.18); }
  50% { box-shadow: 0 0 0 5px rgba(255,0,80,.28), 0 0 28px rgba(255,0,80,.34); }
}
@media (prefers-reduced-motion: reduce) { .account-guide-control { animation: none; } }
@media (max-width: 900px) {
  .accounts-page-toolbar { align-items: flex-end; flex-wrap: wrap; }
  .accounts-group-label { width: 100%; }
}

/* ---------- Badges / status ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  background: rgba(255,255,255,.08); color: #ccc; text-transform: uppercase;
}
.badge.st-PLANNED    { background: rgba(255,255,255,.08); color: #aaa; }
.badge.st-QUEUED     { background: rgba(255,170,0,.15);  color: var(--amber); }
.badge.st-RENDERING  { background: rgba(153,51,255,.15); color: #c08cff; }
.badge.st-QC         { background: rgba(153,51,255,.15); color: #c08cff; }
.badge.st-READY      { background: rgba(74,158,255,.15); color: #4a9eff; }
.badge.st-DELIVERING { background: rgba(255,0,80,.15);   color: #ff5c8a; }
.badge.st-DONE       { background: rgba(34,197,94,.15);  color: var(--green); }
.badge.st-FAILED     { background: rgba(255,68,68,.15);  color: var(--accent-2); }
.badge.st-SKIPPED    { background: rgba(255,255,255,.06); color: var(--muted-2); }
.delivery-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 5px;
  width: max-content; padding: 4px 10px 4px 7px; border: 0;
  border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 550;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .15s;
}
.delivery-chip svg { display: block; width: 13px; height: 13px; flex: none; }
.delivery-chip.host { color: #188fc8; background: #e5f4fb; }
.delivery-chip.auto { color: #eb3514; background: #fde8e4; }
.delivery-chip.warn { color: #b45309; background: #fef3c7; }
.delivery-chip:hover { filter: saturate(1.12); box-shadow: 0 0 0 1px currentColor; transform: translateY(-1px); }
.delivery-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.delivery-settings-modal { width: 520px; max-width: 82vw; }
.delivery-settings-kicker {
  color: var(--muted); font-size: 10px; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px;
}
.delivery-settings-modal h3 { color: var(--text); font-size: 20px; margin: 0; }
.delivery-settings-intro { margin: 5px 0 18px; }
.delivery-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.delivery-settings-grid label { min-width: 0; }
.delivery-settings-grid label.is-inactive { opacity: .48; }
.delivery-settings-grid label { transition: opacity .15s; }
.delivery-mode-note {
  min-height: 32px; margin-top: 12px; color: var(--muted);
  font-size: 11.5px; line-height: 1.45;
}
.delivery-settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 620px) {
  .delivery-settings-grid { grid-template-columns: 1fr; }
}
.badge.st-RELEASE     { background: rgba(34,197,94,.15);  color: var(--green); }
.badge.st-CATALOG     { background: rgba(74,158,255,.15); color: #4a9eff; }
.badge.st-PRIORITY    { background: rgba(153,51,255,.18); color: #c08cff; }
.badge.st-OPPORTUNITY { background: rgba(255,170,0,.15);  color: var(--amber); }
.badge.promoted       { background: rgba(255,0,80,.15);   color: #ff5c8a; }
.badge.tiny           { padding: 1px 7px; font-size: 10px; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted);
}
.qc-pass { color: var(--green); font-size: 12px; font-weight: 600; }
.qc-fail { color: var(--accent-2); font-size: 12px; font-weight: 600; }

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px 16px; text-align: center;
}
.kpi .n { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.kpi .l { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted-2); margin-top: 4px; }

/* ---------- List items (pools / artists / hosts) ---------- */
.list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); margin-bottom: 8px; cursor: pointer; transition: all .15s;
}
.list-item:hover { border-color: #444; }
.list-item.selected { border-color: var(--accent); background: rgba(255,0,80,.06); }

/* ---------- Host accordion (Accounts page) ---------- */
.host-block { margin-bottom: 8px; }
.host-block .host-head { margin-bottom: 0; }
.host-name { display: flex; align-items: center; gap: 8px; }
.host-caret { color: var(--muted-2); font-size: 15px; transition: transform .18s; }
.host-block.open .host-caret { transform: rotate(90deg); }
.host-block.open .host-head { border-color: #444; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.host-accounts { display: none; }
.host-block.open .host-accounts {
  display: block;
  border: 1px solid #444; border-top: none; border-radius: 0 0 10px 10px;
  background: rgba(255,255,255,.02);
  animation: hostOpen .18s ease;
}
@keyframes hostOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.host-account {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px 10px 36px; font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.host-account:first-child { border-top: none; }
.host-account-name { font-weight: 500; }
.host-account-meta { display: flex; align-items: center; gap: 10px; }

/* ---------- Dropzone + clips ---------- */
.dropzone {
  border: 2px dashed var(--border-2); border-radius: 10px; padding: 26px;
  text-align: center; color: var(--muted); cursor: pointer; transition: all .18s; margin-bottom: 14px;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); color: #fff; background: rgba(255,0,80,.05); }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.clip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.clip .name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Render grid (Ops) ---------- */
.render-headline { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.render-headline .n { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.render-headline .l { font-size: 13px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; }

/* ---------- Ops: host performance ---------- */
.warn { color: var(--amber); font-size: 12px; font-weight: 600; }

/* Daily Intel: read-only recommendations at the top of Ops. */
.intel-panel { border-color: #303643; background: linear-gradient(180deg, #12151a 0%, var(--surface) 180px); }
.intel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.intel-heading h3 { margin-bottom: 6px; }
.intel-readonly {
  flex: none; color: #7db4ff; border: 1px solid rgba(74,158,255,.35);
  background: rgba(74,158,255,.09); border-radius: 999px; padding: 4px 9px;
  font-size: 9px; font-weight: 800; letter-spacing: .8px;
}
.intel-kpis { margin: 16px 0 20px; }
.intel-kpis .kpi { padding: 15px 12px; }
.intel-kpis .kpi .n, .intel-kpis .kpi .n.qc-pass, .intel-kpis .kpi .n.qc-fail { font-size: 27px; }
.intel-denom { font-size: 16px; font-weight: 400; }
.intel-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .65px; color: var(--muted); margin: 4px 0 10px; }
.intel-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 9px; margin-bottom: 20px; }
.intel-finding {
  display: flex; gap: 11px; min-width: 0; border: 1px solid var(--border);
  border-left-width: 3px; background: rgba(255,255,255,.025); border-radius: 9px; padding: 11px 13px;
}
.intel-finding.critical { border-left-color: var(--accent-2); }
.intel-finding.warning { border-left-color: var(--amber); }
.intel-finding.positive { border-left-color: var(--green); }
.intel-finding-icon {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,255,255,.07); font-size: 11px; font-weight: 800;
}
.intel-finding.critical .intel-finding-icon { color: var(--accent-2); }
.intel-finding.warning .intel-finding-icon { color: var(--amber); }
.intel-finding.positive .intel-finding-icon { color: var(--green); }
.intel-finding-title { font-size: 13px; font-weight: 700; }
.intel-finding-title span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .55px; margin-right: 5px; }
.intel-finding-detail { color: var(--muted); font-size: 11px; margin-top: 3px; }
.intel-action { color: #ddd; font-size: 12px; line-height: 1.4; margin-top: 5px; }
.intel-details { border-top: 1px solid var(--border); }
.intel-details summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; color: #ddd; font-size: 13px; font-weight: 650; cursor: pointer;
}
.intel-details summary::-webkit-details-marker { display: none; }
.intel-details summary::before { content: '▸'; color: var(--muted); margin-right: 8px; }
.intel-details[open] summary::before { content: '▾'; }
.intel-details summary span { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 500; }
.intel-details .table-wrap { margin-bottom: 14px; border-radius: 8px; }
.intel-table td { font-size: 12px; }
.intel-next { min-width: 220px; max-width: 370px; color: #c8c8c8; line-height: 1.4; }
.intel-signal { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.intel-signal.critical { color: #ff7777; background: rgba(255,68,68,.13); }
.intel-signal.warning { color: var(--amber); background: rgba(255,170,0,.12); }
.intel-signal.positive { color: var(--green); background: rgba(34,197,94,.12); }
.intel-method { color: var(--muted-2); font-size: 10px; line-height: 1.5; margin-top: 11px; }
@media (max-width: 700px) {
  .intel-heading { flex-direction: column; }
  .intel-findings { grid-template-columns: 1fr; }
}

/* Segmented range switcher (Today / 7 days / 30 days) */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px; }
.seg .btn { border: none; background: transparent; border-radius: 7px; }
.seg .btn:hover { background: rgba(255,255,255,.05); }
.seg .btn.primary { background: var(--accent); }

.inline-date {
  width: auto; display: inline-block; margin-left: 6px; padding: 3px 8px;
  font-size: 12px; vertical-align: middle;
}

.ops-headline { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.ops-hero { min-width: 260px; }
.ops-hero .n { font-size: 46px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.ops-hero .l { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted-2); margin-top: 4px; }
.meter { height: 6px; border-radius: 3px; background: var(--surface-2); margin-top: 12px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 3px; background: var(--muted-2); transition: width .3s ease; }
.meter span.qc-pass-bg { background: var(--green); }
.meter span.warn-bg    { background: var(--amber); }
.meter span.qc-fail-bg { background: var(--accent-2); }

/* Host leaderboard */
.ops-hosts .host-row { cursor: pointer; }
.ops-hosts .host-row:hover { background: rgba(255,255,255,.03); }
.ops-hosts .expander { width: 22px; color: var(--muted-2); user-select: none; }
.ops-hosts td { vertical-align: middle; }
.ops-hosts .meta { margin-top: 2px; }
.host-detail > td { background: rgba(255,255,255,.02); padding: 0 !important; }
.detail-slot { padding: 12px 16px 14px 38px; }
table.sub { width: 100%; border-collapse: collapse; font-size: 13px; }
table.sub th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted-2); font-weight: 600; padding: 4px 10px 6px 0;
}
table.sub td { padding: 6px 10px 6px 0; border-top: 1px solid var(--border); }

/* Per-day posting bars: one bar per day in the range, sized against the daily target. */
.daybars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.daybars.dense { gap: 1px; }
.daybars i { width: 7px; border-radius: 2px; background: var(--green); display: block; }
.daybars.dense i { width: 4px; }
.daybars i.part { background: var(--amber); }
.daybars i.zero { background: var(--accent-2); }   /* owed and posted nothing */
.daybars i.idle { background: #2a2a2a; }           /* nothing was scheduled */

/* ---------- Calendar (v2-style: promoted-songs sidebar + week grid) ---------- */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-label { min-width: 190px; text-align: center; font-weight: 600; font-size: 15px; }
.btn.icon { padding: 6px 12px; font-size: 16px; line-height: 1; }

.cal-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .cal-layout { grid-template-columns: 1fr; } }

.cal-sidebar { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; }
.promo-all {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 8px 10px; border: 1px dashed var(--border-2); border-radius: 8px;
  cursor: pointer; user-select: none;
}
.promo-all:hover { border-color: #555; }
.promo-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.promo-all.selected, .promo-all.partial { border-style: solid; border-color: var(--accent); }
.promo-all.selected .promo-check,
.promo-all.partial  .promo-check { background: var(--accent); border-color: var(--accent); }
.promo-all-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.promo-all.selected .promo-all-label, .promo-all.partial .promo-all-label { color: var(--text); }
.promo-all-count { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.promo-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 60vh; overflow-y: auto; }
.promo-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  cursor: pointer; transition: all .15s;
}
.promo-item:hover { border-color: #444; }
.promo-item.selected { border-color: var(--accent); background: rgba(255,0,80,.07); }
.promo-check {
  width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--border-2);
  display: grid; place-items: center; font-size: 12px; color: #fff;
}
.promo-item.selected .promo-check { background: var(--accent); border-color: var(--accent); }
.promo-info { flex: 1; min-width: 0; }
.promo-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-meta { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.promo-count {
  flex: none; min-width: 24px; text-align: center; font-size: 13px; font-weight: 700;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 2px 6px;
}
.cal-plan-btn { width: 100%; justify-content: center; padding: 12px; }

.cal-main { min-width: 0; }
.slots-summary {
  display: flex; align-items: center; gap: 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 22px; margin-bottom: 18px;
}
.ss-item { display: flex; flex-direction: column; }
.ss-n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.ss-l { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-2); margin-top: 2px; }

/* minmax(0, …) not 1fr: a bare 1fr floors each track at its content's min-content
   width, and the @handle line inside .wpost is ~270px wide, so the seven tracks
   added up to ~2400px and the whole week had to be scrolled sideways. */
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wday {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; min-height: 160px; display: flex; flex-direction: column; gap: 8px;
}
.wday-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.wday-name { font-size: 11px; font-weight: 700; color: var(--muted-2); letter-spacing: .5px; }
.wday-num { font-size: 16px; font-weight: 700; }
.wday-count { font-size: 11px; color: var(--muted); }
.wday-count.full { color: var(--green); font-weight: 600; }
.wday-posts { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.wday-empty { color: var(--muted-2); font-size: 12px; text-align: center; padding: 16px 0; }
/* Wraps to two rows rather than forcing the column wider on a narrow screen. */
.wday-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wday-actions .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }

.wpost {
  display: flex; align-items: center; gap: 6px; padding: 7px 7px; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  border-left: 3px solid var(--border-2);
}
.wpost.tier-PRIORITY    { border-left-color: var(--purple); }
.wpost.tier-RELEASE     { border-left-color: var(--green); }
.wpost.tier-OPPORTUNITY { border-left-color: var(--amber); }
.wpost-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #888; }
.wpost-dot.s-QUEUED, .wpost-dot.s-RENDERING { background: var(--amber); }
.wpost-dot.s-QC, .wpost-dot.s-READY { background: #4a9eff; }
.wpost-dot.s-DELIVERING { background: #ff5c8a; }
.wpost-dot.s-DONE { background: var(--green); }
.wpost-dot.s-FAILED { background: var(--accent-2); }
.wpost-body { flex: 1; min-width: 0; }
.wpost-song { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpost-acc { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Song modal: promote toggle */
.promote-toggle { display: flex; align-items: center; gap: 9px; flex-direction: row; font-size: 13px; color: var(--muted); cursor: pointer; }
.promote-toggle input { width: auto; }

/* ---------- Preflight problems ---------- */
.problems {
  background: rgba(255,68,68,.06); border: 1px solid rgba(255,68,68,.3);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 20px;
}
.problems h4 { color: var(--accent-2); margin-bottom: 10px; font-size: 14px; }
.problems ul { margin-left: 18px; font-size: 13px; line-height: 1.7; }
.problems.ok { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.3); }
.problems.ok h4 { color: var(--green); }

/* ---------- Empty / loading ---------- */
.empty { text-align: center; color: var(--muted-2); padding: 30px; font-size: 14px; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 30px; }
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--border-2);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(2px); }
.modal-body {
  position: relative; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 22px; max-width: 92vw; max-height: 90vh; overflow: auto;
}
.modal-body video { max-height: 78vh; max-width: 100%; border-radius: 8px; display: block; }
.modal-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: #fff; }

/* ---------- Songs: card list + edit modal ---------- */
.song-list { display: flex; flex-direction: column; gap: 10px; }
.song-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.song-card:hover { border-color: var(--border-2); background: var(--surface-2); }
.song-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.song-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; color: #fff; font-size: 22px;
}
.song-cover {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--border);
}
.song-main { flex: 1 1 auto; min-width: 0; }
.song-title { font-weight: 600; font-size: 15px; color: #fff; }
.song-tags { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.song-modal .form-label { display: block; font-size: 13px; color: var(--muted); }
.song-modal { width: 480px; max-width: 90vw; }
.song-modal .modal-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.audio-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
}
.audio-name { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.artwork-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
}
.artwork-row label { flex: 1; min-width: 0; margin: 0; }
.artwork-row input[type="file"] { margin-top: 5px; }
.artwork-preview {
  flex: 0 0 auto; width: 78px; height: 78px; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--border-2); background: #111;
}
.artwork-empty {
  display: grid; place-items: center; padding: 8px; text-align: center;
  color: var(--muted); font-size: 11px;
}

/* ---------- Toasts ---------- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--surface); border: 1px solid var(--border-2); color: #fff;
  padding: 12px 16px; border-radius: 10px; font-size: 13px; min-width: 200px; max-width: 340px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: slidein .2s ease;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--accent-2); }
.toast.info    { border-left: 3px solid #4a9eff; }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }

/* ---------- Login ---------- */
.login {
  position: fixed; inset: 0; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(120deg, #3a1a5c, #ff0050 50%, #ff8a4a);
  background-size: 300% 300%;
  animation: login-gradient-shift 16s ease-in-out infinite;
}
@keyframes login-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.login-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.login-blob.b1 { width: 340px; height: 340px; background: #7a2bff; opacity: .5; top: -10%; left: -8%; animation: login-blob-float 12s ease-in-out infinite; }
.login-blob.b2 { width: 380px; height: 380px; background: #ffd23f; opacity: .4; bottom: -12%; right: -8%; animation: login-blob-float 14s ease-in-out infinite reverse; }
@keyframes login-blob-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-24px, 26px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .login, .login-blob { animation: none; }
}
.login-card {
  position: relative; z-index: 1;
  width: 340px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 14px; text-align: center;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.5);
}
.login-logo { display: flex; justify-content: center; margin-bottom: 4px; }
.login-logo-img {
  width: 48px; height: 48px; border-radius: 12px; object-fit: contain;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5);
}
.login-card h1 { font-size: 26px; font-weight: 800; color: #fff; }
.login-card p { margin-bottom: 8px; color: rgba(255,255,255,.85); }
.login-card label { text-align: left; color: rgba(255,255,255,.9); }
.login-card input { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); color: #fff; }
.login-card input::placeholder { color: rgba(255,255,255,.6); }
.login-card input:focus { border-color: #fff; }
.login-card .btn { justify-content: center; margin-top: 4px; }
.login-card .btn.primary { background: #fff; color: #3a1a5c; box-shadow: none; }
.login-card .btn.primary:hover { filter: brightness(.96); }
.login-card .form-error { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ---------- Ops: daily QC strips ---------- */
/* Thumbnails only (the modal owns the single <video>); lateral scroll per
   account row so a 100-render day stays light and skimmable. */
.qc-group { margin-top: 14px; }
.qc-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.qc-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.qc-card {
  flex: 0 0 auto; width: 116px; margin: 0; cursor: pointer;
  scroll-snap-align: start;
}
.qc-card img, .qc-noimg {
  display: block; width: 116px; height: 206px; object-fit: cover;
  border-radius: 8px; background: #111; border: 1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, border-color .12s ease;
}
.qc-noimg { display: flex; align-items: center; justify-content: center; color: #555; font-size: 26px; }
.qc-card:hover img, .qc-card:hover .qc-noimg { transform: scale(1.03); border-color: var(--accent); }
.qc-card-fail img, .qc-card-fail .qc-noimg { border: 2px solid var(--accent-2); }
.qc-card figcaption { padding-top: 4px; line-height: 1.35; }
.qc-card .qc-song {
  display: block; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fmt-tag {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  background: rgba(255,0,80,.12); color: var(--accent);
  border: 1px solid rgba(255,0,80,.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  :root { --pad-x: 18px; }
  .header-inner { gap: 10px; overflow-x: auto; }
  .user-email { display: none; }
  .nav a { padding: 8px 10px; }
  .nav a span:not(.nav-icon) { display: none; } /* icons only on small screens */
}

/* ============================================================
 * Formats tab (client-facing)
 * ========================================================== */
.fmt-layout {
  display: grid; grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.fmt-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fmt-side > .panel { margin-bottom: 0; }
.fmt-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fmt-main .panel { margin-bottom: 0; }
.fmt-performance button { font: inherit; cursor: pointer; }
.fmt-perf-head, .fmt-perf-title, .fmt-perf-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.fmt-perf-title { flex-direction: column; align-items: flex-start; gap: 4px; }
.fmt-perf-head h3 { margin: 0; }
.fmt-perf-section { margin-top: 22px; }
.fmt-perf-section-head { margin-bottom: 12px; }
.fmt-perf-section-head > .fmt-perf-toggle { width: 100%; }
.fmt-perf-section-head > .fmt-perf-toggle button { flex: 1; }
.fmt-perf-section-head h4 { font-size: 14px; font-weight: 600; }
.fmt-perf-section-head p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.fmt-perf-toggle { display: inline-flex; gap: 5px; }
.fmt-perf-toggle button {
  border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 11px;
  color: var(--muted); background: var(--surface-2); font-size: 12px;
}
.fmt-perf-toggle button:hover { color: var(--text); }
.fmt-perf-toggle button[aria-pressed="true"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.fmt-performance button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
button.fmt-perf-name:hover > span { color: var(--text); text-decoration: underline; }
.fmt-perf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px 10px;
}
.fmt-perf-benchmark { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 14px 0 6px; color: var(--muted); font-size: 10px; }
.fmt-perf-benchmark i { width: 1px; height: 11px; background: var(--muted); margin-right: 3px; }
.fmt-perf-benchmark strong { margin-left: auto; font-weight: 500; color: #ccc; }
.fmt-perf-row { padding: 8px 0; border-top: 1px solid var(--border); }
.fmt-perf-name {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3px;
  min-width: 0; border: 0; background: none; color: var(--text); text-align: left;
}
.fmt-perf-name > span { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmt-perf-meta { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 11px; line-height: 16px; }
.fmt-perf-meta > span { margin: 0 4px; }
.fmt-perf-bar { grid-column: 1 / -1; grid-row: 3; position: relative; height: 3px; background: var(--surface-2); border-radius: 999px; }
.fmt-perf-bar > span { display: block; height: 100%; border-radius: inherit; }
.fmt-perf-bar > i { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.fmt-perf-value { grid-column: 2; grid-row: 1; text-align: right; font-size: 15px; line-height: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fmt-perf-verdict { grid-column: 2; grid-row: 2; justify-self: end; padding: 1px 6px; border-radius: 999px; font-size: 10px; line-height: 14px; font-weight: 600; white-space: nowrap; }
.fmt-perf-verdict.scale { color: var(--green); background: #22c55e20; }
.fmt-perf-verdict.maintain { color: #ccc; background: var(--surface-2); }
.fmt-perf-verdict.reduce { color: #ff7777; background: #ff444420; }
.fmt-perf-verdict.early { color: var(--amber); background: #ffaa0020; }
.fmt-perf-verdict[data-verdict-tip] { cursor: help; }
.fmt-perf-verdict[data-verdict-tip]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fmt-verdict-tip {
  position: fixed; left: 0; top: 0; z-index: 1000; width: 290px; pointer-events: none;
  padding: 10px 12px; background: #161616; border: 1px solid #2e2e2e; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); font-size: 11.5px; line-height: 1.5; color: #999;
}
.fmt-verdict-tip strong { display: block; margin-bottom: 3px; font-size: 12px; color: #fff; }
.fmt-verdict-tip p { margin: 0 0 8px; }
.fmt-verdict-key { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid #262626; }
.fmt-verdict-key > div { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; opacity: .6; }
.fmt-verdict-key > div.is-current { opacity: 1; color: #ddd; }
.fmt-verdict-key .fmt-perf-verdict { grid-column: auto; grid-row: auto; justify-self: start; }
.fmt-perf-empty { padding: 28px 0 12px; color: var(--muted); font-size: 13px; }
.fmt-perf-coverage { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.7; }
.fmt-perf-coverage > span { display: block; }
.fmt-split-block > h3 { margin-bottom: 3px; }
.fmt-split-block > p { margin: 0 0 2px; }
.fmt-split-testing .fmt-donut { max-width: 190px; }
.fmt-split-empty { padding: 24px 0 18px; line-height: 1.5; }

.fmt-donut { display: block; width: 100%; max-width: 240px; margin: 8px auto 16px; }
.fmt-arc {
  cursor: pointer; outline: none;
  transition: opacity .18s ease, stroke-width .18s ease, filter .18s ease;
}
.fmt-donut:has(.fmt-arc:hover) .fmt-arc:not(:hover),
.fmt-donut:has(.fmt-arc:focus-visible) .fmt-arc:not(:focus-visible) { opacity: .42; }
.fmt-arc:hover, .fmt-arc:focus-visible {
  stroke-width: 34px; filter: drop-shadow(0 4px 7px rgba(0,0,0,.24));
}
.fmt-arc-label {
  fill: rgba(0,0,0,.8); font-size: 12px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.fmt-donut-num {
  fill: var(--text); font-size: 26px; font-weight: 700; text-anchor: middle;
}
.fmt-donut-sub { fill: var(--muted); font-size: 11px; text-anchor: middle; }

.fmt-legend { display: flex; flex-direction: column; gap: 3px; }
.fmt-legend-item {
  display: flex; width: 100%; align-items: center; gap: 9px; padding: 5px 6px;
  color: var(--text); background: transparent; border: 0; border-radius: 7px;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.fmt-legend-item:hover { background: rgba(255,255,255,.055); transform: translateX(2px); }
.fmt-legend-item:focus-visible { outline: 1px solid var(--border-2); outline-offset: 1px; background: rgba(255,255,255,.055); }
.fmt-legend-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.fmt-side-totals { margin-top: 14px; line-height: 1.7; }
.fmt-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }

.fmt-card {
  position: relative; display: flex; gap: 24px; scroll-margin-top: calc(var(--nav-h) + 28px);
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.fmt-card::before {
  content: ''; position: absolute; top: 14px; bottom: 14px; left: -1px; width: 3px;
  background: var(--fmt-color); border-radius: 0 3px 3px 0; opacity: 0;
  transform: scaleY(.55); transition: opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}
.fmt-card.is-chart-selected {
  border-color: color-mix(in srgb, var(--fmt-color) 52%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fmt-color) 16%, transparent),
              0 18px 42px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.fmt-card.is-chart-selected::before { opacity: 1; transform: scaleY(1); }
.fmt-media { flex: 0 0 220px; }
.fmt-media video, .fmt-media img {
  width: 100%; max-height: 390px; object-fit: cover;
  border-radius: 8px; background: #000;
}
.fmt-nosample {
  height: 200px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-2); border-radius: 8px;
}
.fmt-body { flex: 1; min-width: 0; }
.fmt-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fmt-title h3 { margin: 0; font-size: 17px; }
.fmt-chart-context {
  max-width: 0; overflow: hidden; opacity: 0; color: var(--fmt-color);
  font-size: 10px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase;
  white-space: nowrap; transform: translateX(-5px);
  transition: max-width .3s ease, opacity .2s ease, transform .3s ease;
}
.fmt-card.is-chart-selected .fmt-chart-context { max-width: 180px; opacity: .9; transform: translateX(0); }
.badge.fmt-active  { background: rgba(34,197,94,.15); color: var(--green); }
.badge.fmt-testing { background: rgba(255,170,0,.15); color: var(--amber); }
.fmt-desc { font-size: 14px; line-height: 1.55; color: #ccc; max-width: 720px; }
.fmt-stats { margin: 8px 0 4px; }
.fmt-section { margin-top: 14px; }
.fmt-section h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 6px;
}
.fmt-section p { max-width: 720px; line-height: 1.5; }
.fmt-h4-num { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.fmt-ref-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fmt-ref {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--border-2);
  font-size: 13px; color: var(--text); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.fmt-ref:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border-color: #4a4a4a; text-decoration: none;
}
.fmt-ref-ico {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.fmt-ref-ico.play { font-size: 8px; padding-left: 2px; }
.fmt-ref-main { font-weight: 600; }
.fmt-ref-sub { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .fmt-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fmt-card { flex-direction: column; }
  .fmt-media { flex: none; max-width: 260px; }
}

/* ============================================================
 * Ops — Content Press light control-room skin
 * Scoped to this route: every other UMGTok page keeps its dark theme.
 * ========================================================== */
body.ops-page {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --border: #e7e7e9;
  --border-2: #d4d4d8;
  --text: #0a0a0a;
  --muted: #71717a;
  --muted-2: #a1a1aa;
  --accent: #0a0a0a;
  --accent-2: #dc2626;
  --green: #168451;
  --amber: #d97706;
  --purple: #6d5bd0;
  --red: #dc2626;
  --orange: #d97706;
  background: var(--bg);
  color: var(--text);
}
body.ops-page * { scrollbar-color: #d4d4d8 transparent; }
body.ops-page *::-webkit-scrollbar-thumb { background: #d4d4d8; }
body.ops-page *::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* The same quiet white shell used by the Content Press machine pages. */
body.ops-page .header { background: #fafafa; border-bottom-color: var(--border); }
body.ops-page .logo { color: var(--text); font-weight: 640; }
body.ops-page .logo-icon {
  background: var(--text); box-shadow: none; border-radius: 7px;
  font-size: 13px; font-weight: 650;
}
body.ops-page .nav a { color: var(--muted); border-radius: 9px; font-weight: 520; }
body.ops-page .nav a:hover { color: var(--text); background: var(--surface-2); }
body.ops-page .nav a.active { color: #fff; background: var(--text); }
body.ops-page .nav-icon { filter: grayscale(1); opacity: .65; }
body.ops-page .nav a.active .nav-icon { opacity: 1; }
body.ops-page .user-email { color: var(--muted); }
body.ops-page .admin-badge { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
body.ops-page .btn-signout { color: var(--text); background: var(--surface-2); border-color: var(--border); }
body.ops-page .btn-signout:hover { background: var(--border); border-color: var(--border-2); }

body.ops-page .ops-view { background: var(--bg); color: var(--text); }
body.ops-page .ops-page-head {
  align-items: flex-end; padding-top: 28px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.ops-title-block { min-width: 260px; }
body.ops-page .ops-title-block h2 { font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
body.ops-page .ops-title-block > p:last-child { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ops-kicker {
  margin: 0 0 5px; color: var(--muted-2); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
body.ops-page .ops-range-controls { justify-content: flex-end; }
body.ops-page input, body.ops-page select, body.ops-page textarea {
  color: var(--text); background: var(--bg); border-color: var(--border);
  color-scheme: light; border-radius: 10px;
}
body.ops-page input:focus, body.ops-page select:focus, body.ops-page textarea:focus { border-color: var(--text); }
body.ops-page .btn {
  color: var(--text); background: var(--surface-2); border-color: var(--border);
  border-radius: 10px; box-shadow: none; font-weight: 550;
}
body.ops-page .btn:hover { background: var(--border); border-color: var(--border-2); }
body.ops-page .btn.primary { color: #fff; background: var(--text); border-color: var(--text); box-shadow: none; }
body.ops-page .btn.primary:hover { background: #27272a; filter: none; }
body.ops-page .btn.danger { color: #b42323; background: #fef2f2; border-color: #fecaca; }
body.ops-page .btn.danger:hover { background: #fee2e2; border-color: #fca5a5; }
body.ops-page .seg { padding: 3px; background: var(--surface-2); border: 0; border-radius: 9px; }
body.ops-page .seg .btn { color: var(--muted); padding: 5px 11px; background: transparent; border: 0; }
body.ops-page .seg .btn:hover { color: var(--text); background: rgba(255,255,255,.6); }
body.ops-page .seg .btn.primary { color: var(--text); background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.07); }
body.ops-page .inline-date { margin: 0; padding: 7px 10px; font-size: 12px; }

body.ops-page .ops-view .panel {
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; margin-bottom: 14px;
}
body.ops-page .ops-view .panel h3 { color: var(--text); }
.ops-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.ops-card-head > div { min-width: 0; }
body.ops-page .ops-card-head h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.012em; }
body.ops-page .ops-card-head p:not(.ops-kicker) { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.ops-pill {
  flex: none; padding: 3px 10px; border-radius: 999px; background: var(--surface-2);
  color: var(--muted); font-size: 11px; font-weight: 550; white-space: nowrap;
}
.ops-copy { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ops-note {
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 11px; line-height: 1.5;
}

/* Intel follows the Press observability page: verdict, stage tiles, evidence. */
body.ops-page .intel-panel { background: var(--surface); border-color: var(--border); }
body.ops-page .intel-heading { margin-bottom: 10px; }
body.ops-page .intel-heading h3 { font-size: 18px; }
/* A quiet note, not a success badge: this panel only ever recommends. */
body.ops-page .intel-readonly {
  flex: none; padding: 3px 9px; color: var(--muted); background: var(--surface-2);
  border: 0; border-radius: 999px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
/* The daily action board: two queues, one vertical rule, no nested boxes.
 * Counts live in the queue headers so the board carries no summary chrome. */
.ops-action-board {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 0; align-items: stretch; margin-top: 16px;
}
.host-message-queue { min-width: 0; padding-right: 22px; }
.internal-action-queue {
  min-width: 0; padding-left: 22px; border-left: 1px solid var(--border);
}
.action-queue-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.action-queue-head > span {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px;
  color: #fff; background: var(--text); border-radius: 6px; font-size: 11px; font-weight: 700;
}
.action-queue-head h4 { margin: 0; color: var(--text); font-size: 13px; font-weight: 680; }
.action-queue-head em {
  margin-left: auto; padding: 2px 8px; background: var(--surface-2); border-radius: 999px;
  color: var(--muted); font-size: 11px; font-style: normal; font-weight: 650;
}
.host-message-list, .internal-action-list { display: grid; gap: 8px; }

/* A message card is one click target: anywhere on it copies the text.
 * Priority rides on the dot beside the type, matching the dashboard column —
 * no coloured rail, so the card keeps one clean outline. */
.host-message-card {
  padding: 12px 13px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 11px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.host-message-card:hover { border-color: var(--border-2); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.host-message-card.copied { background: var(--surface); border-color: var(--border); }
.host-message-card.copied .host-message-text { color: var(--muted); }
.host-message-head { display: flex; align-items: center; gap: 9px; }
.host-avatar {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  color: var(--text); background: var(--surface-2); border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.host-message-card.copied .host-avatar { color: var(--green); background: #e6f5ec; }
.host-message-head > div { min-width: 0; }
.host-message-head h5 { margin: 0; color: var(--text); font-size: 13px; font-weight: 680; }
.host-message-head div > span {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  color: var(--muted-2); font-size: 9.5px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.host-message-head div > span > i {
  flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
}
.host-message-card.critical .host-message-head div > span > i { background: var(--accent-2); }
.host-message-card.copied .host-message-head div > span > i { background: var(--green); }

/* Copying is the whole point of this card, so the button reads as primary. */
.copy-message-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto;
  padding: 6px 12px; color: #fff; background: var(--text);
  border: 1px solid var(--text); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.copy-message-btn b { font-weight: 600; }
.copy-message-btn:hover { background: #2b2b2f; border-color: #2b2b2f; }
.copy-message-btn .ico-check, .host-message-card.copied .copy-message-btn .ico-copy { display: none; }
.host-message-card.copied .copy-message-btn .ico-check { display: block; }
.host-message-card.copied .copy-message-btn,
.host-message-card.copied .copy-message-btn:hover {
  color: var(--green); background: #e6f5ec; border-color: #c4e5d3;
}
.host-message-text {
  margin: 9px 0 0 37px; color: var(--text); font-size: 13px;
  font-weight: 460; line-height: 1.45;
}
.host-decision { margin: 7px 0 0 37px; color: var(--amber); font-size: 10.5px; font-weight: 600; }

/* A dashboard change is one line of what + one line of why, tag on the right. */
.internal-action-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px;
  color: inherit; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; transition: border-color .12s, box-shadow .12s;
}
.internal-action-row:hover {
  border-color: var(--border-2); box-shadow: 0 1px 3px rgba(0,0,0,.05); text-decoration: none;
}
.internal-action-row > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.internal-action-row.critical > i { background: var(--accent-2); }
.internal-action-row.warning > i { background: var(--amber); }
.internal-action-row.positive > i { background: var(--green); }
.internal-action-row > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.internal-action-row div > b {
  color: var(--text); font-size: 12px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.internal-action-row div > small { margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.internal-action-row > span {
  flex: none; padding: 2px 7px; background: var(--surface-2); border-radius: 5px;
  color: var(--muted); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.internal-action-row::after {
  content: '›'; flex: none; color: var(--muted-2); font-size: 16px; line-height: 1;
  transform: translateX(-2px); transition: transform .12s, color .12s;
}
.internal-action-row:hover::after { color: var(--text); transform: translateX(0); }

/* Critical account signals must interrupt the scan. The card breathes slowly;
 * only the small severity light flickers, so urgency stays readable rather than noisy. */
body.ops-page .internal-action-row.critical {
  position: relative; color: #7f1d1d;
  background: linear-gradient(100deg, #fff0f0 0%, #fff7f7 58%, #ffffff 100%);
  border-color: #ef4444;
  box-shadow: inset 3px 0 0 #dc2626, 0 0 0 1px rgba(220,38,38,.06), 0 3px 14px rgba(220,38,38,.12);
  animation: criticalCardHeat 2.4s ease-in-out infinite;
}
body.ops-page .internal-action-row.critical:hover {
  border-color: #dc2626; background: linear-gradient(100deg, #fee2e2 0%, #fff1f2 62%, #ffffff 100%);
  box-shadow: inset 3px 0 0 #b91c1c, 0 0 0 2px rgba(220,38,38,.1), 0 5px 20px rgba(220,38,38,.18);
}
body.ops-page .internal-action-row.critical > i {
  position: relative; width: 9px; height: 9px; background: #ef1f1f;
  box-shadow: 0 0 7px #ef4444, 0 0 15px rgba(239,68,68,.8);
  animation: criticalSpark 1.7s linear infinite;
}
body.ops-page .internal-action-row.critical > i::before {
  content: ''; position: absolute; inset: -5px; border: 1px solid rgba(239,31,31,.52);
  border-radius: 50%; animation: criticalHalo 1.7s ease-out infinite;
}
body.ops-page .internal-action-row.critical div > b { color: #991b1b; font-weight: 730; }
body.ops-page .internal-action-row.critical div > small { color: #b45353; }
body.ops-page .internal-action-row.critical > span {
  color: #b91c1c; background: #fee2e2; box-shadow: inset 0 0 0 1px #fecaca;
}
body.ops-page .internal-action-row.critical::after { color: #dc2626; }
@keyframes criticalCardHeat {
  0%, 100% { box-shadow: inset 3px 0 0 #dc2626, 0 0 0 1px rgba(220,38,38,.06), 0 3px 13px rgba(220,38,38,.1); }
  50% { box-shadow: inset 3px 0 0 #ef1f1f, 0 0 0 2px rgba(239,31,31,.09), 0 4px 21px rgba(220,38,38,.2); }
}
@keyframes criticalSpark {
  0%, 17%, 23%, 51%, 58%, 100% { opacity: 1; transform: scale(1); }
  19%, 54% { opacity: .28; transform: scale(.72); }
  21%, 56% { opacity: 1; transform: scale(1.34); }
}
@keyframes criticalHalo {
  0% { opacity: .8; transform: scale(.55); }
  48%, 100% { opacity: 0; transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  body.ops-page .internal-action-row.critical,
  body.ops-page .internal-action-row.critical > i,
  body.ops-page .internal-action-row.critical > i::before { animation: none; }
}

.action-empty {
  padding: 22px 12px; color: var(--muted-2); border: 1px dashed var(--border);
  border-radius: 10px; text-align: center; font-size: 11.5px;
}
/* Good day: no queues at all, just the one line that says so. */
.action-allclear {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 18px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.action-allclear i {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}
.action-allclear strong { color: var(--text); font-size: 13px; font-weight: 650; }
.action-allclear span { color: var(--muted); font-size: 12px; }
.intel-rules { margin-top: 13px; border-top: 1px solid var(--border); }
.intel-rules > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 2px 0;
  list-style: none; cursor: pointer;
}
.intel-rules > summary::-webkit-details-marker { display: none; }
.intel-rules > summary::before { content: '▸'; color: var(--muted-2); font-size: 10px; }
.intel-rules[open] > summary::before { content: '▾'; }
.intel-rules > summary div { display: flex; align-items: baseline; gap: 8px; }
.intel-rules > summary strong { color: var(--text); font-size: 11.5px; font-weight: 650; }
.intel-rules > summary span { color: var(--muted-2); font-size: 10px; }
.intel-rules > summary > b {
  margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.intel-rules-body { padding: 13px 0 2px 13px; }
.intel-mode-ladder { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; }
.intel-mode-ladder > div {
  display: grid; gap: 2px; padding: 11px 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px;
}
.intel-mode-ladder small {
  color: var(--muted-2); font-size: 8.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.intel-mode-ladder strong { color: var(--text); font-size: 12px; font-weight: 650; }
.intel-mode-ladder span { color: var(--muted); font-size: 10.5px; }
.intel-mode-ladder > i { color: var(--muted-2); font-size: 13px; font-style: normal; }
.intel-rule-triggers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 13px; }
.intel-rule-triggers > div { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.intel-rule-triggers i {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px;
  border-radius: 6px; background: var(--surface-2); font-size: 12px; font-style: normal; font-weight: 750;
}
.intel-rule-triggers i.up { color: var(--green); }
.intel-rule-triggers i.down { color: #96690a; }
.intel-rule-triggers i.retire { color: #b42323; }
.intel-rule-triggers p { display: grid; gap: 2px; margin: 0; }
.intel-rule-triggers strong { color: var(--text); font-size: 10.5px; font-weight: 650; }
.intel-rule-triggers span { color: var(--muted); font-size: 10px; line-height: 1.4; }
.intel-rules-body > p { margin: 11px 0 0; color: var(--muted-2); font-size: 9.5px; }
.intel-evidence { margin-top: 12px; border-top: 1px solid var(--border); }
.intel-evidence > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 2px 0;
  list-style: none; cursor: pointer;
}
.intel-evidence > summary::-webkit-details-marker { display: none; }
.intel-evidence > summary::before { content: '▸'; color: var(--muted-2); font-size: 10px; }
.intel-evidence[open] > summary::before { content: '▾'; }
.intel-evidence > summary div { display: flex; align-items: baseline; gap: 8px; }
.intel-evidence > summary strong { color: var(--text); font-size: 11.5px; font-weight: 650; }
.intel-evidence > summary span { color: var(--muted-2); font-size: 10px; }
.intel-evidence > summary > b { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 600; }
.intel-evidence[open] > summary > b { font-size: 0; }
.intel-evidence[open] > summary > b::after { content: 'Close'; font-size: 10px; }
.intel-evidence-body { padding: 9px 0 0 13px; }
.intel-verdict {
  display: flex; align-items: center; gap: 9px; padding: 10px 0 14px;
  font-size: 13px; border-bottom: 1px solid var(--border);
}
.intel-verdict i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.intel-verdict.bad i { background: var(--accent-2); }
.intel-verdict strong { font-weight: 650; }
.intel-verdict span { margin-left: auto; color: var(--muted-2); font-size: 10.5px; white-space: nowrap; }
body.ops-page .intel-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 14px 0 20px;
}
.intel-stat {
  position: relative; min-height: 92px; padding: 13px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.intel-stat > i { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.intel-stat.good > i { background: var(--green); }
.intel-stat.bad { background: #fdf5f4; border-color: #f2c1bb; }
.intel-stat.bad > i { background: var(--accent-2); }
.intel-stat b {
  display: block; margin-top: 8px; color: var(--text); font-size: 25px;
  line-height: 1; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.intel-stat b small { color: var(--muted-2); font-size: 13px; font-weight: 520; letter-spacing: 0; }
.intel-stat span { display: block; margin-top: 7px; color: var(--muted); font-size: 11.5px; }
.intel-section-head {
  display: flex; align-items: center; gap: 12px; padding: 2px 0 10px;
}
.intel-section-head h4 { margin: 0; color: var(--text); font-size: 12.5px; font-weight: 650; }
.intel-section-head p { margin: 1px 0 0; color: var(--muted-2); font-size: 10.5px; }
.intel-section-head > span {
  margin-left: auto; min-width: 24px; text-align: center; padding: 2px 7px;
  color: var(--muted); background: var(--surface-2); border-radius: 999px;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}
body.ops-page .intel-findings {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 0 0 18px;
}
body.ops-page .intel-finding {
  gap: 10px; min-height: 86px; padding: 11px 12px; background: var(--bg);
  border: 1px solid var(--border); border-left-width: 1px; border-radius: 11px;
}
body.ops-page .intel-finding.critical { background: #fdf5f4; border-color: #f2c1bb; }
body.ops-page .intel-finding.warning { background: #fdfaf0; border-color: #f0d9a4; }
body.ops-page .intel-finding.positive { border-color: #cfe8da; }
body.ops-page .intel-finding-icon {
  width: 27px; height: 27px; border-radius: 8px; background: var(--surface-2);
  color: var(--muted); font-size: 11px;
}
body.ops-page .intel-finding.critical .intel-finding-icon { color: #b42323; background: #fdeaea; }
body.ops-page .intel-finding.warning .intel-finding-icon { color: #96690a; background: #fdf3dd; }
body.ops-page .intel-finding.positive .intel-finding-icon { color: #0a7a3d; background: #e6f5ec; }
body.ops-page .intel-finding-title { color: var(--text); font-size: 12.5px; font-weight: 650; }
body.ops-page .intel-finding-title span { color: var(--muted-2); font-size: 9.5px; }
body.ops-page .intel-finding-detail { color: var(--muted); font-size: 10.5px; }
body.ops-page .intel-action { color: var(--text); font-size: 11.5px; }
body.ops-page .intel-details { border-top-color: var(--border); }
body.ops-page .intel-details summary { color: var(--text); padding: 12px 2px; font-size: 12px; font-weight: 650; }
body.ops-page .intel-details summary span { color: var(--muted-2); }
body.ops-page .intel-details .table-wrap { margin-bottom: 12px; }
body.ops-page .intel-next { color: var(--muted); }
body.ops-page .intel-next strong { color: var(--text); font-weight: 650; }
body.ops-page .intel-signal { padding: 3px 9px; font-size: 9.5px; }
body.ops-page .intel-signal.critical { color: #b42323; background: #fdeaea; }
body.ops-page .intel-signal.warning { color: #96690a; background: #fdf3dd; }
body.ops-page .intel-signal.positive { color: #0a7a3d; background: #e6f5ec; }
body.ops-page .intel-method {
  margin: 12px 0 0; padding: 11px 13px; color: var(--muted);
  background: var(--surface-2); border-radius: 10px; font-size: 10.5px;
}
body.ops-page .intel-method strong { color: var(--text); font-weight: 650; }

/* Posting + hosts read as a two-column operating surface. */
.ops-delivery-grid {
  display: grid; grid-template-columns: minmax(275px, .72fr) minmax(620px, 2fr);
  gap: 14px; align-items: start;
}
body.ops-page .ops-delivery-grid > .panel { height: 100%; }
body.ops-page .ops-posting-card .ops-headline { display: block; }
body.ops-page .ops-posting-card .ops-hero { min-width: 0; }
body.ops-page .ops-hero .n,
body.ops-page .ops-hero .n.qc-pass,
body.ops-page .ops-hero .n.qc-fail,
body.ops-page .ops-hero .n.warn {
  color: var(--text); font-size: 36px; font-weight: 650;
}
body.ops-page .ops-hero .n.qc-fail { color: var(--accent-2); }
body.ops-page .ops-hero .l { color: var(--muted); font-size: 10px; letter-spacing: .07em; }
body.ops-page .meter { height: 7px; margin-top: 10px; background: var(--surface-2); border-radius: 999px; }
body.ops-page .ops-posting-card .kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
body.ops-page .ops-posting-card .kpi { padding: 11px 10px; }
body.ops-page .ops-posting-card .kpi .n,
body.ops-page .ops-posting-card .kpi .n.qc-pass,
body.ops-page .ops-posting-card .kpi .n.qc-fail,
body.ops-page .ops-posting-card .kpi .n.warn { font-size: 20px; }

/* Tables use the compact Content Press ledger treatment. */
body.ops-page .ops-view .table-wrap {
  overflow-x: auto; color: var(--text); background: var(--bg);
  border-color: var(--border); border-radius: 11px; margin-bottom: 0;
}
body.ops-page .ops-view table { color: var(--text); font-variant-numeric: tabular-nums; }
body.ops-page .ops-view thead th {
  color: var(--muted-2); background: var(--surface); border-bottom-color: var(--border);
  padding: 10px 11px; font-size: 9.5px; font-weight: 650; letter-spacing: .07em;
}
body.ops-page .ops-view tbody td { padding: 10px 11px; border-bottom-color: var(--border); font-size: 12px; }
body.ops-page .ops-view tbody tr:hover { background: var(--surface); }
body.ops-page .ops-hosts .host-row:hover { background: var(--surface); }
body.ops-page .ops-hosts .expander { color: var(--muted-2); }
body.ops-page .host-detail > td { background: var(--surface); }
body.ops-page table.sub th { color: var(--muted-2); }
body.ops-page table.sub td { border-top-color: var(--border); }
body.ops-page .daybars i.idle { background: var(--border); }
body.ops-page .badge { color: var(--muted); background: var(--surface-2); }
body.ops-page .badge.st-GOOD, body.ops-page .badge.st-DONE { color: #0a7a3d; background: #e6f5ec; }
body.ops-page .badge.st-RECOVERY, body.ops-page .badge.st-READY { color: #315f9e; background: #eaf2fd; }
body.ops-page .badge.st-WARMING_UP, body.ops-page .badge.st-QUEUED { color: #96690a; background: #fdf3dd; }
body.ops-page .badge.st-PAUSED, body.ops-page .badge.st-RETIRED,
body.ops-page .badge.st-SKIPPED { color: var(--muted); background: var(--surface-2); }
body.ops-page .badge.st-FAILED { color: #b42323; background: #fdeaea; }
body.ops-page .badge.st-DELIVERING { color: #80561c; background: #fdf3dd; }
body.ops-page .qc-pass { color: var(--green); }
body.ops-page .qc-fail { color: var(--accent-2); }
body.ops-page .warn { color: var(--amber); }

/* Pipeline stages are observability tiles rather than dark dashboard KPIs. */
body.ops-page .ops-pipeline-card { margin-top: 0; }
body.ops-page .ops-pipeline-card > .kpis { gap: 9px; }
body.ops-page .kpi {
  color: var(--text); background: var(--bg); border-color: var(--border);
  border-radius: 11px; padding: 13px 12px;
}
body.ops-page .kpi .n,
body.ops-page .kpi .n.qc-pass,
body.ops-page .kpi .n.qc-fail,
body.ops-page .kpi .n.warn { color: var(--text); font-size: 24px; font-weight: 650; }
body.ops-page .kpi .n.qc-pass { color: var(--green); }
body.ops-page .kpi .n.qc-fail { color: var(--accent-2); }
body.ops-page .kpi .n.warn { color: var(--amber); }
body.ops-page .kpi .l { color: var(--muted); font-size: 9.5px; }
.ops-subsection { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.ops-skip-details > summary { list-style: none; cursor: pointer; }
.ops-skip-details > summary::-webkit-details-marker { display: none; }
.ops-skip-details > summary::before { content: '▸'; color: var(--accent-2); font-size: 11px; }
.ops-skip-details[open] > summary::before { content: '▾'; }
body.ops-page .ops-skip-details .ops-skip-count { color: #b42323; background: #fdeaea; }
body.ops-page .ops-skip-details .table-wrap { margin-top: 2px; }
.ops-qc-details > summary { list-style: none; padding-bottom: 0; cursor: pointer; }
.ops-qc-details > summary::-webkit-details-marker { display: none; }
.ops-qc-details > summary::before { content: '▸'; color: var(--muted-2); font-size: 11px; }
.ops-qc-details[open] > summary::before { content: '▾'; }
.ops-qc-details[open] > summary { padding-bottom: 10px; }
.ops-qc-body { padding-left: 18px; }
body.ops-page .render-headline .n,
body.ops-page .render-headline .n.qc-pass,
body.ops-page .render-headline .n.qc-fail { color: var(--text); font-size: 32px; font-weight: 650; }
body.ops-page .render-headline .n.qc-fail { color: var(--accent-2); }
body.ops-page .render-headline .l { color: var(--muted); font-size: 10px; }
body.ops-page .qc-card img, body.ops-page .qc-noimg { border-color: var(--border); }
body.ops-page .qc-card:hover img, body.ops-page .qc-card:hover .qc-noimg { border-color: var(--text); }
body.ops-page .fmt-tag { color: #315f9e; background: #eaf2fd; border-color: #c9dcf6; }

/* Admin tools sit last and visually recede from the daily operating decisions. */
.ops-admin-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.ops-section-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ops-section-head h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 650; }
.ops-section-head > span { margin-left: auto; color: var(--muted-2); font-size: 11px; }
.ops-admin-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 14px; }
body.ops-page .ops-tool-card { margin-bottom: 0; background: var(--surface); }
.ops-user-form { display: grid; grid-template-columns: minmax(180px, 1fr) 120px auto; gap: 8px; margin-bottom: 12px; }
.ops-user-form input, .ops-user-form select { min-width: 0; }
body.ops-page #tiktok-sync-status .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
body.ops-page #tiktok-sync-status .kpi { text-align: left; padding: 11px; }
body.ops-page #tiktok-sync-status .kpi .n { font-size: 12px !important; }
body.ops-page .empty, body.ops-page .loading { color: var(--muted); }
body.ops-page .spinner { border-color: var(--border-2); border-top-color: var(--text); }

@media (max-width: 1080px) {
  .ops-delivery-grid { grid-template-columns: 1fr; }
  .ops-admin-grid { grid-template-columns: 1fr; }
  .ops-action-board { grid-template-columns: 1fr; gap: 18px; }
  .host-message-queue { padding-right: 0; }
  .internal-action-queue {
    padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--border);
  }
}
@media (max-width: 760px) {
  body.ops-page .ops-page-head { align-items: flex-start; flex-direction: column; }
  body.ops-page .ops-range-controls { justify-content: flex-start; }
  body.ops-page .intel-heading, .intel-verdict { align-items: flex-start; flex-direction: column; }
  .intel-verdict span { margin-left: 18px; white-space: normal; }
  body.ops-page .intel-kpis { grid-template-columns: 1fr 1fr; }
  body.ops-page .intel-findings { grid-template-columns: 1fr; }
  .host-message-text, .host-decision { margin-left: 0; }
  .internal-action-row > span { display: none; }
  .intel-rules > summary div { align-items: flex-start; flex-direction: column; gap: 1px; }
  .intel-rules > summary > b { display: none; }
  .intel-mode-ladder { grid-template-columns: 1fr; }
  .intel-mode-ladder > i { text-align: center; transform: rotate(90deg); }
  .intel-rule-triggers { grid-template-columns: 1fr; gap: 9px; }
  .intel-evidence > summary div { align-items: flex-start; flex-direction: column; gap: 1px; }
  .ops-user-form { grid-template-columns: 1fr; }
  body.ops-page .ops-view .panel { padding: 14px; }
}

/* ============================================================
 * Accounts — the same wide Content Press light workspace as Ops.
 * This is presentation only; account data and the hidden Style field remain.
 * ========================================================== */
body.accounts-page {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --border: #e7e7e9;
  --border-2: #d4d4d8;
  --text: #0a0a0a;
  --muted: #71717a;
  --muted-2: #a1a1aa;
  --accent: #0a0a0a;
  --accent-2: #dc2626;
  --green: #168451;
  --amber: #d97706;
  background: var(--bg); color: var(--text);
}
body.accounts-page * { scrollbar-color: #d4d4d8 transparent; }
body.accounts-page *::-webkit-scrollbar-thumb { background: #d4d4d8; }
body.accounts-page *::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

body.accounts-page .header { background: #fafafa; border-bottom-color: var(--border); }
body.accounts-page .logo { color: var(--text); font-weight: 640; }
body.accounts-page .logo-icon {
  background: var(--text); box-shadow: none; border-radius: 7px;
  font-size: 13px; font-weight: 650;
}
body.accounts-page .nav a { color: var(--muted); border-radius: 9px; font-weight: 520; }
body.accounts-page .nav a:hover { color: var(--text); background: var(--surface-2); }
body.accounts-page .nav a.active { color: #fff; background: var(--text); }
body.accounts-page .nav-icon { filter: grayscale(1); opacity: .65; }
body.accounts-page .nav a.active .nav-icon { opacity: 1; }
body.accounts-page .user-email { color: var(--muted); }
body.accounts-page .admin-badge {
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
body.accounts-page .btn-signout { color: var(--text); background: var(--surface-2); border-color: var(--border); }
body.accounts-page .btn-signout:hover { background: var(--border); border-color: var(--border-2); }

body.accounts-page .accounts-view { background: var(--bg); color: var(--text); }
body.accounts-page .accounts-page-head {
  align-items: flex-end; padding-top: 28px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.accounts-title-block { min-width: 260px; }
body.accounts-page .accounts-title-block h2 { font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
body.accounts-page .accounts-title-block > p:last-child { color: var(--muted); font-size: 13px; margin-top: 4px; }

body.accounts-page input,
body.accounts-page select,
body.accounts-page textarea {
  color: var(--text); background: var(--bg); border-color: var(--border);
  color-scheme: light; border-radius: 10px;
}
body.accounts-page input:focus,
body.accounts-page select:focus,
body.accounts-page textarea:focus { border-color: var(--text); }
body.accounts-page .btn {
  color: var(--text); background: var(--surface-2); border-color: var(--border);
  border-radius: 10px; box-shadow: none; font-weight: 550;
}
body.accounts-page .btn:hover { background: var(--border); border-color: var(--border-2); }
body.accounts-page .btn.primary {
  color: #fff; background: var(--text); border-color: var(--text); box-shadow: none;
}
body.accounts-page .btn.primary:hover { background: #27272a; filter: none; }
body.accounts-page .btn.danger { color: #b42323; background: #fef2f2; border-color: #fecaca; }
body.accounts-page .seg { padding: 3px; background: var(--surface-2); border: 0; border-radius: 9px; }
body.accounts-page .seg .btn { color: var(--muted); padding: 5px 11px; background: transparent; border: 0; }
body.accounts-page .seg .btn:hover { color: var(--text); background: rgba(255,255,255,.7); }
body.accounts-page .seg .btn.primary {
  color: var(--text); background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
body.accounts-page .panel {
  color: var(--text); background: var(--surface); border-color: var(--border);
  border-radius: 14px; box-shadow: none;
}
body.accounts-page .panel h3 { color: var(--text); }

body.accounts-page .accounts-view > .table-wrap {
  overflow-x: auto; color: var(--text); background: var(--bg);
  border-color: var(--border); border-radius: 12px;
}
body.accounts-page .accounts-view table { color: var(--text); font-variant-numeric: tabular-nums; }
body.accounts-page .accounts-view thead th {
  color: var(--muted-2); background: var(--surface); border-bottom-color: var(--border);
  padding: 11px 12px; font-size: 9.5px; font-weight: 650; letter-spacing: .07em;
}
body.accounts-page .accounts-view tbody td {
  padding: 11px 12px; border-bottom-color: var(--border); font-size: 12px;
}
body.accounts-page .accounts-view tbody tr:hover { background: var(--surface); }
body.accounts-page .account-lyrics { display: grid; gap: 5px; min-width: 165px; }
body.accounts-page .account-lyrics select { width: 100%; padding: 5px 8px; font-size: 11px; }
body.accounts-page .account-lyrics-color { display: flex; align-items: center; gap: 7px; }
body.accounts-page .account-lyric-swatch {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.25); box-shadow: 0 0 0 1px #fff;
}
body.accounts-page .account-group-row td {
  color: var(--text); background: var(--surface-2);
  border-top-color: var(--bg); border-bottom-color: var(--border);
}
body.accounts-page .account-group-row em { color: var(--muted); }
body.accounts-page tr.retired-row td { opacity: .52; }
body.accounts-page .account-replace-link { color: var(--muted); border-bottom-color: var(--muted-2); }
body.accounts-page .account-replace-link:hover { color: var(--text); border-bottom-color: var(--text); }
body.accounts-page .account-tiktok-btn {
  color: #fff; background: var(--text); border-color: var(--text);
}
body.accounts-page .account-tiktok-btn:hover {
  color: #fff; background: #27272a; border-color: #27272a;
}

body.accounts-page .host-block.open .host-head { border-color: var(--border-2); }
body.accounts-page .host-block.open .host-accounts {
  background: var(--bg); border-color: var(--border-2);
}
body.accounts-page .host-account { border-top-color: var(--border); }
body.accounts-page .pill { color: var(--muted); background: var(--surface-2); border-color: var(--border); }

/* Keep the Ops walkthrough emphatic, but translate it to the monochrome light UI. */
body.accounts-page .account-guide-card {
  background: var(--text); border-color: var(--text); box-shadow: 0 12px 34px rgba(0,0,0,.15);
}
body.accounts-page .account-guide-origin span { color: #d4d4d8; }
body.accounts-page .account-guide-origin strong,
body.accounts-page .account-guide-flow strong { color: #fff; }
body.accounts-page .account-guide-flow small { color: #a1a1aa; }
body.accounts-page .account-guide-flow span { color: #d4d4d8; }
body.accounts-page .account-guide-flow b { color: var(--text); background: #fff; }
body.accounts-page .account-guide-flow > i { color: #fff; }
body.accounts-page .account-guide-buttons .btn { color: var(--text); background: #fff; border-color: #fff; }
body.accounts-page .account-guide-buttons .btn:hover { background: #e7e7e9; }
body.accounts-page .account-guide-row,
body.accounts-page .account-guide-row:hover { background: var(--surface); }
body.accounts-page .accounts-guided .account-guide-row td {
  opacity: 1; border-top-color: var(--text); border-bottom-color: var(--text);
}
body.accounts-page .accounts-guided .account-guide-row td:first-child { border-left-color: var(--text); }
body.accounts-page .accounts-guided .account-guide-row td:last-child { border-right-color: var(--text); }
body.accounts-page .account-guide-target::before { color: var(--text); }
body.accounts-page .account-guide-control {
  border-color: var(--text) !important; animation: accountsGuidePulse 1.5s ease-in-out infinite;
}
@keyframes accountsGuidePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,0,0,.12), 0 0 14px rgba(0,0,0,.1); }
  50% { box-shadow: 0 0 0 5px rgba(0,0,0,.2), 0 0 24px rgba(0,0,0,.18); }
}
@media (prefers-reduced-motion: reduce) {
  body.accounts-page .account-guide-control { animation: none; }
}
@media (max-width: 760px) {
  body.accounts-page .accounts-page-head { align-items: flex-start; flex-direction: column; }
  body.accounts-page .accounts-page-toolbar { justify-content: flex-start; }
  body.accounts-page .panel { padding: 14px; }
}

/* ============================================================
 * Monthly reports — admin review workspace + clean client printout
 * ========================================================== */
body.reports-page {
  --bg: #f4f4f2;
  --surface: #fcfcfc;
  --surface-2: #efefed;
  --border: #e2e2df;
  --border-2: #cfcfcb;
  --text: #0b0b0c;
  --muted: #6e6e6c;
  --muted-2: #a5a5a2;
  --accent: #ff5a1f;
  --accent-2: #dc2626;
  --green: #087443;
  --amber: #b45309;
  background: var(--bg); color: var(--text);
  font-family: 'Inter Tight', system-ui, sans-serif;
}
body.reports-page .header { background: #fcfcfc; border-bottom-color: var(--border); }
body.reports-page .logo { color: var(--text); font-weight: 640; }
body.reports-page .logo-icon {
  background: var(--text); box-shadow: none; border-radius: 7px;
  font-size: 13px; font-weight: 650;
}
body.reports-page .nav a { color: var(--muted); border-radius: 9px; font-weight: 520; }
body.reports-page .nav a:hover { color: var(--text); background: var(--surface-2); }
body.reports-page .nav a.active { color: #fff; background: var(--text); }
body.reports-page .nav-icon { filter: grayscale(1); opacity: .65; }
body.reports-page .user-email { color: var(--muted); }
body.reports-page .admin-badge { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
body.reports-page .btn-signout { color: var(--text); background: var(--surface-2); border-color: var(--border); }
body.reports-page .reports-view { background: var(--bg); color: var(--text); }
body.reports-page .btn {
  color: var(--text); background: var(--surface); border-color: var(--border-2);
  border-radius: 9px; box-shadow: none;
}
body.reports-page .btn:hover { background: var(--surface-2); border-color: #9ca3af; }
body.reports-page .btn.primary { color: #fff; background: var(--text); border-color: var(--text); }
body.reports-page .btn.primary:hover { background: #27272a; filter: none; }
body.reports-page .report-email-button {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
body.reports-page .report-email-button:hover { color: #fff; background: #e94b12; border-color: #e94b12; }

.report-page-head {
  align-items: flex-end; padding-top: 28px; padding-bottom: 22px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.report-title-block { min-width: 280px; }
.report-title-block h2 { font-size: 25px; font-weight: 650; letter-spacing: -.025em; }
.report-title-block > p:last-child { color: var(--muted); font-size: 13px; margin-top: 4px; }
.report-kicker {
  margin: 0 0 5px; color: var(--muted-2); font-size: 10.5px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .09em; text-transform: uppercase;
}
.report-actions { justify-content: flex-end; }

.report-controls.panel {
  display: grid; grid-template-columns: minmax(310px, 1.3fr) minmax(170px, .65fr)
    minmax(190px, .7fr) auto minmax(170px, .65fr);
  align-items: end; gap: 12px; margin: 18px var(--pad-x); padding: 16px;
  border-radius: 12px; box-shadow: none;
}
.report-controls label { color: var(--muted); font-size: 11px; font-weight: 600; }
.report-controls input {
  color: var(--text); background: #fff; border-color: var(--border-2);
  color-scheme: light; border-radius: 8px; font-variant-numeric: tabular-nums;
}
.report-control-period { display: grid; grid-template-columns: auto minmax(170px, 1fr) auto; gap: 7px; align-items: end; }
.report-control-period label { min-width: 0; }
.report-control-period .btn { height: 39px; padding: 8px 12px; }
.report-status {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border);
}
.report-status strong { font-size: 12px; }
.report-status span { color: var(--muted); font-size: 10px; line-height: 1.3; }
.report-status.is-final { color: #087443; background: #ecfdf5; border-color: #a7f3d0; }
.report-status.is-draft { color: #92400e; background: #fffbeb; border-color: #fde68a; }

.report-document {
  margin: 0 var(--pad-x) 48px; padding: 38px 42px 30px;
  color: #0b0b0c; background: #fcfcfc; border: 1px solid rgba(11,11,12,.08);
  border-radius: 16px; box-shadow: 0 12px 36px rgba(11,11,12,.06);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.report-document-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(11,11,12,.1);
}
.report-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.report-brand svg { display: block; width: 31px; height: 31px; }
.report-brand svg rect { fill: #ff5a1f; }
.report-brand svg path {
  fill: none; stroke: #fff; stroke-width: 3.75; stroke-linecap: round; stroke-linejoin: round;
}
.report-brand strong { font-weight: 650; letter-spacing: -.035em; }
.report-document-head p { margin-top: 8px; color: #6e6e6c; font-size: 12px; }
.report-period-block { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.report-period-block span, .report-period-block small {
  color: #a5a5a2; font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: .07em;
}
.report-period-block strong { font-size: 14px; }

.report-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0; }
.report-summary-grid > div { min-width: 0; padding: 17px; background: #f4f4f2; border: 1px solid rgba(11,11,12,.06); border-radius: 11px; }
.report-summary-grid span {
  display: block; color: #6e6e6c; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .055em;
}
.report-summary-grid strong { display: block; margin-top: 7px; font-size: 24px; letter-spacing: -.035em; }
.report-summary-grid small { display: block; margin-top: 4px; color: #a5a5a2; font-size: 10px; }
.report-summary-grid .report-total-card { color: #fff; background: #0b0b0c; border-color: #0b0b0c; }
.report-summary-grid .report-total-card span, .report-summary-grid .report-total-card small { color: #cfcfcb; }

.report-delivery-mix { padding: 18px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 11px; }
.report-mix-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(440px, 1.25fr); gap: 24px; align-items: stretch; }
.report-format-overall { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; padding: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.report-format-donut { width: 124px; height: 124px; padding: 15px; border-radius: 50%; }
.report-format-donut > div { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 50%; }
.report-format-donut strong { font-size: 20px; letter-spacing: -.03em; }
.report-format-donut span { margin-top: 2px; color: #9ca3af; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.report-format-overall ul { display: grid; gap: 8px; min-width: 0; list-style: none; }
.report-format-overall li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 38px; align-items: center; gap: 7px; font-size: 10px; }
.report-format-overall li i { width: 8px; height: 8px; border-radius: 2px; }
.report-format-overall li span { overflow: hidden; color: #4b5563; text-overflow: ellipsis; white-space: nowrap; }
.report-format-overall li strong { font-size: 10px; text-align: right; }
.report-format-overall li small { color: #9ca3af; font-size: 9px; text-align: right; }
.report-campaign-distributions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.report-campaign-distribution { min-width: 0; padding: 13px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.report-campaign-distribution > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 9px; }
.report-campaign-distribution > header span, .report-campaign-distribution > header small { display: block; }
.report-campaign-distribution > header span { color: #111827; font-size: 10px; font-weight: 700; }
.report-campaign-distribution > header small { margin-top: 2px; color: #9ca3af; font-size: 8px; }
.report-campaign-distribution > header > strong { font-size: 13px; letter-spacing: -.02em; }
.report-campaign-distribution-rows { display: grid; }
.report-campaign-distribution-row { display: grid; grid-template-columns: minmax(88px, .8fr) minmax(55px, 1fr) 54px; gap: 7px; align-items: center; min-height: 34px; padding: 5px 0; border-top: 1px solid #eef0f2; }
.report-campaign-distribution-label { display: flex; align-items: center; min-width: 0; gap: 5px; }
.report-campaign-distribution-label > i { flex: none; width: 6px; height: 18px; border-radius: 2px; }
.report-campaign-distribution-label > span { min-width: 0; }
.report-campaign-distribution-label strong, .report-campaign-distribution-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-campaign-distribution-label strong { font-size: 8.5px; }
.report-campaign-distribution-label small { margin-top: 1px; color: #9ca3af; font-size: 7px; }
.report-campaign-distribution-bar { height: 8px; overflow: hidden; background: #eef0f2; border-radius: 3px; }
.report-campaign-distribution-bar i { display: block; height: 100%; min-width: 1px; border-radius: inherit; }
.report-campaign-distribution-value { min-width: 0; text-align: right; }
.report-campaign-distribution-value strong, .report-campaign-distribution-value small { display: block; }
.report-campaign-distribution-value strong { font-size: 9px; }
.report-campaign-distribution-value small { margin-top: 1px; color: #9ca3af; font-size: 7px; }
.report-mix-empty { padding: 22px; color: #9ca3af; background: #fff; border: 1px dashed #d1d5db; border-radius: 9px; font-size: 11px; text-align: center; }

.report-section { margin-top: 26px; }
.report-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.report-section-head span {
  color: #a5a5a2; font-family: 'JetBrains Mono', monospace; font-size: 9px;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.report-section-head h3 { margin: 3px 0 0; color: #111827; font-size: 15px; font-weight: 680; }
.report-section-head > p { max-width: 570px; color: #6b7280; font-size: 10.5px; line-height: 1.45; text-align: right; }
.report-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 10px; }
.report-table { min-width: 940px; color: #111827; }
.report-table thead th {
  padding: 10px 11px; color: #6b7280; background: #f9fafb; border-bottom-color: #e5e7eb;
  font-size: 9px; letter-spacing: .055em; white-space: nowrap;
}
.report-table thead th:nth-child(n+3), .report-table tbody td:nth-child(n+3) { text-align: right; }
.report-table tbody td { padding: 10px 11px; border-bottom-color: #eef0f2; font-size: 11px; }
.report-table tbody tr:hover { background: transparent; }
.report-artist-row { background: #f9fafb; }
.report-artist-row td { border-top: 1px solid #e5e7eb; }
.report-track-row td:first-child { width: 120px; }
.report-track-row td:nth-child(2) { padding-left: 22px; }
.report-campaign-meta { margin-top: 2px; color: #9ca3af; font-size: 9px; }
.report-unattributed-row { color: #92400e; background: #fffbeb; }

.report-two-column { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 18px; }
.report-two-column .report-section { padding: 18px; border: 1px solid #e5e7eb; border-radius: 11px; }
.report-recon-bars { display: grid; gap: 13px; }
.report-recon-bars p { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; color: #6b7280; font-size: 10px; }
.report-recon-bars p strong { color: #111827; }
.report-recon-bars i { display: block; height: 5px; overflow: hidden; background: #e5e7eb; border-radius: 99px; }
.report-recon-bars b { display: block; height: 100%; background: #111827; border-radius: inherit; }
.report-warnings { display: grid; gap: 6px; margin-top: 15px; list-style: none; }
.report-warnings li { display: flex; align-items: flex-start; gap: 8px; color: #92400e; font-size: 10px; line-height: 1.4; }
.report-warnings li > span { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fef3c7; font-size: 9px; font-weight: 750; }
.report-clear { color: #087443; font-size: 11px; }
.report-billing dl { display: grid; gap: 0; }
.report-billing dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid #eef0f2; font-size: 11px; }
.report-billing dt { color: #6b7280; }
.report-billing dd { font-weight: 650; }
.report-billing dl .report-billing-total { margin-top: 3px; padding-top: 12px; border-bottom: 0; font-size: 16px; }
.report-billing-total dt { color: #111827; font-weight: 700; }
.report-billing > p { margin-top: 8px; color: #9ca3af; font-size: 9px; text-align: right; }
.report-document-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 14px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: 9px; }
.report-document-footer { font-family: 'JetBrains Mono', monospace; letter-spacing: .015em; }
.print-only { display: none !important; }
.report-client-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.report-client-table th, .report-client-table td { padding: 10px 9px; border-bottom: 1px solid #e2e2df; }
.report-client-table th {
  color: #6e6e6c; background: #f4f4f2; font-family: 'JetBrains Mono', monospace;
  font-size: 8px; font-weight: 500; letter-spacing: .035em; text-align: right; text-transform: uppercase;
}
.report-client-table th:first-child, .report-client-table td:first-child { width: 30%; text-align: left; }
.report-client-table th:nth-child(2), .report-client-table td:nth-child(2) { width: 16%; }
.report-client-table th:nth-child(3), .report-client-table td:nth-child(3) { width: 20%; }
.report-client-table td { font-size: 10px; text-align: right; }
.report-client-table td strong, .report-client-table td small { display: block; }
.report-client-table td small { margin-top: 2px; color: #a5a5a2; font-size: 8px; font-weight: 400; }
.report-client-table tfoot td { padding-top: 12px; color: #0b0b0c; background: #f4f4f2; border: 0; font-weight: 650; }

@media (max-width: 1100px) {
  .report-controls.panel { grid-template-columns: 1fr 1fr; }
  .report-status { min-height: 54px; }
  .report-summary-grid { grid-template-columns: 1fr 1fr; }
  .report-two-column { grid-template-columns: 1fr; }
  .report-mix-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .report-page-head { align-items: flex-start; flex-direction: column; }
  .report-actions { justify-content: flex-start; }
  .report-controls.panel { grid-template-columns: 1fr; margin-left: 14px; margin-right: 14px; }
  .report-document { margin: 0 14px 30px; padding: 22px 16px; }
  .report-document-head, .report-section-head, .report-document-footer { align-items: flex-start; flex-direction: column; }
  .report-period-block { align-items: flex-start; text-align: left; }
  .report-section-head > p { text-align: left; }
  .report-summary-grid { grid-template-columns: 1fr; }
  .report-format-overall { grid-template-columns: 1fr; justify-items: center; }
  .report-format-overall ul { width: 100%; }
  .report-campaign-distributions { grid-template-columns: 1fr; width: 100%; }
  .report-campaign-distribution-row { grid-template-columns: minmax(105px, .8fr) minmax(80px, 1fr) 55px; }
}

@media print {
  @page { size: A4 portrait; margin: 13mm 13mm 12mm; }
  html, body.reports-page { width: auto; min-width: 0; background: #fcfcfc !important; }
  body.reports-page { color: #0b0b0c !important; font-family: 'Inter Tight', Arial, sans-serif; }
  body.reports-page .header, body.reports-page .no-print, body.reports-page .toasts { display: none !important; }
  body.reports-page .no-client { display: none !important; }
  body.reports-page .app { display: block !important; }
  body.reports-page .view { width: auto; min-height: 0; padding-top: 0; background: #fcfcfc !important; }
  body.reports-page .view > * { padding-right: 0; padding-bottom: 0; padding-left: 0; }
  body.reports-page .print-only { display: block !important; }
  .report-document { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .report-document-head { padding-bottom: 7mm; }
  .report-brand svg { width: 8mm; height: 8mm; }
  .report-brand { gap: 2.5mm; font-size: 16pt; }
  .report-document-head p { margin-top: 2mm; font-size: 8.5pt; }
  .report-period-block strong { font-size: 10pt; }
  .report-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5mm; margin: 7mm 0; }
  .report-summary-grid > div { padding: 4mm 3.5mm; border-radius: 3mm; }
  .report-summary-grid strong { margin-top: 2mm; font-size: 14pt; }
  .report-summary-grid small { font-size: 7pt; }
  .report-section { margin-top: 7mm; }
  .report-section-head { margin-bottom: 3mm; }
  .report-section-head h3 { font-size: 12pt; }
  .report-section-head > p { max-width: 84mm; font-size: 7pt; }
  .report-client-table th, .report-client-table td { padding: 2.5mm 2mm; }
  .report-client-table th { font-size: 6.5pt; }
  .report-client-table td { font-size: 8pt; }
  .report-client-table td small { font-size: 6.5pt; }
  .report-summary-grid, .report-two-column { break-inside: avoid; }
  .report-client-table tr { break-inside: avoid; }
  .report-two-column { display: block; }
  .report-two-column .report-billing {
    width: 86mm; margin: 7mm 0 0 auto; padding: 4mm; border-color: #e2e2df; border-radius: 3mm;
  }
  .report-billing dl > div { padding: 2mm 0; font-size: 8pt; }
  .report-billing dl .report-billing-total { padding-top: 3mm; font-size: 12pt; }
  .report-billing > p { font-size: 6.5pt; }
  .report-document-footer {
    position: fixed; right: 0; bottom: 0; left: 0;
    margin: 0; padding-top: 3mm; font-size: 6.5pt; background: #fcfcfc;
  }
}

.paired-roster { display:grid; gap:16px; margin:16px 0 24px; }
.pair-card > .row { justify-content:space-between; align-items:center; }
.pair-card .table-wrap { margin-top:14px; }
.pair-confirmations { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
#pair-form { display:grid; gap:14px; }
#pair-form label { display:grid; gap:6px; }

.platform-icon { display: inline-flex; flex-shrink: 0; color: var(--muted, #888); vertical-align: middle; }
.platform-icon svg { display: block; }

.cal-info { border:0; padding:0; background:none; position:relative; display:inline-block; color:var(--muted); font-size:13px; font-weight:400; cursor:help; }
.cal-info [role="tooltip"] { display:none; position:absolute; z-index:20; top:100%; left:0; width:240px; padding:12px; border:1px solid var(--border); border-radius:8px; background:#191919; color:#ddd; font-size:12px; line-height:1.5; box-shadow:0 8px 24px #0008; }
.cal-info:hover [role="tooltip"], .cal-info:focus [role="tooltip"], .cal-info:focus-within [role="tooltip"] { display:block; }