/* staff-shell.css — RC pre-production cleanup (Creative Hub / beta portal
   split). The complete design system + component styles for the staff
   portal shell, extracted verbatim from cremedigital-dashboard.html's
   single <style> block so both the production portal and portal_beta.html
   share one source of truth. No class here was Creative-Hub-specific —
   confirmed before extraction (Creative Hub reuses the same generic
   component classes — .fi/.bs/.own-chip/.dt/etc — as every other page in
   the file, no `ch-`-prefixed selectors existed), so this is a safe,
   lossless move with zero behavioral change to either portal. */
:root{
  --bg:#F0F0F0;--bg-s:#E8E8EC;--bg-c:#FFFFFF;--bg-ch:#F7F7F9;--bg-i:#F5F5F7;
  --acc:#6C63FF;--acc-d:rgba(108,99,255,.1);--acc-g:rgba(108,99,255,.28);--acc-dark:#5a52e0;
  --ok:#16A34A;--warn:#D97706;--err:#DC2626;--inf:#0284C7;
  /* Phase 10.7 — faded companions for --ok/--inf, following the exact
     rgba(...,.1) pattern --acc-d already uses. Used to color-code the
     Performance Tracker's Budget (blue) vs Performance (green) column
     groups; --ok-d's value is the same rgba(22,163,74,.1) already
     hardcoded on .own-cm, formalized into a reusable token here. */
  --ok-d:rgba(22,163,74,.1);--inf-d:rgba(2,132,199,.1);
  --t1:#1A1A2E;--t2:#5B5F77;--t3:#9090B0;
  --br:rgba(0,0,0,.09);--br-a:rgba(108,99,255,.35);
  --r:10px;--r-s:6px;--r-l:14px;--sh:0 2px 12px rgba(0,0,0,.07);--sh-lg:0 8px 32px rgba(0,0,0,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Rubik',sans-serif;font-weight:400;background:var(--bg);color:var(--t1);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
select,input,textarea{font-family:inherit}
h1,h2,h3,.tt,.page-title{font-family:'Rubik',sans-serif;font-weight:600}
table{font-family:'Open Sans',sans-serif}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.8);opacity:0}}
.spinner{width:26px;height:26px;border:2.5px solid var(--br);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
.loading-block{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;color:var(--t3);gap:12px}

/* ══ LOGIN ══ */
/* ══ LOGIN ══ */
#ls{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);position:relative;overflow:hidden}
#ls::before{content:'';position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(108,99,255,.10) 0%,transparent 70%);top:-120px;left:-120px}
#ls::after{content:'';position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(108,99,255,.08) 0%,transparent 70%);bottom:-100px;right:-100px}
.lb{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-l);padding:40px;width:100%;max-width:420px;position:relative;z-index:1;box-shadow:var(--sh-lg)}
.ll{display:flex;align-items:center;margin-bottom:28px}
.ll img{height:36px}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);padding:3px;margin-bottom:26px}
.role-btn{border:none;background:transparent;border-radius:calc(var(--r-s) - 1px);padding:9px 12px;font-family:'Rubik',sans-serif;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:7px}
.role-btn svg{flex-shrink:0;opacity:.6;transition:opacity .18s}
.role-btn.active{background:var(--bg-c);color:var(--t1);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.role-btn.active svg{opacity:1}
.role-btn.client-active{color:var(--acc)}
.role-btn.client-active svg{color:var(--acc);opacity:1}
.lctx{display:none}.lctx.show{display:block}
.lh1{font-size:20px;font-weight:600;margin-bottom:5px;letter-spacing:-.3px}
.lh2{color:var(--t2);font-size:13px;margin-bottom:22px;font-weight:300;line-height:1.5}
.fg{margin-bottom:14px}
.fl{display:block;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:6px;letter-spacing:.4px;text-transform:uppercase}
.fi{width:100%;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);padding:10px 13px;color:var(--t1);font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-d)}
.fi::placeholder{color:var(--t3)}
.bp{width:100%;color:#fff;border-radius:var(--r-s);padding:11px;font-size:13.5px;font-weight:600;transition:opacity .15s,transform .1s;margin-top:4px;border:none;cursor:pointer;font-family:'Rubik',sans-serif}
.bp-staff{background:var(--t1)}.bp-staff:hover{opacity:.85}
.bp-client{background:var(--acc)}.bp-client:hover{opacity:.88}
.bp:active{transform:scale(.99)}
.le{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);border-radius:var(--r-s);padding:9px 13px;color:var(--err);font-size:12.5px;margin-bottom:13px;display:none}
.client-info-badge{display:flex;align-items:center;gap:9px;background:var(--acc-d);border:1px solid var(--br-a);border-radius:var(--r-s);padding:10px 13px;margin-bottom:18px;font-size:12px;color:var(--acc)}

/* ══ APP SHELL ══ */
#app{display:none;height:100vh;overflow:hidden}
.al{display:flex;height:100%}
.sb{width:232px;min-width:232px;background:var(--bg-c);border-right:1px solid var(--br);display:flex;flex-direction:column;overflow:hidden;transition:width .18s ease,min-width .18s ease}
.st{padding:18px 14px 14px}
.sbr{display:flex;align-items:center;padding:2px 6px 18px;border-bottom:1px solid var(--br);margin-bottom:14px}
.sbr img{height:24px}
.nsl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:0 10px;margin:14px 0 6px;white-space:nowrap}
.nsl:first-child{margin-top:0}
.ni{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-s);color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;margin-bottom:1px;position:relative}
.ni:hover{background:var(--bg-ch);color:var(--t1);transform:translateX(2px)}
.ni.active{background:var(--acc-d);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc-g)}
.ni.active::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--acc);border-radius:0 3px 3px 0}
.nic{width:16px;height:16px;flex-shrink:0;opacity:.8;transition:opacity .15s ease}
.ni.active .nic{opacity:1}
.nav-badge{margin-left:auto;background:var(--err);color:#fff;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:9px}
.sub-ni{padding:6px 10px 6px 30px;font-size:12px;color:var(--t2)}
.sbo{padding:12px 14px;margin-top:auto;border-top:1px solid var(--br)}
.uc{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r-s);cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
.uc:hover{background:var(--bg-ch);box-shadow:inset 0 0 0 1px var(--br-a)}
.ua{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-dark));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;font-family:'JetBrains Mono',monospace;box-shadow:0 0 0 2px var(--bg-c),0 0 0 3px var(--acc-g)}
.ui{flex:1;min-width:0}
.un{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ur{font-size:10.5px;color:var(--t3)}
.lob{font-size:11px;color:var(--t3);padding:3px;opacity:.6;transition:opacity .2s,color .2s,transform .2s}
.lob:hover{opacity:1;color:var(--err);transform:scale(1.1)}

/* ══ SIDEBAR — collapsible sub-sections (e.g. Preview as client) ══ */
.nsl-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:var(--r-s);transition:color .15s ease}
.nsl-toggle:hover{color:var(--t2)}
.nsl-caret{transition:transform .18s ease;flex-shrink:0}
#nav-preview-section.collapsed .nsl-caret{transform:rotate(-90deg)}
#nav-preview-section.collapsed #nav-client-picker-wrap{display:none}
.cp-filter{padding:6px 9px!important;font-size:11.5px!important;margin:2px 10px 6px;width:calc(100% - 20px)!important}

/* ══ SIDEBAR COLLAPSE ══ */
.sb-toggle{width:24px;height:24px;flex-shrink:0;border-radius:var(--r-s);border:1px solid var(--br);background:var(--bg-c);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;margin-left:auto}
.sb-toggle:hover{background:var(--bg-ch);color:var(--t1)}
.sb-toggle svg{transition:transform .18s ease}
.sb.collapsed{width:64px;min-width:64px}
.sb.collapsed .sbr{justify-content:center;padding-left:0;padding-right:0}
.sb.collapsed .sbr img{display:none}
.sb.collapsed .sbr .sb-toggle{margin-left:0}
.sb.collapsed .sb-toggle svg{transform:rotate(180deg)}
.sb.collapsed .ni-label,.sb.collapsed .nsl,.sb.collapsed .nav-badge,.sb.collapsed .ui,.sb.collapsed .sb-qs-label,.sb.collapsed #nav-preview-section{display:none!important}
.sb.collapsed .ni{justify-content:center;padding-left:0;padding-right:0}
.sb.collapsed .uc{justify-content:center;padding-left:0;padding-right:0}
.sb.collapsed .st{padding-left:8px;padding-right:8px}

.mc{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0}
.tb{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;border-bottom:1px solid var(--br);background:var(--bg-c);position:sticky;top:0;z-index:50}
.tt{font-size:17px;font-weight:600;letter-spacing:-.2px}
.tr{display:flex;align-items:center;gap:10px}
.si{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t2);background:var(--bg-ch);border:1px solid var(--br);border-radius:18px;padding:4px 11px}
.pd{width:6px;height:6px;border-radius:50%;background:var(--ok);position:relative;flex-shrink:0}
.pd::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--ok);opacity:.45;animation:pulse 2s infinite}
.td{font-size:11.5px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.bi{width:32px;height:32px;border-radius:var(--r-s);border:1px solid var(--br);background:var(--bg-c);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all .15s}
.bi:hover{background:var(--bg-ch);color:var(--t1)}
.pb{padding:22px 26px;flex:1}

/* ══ NOTIFICATION DROPDOWN ══ */
.notif-dropdown{position:absolute;top:40px;right:0;width:340px;max-height:420px;overflow-y:auto;background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-s);box-shadow:var(--sh-lg);z-index:200}
.notif-dd-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--br);font-size:12px;font-weight:700}
.notif-dd-markall{font-size:11px;color:var(--acc);cursor:pointer;font-weight:500}
.notif-item{display:flex;gap:9px;padding:10px 12px;border-bottom:1px solid var(--br);cursor:pointer;transition:background .12s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg-ch)}
.notif-item.unread{background:var(--acc-d)}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex-shrink:0;margin-top:5px}
.notif-empty{padding:24px 12px;text-align:center;font-size:12px;color:var(--t3)}

/* ══ CARDS / KPI ══ */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.stl{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.7px}
.sa{font-size:12px;color:var(--acc);cursor:pointer;font-weight:500}
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.kc{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);padding:16px 18px;transition:all .15s;position:relative;overflow:hidden;box-shadow:var(--sh)}
.kc:hover{border-color:rgba(0,0,0,.15)}
.kc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;background:var(--card-accent,var(--acc));opacity:.55}
.kl{font-size:10.5px;color:var(--t2);font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px}
.kv{font-size:23px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:-.8px;margin-bottom:3px;color:var(--t1)}
.kd{font-size:11.5px;font-weight:500}
.kd.up{color:var(--ok)}.kd.dn{color:var(--err)}.kd.nt{color:var(--t3)}

.cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;margin-bottom:22px}
.cc{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cht{font-size:13px;font-weight:600}
.chs{font-size:11px;color:var(--t3);margin-top:2px;font-weight:300}

.tc{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);overflow:hidden;margin-bottom:22px;box-shadow:var(--sh)}
.dt{width:100%;border-collapse:collapse;font-family:'Open Sans',sans-serif}
.dt th{padding:9px 14px;font-size:10.5px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;text-align:left;border-bottom:1px solid var(--br);background:var(--bg-ch);white-space:nowrap}
.dt td{padding:10px 14px;font-size:12.5px;border-bottom:1px solid rgba(0,0,0,.04);font-weight:400}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:rgba(0,0,0,.015)}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t2)}

.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:9px;font-size:10.5px;font-weight:600;white-space:nowrap}
.b-ok{background:rgba(22,163,74,.1);color:#15803D}
.b-warn{background:rgba(217,119,6,.1);color:#B45309}
.b-err{background:rgba(220,38,38,.1);color:#B91C1C}
.b-inf{background:rgba(2,132,199,.1);color:#0369A1}
.b-n{background:rgba(0,0,0,.05);color:var(--t2)}

/* Phase 10.5 — Operations Center homepage. This codebase's first @media
   rule: every other grid here uses auto-fit/minmax, which reflows on its
   own but can't express literal proportional two-up rows (e.g. Needs
   Attention at 7/12 next to Platform Health at 5/12) — a real 12-column
   grid is the only way to match the spec's layout exactly. */
.opsgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:22px;align-items:start}
.ops-span-12{grid-column:span 12}
.ops-span-7{grid-column:span 7}
.ops-span-5{grid-column:span 5}
@media (max-width:900px){
  .opsgrid{grid-template-columns:1fr}
  .ops-span-12,.ops-span-7,.ops-span-5{grid-column:span 1}
}
/* RC-1.3 — Homepage 2x2 operational workspace (My Tasks / Quick Actions /
   Needs Attention / Continue Working), two independent rows of two cards
   each. Within a row, align-items:stretch + a flex-column .ops-widget
   gives its two cards equal height, matching the spec's "equal visual
   weight, consistent height" requirement — EXCEPT Quick Actions (.qa-cell
   below), which deliberately opts out via align-self:start, so it never
   gets stretched taller than its own 4 compact rows need.
   RC-1.6 — grid-auto-rows changed from 1fr to auto. 1fr made BOTH rows the
   same height as each other (whichever row's content was taller), so My
   Tasks (row 1, no align-self override) was inheriting row 2's height
   (Needs Attention/Continue Working, often the longer list) even after
   Quick Actions was made compact — the actual cause of the leftover
   whitespace inside My Tasks, not Quick Actions' own compactness. auto
   sizes each row purely from its own two cards, so row 1's height is now
   max(My Tasks' natural height, Quick Actions' natural height) only: with
   few/no tasks that's Quick Actions' ~compact height, so My Tasks stretches
   up to match it (no whitespace, matches the desired mockup); with many
   tasks My Tasks simply grows to its own natural height instead (never
   fixed/clamped), and Quick Actions stays compact regardless either way
   since align-self:start keeps it opted out of the row's stretch target.
   Row 2 is unaffected — same mutual-stretch behavior as before, just no
   longer coupled to row 1's height. */
.ops-2x2{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:16px;margin-bottom:16px;align-items:stretch}
.ops-2x2 .ops-widget{height:100%;display:flex;flex-direction:column}
.ops-2x2 .qa-cell{align-self:start}
.ops-2x2 .qa-cell .ops-widget{height:auto}
@media (max-width:900px){
  .ops-2x2{grid-template-columns:1fr}
  /* Single column — each card is alone in its own row, so align-items:
     stretch has nothing to stretch it to match; every card (including
     My Tasks and Quick Actions) already sizes to its own content here,
     no override needed. */
}
.ops-widget{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px}
.ops-widget-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:2px}
.ops-widget-sub{font-size:11px;color:var(--t3);margin-bottom:12px}
/* Quick Actions — compact single-column list (RC-1.5), replacing the old
   2-column button grid. A lighter, utility-widget treatment (no filled
   background at rest, unlike .ops-attn-item) since Quick Actions is
   explicitly meant to feel like a nav/utility card, not a primary
   information card — see the Home page visual-hierarchy note above
   renderOpsGridHtml(). */
.qa-list{display:flex;flex-direction:column;gap:1px}
.qa-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-s);background:none;border:none;width:100%;text-align:left;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.qa-row:hover{background:var(--bg-ch);color:var(--t1);transform:translateX(2px)}
.qa-row:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.qa-icon{font-size:14px;flex-shrink:0;width:18px;text-align:center}
.qa-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-chev{font-size:12px;color:var(--t3);flex-shrink:0;transition:transform .15s ease,color .15s ease}
.qa-row:hover .qa-chev{transform:translateX(2px);color:var(--t2)}
.ops-health-pill{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r-s);background:var(--bg-ch);margin-bottom:6px;cursor:pointer;border:none;width:100%;text-align:left;font-family:inherit}
.ops-health-pill:last-child{margin-bottom:0}
.ops-health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ops-health-dot.healthy{background:var(--ok)}
.ops-health-dot.delayed{background:var(--warn)}
.ops-health-dot.stale{background:var(--err)}
.ops-health-dot.offline{background:var(--err)}
.ops-health-dot.unknown{background:var(--t3)}
.ops-attn-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);background:var(--bg-ch);margin-bottom:6px;cursor:pointer;border:none;width:100%;text-align:left;font-family:inherit}
.ops-attn-item:last-child{margin-bottom:0}
.ops-empty{font-size:11.5px;color:var(--t3);font-style:italic;padding:8px 2px}

/* Phase 4A — Needs Attention: header severity summary + primary/supporting
   typographic hierarchy. Presentation only — the underlying items array
   (severity/icon/label/parts) is unchanged, this just styles it. */
.pt-na-summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:3px}
.pt-na-sev-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap}
.pt-na-item-primary{display:block;font-size:9.5px;font-weight:600;color:var(--t1);line-height:1.45}
.pt-na-item-supporting{display:block;font-size:9.5px;font-weight:400;color:var(--t2);line-height:1.5;margin-top:1px}
/* Mirrors .qa-chev's exact hover treatment (translateX + color shift) — the
   existing Quick Actions "view more" affordance on this same Homepage —
   reused here rather than inventing a new interaction pattern. */
.pt-na-view{font-size:11px;color:var(--t3);flex-shrink:0;white-space:nowrap;align-self:center;transition:transform .15s ease,color .15s ease}
.ops-attn-item:hover .pt-na-view,.ops-attn-item:focus-visible .pt-na-view{transform:translateX(2px);color:var(--acc)}
/* Internal scroll safety net — 5 items already fit within this height today
   (.slice(0,5) in _ptBuildNeedsAttention is unchanged), so this never
   actually scrolls under current behavior; it exists so the panel can never
   grow the page instead of scrolling internally if that cap is ever
   revisited. */
#pt-na-body.pt-na-body-scroll{max-height:360px;overflow-y:auto}
/* Brand/Client grouping — presentation only (see _ptRenderNeedsAttentionHtml).
   Heading stays small/muted so it reads as a label, not another item; items
   inside a group get slightly tighter padding/margin than the ungrouped
   default (.ops-attn-item) so grouping actually saves vertical space instead
   of just relabeling the same tall rows. */
.pt-na-brand-group{margin-bottom:8px}
.pt-na-brand-group:last-child{margin-bottom:0}
.pt-na-brand-name{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;padding:2px 2px 4px}
.pt-na-brand-group .ops-attn-item{padding:6px 8px;margin-bottom:3px}
.pt-na-brand-group .ops-attn-item:last-child{margin-bottom:0}

/* Phase 4B — Campaign Period cell: read-first two-line display (date range,
   then daysInfo label) plus a one-click pencil toggle that reveals the raw
   date <input>s, which stay hidden by default so they don't visually
   dominate the compact table row. formatCampaignPeriod()/_ptDaysRemainingInfo()
   values only — no new date logic. */
.pt-period-row{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.pt-period-text{min-width:0}
.pt-period-range{font-size:10.5px;font-weight:600;color:var(--t1);white-space:nowrap}
.pt-period-days{margin-top:3px;font-size:9px;padding:1px 6px}
.pt-period-edit-btn{flex-shrink:0;background:none;border:none;padding:2px 4px;font-size:11px;line-height:1;color:var(--t3);cursor:pointer;border-radius:4px;transition:color .15s ease,background .15s ease}
.pt-period-edit-btn:hover{color:var(--acc);background:var(--bg-ch)}
.pt-period-edit-btn:focus-visible{outline:2px solid var(--acc);outline-offset:1px;color:var(--acc)}
.pt-period-edit{display:none;gap:4px;margin-top:5px}
.pt-period-edit.pt-period-edit-open{display:flex}
button.kc{cursor:pointer;text-align:left;font-family:inherit;width:100%}
button.kc:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);border-color:var(--br-a)}

/* Phase 10.6 — Performance Tracker enhancement */
.pt-chip{font-size:11.5px;padding:5px 12px}
.pt-chip.active{background:var(--acc);color:#fff;border-color:var(--acc)}
.pt-bar-ideal-marker{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--t1);opacity:.55}
.pt-row-highlight{animation:pt-row-flash 2s ease-out}
@keyframes pt-row-flash{0%{background:var(--acc-d)}100%{background:transparent}}
/* Phase 4C — _ptJumpToCampaign()'s flash relies on the <tr>'s background
   showing through its (normally transparent) <td>s. The frozen cells now
   force an opaque background (see .pt-freeze) so they'd otherwise mask the
   flash; running the same keyframes directly on them keeps the highlight
   visible there too, and reverts to .pt-freeze's normal background when the
   animation ends, same as everywhere else in the row. */
tr.pt-row-highlight td.pt-freeze{animation:pt-row-flash 2s ease-out}

/* Phase 10.7 — Performance Tracker. Ownership hidden per stakeholder
   feedback; data/markup untouched (resolveOwnership() still runs, the <td>
   still renders) — delete this one rule to restore the column. */
.pt-col-ownership{display:none}
/* Budget (blue) vs Performance (green) vs Efficiency (purple) column-group
   accent dividers — categorical identity colors, independent of the
   semantic health colors (--ok/--warn/--err) that still apply within each
   group for its own state. */
.pt-col-budget-start{border-left:2px solid var(--inf)}
.pt-col-kpi-start{border-left:2px solid var(--ok)}
.pt-col-eff-start{border-left:2px solid var(--acc)}
/* Phase 4D — same three accents, now washed as a light background (the
   exact var(--inf-d)/var(--ok-d)/var(--acc-d) tokens the Phase 10.7
   grouped-header banner above already uses for these same three groups)
   across every column in the group, not just its "-start" divider column,
   so the header's color-coding carries all the way down. Forecast is
   deliberately left untinted — its own cell already color-codes its 3
   sub-blocks with these same accents, and a 4th flat tint behind that would
   compete with its existing internal coding rather than reinforce it. Row
   hover's rgba(0,0,0,.015) still paints over this on hover (same as any
   other td) — a barely-visible, purely cosmetic loss of the tint for that
   instant, not a legibility issue. */
.pt-col-budget{background:var(--inf-d)}
.pt-col-kpi{background:var(--ok-d)}
.pt-col-eff{background:var(--acc-d)}

/* Phase 4E — Health cell primary-issue subtext: one line below the badge,
   deliberately subordinate to it (smaller, --t2 vs the badge's own bold
   colored text) so the health STATE stays the visually dominant read and
   the reason is secondary, per spec. Single line + ellipsis (title carries
   the full text) rather than wrapping, so a long reason can't grow row
   height — compact density's existing `.dt td>div{margin-top:1px!important}`
   rule already compresses this div's spacing along with every other
   stacked cell block, no separate compact rule needed. max-width keeps it
   inside the frozen column's own min-width (120px) rather than forcing the
   column wider. */
.pt-health-issue{margin-top:3px;font-size:10px;color:var(--t2);line-height:1.3;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bs{padding:7px 14px;border-radius:var(--r-s);font-size:12px;font-weight:600;transition:all .15s;cursor:pointer}
.bs:active{transform:scale(.97)}
.bs:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ba{background:var(--acc);color:#fff;border:none;box-shadow:0 1px 2px var(--acc-g)}
.ba:hover{opacity:.92;box-shadow:0 2px 8px var(--acc-g)}
.bo{background:transparent;color:var(--t2);border:1px solid var(--br)}
.bo:hover{background:var(--bg-ch);color:var(--t1);border-color:rgba(0,0,0,.2)}
.bde{background:transparent;color:var(--err);border:1px solid rgba(220,38,38,.25)}
.bde:hover{background:rgba(220,38,38,.06)}

/* Compact icon-only row actions (e.g. Users & Access) — same interaction
   language as .bs, sized for a dense table row instead of a toolbar. */
.iab{width:26px;height:26px;flex-shrink:0;border-radius:var(--r-s);border:1px solid var(--br);background:transparent;color:var(--t2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.iab:hover{background:var(--bg-ch);color:var(--t1);border-color:rgba(0,0,0,.2);transform:translateY(-1px)}
.iab:active{transform:translateY(0) scale(.95)}
.iab-danger:hover{background:rgba(220,38,38,.08);color:var(--err);border-color:rgba(220,38,38,.3)}

/* ══ SETTINGS ══ */
.sl{display:grid;grid-template-columns:200px 1fr;gap:18px}
.snav{display:flex;flex-direction:column;gap:2px}
.sni{padding:8px 11px;border-radius:var(--r-s);font-size:12.5px;color:var(--t2);cursor:pointer;transition:all .15s}
.sni:hover{background:var(--bg-ch);color:var(--t1)}
.sni.active{background:var(--acc-d);color:var(--acc);font-weight:500}
.ss{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);padding:22px;margin-bottom:14px;box-shadow:var(--sh)}
.sst{font-size:13.5px;font-weight:600;margin-bottom:4px}
.ssd{font-size:11.5px;color:var(--t3);margin-bottom:18px;font-weight:300}
.sr{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--br);gap:18px}
.sr:last-child{border:none;padding-bottom:0}
.srl{font-size:12.5px;font-weight:500}.srd{font-size:11px;color:var(--t3);margin-top:2px;font-weight:300}
.is{background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);padding:6px 9px;color:var(--t1);font-size:12px;outline:none;width:100%;transition:border-color .15s}
.is:focus{border-color:var(--acc)}

/* ══ MODAL ══ */
.mo{position:fixed;inset:0;background:rgba(20,20,30,.45);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.mo.show{display:flex}
.mb{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-l);padding:26px;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;box-shadow:var(--sh-lg)}
.mt2{font-size:15.5px;font-weight:600;margin-bottom:4px}
.ms2{font-size:12px;color:var(--t2);margin-bottom:18px;font-weight:300}
.ma{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}

/* ══ TASK DETAIL DRAWER (Phase 8.6) — wider than .mb allows, so a
   dedicated right-side drawer instead of the centered-modal system ══ */
.task-drawer-backdrop{position:fixed;inset:0;background:rgba(20,20,30,.45);z-index:899;backdrop-filter:blur(2px)}
.task-drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:var(--bg-c);box-shadow:var(--sh-lg);z-index:900;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease-out}
.task-drawer.open{transform:translateX(0)}
.task-card.dragging{opacity:.4}
.task-col{background:transparent}
/* RC-1 Task page Phase 1 — Kanban as the main workspace. 5 equal columns
   (To Do/In Progress/Pending/Done/On Hold, on_hold now a real column
   instead of a separate collapsible tray). align-items:start is the fix
   for the old "huge blank region" complaint — CSS Grid's default stretch
   was forcing every column to match the tallest one even when it only had
   1-2 cards; start lets each column size to its own content instead (same
   root cause/fix as the Home page's My Tasks/Quick Actions row). */
.task-board-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
.task-col-empty{font-size:11px;color:var(--t3);font-style:italic;padding:10px 6px;text-align:center;background:var(--bg-ch);border-radius:var(--r-s)}
@media (max-width:900px){
  /* Narrow viewports: 5 equal-width columns become unreadably thin rather
     than reflowing — horizontal scroll with a sane per-column min-width
     keeps every column usable instead of squishing text, matching the
     Kanban-board convention most task tools already use at this width. */
  .task-board-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;padding-bottom:6px}
}

/* RC-1.3 — Current Work / Task History adjustable split (see
   applyTaskSplitLayout() in index.html). Both panes are independently
   scrollable so "vertical scrolling remains acceptable when task volume
   requires it" applies per-pane, not to the whole page — dragging the
   handle only reallocates height between two already-bounded regions, it
   never grows the page itself. Heights are set inline via JS (computed
   from the persisted ratio); this stylesheet only supplies the chrome,
   min-heights as a CSS-level backstop, and the narrow/stacked fallback. */
.task-page-split{display:flex;flex-direction:column}
.task-current-work-pane{overflow-y:auto;min-height:320px;padding-right:2px}
.task-history-pane{overflow-y:auto;min-height:160px;padding-top:12px;border-top:1px solid var(--br);margin-top:4px}
/* A full-width line through the handle (not just a floating grip) so the
   boundary between Current Work and Task History reads as an intentional
   transition, not an accidental gap — the grip sits on top of it as the
   actual drag affordance. */
.task-split-handle{flex:none;height:16px;margin:4px 0;position:relative;display:flex;align-items:center;justify-content:center;cursor:row-resize;border-radius:var(--r-s)}
.task-split-handle::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--br)}
.task-split-handle:hover,.task-split-handle:focus-visible{background:var(--bg-ch)}
.task-split-handle:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.task-split-handle-grip{position:relative;width:48px;height:4px;border-radius:2px;background:var(--br);z-index:1}
.task-split-handle:hover .task-split-handle-grip,.task-split-handle:focus-visible .task-split-handle-grip{background:var(--acc)}
/* Stacked fallback (narrow viewports, see TASK_SPLIT_NARROW_BREAKPOINT) —
   JS clears the inline heights and hides the handle; this just gives both
   panes sane auto-height, non-scrolling-container behavior instead. */
.task-page-split.task-split-stacked .task-current-work-pane,
.task-page-split.task-split-stacked .task-history-pane{overflow:visible;height:auto!important}
.task-page-split.task-split-stacked .task-split-handle{display:none}

/* Compact folder/drawer-style task row — current-month Done column +
   Task History (see renderCompactTaskRowHtml). Collapsed by default: one
   line, title + chevron. Deliberately not reusing .task-card — this is a
   list row, not a draggable Kanban card. */
.task-row-compact{background:var(--bg-ch);border-radius:var(--r-s);overflow:hidden}
.task-row-compact-head{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px}
.task-row-check{color:var(--ok);font-weight:700;font-size:11px}
.task-row-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row-chevron{color:var(--t3);font-size:12px;flex:none}
.task-row-compact-body{padding:0 10px 10px 30px}
.task-row-meta{font-size:11px;margin-bottom:4px}
.task-history-list{display:flex;flex-direction:column;gap:4px}
/* Collaborators/Assigned-To mutual exclusion (People picker, New Task form
   and task detail drawer) — a checkbox disabled because its user is
   already checked in the other list, so the constraint is visible before
   save, not just silently enforced server-side after. */
.task-people-check-row.excluded{opacity:.4}
.task-people-check-row.excluded input{cursor:not-allowed}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:22px;right:22px;background:var(--t1);color:#fff;border-radius:var(--r-s);padding:11px 16px;font-size:12.5px;z-index:9999;display:none;align-items:center;gap:9px;box-shadow:var(--sh-lg);max-width:320px}
.toast.show{display:flex}
.td2{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ══ PLATFORM COLORS ══ */
.google-dot{background:#4285F4}.meta-dot{background:#0082FB}.tiktok-dot{background:#FF0050}

/* ══ COMMAND PALETTE ══ */
#cmdk-overlay{position:fixed;inset:0;background:rgba(20,20,30,.5);z-index:950;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;backdrop-filter:blur(3px)}
#cmdk-overlay.show{display:flex}
.cmdk-box{background:var(--bg-c);border-radius:var(--r-l);width:560px;max-width:92vw;box-shadow:var(--sh-lg);overflow:hidden}
.cmdk-input{width:100%;padding:16px 20px;font-size:15px;border:none;outline:none;font-family:'Rubik',sans-serif;border-bottom:1px solid var(--br)}
.cmdk-results{max-height:360px;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--r-s);cursor:pointer;font-size:13px}
.cmdk-item:hover,.cmdk-item.sel{background:var(--acc-d);color:var(--acc)}
.cmdk-item-sub{font-size:11px;color:var(--t3);margin-left:auto}

/* ══ Performance Tracker onboarding tour ══ */
/* Lightweight, optional coachmark-style tour — no backdrop element at all:
   .pt-tour-highlight's own giant box-shadow (spread 9999px) both dims the
   page AND cuts a "spotlight" around the target in one element, and it has
   pointer-events:none so the highlighted control (and everything else)
   stays fully clickable/usable while the tour is open — this is
   deliberately non-modal, per spec ("must not interfere with normal
   usage", "highlighted elements should remain usable"). z-index 960 sits
   above .mo/#cmdk-overlay (900/950) so the tour can run over a modal-free
   page, below .toast (9999) so a save confirmation during the tour is
   never hidden. */
.pt-tour-highlight{position:fixed;border:2px solid var(--acc);border-radius:var(--r-s);box-shadow:0 0 0 9999px rgba(20,20,30,.45);pointer-events:none;z-index:960;transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease;display:none}
.pt-tour-popover{position:fixed;z-index:961;background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-l);box-shadow:var(--sh-lg);padding:16px 18px;width:300px;max-width:calc(100vw - 24px)}
.pt-tour-popover.pt-tour-centered{top:50%!important;left:50%!important;transform:translate(-50%,-50%)}
.pt-tour-step-indicator{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.pt-tour-title{font-size:14.5px;font-weight:700;color:var(--t1);margin-bottom:6px}
.pt-tour-body{font-size:12.5px;color:var(--t2);line-height:1.55}
.pt-tour-body p{margin-bottom:6px}
.pt-tour-body p:last-child{margin-bottom:0}
.pt-tour-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.pt-tour-skip{font-size:11.5px;color:var(--t3);background:none;border:none;cursor:pointer;padding:4px 2px}
.pt-tour-skip:hover{color:var(--t1)}
.pt-tour-close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:3px;line-height:1;border-radius:4px}
.pt-tour-close:hover{color:var(--t1);background:var(--bg-ch)}
.pt-tour-help-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--br);background:transparent;color:var(--t2);font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.pt-tour-help-btn:hover{background:var(--bg-ch);color:var(--acc);border-color:var(--acc)}
.pt-tour-highlight,.pt-tour-popover,.pt-tour-help-btn,.pt-tour-close,.pt-tour-skip{outline-offset:2px}
.pt-tour-popover *:focus-visible,.pt-tour-help-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ══ Social Calendar (Phase 1 Content Management roadmap) ══
   Reuses .task-drawer/.task-drawer-backdrop verbatim for the Content
   Detail drawer (nothing in those two classes is Task-specific) — only
   new layout here is the By Status board (6 columns, not 5) and the
   Calendar month grid, neither of which has an existing analogue. */
.sc-board-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:start}
@media (max-width:900px){
  .sc-board-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto;padding-bottom:6px}
}
.sc-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--br);border:1px solid var(--br);border-radius:var(--r);overflow:hidden}
.sc-weekday-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;margin-bottom:1px}
.sc-weekday-hd{background:var(--bg-ch);padding:6px 8px;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;text-align:center}
.sc-day-cell{background:var(--bg-c);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:4px;transition:background .12s}
.sc-day-cell.other-month{background:var(--bg-ch)}
.sc-day-cell.other-month .sc-day-num{color:var(--t3)}
.sc-day-cell.is-today .sc-day-num{background:var(--acc);color:#fff;border-radius:50%}
.sc-day-cell.drop-hover{background:var(--acc-d)}
.sc-day-num{font-size:11px;font-weight:600;width:19px;height:19px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-post-card{background:var(--bg-ch);border:1px solid var(--br);border-radius:6px;padding:4px 6px;font-size:10.5px;cursor:pointer;line-height:1.3}
.sc-post-card:hover{border-color:var(--br-a)}
.sc-post-card.dragging{opacity:.4}
@media (max-width:900px){
  .sc-month-grid,.sc-weekday-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);overflow-x:auto}
}
.sc-platform-badge{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:20px;background:var(--bg-ch);color:var(--t2);white-space:nowrap}
.sc-status-badge{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.sc-attn-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
@media (max-width:900px){.sc-attn-bar{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.sc-attn-bar{grid-template-columns:repeat(2,1fr)}}
.sc-view-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.sc-platform-group{margin-bottom:22px}
.sc-platform-group-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:700}
.sc-platform-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}

/* ══ Creative Hub (Phase 2 Content Management roadmap) ══
   Reuses .sc-platform-badge/.sc-status-badge/.sc-view-tabs/.sc-attn-bar/
   .task-drawer verbatim (all generic already, not truly Social-Calendar-
   specific) — only new rules here are the thumbnail grid/card and upload
   dropzone, which have no existing analogue anywhere in the portal. */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.ch-card{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ch-card:hover{border-color:var(--br-a);box-shadow:var(--sh)}
.ch-thumb{width:100%;aspect-ratio:4/3;background:var(--bg-ch);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ch-thumb img,.ch-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.ch-thumb-icon{font-size:30px;opacity:.5}
/* Compact List-view thumbnail — same fallback-icon/image-swap behavior as
   .ch-thumb, just fixed-size instead of a full card-width aspect-ratio box,
   so a row using it doesn't grow substantially taller. */
.ch-thumb-sm{width:32px;height:32px;border-radius:6px;background:var(--bg-ch);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.ch-thumb-sm img{width:100%;height:100%;object-fit:cover;display:block}
.ch-thumb-sm .ch-thumb-icon{font-size:15px;opacity:.5}
.ch-card-body{padding:9px 10px}
.ch-card-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}
.ch-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ch-dropzone{border:2px dashed var(--br);border-radius:var(--r);padding:26px 16px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
.ch-dropzone:hover,.ch-dropzone.drag-over{border-color:var(--acc);background:var(--acc-d)}
.ch-version-row{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--bg-ch);border-radius:6px;font-size:11.5px}
.ch-version-row.current{border:1px solid var(--br-a)}
.ch-used-in-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;background:var(--bg-ch);border-radius:6px;font-size:11.5px;cursor:pointer}
.ch-used-in-row:hover{background:var(--acc-d)}
@media (max-width:900px){
  .ch-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (max-width:600px){
  .pt-tour-popover{width:calc(100vw - 24px);left:12px!important;right:12px}
}

/* Decision Log & Notes — clickable row title (Decision text / Note text)
   that opens a read-only detail/peek modal instead of jumping straight
   into Edit. A text-button reset (no chrome) so it reads as the same
   content that used to be a plain <div>, just interactive now. */
.kb-title-btn{display:block;width:100%;text-align:left;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.kb-title-btn:hover div:first-child{text-decoration:underline}
.kb-title-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
/* Decision modal's Market/Status/Optimization/Effective Date/End Date row
   (.kb-decision-grid) is 3 columns inside a modal capped at max-width:460px
   (.mb) — already tight at that width, tighter still on a narrow viewport
   where .mb's own width:100% shrinks further. Reflow to 1 column below
   480px rather than leave 3 cramped ~100px columns; !important beats the
   inline grid-template-columns this same element also carries. */
@media (max-width:480px){
  .kb-decision-grid{grid-template-columns:1fr!important}
}

/* ══ EDITABLE CELLS (Performance Tracker) ══ */
.ed-input{background:var(--bg-i);border:1px solid var(--br);border-radius:4px;padding:4px 7px;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--t1);outline:none;width:100%;transition:border-color .15s}
.ed-input:focus{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-d)}
.ed-select{background:var(--bg-i);border:1px solid var(--br);border-radius:4px;padding:4px 6px;font-size:11px;font-family:'Rubik',sans-serif;color:var(--t1);outline:none;width:100%;cursor:pointer}

/* ══ Pacing table specifics ══ */
.pt-acc-header{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r) var(--r) 0 0;border-bottom:none;cursor:pointer;flex-wrap:wrap}
.pt-table-wrap{overflow-x:auto;border:1px solid var(--br);border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh)}
/* Phase 4G — responsive audit found two of the filter-area rows missing the
   flex-wrap:wrap every sibling row already has (.pt-viewing-bar,
   .pt-chips-row, .pt-filter-groups-row, .pt-filter-group-controls all
   already wrap) — .pt-search-bar and #pt-bulk-bar were the two gaps that
   could force page-level horizontal overflow at a narrow width instead of
   reflowing onto a second line, same as everything around them already
   does. No breakpoint needed — flex-wrap only engages when content
   actually doesn't fit, at any width. */
.pt-search-bar{flex-wrap:wrap}
#pt-bulk-bar{flex-wrap:wrap}
/* RC-1.3 — sticky table header + sticky client-group headers. Both offsets
   are measured at render time (--pt-thead-h / --pt-group-header-h, set by
   _ptUpdateStickyOffsets) rather than guessed, since row height depends on
   font metrics; the fallback px values only apply before the first measure. */
#pt-table thead tr.pt-group-header th{position:sticky;top:0;z-index:7}
#pt-table thead tr.pt-col-header-row th{position:sticky;top:var(--pt-group-header-h,24px);z-index:6}
.pt-section-row td{position:sticky;top:var(--pt-thead-h,55px);z-index:5}

/* Phase 4C — frozen columns (Status/Campaign/Health), a second sticky axis
   (left) layered on top of the existing top-sticky header. left offsets
   are per-column widths measured at render time by _ptUpdateStickyOffsets()
   (--pt-freeze-w1/w2; table uses auto layout, so widths are content-driven,
   not fixed px) — 0/8px fallbacks only apply before the first measure.
   Only these 3 columns freeze: they clump together using only each other's
   widths, so checkbox/Platform/Market/Currency (which come before Status in
   the column order and are NOT frozen) simply scroll away first, then
   Status/Campaign/Health catch and hold — no reordering needed for this to
   work. z-index stacking: body frozen cells (2) sit below the sticky
   section-header row (5) and both sticky thead rows (6/7), so the header
   always wins at the corner where a frozen column meets a stuck header;
   thead's own frozen cells (8) are bumped above their row's baseline (6) so
   a later, non-frozen header cell scrolling underneath (larger DOM index,
   would otherwise win the row's equal z-index by paint order) never covers
   them. Backgrounds are forced opaque (var(--bg-c) body / var(--bg-ch)
   header, both existing tokens, no new colors) so scrolled-under content
   never bleeds through, including on row hover (.dt tr:hover td would
   otherwise paint a semi-transparent tint over them). */
.pt-freeze{position:sticky;z-index:2;background:var(--bg-c)}
.pt-freeze-l0{left:0}
.pt-freeze-l1{left:var(--pt-freeze-w1,88px)}
.pt-freeze-l2{left:var(--pt-freeze-w2,278px);border-right:1px solid var(--br)}
#pt-table thead .pt-freeze{z-index:8;background:var(--bg-ch)}
.dt tr:hover td.pt-freeze{background:var(--bg-c)}
/* RC-1.3 — grouped filter bar (Scope / Campaign / Performance). Each group
   is a labeled cluster instead of one long unlabeled row of selects, so the
   filter bar reads as "categories of controls" rather than a flat list. */
.pt-filter-group{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-s);padding:8px 12px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px}
.pt-filter-group-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.pt-filter-group-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pt-filter-group-controls select{font-size:12px;padding:4px 9px;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);color:var(--t1);outline:none;flex:1;min-width:100px}
/* RC-1.3 / RC-1.3.1 — Comfortable/Compact density toggle. Comfortable is
   left completely untouched (every rule below is scoped under
   #pacing-content.pt-compact, so it only ever adds to Compact, never
   changes Comfortable's current spacing/padding/sizes). Compact targets
   ~25-35% more visible rows by cutting vertical padding hardest (the
   biggest lever on row height) while keeping font sizes legible and
   leaving campaign-name wrapping untouched. !important is used deliberately
   here, and only here: most of the spacing it overrides is inline style on
   generic wrapper divs (no class to out-specificity inline style otherwise)
   — a narrowly-scoped, single-purpose exception for a density toggle. */
.pt-density-btn{font-size:11px;padding:5px 11px;background:var(--bg-c);border:none;cursor:pointer;color:var(--t2);font-family:inherit}
.pt-density-btn+.pt-density-btn{border-left:1px solid var(--br)}
.pt-density-btn.active{background:var(--acc);color:#fff;font-weight:600}

/* Section spacing between viewing bar / Needs Attention / chips / filters */
#pacing-content.pt-compact .pt-viewing-bar{margin-bottom:8px!important}
#pacing-content.pt-compact .pt-na-panel{padding:7px 10px!important;margin-bottom:8px!important}
#pacing-content.pt-compact .pt-chips-row{margin-bottom:6px!important;gap:4px!important}
#pacing-content.pt-compact .pt-search-bar{margin-bottom:6px!important}
#pacing-content.pt-compact .pt-filter-groups-row{margin-bottom:8px!important;gap:6px!important}

/* Needs Attention items */
#pacing-content.pt-compact .ops-attn-item{padding:5px 8px!important;margin-bottom:3px!important}
#pacing-content.pt-compact .ops-widget-title{font-size:12px}

/* Filter controls: height + spacing */
#pacing-content.pt-compact .pt-filter-group{padding:5px 9px!important;gap:3px!important}
#pacing-content.pt-compact .pt-filter-group-controls{gap:4px!important}
#pacing-content.pt-compact .pt-filter-group-controls select{padding:2px 7px!important;font-size:11px}
#pacing-content.pt-compact #ptf-search{padding:3px 7px!important;font-size:11px}
#pacing-content.pt-compact .pt-chip{padding:3px 9px!important;font-size:11px}

/* Table: row height is the main density lever — cell vertical padding cut
   roughly in half vs. Comfortable, with a matching font-size step-down. */
#pacing-content.pt-compact #pt-table-wrap .dt td{padding:2px 8px;font-size:10.5px}
#pacing-content.pt-compact #pt-table-wrap .dt th{padding:3px 8px}
#pacing-content.pt-compact #pt-table-wrap tr.pt-group-header th{padding:2px!important}
#pacing-content.pt-compact #pt-table-wrap .pt-section-row td{padding:3px 10px!important}
#pacing-content.pt-compact #pt-table-wrap .badge{padding:1px 6px;font-size:9.5px}
#pacing-content.pt-compact #pt-table-wrap .own-chip{padding:1px 5px}
#pacing-content.pt-compact #pt-table-wrap .ed-input,
#pacing-content.pt-compact #pt-table-wrap .ed-select{padding:2px 5px;font-size:10px}
#pacing-content.pt-compact #pt-table-wrap .bs{padding:3px 8px;font-size:10.5px}
/* Row height in practice is driven far more by each cell's stacked
   label/value/variance lines (Forecast's 3 blocks, Achieved KPI's
   progress+status lines, etc.) than by the cell's own padding — cutting
   only td padding got barely 10% more rows in testing. These target the
   actual per-line spacing (mostly inline margin-top on direct <td>
   children) that the wider content stacks use. */
#pacing-content.pt-compact #pt-table-wrap .dt td{line-height:1.2}
#pacing-content.pt-compact #pt-table-wrap .dt td>div{margin-top:1px!important;margin-bottom:1px!important}
#pacing-content.pt-compact #pt-table-wrap .dt td>select{margin-top:1px!important}
#pacing-content.pt-compact #pt-table-wrap .pt-forecast-block{padding-bottom:1px!important;margin-bottom:1px!important;border-bottom-color:transparent!important}
.pt-group-toggle{background:none;border:none;cursor:pointer;padding:0 2px;font-size:10px;color:var(--t3);display:inline-flex;align-items:center;transition:transform .15s}
.pt-group-toggle:hover{color:var(--t1)}
/* RC-1.3.1 — one Client Profile header's operational summary (count/spend/
   platforms), always visible (not just while collapsed) so it gives context
   before expansion, per spec. */
.pt-group-summary{font-size:10.5px;color:var(--t3);font-weight:400}
#pt-tbody tr.pt-group-row{transition:opacity .12s ease}
#pt-tbody tr.pt-group-row.pt-row-hidden{display:none}
.pt-col-account{color:var(--t2)}
/* RC-1.3.1 — platform tooltip component. No existing hover-tooltip pattern
   existed in the codebase (the notif dropdown is click-triggered and
   app-specific), so this introduces the platform's first one, built from
   the same design tokens (var(--bg-c)/var(--br)/var(--sh-lg)/var(--t1))
   every other surface already uses — for reuse by any future column, not
   just Health. CSS-only: opens on :hover and on :focus-within, so it works
   for both mouse and keyboard (Tab to the trigger, no JS needed). Replaces
   the browser-native `title` tooltip entirely — no title attribute is set
   anywhere this component is used. */
.pt-tt{position:relative;display:inline-block}
.pt-tt-trigger{cursor:default}
.pt-tt-bubble{position:absolute;left:0;bottom:calc(100% + 7px);background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-s);box-shadow:var(--sh-lg);padding:9px 11px;font-size:11px;line-height:1.6;color:var(--t1);width:max-content;max-width:260px;z-index:60;opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.pt-tt:hover .pt-tt-bubble,.pt-tt:focus-within .pt-tt-bubble{opacity:1;visibility:visible;transform:translateY(0)}
.pt-tt-bubble div{white-space:normal}
.own-chip{font-size:9.5px;font-weight:700;font-family:'JetBrains Mono',monospace;padding:2px 7px;border-radius:4px;white-space:nowrap}
.own-bm{background:var(--acc-d);color:var(--acc)}
.own-cm{background:rgba(22,163,74,.1);color:#15803D}

/* ══ Shared Tag Library picker — one implementation, mounted wherever a
   module needs tags (Task Management, Decision Log, Notes, Recommendations).
   See TagPicker.mount() below. Built from the same .fi-style tokens
   (--bg-i/--br/--r-s/--acc) every other input on this page already uses,
   so it drops into existing forms without looking like a foreign widget. */
.tg-picker{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);padding:7px 9px;transition:border-color .15s,box-shadow .15s}
.tg-picker:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-d)}
.tg-chips{display:contents}
.tg-chip{display:inline-flex;align-items:center;gap:5px;background:var(--acc-d);color:var(--acc-dark);font-size:12px;font-weight:600;padding:3px 6px 3px 10px;border-radius:999px;white-space:nowrap}
.tg-chip-x{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;color:var(--acc-dark);font-size:13px;line-height:1;opacity:.6;transition:opacity .12s,background .12s}
.tg-chip-x:hover{opacity:1;background:rgba(108,99,255,.18)}
.tg-input{flex:1;min-width:120px;border:none;background:transparent;outline:none;color:var(--t1);font-size:13px;padding:3px 2px;font-family:'Rubik',sans-serif}
.tg-input::placeholder{color:var(--t3)}
.tg-dd{position:absolute;left:0;right:0;top:calc(100% + 5px);background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r-s);box-shadow:var(--sh-lg);max-height:220px;overflow-y:auto;z-index:80;display:none}
.tg-dd-label{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t3);padding:8px 12px 4px}
.tg-dd-item{padding:8px 12px;font-size:13px;color:var(--t1);cursor:pointer}
.tg-dd-item:hover,.tg-dd-item.active{background:var(--acc-d);color:var(--acc-dark)}
.tg-dd-create{color:var(--acc);font-weight:600}
.tg-dd-empty{padding:10px 12px;font-size:12px;color:var(--t3)}

/* ══ Health dot for Home page account cards ══ */
.health-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.health-dot.green{background:var(--ok)}
.health-dot.yellow{background:var(--warn)}
.health-dot.red{background:var(--err)}

/* ══ Sidebar client picker ══ */
.cp-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-s);cursor:pointer;font-size:12px;color:var(--t2);transition:all .15s;border:none;background:none;width:100%;text-align:left;font-family:'Rubik',sans-serif}
.cp-item:hover{background:var(--acc-d);color:var(--acc);transform:translateX(2px)}
.cp-av{width:22px;height:22px;border-radius:50%;background:var(--bg-ch);border:1px solid var(--br);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--t3);flex-shrink:0;font-family:'JetBrains Mono',monospace}
/* ══ Report builder ══ */
.rb-tab{padding:8px 18px;border:none;border-bottom:2px solid transparent;background:transparent;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--t2);font-family:'Rubik',sans-serif;transition:all .15s}
.rb-tab.active{border-bottom-color:var(--acc);color:var(--acc)}
.widget-card{border:1.5px solid var(--br);border-radius:var(--r-s);padding:12px;cursor:pointer;transition:all .15s;background:var(--bg-c)}
.widget-card:hover{border-color:var(--acc-g)}
.widget-card.selected{border-color:var(--acc);background:var(--acc-d)}

/* ══ Creative Hub (RC-4.3) — reuses every token above; only new component
   shapes are added here, per the RC-3.2 Experience Prototype's visual
   spec. Nothing here is a redesign. ══ */
.camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:20px}
.camp-card{background:var(--bg-c);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:10px}
.camp-card:hover{border-color:var(--acc-g);transform:translateY(-1px)}
.camp-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.camp-card-name{font-size:13.5px;font-weight:600;line-height:1.3}
.camp-card-client{font-size:10.5px;color:var(--t3);margin-top:2px;font-weight:500}
.camp-plat-row{display:flex;gap:5px;flex-wrap:wrap}
.plat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.plat-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--t2);background:var(--bg-ch);border-radius:9px;padding:3px 8px;font-weight:500}

.lr-wrap{display:flex;align-items:center;gap:8px}
.lr-bar{flex:1;height:6px;border-radius:4px;background:var(--bg-ch);overflow:hidden}
.lr-fill{height:100%;background:var(--acc);border-radius:4px;transition:width .25s ease}
.lr-pct{font-size:11px;font-weight:700;color:var(--t2);font-family:'JetBrains Mono',monospace;white-space:nowrap}

.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filter-bar select,.filter-bar input[type=search]{font-size:12px;padding:7px 10px;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);color:var(--t1);outline:none}
.filter-bar input[type=search]{flex:1;min-width:180px}

.tabrow{display:flex;gap:2px;border-bottom:1px solid var(--br);margin-bottom:16px;flex-wrap:wrap}
.tabrow.sub{margin-top:-4px;margin-bottom:14px;border-bottom:none;background:var(--bg-ch);border-radius:var(--r-s);padding:3px;display:inline-flex}
.tabrow.sub .rb-tab{padding:6px 14px;border-radius:calc(var(--r-s) - 1px);border-bottom:none}
.tabrow.sub .rb-tab.active{background:var(--bg-c);box-shadow:0 1px 4px rgba(0,0,0,.1)}

.stepper{display:flex;align-items:center;margin-bottom:4px;flex-wrap:wrap;gap:0}
.step{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t3);font-weight:600}
.step-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-ch);border:2px solid var(--br);flex-shrink:0}
.step.done .step-dot{background:var(--ok);border-color:var(--ok)}
.step.current .step-dot{background:var(--acc);border-color:var(--acc)}
.step.current{color:var(--acc)}
.step.done{color:var(--t2)}
.step-line{width:26px;height:2px;background:var(--br);margin:0 4px}
.step-line.done{background:var(--ok)}

.cmt{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--br)}
.cmt:last-child{border-bottom:none}
.cmt-av{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.cmt-av.client{background:var(--t2)}
.cmt-head{display:flex;align-items:center;gap:7px;font-size:11.5px;margin-bottom:2px}
.cmt-name{font-weight:600}
.cmt-time{color:var(--t3);font-size:10.5px}
.cmt-body{font-size:12.5px;color:var(--t1);line-height:1.5}
.vis-chip{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 6px;border-radius:8px}
.vis-shared{background:var(--ok-d,rgba(22,163,74,.1));color:#15803D}
.vis-internal{background:rgba(0,0,0,.06);color:var(--t2)}
.vis-client_only{background:var(--acc-d);color:var(--acc)}
.cmt-compose{display:flex;gap:8px;margin-top:12px}
.cmt-compose textarea{flex:1;min-height:56px;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);padding:8px 10px;font-size:12.5px;outline:none;resize:vertical}
.cmt-compose-actions{display:flex;flex-direction:column;gap:6px}

.act-item{display:flex;gap:10px;padding:8px 0;font-size:12px}
.act-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex-shrink:0;margin-top:6px}
.act-time{color:var(--t3);font-size:10.5px;white-space:nowrap}

.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.asset-tile{aspect-ratio:1;background:var(--bg-ch);border:1px solid var(--br);border-radius:var(--r-s);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9.5px;color:var(--t3);text-align:center;padding:6px;position:relative}
.asset-tile-icon{font-size:20px}
.asset-tile-add{border-style:dashed;cursor:pointer;color:var(--acc);border-color:var(--acc-g)}
.asset-tile-add:hover{background:var(--acc-d)}

.field-limit{font-size:10px;color:var(--t3);margin-top:3px;font-family:'JetBrains Mono',monospace}
.field-limit.over{color:var(--err);font-weight:700}
.copy-field{margin-bottom:10px}
.copy-field label{font-size:10.5px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:4px}
.copy-field input:not([type=checkbox]):not([type=radio]),.copy-field textarea,.copy-field select{width:100%;background:var(--bg-i);border:1px solid var(--br);border-radius:var(--r-s);padding:7px 10px;font-size:12.5px;outline:none}
/* RC-4.3.3 Amendment §8 — platform/ad-format checkbox rows sit inside a
   .copy-field (for the "Ad Formats" field-name label above them), but must
   never inherit that label's uppercase/letter-spacing/bold field-name
   styling — .check-row overrides it explicitly rather than relying on
   selector specificity order. */
.copy-field label.check-row{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--t1);padding:6px 2px;margin-bottom:0;text-align:left}
.check-row input[type=checkbox]{width:15px;height:15px;flex-shrink:0;accent-color:var(--acc);margin:0}
.copy-field textarea{min-height:44px;resize:vertical}

.fgroup{border:1px solid var(--br);border-radius:var(--r-s);margin-bottom:10px;overflow:hidden}
.fgroup-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;background:var(--bg-ch);transition:background .15s}
.fgroup-head:hover{background:var(--acc-d)}
.fgroup-chevron{font-size:10px;color:var(--t3);transition:transform .15s;display:inline-block}
.fgroup-chevron.open{transform:rotate(90deg)}
.fgroup-label{font-size:12.5px;font-weight:600;flex:1}
.fgroup-count{font-size:10.5px;color:var(--t3);font-family:'JetBrains Mono',monospace}
.fgroup-count.warn{color:var(--warn);font-weight:700}
.fgroup-body{padding:12px;background:var(--bg-c)}
.fgroup-add-btn{width:100%;border-style:dashed;margin-top:2px}
.fgroup-remove{position:absolute;top:0;right:0;width:20px;height:20px;border-radius:50%;background:var(--bg-ch);color:var(--err);font-size:13px;display:flex;align-items:center;justify-content:center;line-height:1;border:1px solid var(--br)}
.fgroup-remove:hover{background:rgba(220,38,38,.1)}
.compound-row{position:relative;border:1px solid var(--br);border-radius:var(--r-s);padding:12px 30px 4px 12px;margin-bottom:10px;background:var(--bg-ch)}

/* ── Creative Preview (RC-4.3.3 Round 2 §1) — same class names as the
   Client Portal (frontend/clients/phillipnova/portal.html) since both call
   the identical CrD.renderCreativePreview() output; kept as a verbatim
   copy of that file's rules rather than a shared stylesheet include,
   matching this codebase's existing per-dashboard-CSS-block convention. */
.adprev{max-width:420px;border:1px solid var(--br);border-radius:var(--r);overflow:hidden;background:var(--bg-c);font-family:Arial,sans-serif}
.adprev-empty{font-size:12px;color:var(--t3);font-style:italic;padding:14px;text-align:center;border:1px dashed var(--br);border-radius:var(--r);max-width:420px}
.adprev-pad{padding:14px}
.adprev-img{width:100%;aspect-ratio:1.91/1;object-fit:cover;background:var(--bg-ch);display:block}
.adprev-img.sq{aspect-ratio:1/1}
.adprev-img-error{display:flex;align-items:center;justify-content:center;color:var(--err);font-size:11px}
.adprev-video{width:100%;aspect-ratio:9/16;max-height:360px;background:#111;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.adprev-video video{width:100%;height:100%;object-fit:cover}
.adprev-video .adprev-noasset{color:rgba(255,255,255,.6)}
.adprev-brand{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:600;color:var(--t1)}
.adprev-brand .dot{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.adprev-body-text{font-size:12.5px;color:var(--t1);padding:0 12px 10px;line-height:1.4}
.adprev-headline{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:2px}
.adprev-desc{font-size:12px;color:var(--t2);line-height:1.4}
.adprev-cta-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--br);background:var(--bg-ch)}
.adprev-cta-btn{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:5px;background:var(--bg-i);color:var(--t1);border:1px solid var(--br)}
.adprev-google .adprev-url{font-size:11.5px;color:#202124}
.adprev-google .adprev-fav{width:16px;height:16px;border-radius:50%;background:var(--acc-d);display:inline-block;vertical-align:middle;margin-right:6px}
.adprev-google .adprev-h{font-size:15px;color:#1a0dab;margin-top:2px;line-height:1.3}
.adprev-google .adprev-d{font-size:12.5px;color:#4d5156;margin-top:3px;line-height:1.4}
.adprev-google .adprev-sitelinks{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:8px}
.adprev-google .adprev-sitelinks a{font-size:12px;color:#1a0dab}
.adprev-carousel-track{display:flex;gap:8px;overflow-x:auto;padding:10px 12px}
.adprev-carousel-card{flex:0 0 130px;border:1px solid var(--br);border-radius:var(--r-s);overflow:hidden;background:var(--bg-c)}
.adprev-carousel-card .ci{width:100%;aspect-ratio:1/1;background:var(--bg-ch)}
.adprev-carousel-card .cb{padding:6px 8px;font-size:10.5px}
.adprev-carousel-card .cb .h{font-weight:700;margin-bottom:2px}
.adprev-carousel-card .cb .d{color:var(--t2)}
.adprev-tt-caption{position:absolute;left:10px;right:50px;bottom:44px;font-size:11.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.adprev-tt-cta{position:absolute;left:10px;bottom:10px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:16px;background:#fff;color:#111}
.adprev-li-inbox{padding:12px}
.adprev-li-inbox .from{font-size:12px;font-weight:700;color:var(--t1)}
.adprev-li-inbox .subj{font-size:12.5px;font-weight:600;margin-top:4px}
.adprev-li-inbox .body{font-size:12px;color:var(--t2);margin-top:4px;line-height:1.4;white-space:pre-wrap}
.adprev-doc-tile{display:flex;align-items:center;gap:10px;padding:14px;background:var(--bg-ch)}
.adprev-doc-tile .ic{font-size:26px}
.adprev-x-handle{font-size:12px;color:var(--t2)}
.adprev-native{display:flex;gap:10px;padding:10px}
.adprev-native img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-s);background:var(--bg-ch);flex-shrink:0}
.adprev-sponsored-tag{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}

.res-group-title{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px}
.res-group-title:first-child{margin-top:0}
.res-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--br)}
.res-row:last-child{border-bottom:none}
.res-icon{width:26px;height:26px;border-radius:var(--r-s);background:var(--bg-ch);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.empty-note{font-size:12px;color:var(--t3);padding:10px 0;font-style:italic}