/* Dashboard layout — Snaily-style sidebar + tabbed app shell. */
:root {
  --sidebar-w: 240px;
  --topbar-h: 64px;
}

body { background: var(--bg); }

.dash { display: flex; min-height: 100vh; }

/* ---- sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  /* Lock the sidebar to the viewport so it never visually scrolls or
     shifts when the main content area swaps views. Mark called out
     that clicking tabs made the whole left rail feel like it was
     reloading. With sticky positioning + a fixed viewport height,
     the sidebar stays rock-still while #view content swaps. */
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* View-pane wrapper holds each cached view's DOM. Hidden ones stay
   in memory (so revisiting a tab is instant) but display:none beats
   them so they don't take up layout space. */
#view { min-height: calc(100vh - 70px); }
.view-pane { min-height: inherit; }
.view-pane[hidden] { display: none !important; }

/* ============================================================
   MOBILE BOTTOM TAB BAR (Coder Standards Manual §3.3)
   ============================================================
   Hidden on desktop. Shown < 768px. 5 items in the thumb zone,
   center FAB for the primary action (New campaign). Each tap
   target is 44px+ tall per Manual §2.3. */
.bottom-tabs {
  display: none;                      /* desktop hidden */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone home bar */
  height: 64px;
  align-items: stretch;
  justify-content: space-around;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
}
:root[data-theme="dark"] .bottom-tabs {
  background: #0b1220;
  border-top-color: var(--line);
}
.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;                   /* §2.3 touch target */
  padding: 6px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font: 600 11px 'Inter', system-ui, sans-serif;
  text-decoration: none;
}
.bottom-tab .bt-ic { width: 22px; height: 22px; }
.bottom-tab .bt-lbl { line-height: 1; letter-spacing: .01em; }
.bottom-tab.is-active { color: var(--primary); }
.bottom-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
/* Center FAB. Elevated above the bar - tap target 56x56 = comfortable. */
.bottom-tab-fab {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  margin: -22px 4px 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  align-self: center;
  box-shadow: 0 6px 16px rgba(79, 70, 229, .35);
  padding: 0;
}
.bottom-tab-fab:hover, .bottom-tab-fab:active { background: var(--primary-dark); }
.bottom-tab-fab:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

@media (max-width: 767px) {
  /* Sidebar collapses on phones - bottom tab bar takes over. */
  .sidebar { display: none; }
  .bottom-tabs { display: flex; }
  /* Keep main content from disappearing under the bar. */
  .main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)); padding-left: 12px; padding-right: 12px; }
  /* Prevent any single view from forcing horizontal scroll on the body. */
  body, html { max-width: 100vw; overflow-x: hidden; }
  .dash, .main { min-width: 0; }
  /* Panels go edge-to-edge tighter on phones. */
  .panel { padding: 14px 14px; border-radius: 12px; }
  /* Any wide table inside a tablecard gets a horizontal scroll wrapper. */
  .tablecard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Stat grids collapse to 2-up. */
  .stat-grid, .stats-row, .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  /* Anything explicitly trying to be 3+ columns drops to one on mobile. */
  .three-col, .four-col, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  /* Modals: full-width with safe inset. */
  .modal { width: calc(100vw - 24px) !important; max-width: 100vw; max-height: 88vh; }
  /* Long inline code/url tokens shouldn't punch out of containers. */
  code, pre, .token-box code { word-break: break-all; }
  /* Topbar collision fix: tabs were getting hidden behind the search +
     bell + user box. Let .tabs shrink properly via min-width:0, give the
     scroll area visual fade, and pull the search icon off the row below
     600px (Ctrl+K is meaningless on phones - opening it is one tap on
     "Menu" anyway). */
  .topbar { gap: 8px; }
  .topbar .tabs {
    flex: 1 1 0; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .topbar .cmd-trigger .cmd-trigger-txt,
  .topbar .cmd-trigger .cmd-trigger-kbd { display: none; }
  .topbar .userbox .uname,
  .topbar .userbox .umail { display: none; }
}
@media (max-width: 600px) {
  /* Below 600px, the search icon collides with the campaigns sub-tabs.
     Hide it - users can still search via the Menu sheet or Ctrl+K on a
     keyboard (mobile doesn't use Ctrl+K anyway). */
  .topbar .cmd-trigger { display: none; }
}

/* ============================================================
   "MORE" BOTTOM SHEET (Coder Standards Manual §3.6 - account drawer)
   ============================================================
   Triggered by the 5th bottom-tab "Menu" button. Slides up from bottom,
   takes 80% of viewport height, lists every sidebar module. Backdrop
   dims the rest. Closes on backdrop/X/item tap. */
.more-sheet[hidden] { display: none !important; }
.more-sheet {
  position: fixed; inset: 0;
  z-index: 70;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.more-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
}
.more-sheet-panel {
  position: relative;
  background: var(--surface);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  max-height: 82vh;
  padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0));
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .25);
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.more-sheet-grip {
  width: 44px; height: 4px; border-radius: 999px;
  background: var(--line);
  margin: 6px auto 12px;
}
.more-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  font-size: 15px; color: var(--ink);
}
.more-sheet-x {
  background: transparent; border: 0;
  font-size: 26px; line-height: 1; color: var(--muted);
  cursor: pointer; padding: 4px 8px;
  min-width: 44px; min-height: 44px;   /* touch target */
}
.more-sheet-x:hover { color: var(--ink); }
.more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ms-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 8px;
  min-height: 88px;
  font: 600 12.5px 'Inter', system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.ms-item:hover { border-color: var(--primary); background: var(--surface); }
.ms-item:active { transform: scale(.97); }
.ms-item .ms-ic { font-size: 22px; line-height: 1; }
@media (max-width: 400px) {
  .more-sheet-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   GLOBAL TOUCH TARGET MINIMUMS (Manual §2.3)
   ============================================================
   Every tappable element gets 44x44px on touch devices. The (hover:none)
   media query targets touchscreens specifically so desktop pointers still
   get compact buttons. */
@media (hover: none) and (pointer: coarse) {
  .btn, button, .side-item, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
  }
  .btn--sm, button.btn--sm { min-height: 40px; }
  /* Form inputs - 48px on mobile per Manual §2.8 */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="url"],
  input[type="search"], select, textarea {
    min-height: 48px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  textarea { min-height: 96px; }
}

.sidebar-logo {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  font-weight: 800;
  font-size: 19px;
  border-bottom: 1px solid var(--line);
}
.side-nav { padding: 14px 12px; flex: 1; overflow-y: auto; }
.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.side-item:hover { background: var(--bg-alt); color: var(--ink); }
.side-item.active { background: #eef2ff; color: var(--primary-dark); }
.side-item .ic {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; opacity: .85;
}
.side-item .ic svg { width: 17px; height: 17px; }
.side-recent svg { width: 15px; height: 15px; flex: none; opacity: .7; }
.side-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  font-weight: 700;
  padding: 16px 12px 6px;
}
.side-recent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-recent:hover { background: var(--bg-alt); color: var(--ink); }

/* ---- main ---- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 24px;
}
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--primary); }
.userbox { text-align: right; line-height: 1.3; }
.userbox .uname { font-weight: 700; font-size: 13.5px; }
.userbox .umail { font-size: 12.5px; color: var(--muted); }
.userbox { display: flex; align-items: center; gap: 14px; }

.content { padding: 18px 20px; flex: 1; background: var(--bg-alt); }
.content h1 {
  font-size: 1.4rem; margin-bottom: 13px; letter-spacing: -0.02em;
}

/* ---- toolbar (search + filter + add) ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.search input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
}
.filter-dots { display: flex; align-items: center; gap: 6px; }
.filter-dots .lbl { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 4px; }
.fdot {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fdot .d { width: 9px; height: 9px; border-radius: 50%; }
.fdot.on { border-color: var(--primary); background: #eef2ff; }
.spacer { flex: 1; }

/* ---- card / table ---- */
.tablecard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px -12px rgba(15, 23, 42, .22),
              0 1px 3px rgba(15, 23, 42, .05);
}
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
thead th.num, tbody td.num { text-align: right; }
tbody td {
  padding: 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--bg-alt); }

.camp-name { font-weight: 700; color: var(--primary-dark); }
.progress {
  margin-top: 6px;
  height: 5px;
  background: #eef2f6;
  border-radius: 999px;
  overflow: hidden;
  max-width: 260px;
}
.progress > span { display: block; height: 100%; background: var(--primary); }
.progress-meta {
  display: flex;
  justify-content: space-between;
  max-width: 260px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* Campaign status pill - uniform width + tinted background per state,
   matches the status tokens from site.css so dark-mode adapts via the
   same FG/BG pairs. Click-to-cycle is preserved (the original behavior
   on .status[data-cycle]). */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 92px;                  /* uniform width across rows */
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700; font-size: 12px;
  text-transform: capitalize; letter-spacing: .01em;
  background: var(--bg-alt);        /* default fallback */
  color: var(--ink);
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
  white-space: nowrap;
}
.status:hover { filter: brightness(.97); transform: translateY(-1px); }
:root[data-theme="dark"] .status:hover { filter: brightness(1.15); }
.status .d {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);   /* subtle ring for contrast */
}
:root[data-theme="dark"] .status .d {
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

/* Per-state pill colors. Uses the status tokens defined in site.css so
   light + dark mode both render at WCAG AA. */
.s-draft  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.s-draft  .d { background: #94a3b8; }
.s-active { background: var(--success-bg); color: var(--success-fg); border-color: rgba(22,101,52,.18); }
.s-active .d { background: var(--ok); }
.s-paused { background: var(--warning-bg); color: var(--warning-fg); border-color: rgba(146,64,14,.18); }
.s-paused .d { background: #d97706; }
.s-done   { background: var(--info-bg); color: var(--info-fg); border-color: rgba(30,64,175,.18); }
.s-done   .d { background: #2563eb; }

/* Dark-mode pill borders softened (status tokens already flip to deep
   tints in dark theme, so just relax the border ring). */
:root[data-theme="dark"] .s-draft  { background: #1f2a44; color: #cbd5e1; border-color: var(--line); }
:root[data-theme="dark"] .s-active,
:root[data-theme="dark"] .s-paused,
:root[data-theme="dark"] .s-done { border-color: rgba(255,255,255,.08); }

.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--muted);
}
.empty-state h3 { color: var(--ink); margin-bottom: 6px; }

/* ---- stat boxes ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 5px 16px -10px rgba(15, 23, 42, .12);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(15, 23, 42, .22);
  border-color: var(--primary);
}
:root[data-theme="dark"] .stat-box {
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .55);
}
:root[data-theme="dark"] .stat-box:hover {
  border-color: var(--primary);
  box-shadow: 0 14px 26px -10px rgba(129, 140, 248, .25);
}
.stat-box .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700;
  line-height: 1.3;
}
.stat-box .v {
  font-size: 28px; font-weight: 800; margin-top: 4px;
  color: var(--ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;   /* digits same width = stats align */
}
.stat-box .v small { font-size: 14px; color: var(--muted); font-weight: 600; }
.stat-box .s {
  font-size: 11.5px; color: var(--muted); margin-top: 4px; font-weight: 600;
}
/* Tighter on mobile so 4 boxes don't crowd. */
@media (max-width: 720px) {
  .stat-box { padding: 12px 14px; min-height: 68px; }
  .stat-box .v { font-size: 22px; }
}

/* ---- panel ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 19px;
  margin-bottom: 13px;
  box-shadow: 0 6px 22px -12px rgba(15, 23, 42, .22),
              0 1px 3px rgba(15, 23, 42, .05);
}

/* ---- Studio command-center grid ---------------------------------------- */
/* Studio used to be a single stack of giant panels with empty white space
   on either side. Now smaller tools sit side-by-side, large-canvas tools
   span the full width. Drops average scroll distance ~60%. */
/* Studio grid is now MASONRY (CSS multi-column) instead of CSS grid.
   Grid + align-items:start left huge dead space under a short panel when
   its sibling was tall (carousel left col >> meme right col). Multi-column
   packs short panels under tall ones naturally - command-center density.

   Panel--wide (profile optimizer, media library) is now rendered OUTSIDE
   .studio-grid so it can span full width without breaking the columns. */
.studio-grid {
  column-count: 2;
  column-gap: 14px;
  margin: 0 0 14px;
}
.studio-grid > .panel {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 14px;
  vertical-align: top;
}
/* Canvases scale to fit their column - 1080x1080 carousel + 1584x396 banner
   would otherwise blow out narrow viewports. */
.studio-grid canvas {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* Single column on narrow screens. */
@media (max-width: 980px) {
  .studio-grid { column-count: 1; }
}
/* 2026-05-28: removed the gradient accent-bar that ran down the left of
   every .panel h2. Mark flagged the stripes as off-brand decoration on
   the demo + dashboard. Headings now sit flush with the content area
   for a cleaner, less-AI-fingerprinted look. */
.panel h2 {
  font-size: 1.04rem; margin-bottom: 4px; line-height: 1.3;
}
/* Merge-field insert chips that sit above the variant textareas in the
   New Campaign modal. Click-to-insert beats forcing the customer to
   type {{firstName}} by hand and miscount the braces. */
.merge-insert {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: 6px 0 10px;
}
.merge-insert-lbl {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-right: 2px;
}
.merge-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid #c7d2fe; background: #eef2ff;
  color: #4338ca; font-size: 12px; font-weight: 600;
  cursor: pointer; font: inherit;
  font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.merge-chip:hover  { background: #e0e7ff; border-color: #a5b4fc; }
.merge-chip:active { transform: translateY(1px); }
:root[data-theme="dark"] .merge-chip {
  background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.45); color: #c7d2fe;
}

/* Branded SVG icon shown next to each sidebar section label.
   Replaces the emoji prefixes (🎯 📣 ✨ 📊 ⚙️) that read as
   off-brand AI-generated chrome. currentColor lets the icon inherit
   the muted label color so the whole sidebar feels intentional. */
.side-label-group {
  display: flex; align-items: center; gap: 7px;
}
.grp-ic {
  width: 13px; height: 13px;
  flex: none;
  opacity: 0.85;
}
.panel .desc { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

/* ---- Account Health Score (R4) ---- */
.hs-head {
  display: flex; gap: 16px; align-items: center;
  margin-bottom: 16px;
}
.hs-ring { flex: 0 0 auto; }
.hs-summary { flex: 1 1 auto; min-width: 0; }
.hs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.hs-bar-top {
  display: flex; justify-content: space-between;
  font-size: 12px; margin-bottom: 4px;
}
.hs-bar-label { color: var(--muted); font-weight: 600; }
.hs-bar-val { color: var(--ink); font-weight: 700; }
.hs-bar-track {
  height: 6px; border-radius: 999px;
  background: var(--bg-alt);
  overflow: hidden;
}
.hs-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 250ms ease;
}
.hs-tips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.hs-tip {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border-left: 3px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink);
}
.hs-tip-warn { border-left-color: #d97706; }
.hs-tip-info { border-left-color: #2563eb; }
@media (max-width: 520px) {
  .hs-head { flex-direction: column; align-items: flex-start; }
  .hs-ring svg { width: 96px; height: 96px; }
}

.token-box {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.token-box code {
  flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: ui-monospace, Menlo, monospace;
}
.field-label { font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-opt {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; text-align: center;
}
.plan-opt.current { border-color: var(--primary); background: #eef2ff; }
.plan-opt .p { font-size: 22px; font-weight: 800; margin: 6px 0; }
.plan-opt .btn { width: 100%; justify-content: center; margin-top: 8px; }

.btn--sm { padding: 8px 14px; font-size: 13px; }
.loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
/* Must beat the .loading display:flex so the JS `hidden` toggle works. */
.loading[hidden] { display: none; }

/* ---- modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: var(--surface); border-radius: 16px; padding: 26px;
  width: 100%; max-width: 440px;
  max-height: 92vh; overflow-y: auto;
  animation: modalPop .16s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal-backdrop { animation: backdropIn .16s ease; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal h2 { font-size: 1.2rem; margin-bottom: 14px; }
.modal label { display: block; font-size: 13px; font-weight: 700; margin: 12px 0 5px; }
/* CRITICAL: scope to TEXT-style inputs only. The naked `.modal input`
   rule applied width:100% + padding to <input type="checkbox"> and
   <input type="radio"> too, which made the consent modal's checkboxes
   grow to fill the row and push label text into a 30px-wide column on
   the right (single letters stacking vertically). Affects EVERY modal
   that ever uses a checkbox or radio. */
.modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.modal textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit;
}
/* Restore native checkbox/radio sizing inside modals. */
.modal input[type="checkbox"],
.modal input[type="radio"] {
  width: auto; padding: 0; margin: 0;
  flex: none; vertical-align: middle;
}
.modal textarea { min-height: 80px; resize: vertical; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---- post composer + live preview ---- */
.composer-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 20px;
}
/* Keep the bigger preview in view while scrolling the form. */
.composer-grid > div:last-child {
  position: sticky;
  top: 16px;
  align-self: start;
}
.composer-form textarea,
.composer-form input,
.bulk-area {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  font: inherit;
  margin-bottom: 10px;
}
.composer-form textarea { min-height: 110px; resize: vertical; }
.bulk-area { min-height: 100px; resize: vertical; }
.composer-actions { display: flex; gap: 10px; margin-top: 2px; }

.lp-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--surface);
  box-shadow: 0 8px 26px -14px rgba(15, 23, 42, .28);
}
/* LinkedIn-faithful variant. Reset the generic card padding so the
   media + action bar can run edge-to-edge like a real feed card. */
.lp-card-li {
  padding: 0;
  border-radius: 10px;
  border-color: #e5e5e5;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  background: #ffffff;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
.lp-card-li .lp-head {
  padding: 12px 16px 0;
  margin-bottom: 6px;
  display: flex; gap: 10px; align-items: flex-start;
}
.lp-card-li .lp-avatar {
  width: 48px; height: 48px;
}
.lp-card-li .lp-name {
  font-size: 14px; font-weight: 600; color: rgba(0,0,0,.9);
  line-height: 1.25;
}
.lp-card-li .lp-sub {
  font-size: 12px; color: rgba(0,0,0,.6);
  line-height: 1.35; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.lp-card-li .lp-meta {
  font-size: 12px; color: rgba(0,0,0,.6);
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
}
.lp-card-li .lp-body {
  padding: 0 16px;
  font-size: 14px; line-height: 1.43;
  white-space: pre-wrap; word-break: break-word;
  color: rgba(0,0,0,.9);
  min-height: 0;
  margin-bottom: 8px;
}
.lp-card-li .lp-body.empty { color: rgba(0,0,0,.5); min-height: 60px; }
.lp-card-li .lp-more-link { color: rgba(0,0,0,.6); cursor: default; }
.lp-card-li .lp-media {
  margin: 0; padding: 0;
  background: #f3f2ef;
  display: block;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.lp-card-li .lp-media img,
.lp-card-li .lp-media video {
  display: block;
  width: 100%;
  max-height: 540px;
  object-fit: contain;
  background: #f3f2ef;
}
.lp-card-li .lp-link { padding: 0 16px; margin: 8px 0 0; border: 0; }
.lp-card-li .lp-link-unfurl {
  display: flex; gap: 0; align-items: stretch;
  border: 1px solid #e5e5e5; border-radius: 0;
  overflow: hidden;
  background: #f3f2ef;
}
.lp-card-li .lp-link-thumb {
  width: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #e5e5e5;
}
.lp-card-li .lp-link-meta {
  flex: 1; min-width: 0;
  padding: 8px 12px;
  display: flex; flex-direction: column; justify-content: center;
}
.lp-card-li .lp-link-domain {
  font-size: 12px; color: rgba(0,0,0,.6);
  text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-card-li .lp-link-url {
  font-size: 14px; color: rgba(0,0,0,.9); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.lp-card-li .lp-social {
  padding: 8px 16px 4px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(0,0,0,.6);
  border-bottom: 1px solid #e5e5e5;
}
.lp-card-li .lp-reactions {
  display: inline-flex; align-items: center; gap: 4px;
}
.lp-card-li .lp-rxn {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}
.lp-card-li .lp-rxn + .lp-rxn { margin-left: -6px; }
.lp-card-li .lp-rxn-count { margin-left: 6px; }
.lp-card-li .lp-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px 6px;
}
.lp-card-li .lp-action {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0;
  padding: 10px 6px;
  color: rgba(0,0,0,.6);
  font-weight: 600; font-size: 13px;
  cursor: default;
  border-radius: 4px;
  font-family: inherit;
}
.lp-card-li .lp-action:hover { background: rgba(0,0,0,.08); color: rgba(0,0,0,.75); }
.lp-card-li .lp-fc {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 12px 16px 14px;
  border-top: 1px solid #e5e5e5;
  background: #ffffff;
  margin: 0;
  font-size: 14px; color: rgba(0,0,0,.9);
}
.lp-card-li .lp-fc-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex: none;
}
.lp-card-li .lp-fc-bubble {
  background: #f3f2ef; border-radius: 8px;
  padding: 8px 12px;
  flex: 1; min-width: 0;
}
.lp-card-li .lp-fc-author {
  font-weight: 600; font-size: 13px;
  color: rgba(0,0,0,.9);
  display: flex; align-items: center; gap: 6px;
}
.lp-card-li .lp-fc-author-sub {
  font-weight: 400; font-size: 11px;
  color: rgba(0,0,0,.55);
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 3px;
  padding: 0 4px;
}
.lp-card-li .lp-fc-text {
  font-size: 13px; line-height: 1.43; margin-top: 2px;
  color: rgba(0,0,0,.9);
  white-space: pre-wrap; word-break: break-word;
}

/* Legacy generic preview styles — kept for any other view that still
   uses the bare .lp-card without .lp-card-li. The new LinkedIn-faithful
   styles above target only .lp-card.lp-card-li so we don't break them. */
.lp-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.lp-avatar {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex: none;
}
.lp-name { font-weight: 700; font-size: 15.5px; }
.lp-meta { font-size: 12.5px; color: var(--muted); }
.lp-body {
  font-size: 15.5px; line-height: 1.55; white-space: pre-wrap;
  word-break: break-word; color: var(--ink); min-height: 150px;
}
.lp-body.empty { color: var(--muted); }
.lp-link {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: var(--primary);
  word-break: break-all;
}
.lp-fc {
  margin-top: 10px; font-size: 12px; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: 8px;
}

/* ---- content calendar ---- */
.cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-nav h3 { font-size: 1rem; min-width: 160px; text-align: center; }
.cal-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; min-width: 100%;
}
.cal-dow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 4px 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.cal-cell {
  min-height: 90px; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; background: var(--surface);
  min-width: 0; overflow: hidden;
}
.cal-cell.empty { background: var(--bg-alt); border-style: dashed; }
.cal-cell.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.cal-cell.today .cal-daynum { color: var(--primary); }
.cal-chip {
  font-size: 10.5px; background: var(--info-bg, #eef2ff); color: var(--info-fg, var(--primary-dark));
  border-radius: 5px; padding: 2px 5px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-chip.draft  { background: var(--bg-alt); color: var(--muted); }
.cal-chip.posted { background: var(--success-bg, #dcfce7); color: var(--success-fg, #15803d); }
.cal-chip.failed { background: var(--danger-bg, #fef2f2);  color: var(--danger-fg, #b91c1c); }

/* Mobile-only empty-state (hidden on desktop where the grid is fine). */
.cal-mobile-empty { display: none; }

/* ---- content calendar mobile: collapse to scrollable single-column list ---- */
@media (max-width: 640px) {
  .cal-wrap { overflow-x: hidden; }
  .cal { grid-template-columns: 1fr; gap: 4px; }
  .cal-dow { display: none; }
  .cal-cell {
    min-height: 0; padding: 8px 10px;
    display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 8px;
  }
  /* Padding cells before/after the month are never useful on mobile. */
  .cal-cell.empty { display: none; }
  /* User's ask: on mobile, only show days that actually have a
     scheduled event. Days with zero posts collapse out of the list so
     the user sees a clean, action-only timeline. */
  .cal-cell.no-events { display: none; }
  .cal-daynum {
    margin-bottom: 0; font-size: 15px; color: var(--ink);
    align-self: center;
  }
  .cal-cell.today .cal-daynum { color: var(--primary); }
  .cal-chip { font-size: 12px; padding: 3px 7px; }
  /* When the entire month is empty, the grid collapses to zero rows.
     Show a friendly placeholder so the panel isn't blank. */
  .cal-mobile-empty {
    display: block;
    text-align: center;
    padding: 28px 16px;
    color: var(--muted);
    background: var(--bg-alt);
    border: 1px dashed var(--line);
    border-radius: 12px;
    margin-top: 8px;
  }
  .cal-mobile-empty-ic { font-size: 28px; margin-bottom: 8px; }
  .cal-mobile-empty-t { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
  .cal-mobile-empty-d { font-size: 13px; }
}

/* ---- banner creator (Studio) ---- */
.banner-templates { display: flex; gap: 8px; flex-wrap: wrap; }
.banner-tpl {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600;
  text-transform: capitalize; color: var(--ink);
}
.banner-tpl.on { border-color: var(--primary); background: #eef2ff; }
.banner-tpl-sw {
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line);
}
.banner-canvas {
  width: 100%; max-width: 820px; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 10px; margin: 14px 0;
  cursor: move; touch-action: none;
}
.banner-canvas.is-draw { cursor: crosshair; }

.studio-controls { display: grid; gap: 10px; margin-bottom: 14px; }
.sc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-label {
  font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 132px;
}
.sc-text {
  flex: 1; min-width: 200px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.sc-mini { font-size: 11.5px; color: var(--muted); }
.studio-controls input[type="color"] {
  width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); cursor: pointer;
}
.studio-controls input[type="range"] { flex: 1; min-width: 120px; max-width: 260px; }
.studio-controls select {
  padding: 8px 32px 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit;
}
.sc-show {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.sc-show input { width: auto; cursor: pointer; }
.photo-canvas {
  width: 340px; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px; margin: 14px 0;
  cursor: move; touch-action: none; background: var(--bg-alt);
}
.meme-canvas {
  width: 100%; max-width: 460px; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px; margin: 14px 0;
  background: var(--bg-alt);
}

/* ---- text formatter toolbar ---- */
.fmt-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.fmt-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.fmt-btn:hover { background: var(--bg-alt); border-color: var(--primary); }
.fmt-btn.fmt-b { font-weight: 800; }
.fmt-btn.fmt-i { font-style: italic; }
.fmt-btn.fmt-u { text-decoration: underline; }
.fmt-btn.fmt-s { text-decoration: line-through; }
.fmt-btn.fmt-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.fmt-hint { font-size: 11.5px; color: var(--muted); margin-left: 6px; }

/* ---- merge-field glossary (New campaign modal) ---- */
.merge-glossary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
  line-height: 2;
}
.merge-glossary span { display: inline-block; margin-right: 12px; }
.merge-glossary code {
  background: #eef2ff;
  color: var(--primary-dark);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

/* ---- insights charts ---- */
.chart-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.chart-max { font-size: 11px; fill: var(--muted); font-weight: 700; }
.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.funnel-row:last-child { margin-bottom: 0; }
.funnel-label { width: 96px; font-size: 13px; font-weight: 600; color: var(--ink); }
.funnel-bar {
  flex: 1; height: 24px; background: var(--bg-alt);
  border-radius: 6px; overflow: hidden;
}
.funnel-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.funnel-n {
  width: 44px; text-align: right; font-weight: 800; font-size: 14px;
  color: var(--ink);
}

/* ---- daily limits sliders ---- */
.limits-grid { display: grid; gap: 16px; margin: 16px 0; }
.limit-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.limit-label { font-size: 13.5px; font-weight: 600; color: var(--ink); flex: 1; }
.limit-val {
  font-size: 15px; font-weight: 800; color: var(--ink); min-width: 32px;
  text-align: right;
}
.limit-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.limit-badge.safe { background: #dcfce7; color: #15803d; }
.limit-badge.moderate { background: #fef3c7; color: #b45309; }
.limit-badge.risky { background: #fee2e2; color: #b91c1c; }
.limit-slider {
  width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg,
    #16a34a 0%, #16a34a 45%, #d97706 45%, #d97706 70%, #dc2626 70%);
}
.limit-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--primary); cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.limit-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--primary); cursor: pointer;
}

/* ---- Studio polish: centered tools, balanced spacing ---- */
.plan-features {
  list-style: none; margin: 14px 0; padding: 0;
  display: grid; gap: 7px; text-align: left;
}
.plan-features li {
  font-size: 13px; color: var(--muted); padding-left: 20px; position: relative;
}
.plan-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800;
}
.banner-templates { justify-content: center; }
.banner-canvas, .photo-canvas, .meme-canvas {
  margin-left: auto; margin-right: auto;
}
.studio-controls { max-width: 720px; margin-left: auto; margin-right: auto; }
#bnDownload, #phDownload, #memeDownload {
  display: block; margin: 4px auto 0;
}

/* ---- branded file inputs ---- */
input[type="file"] {
  font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 8px; background: var(--bg-alt); max-width: 100%;
}
input[type="file"]:hover { border-color: var(--primary); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 800; font-size: 12.5px;
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: 8px;
  padding: 9px 16px; margin-right: 12px; cursor: pointer;
  box-shadow: 0 4px 12px -5px rgba(79, 70, 229, .6);
  transition: filter .15s ease, transform .1s ease;
}
input[type="file"]::file-selector-button:hover { filter: brightness(1.12); }
input[type="file"]::file-selector-button:active { transform: scale(.97); }
input[type="file"]::-webkit-file-upload-button {
  font: inherit; font-weight: 800; font-size: 12.5px;
  background: var(--primary); color: #fff; border: none;
  border-radius: 8px; padding: 9px 16px; margin-right: 12px; cursor: pointer;
}

/* ---- media upload + studio video ---- */
.composer-file-label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 9px; padding: 10px 12px;
  margin-bottom: 10px;
}
.composer-file-label input[type="file"] {
  margin-top: 6px; font-weight: 400; border: none; padding: 0;
  background: none;
}
.studio-input, .studio-textarea {
  display: block; width: 100%; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
  margin-bottom: 10px;
}
.studio-textarea { min-height: 90px; resize: vertical; }
.media-preview { margin-bottom: 12px; }
.media-preview-el {
  display: block; max-width: 100%; max-height: 280px; border-radius: 10px;
  border: 1px solid var(--line); margin-bottom: 8px;
}

/* ---- hashtag creator ---- */
.ht-result {
  margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px;
}
.ht-group { margin-bottom: 12px; }
.ht-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 800; color: var(--muted); margin-bottom: 6px;
}
.ht-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-tag {
  font-size: 12.5px; font-weight: 700; border: 1px solid var(--line);
  background: var(--surface); color: var(--primary-dark); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
}
.ht-tag:hover { border-color: var(--primary); }
.ht-tag.on {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ---- nicer select boxes (applies everywhere) ---- */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: inherit; color: var(--ink); cursor: pointer; line-height: 1.3;
  padding: 10px 38px 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  background-size: 13px;
}
select:hover { border-color: var(--primary); }
select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.modal select { width: 100%; }

/* ---- step-by-step field hints ---- */
.field-hint {
  font-size: 12px; color: var(--muted); margin: -1px 0 7px; line-height: 1.5;
}
.modal-intro {
  font-size: 13px; color: var(--muted); margin: -6px 0 6px; line-height: 1.5;
}
.step-tag {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 10.5px; font-weight: 800; border-radius: 5px;
  padding: 1px 6px; margin-right: 6px; vertical-align: 1px;
}

/* ---- auto-comment rules ---- */
.rule-grid { display: grid; gap: 12px; }
.rule-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 15px;
  background: var(--surface);
}
.rule-card.off { opacity: .6; }
.rule-card-top {
  display: flex; justify-content: space-between; gap: 12px;
  align-items: flex-start;
}
.rule-name { font-weight: 800; font-size: 14.5px; }
.rule-meta {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.rule-chip {
  font-size: 11.5px; font-weight: 700; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.rule-chip.ai { background: #eef2ff; border-color: #c7d2fe;
  color: var(--primary-dark); }
.rule-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.cr-approve {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 2px;
  font-size: 13px; color: var(--ink); font-weight: 600; cursor: pointer;
}
.cr-approve input { width: auto; margin-top: 2px; flex: none; cursor: pointer; }

/* ---- auto-liker reaction picker ---- */
.reaction-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 4px;
}
.reaction-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 700;
  color: var(--ink);
}
.reaction-opt:hover { border-color: var(--primary); }
.reaction-opt.on {
  border-color: var(--primary); background: #eef2ff;
  box-shadow: 0 0 0 1px var(--primary);
}
.reaction-emoji { font-size: 20px; line-height: 1; }

/* ---- table row action buttons ---- */
.row-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}

/* ---- UX polish: focus rings + active nav accent ---- */
input[type="text"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="search"]:focus, input[type="password"]:focus,
textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}

/* ---- date+time picker pair (split, narrower than full-width) ----
   Mark's feedback (2026-05-29): the datetime-local input was stretching
   to full container width — felt out of place next to small Schedule
   buttons. Split it into a Date column + Time column, label each, and
   cap the row at ~360px. Stacks below 420px so mobile still works. */
.dt-pair {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  max-width: 380px; margin: 6px 0 10px;
}
.dt-pair .dt-col { display: flex; flex-direction: column; min-width: 0; }
.dt-pair .dt-col label {
  font-size: 11px; font-weight: 700; color: var(--muted, #64748b);
  letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 3px;
}
.dt-pair input[type="date"]  { width: 180px; max-width: 100%; }
.dt-pair input[type="time"]  { width: 130px; max-width: 100%; }
.dt-pair .dt-tz {
  font-size: 11.5px; color: var(--muted, #64748b);
  margin-left: 2px; align-self: center; padding-bottom: 8px;
}
@media (max-width: 420px) {
  .dt-pair { flex-direction: column; align-items: stretch; max-width: 100%; }
  .dt-pair input[type="date"], .dt-pair input[type="time"] { width: 100%; }
}

/* Bare datetime-local fallback for the remaining sites: cap width so it
   doesn't dominate panels. */
input[type="datetime-local"] {
  max-width: 260px;
}
.side-item { position: relative; }
.side-item.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--primary), var(--accent));
}

/* ---- carousel maker ---- */
.carousel-canvas {
  width: 380px; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 12px;
  margin: 14px auto 10px; background: var(--bg-alt);
}
.carousel-nav {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.car-dot {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 800; font-size: 12px; color: var(--muted);
}
.car-dot.on {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* ---- poll creator ---- */
.poll-q { font-weight: 700; font-size: 14px; margin: 4px 0 10px; }
.poll-opt-pv {
  border: 1.5px solid var(--primary); border-radius: 999px;
  padding: 8px 14px; margin-bottom: 7px; font-size: 13px;
  font-weight: 600; color: var(--primary-dark); text-align: center;
}

/* ---- jobs module ---- */
.jobs-lock { text-align: center; max-width: 540px; margin: 0 auto; }
.jobs-lock .po-checks {
  text-align: left; display: inline-grid; margin-left: auto;
  margin-right: auto;
}
.jobs-price { margin: 4px 0 14px; }
.jobs-amt {
  font-size: 42px; font-weight: 800; color: var(--primary);
  line-height: 1;
}
.jobs-price span:last-child {
  color: var(--muted); font-weight: 700; font-size: 15px;
}
.app-status-sel { padding: 6px 28px 6px 10px; font-size: 12.5px; }

/* ---- events & webinars ---- */
.event-list { display: grid; gap: 10px; }
.event-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.event-banner {
  display: block; width: 100%; height: 150px; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.event-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
}
.event-when {
  flex: none; width: 54px; text-align: center;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 0;
}
.event-month {
  display: block; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--primary);
}
.event-day { display: block; font-size: 20px; font-weight: 800; }
.event-main { flex: 1; min-width: 0; }
.event-name {
  font-weight: 800; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.event-time { font-size: 12px; color: var(--muted); font-weight: 600; }
.event-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
@media (max-width: 600px) {
  .event-row { flex-wrap: wrap; }
  .event-actions { width: 100%; }
}

/* ---- insights: profile growth log ---- */
.li-log-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 4px;
}
.li-log-grid input { margin-bottom: 0; }
@media (max-width: 600px) {
  .li-log-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- insights: week-over-week ---- */
.wow-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 600px) { .wow-grid { grid-template-columns: 1fr 1fr; } }
.wow-item {
  border: 1px solid var(--line); border-radius: 10px; padding: 13px;
}
.wow-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
}
.wow-num { font-size: 26px; font-weight: 800; margin: 3px 0; }
.wow-delta { font-size: 12px; font-weight: 700; color: var(--muted); }
.wow-delta.up { color: #16a34a; }
.wow-delta.down { color: #dc2626; }

/* ---- admin mini bar chart ---- */
.mini-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 92px;
  padding-top: 6px;
}
.mini-bars span {
  flex: 1; min-height: 2px; display: block;
  border-radius: 3px 3px 0 0;
}

/* ---- home / daily command center ---- */
.home-hello { margin-bottom: 14px; }
.home-hello h1 { margin-bottom: 2px; }
.home-hello .desc { margin: 0; }
.home-todo { list-style: none; display: grid; gap: 8px; }
.home-todo li {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  background: var(--surface);
}
.home-todo li:hover {
  background: var(--bg-alt); border-color: var(--primary);
}
.home-todo-text { flex: 1; font-size: 13.5px; font-weight: 600; }
.home-todo-arrow { color: var(--muted); font-weight: 800; }
.home-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.home-action {
  border: 1px solid var(--line); border-radius: 10px; padding: 15px 12px;
  background: var(--surface); cursor: pointer; font-weight: 700; font-size: 13.5px;
  color: var(--ink); text-align: center;
  transition: transform .14s ease, box-shadow .14s ease,
    border-color .14s ease;
}
.home-action:hover {
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .4);
}
@media (max-width: 600px) {
  .home-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .reaction-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- profile optimizer ---- */
.po-score {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
}
.po-score-num { font-size: 38px; font-weight: 800; line-height: 1; }
.po-score-num span { font-size: 16px; color: var(--muted); font-weight: 700; }
.po-score-label { font-size: 13px; color: var(--muted); font-weight: 700; }
.po-good .po-score-num { color: #16a34a; }
.po-mid .po-score-num { color: #d97706; }
.po-low .po-score-num { color: #dc2626; }
.po-checks { list-style: none; display: grid; gap: 8px; }
.po-checks li {
  display: flex; gap: 8px; font-size: 13px; align-items: flex-start;
}
.po-mark { font-weight: 800; flex: none; }
.po-checks li.ok .po-mark { color: #16a34a; }
.po-checks li.no .po-mark { color: #dc2626; }
.po-checks li.no { color: var(--muted); }

/* ---- safety & warm-up ---- */
.head-actions { display: flex; gap: 8px; }
.sf-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0;
}
.sf-grid select, .sf-grid input { width: 100%; }
.sf-status {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; font-size: 13px;
}
.sf-eff {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px;
  color: var(--muted); font-size: 12.5px;
}
.sf-eff b { color: var(--ink); }
@media (max-width: 600px) { .sf-grid { grid-template-columns: 1fr; } }

/* ---- integrations / webhooks ---- */
.wh-url {
  font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo,
  monospace; margin-top: 3px; word-break: break-all;
}
.wh-events {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}
.wh-ev {
  display: flex; gap: 7px; align-items: center; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.wh-ev input { width: auto; cursor: pointer; }
@media (max-width: 540px) { .wh-events { grid-template-columns: 1fr; } }

/* ---- A/B test variants ---- */
.variant-row { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; }
.variant-tag {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.variant-row .m-variant { flex: 1; }
#mAddVariant { margin-bottom: 4px; }
.ab-variant {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px;
}
.ab-variant.win { border-color: var(--ok); background: #f0fdf4; }
.ab-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ab-win {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #15803d; background: #dcfce7;
  border-radius: 999px; padding: 2px 9px;
}
.ab-stats {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink);
}
.ab-note {
  font-size: 13px; color: var(--muted); white-space: pre-wrap;
  word-break: break-word; margin-bottom: 8px;
}

/* ---- onboarding checklist ---- */
.onboard { border-color: #c7d2fe; background: #fbfcff; }
.onboard-top {
  display: flex; align-items: center; justify-content: space-between;
}
.onboard-dismiss {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12.5px; font-weight: 700;
}
.onboard-dismiss:hover { color: var(--ink); }
.onboard-bar {
  height: 7px; background: #e2e8f0; border-radius: 999px; overflow: hidden;
  margin-top: 10px;
}
.onboard-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.onboard-steps { list-style: none; display: grid; gap: 8px; }
.onboard-steps li {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; background: var(--surface);
}
.onboard-steps li.done { opacity: .6; }
.onboard-check {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  background: var(--bg-alt); color: var(--muted);
  border: 1px solid var(--line);
}
.onboard-steps li.done .onboard-check {
  background: var(--ok); color: #fff; border-color: var(--ok);
}
.onboard-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.onboard-steps li.done .onboard-label {
  text-decoration: line-through; color: var(--muted);
}

/* ---- managed accounts (agency) ---- */
.toolbar-select { padding: 9px 34px 9px 12px; }
.acct-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px;
}
.acct-card.off { opacity: .6; }
.acct-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.acct-avatar {
  width: 40px; height: 40px; border-radius: 10px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.acct-name {
  font-weight: 800; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-sub {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--bg-alt); border-radius: 10px; padding: 10px;
  margin-bottom: 12px;
}
.acct-stats div { text-align: center; }
.acct-stats b { display: block; font-size: 18px; font-weight: 800; }
.acct-stats span { font-size: 11px; color: var(--muted); font-weight: 700; }
.acct-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.color-row { display: flex; gap: 8px; margin-bottom: 6px; }
.color-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0;
}
.color-dot.on { box-shadow: 0 0 0 2px var(--ink); }

/* ---- sequence step builder ---- */
.seq-step {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  margin-bottom: 8px; background: var(--bg-alt);
}
.seq-step-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.seq-step-action { font-weight: 800; font-size: 13px; }
.seq-step-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.seq-step-del:hover { color: #dc2626; }
.seq-step-fields { display: flex; flex-direction: column; gap: 8px; }
.seq-mini {
  font-size: 12px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.seq-mini .seq-delay { width: 64px; }
.seq-text {
  width: 100%; min-height: 60px; resize: vertical; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.sq-add { display: flex; gap: 8px; margin: 4px 0 4px; }
.sq-add select { flex: 1; }

/* ---- Chrome extension install banner ---- */
.ext-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 18px 20px 0; text-decoration: none;
  background: linear-gradient(120deg, var(--primary), var(--primary-dark));
  color: #fff; border-radius: 12px; padding: 13px 18px;
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .6);
}
.ext-banner:hover { filter: brightness(1.07); }
.ext-banner-msg {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 14px;
}
.ext-banner-msg svg { width: 22px; height: 22px; flex: none; }
.ext-banner-cta {
  background: var(--surface); color: var(--primary-dark); font-weight: 800;
  font-size: 13.5px; border-radius: 8px; padding: 9px 16px; flex: none;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .ext-banner {
    margin: 12px 13px 0; flex-direction: column; align-items: stretch;
    text-align: center;
  }
  .ext-banner-msg { justify-content: center; }
}

/* ---- mobile / responsive ---- */
@media (max-width: 760px) {
  .dash { flex-direction: column; }
  .sidebar {
    width: 100%; border-right: none; border-bottom: 1px solid var(--line);
  }
  .sidebar-logo { display: none; }
  .side-nav {
    display: flex; flex-direction: row; overflow-x: auto;
    padding: 8px 10px; gap: 4px; scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-item { width: auto; white-space: nowrap; padding: 8px 12px; }
  .side-label, #recentList { display: none; }
  .composer-grid { grid-template-columns: 1fr; }
  .cal-cell { min-height: 60px; }
  .content { padding: 16px 13px; }
  .content h1 { font-size: 1.3rem; }
  .topbar { padding: 0 12px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { padding: 0 11px; font-size: 13.5px; white-space: nowrap; }
  .userbox .umail { display: none; }
  .tablecard { overflow-x: auto; }
  thead th, tbody td { white-space: nowrap; }
  .sc-label { min-width: 100%; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .stat-row { grid-template-columns: 1fr; }
  .userbox .uname { display: none; }
}

/* ===========================================================================
   Back office — pipeline, inbox, notifications, automations, templates, AI
   =========================================================================== */

.tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

.view-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.view-head h1 { margin-bottom: 0; }
.head-badge {
  display: inline-block; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 800; border-radius: 999px;
  padding: 1px 9px; vertical-align: middle;
}
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.badge {
  display: inline-block; background: #eef2ff; color: var(--primary-dark);
  font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 3px 9px; text-transform: capitalize;
}

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 10px; z-index: 200;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .5);
  opacity: 0; transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { background: #b91c1c; }

/* ---- notification bell ---- */
.bell-wrap { position: relative; }
.bell-btn {
  position: relative; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.bell-btn:hover { background: var(--bg-alt); }
.bell-btn svg { width: 18px; height: 18px; }
.bell-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 5px; border: 2px solid #fff;
}
.bell-menu {
  position: absolute; top: 48px; right: 0; width: 340px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 20px 44px -18px rgba(15, 23, 42, .4);
  display: none; z-index: 120; overflow: hidden;
}
.bell-wrap.open .bell-menu { display: block; }
.bell-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-weight: 800; font-size: 14px;
}
.bell-mark {
  background: none; border: none; color: var(--primary); cursor: pointer;
  font-size: 12px; font-weight: 700;
}
.bell-list { max-height: 380px; overflow-y: auto; }
.bell-empty { padding: 30px 16px; text-align: center; color: var(--muted);
  font-size: 13px; }
.notif-row {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--bg-alt); }
.notif-row.unread { background: #f5f7ff; }
.notif-ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
}
.notif-info { background: #94a3b8; }
.notif-alert { background: #f59e0b; }
.notif-reply { background: #0ea5e9; }
.notif-post { background: var(--primary); }
.notif-accepted { background: #16a34a; }
.notif-title { font-size: 13px; font-weight: 700; }
.notif-body { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---- pipeline kanban ---- */
.kanban {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px;
  align-items: flex-start;
}
.kan-col {
  flex: 0 0 248px; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px;
}
.kan-head {
  display: flex; align-items: center; gap: 7px; font-weight: 700;
  font-size: 13px; margin-bottom: 10px; padding: 2px;
}
.kan-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kan-label { flex: 1; }
.kan-count {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; padding: 1px 8px; font-weight: 800;
}
.kan-val { font-size: 11px; color: var(--muted); font-weight: 700; }
.kan-body { min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.kan-body.over { outline: 2px dashed var(--primary); outline-offset: 2px;
  border-radius: 8px; }
.kan-empty {
  font-size: 12px; color: #b0b9c6; text-align: center; padding: 16px 6px;
  border: 1px dashed var(--line); border-radius: 8px;
}
.pipe-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; cursor: grab; box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.pipe-card:hover { border-color: var(--primary); }
.pipe-card.dragging { opacity: .45; }
.pipe-name { font-weight: 700; font-size: 13.5px; }
.pipe-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.pipe-val {
  font-size: 12.5px; font-weight: 800; color: #15803d; margin-top: 5px;
}
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.crm-tag {
  font-size: 10.5px; font-weight: 700; background: #eef2ff;
  color: var(--primary-dark); border-radius: 5px; padding: 2px 6px;
}
.pipe-due {
  font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 7px;
}
.pipe-due.over { color: #b91c1c; }

/* ---- inbox ---- */
.inbox {
  display: grid; grid-template-columns: 320px 1fr;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
  height: calc(100vh - 210px); min-height: 460px;
}
.inbox-list {
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  min-width: 0;
}
.inbox-folders {
  display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line);
}
.inbox-folder {
  flex: 1; padding: 6px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--muted);
}
.inbox-folder.on { background: #eef2ff; color: var(--primary-dark);
  border-color: var(--primary); }
.inbox-rows { flex: 1; overflow-y: auto; }
.inbox-empty-list, .msg-empty {
  padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13px;
}
.thread-row {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.thread-row:hover { background: var(--bg-alt); }
.thread-row.on { background: #eef2ff; }
.thread-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.thread-main { min-width: 0; flex: 1; }
.thread-top { display: flex; justify-content: space-between; gap: 8px; }
.thread-name { font-weight: 700; font-size: 13.5px; }
.thread-row.unread .thread-name::after {
  content: ""; display: inline-block; width: 7px; height: 7px;
  background: var(--primary); border-radius: 50%; margin-left: 6px;
}
.thread-time { font-size: 11px; color: var(--muted); flex: none; }
.thread-preview {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-thread { display: flex; flex-direction: column; min-width: 0; }
.inbox-placeholder {
  margin: auto; text-align: center; max-width: 340px; padding: 30px;
  color: var(--muted);
}
.inbox-placeholder h3 { color: var(--ink); margin-bottom: 8px; }
.inbox-placeholder p { font-size: 13px; }
.thread-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.thread-head-name { font-weight: 800; font-size: 14.5px; }
.thread-head-sub { font-size: 12.5px; color: var(--muted); }
.thread-head-actions { display: flex; gap: 8px; align-items: center; }
.thread-folder-sel {
  padding: 7px 30px 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 12.5px;
}
.msg-scroll {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; background: var(--bg-alt);
}
.msg { max-width: 75%; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; }
.msg-body {
  padding: 9px 13px; border-radius: 12px; font-size: 13.5px;
  white-space: pre-wrap; word-break: break-word;
}
.msg.in .msg-body {
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}
.msg.out .msg-body {
  background: var(--primary); color: #fff; border-bottom-right-radius: 3px;
}
.msg-time { font-size: 10.5px; color: var(--muted); margin-top: 3px;
  padding: 0 4px; }
.msg.out .msg-time { text-align: right; }
.inbox-compose { border-top: 1px solid var(--line); padding: 12px 14px; }
.inbox-compose textarea {
  width: 100%; min-height: 64px; resize: vertical; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
}
.inbox-compose-bar {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.inbox-compose-hint { font-size: 11px; color: var(--muted); margin-top: 7px; }
.ai-status { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---- automations ---- */
.auto-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 720px) { .auto-grid { grid-template-columns: 1fr; } }
.auto-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px;
}
.auto-card.off { opacity: .6; }
.auto-card-top {
  display: flex; justify-content: space-between; gap: 12px;
}
.auto-name { font-weight: 800; font-size: 14.5px; }
.auto-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
}
.auto-chip {
  font-size: 11.5px; font-weight: 700; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}
.auto-chip.auto-wait { background: #fef3c7; border-color: #fde68a;
  color: #b45309; }
.auto-chip.auto-do { background: #eef2ff; border-color: #c7d2fe;
  color: var(--primary-dark); }
.auto-arrow { color: var(--muted); font-weight: 800; }
.auto-text {
  font-size: 12.5px; color: var(--muted); margin-top: 10px;
  background: var(--bg-alt); border-radius: 8px; padding: 8px 10px;
}
.auto-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.switch { position: relative; display: inline-block; width: 40px; height: 22px;
  flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  cursor: pointer; transition: .2s;
}
.switch-track::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px;
  top: 3px; background: var(--surface); border-radius: 50%; transition: .2s;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* ---- templates ---- */
.tpl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px) { .tpl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px; display: flex; flex-direction: column;
}
.tpl-card-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.tpl-name { font-weight: 800; font-size: 14px; }
.tpl-body {
  font-size: 12.5px; color: var(--muted); white-space: pre-wrap;
  word-break: break-word; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tpl-foot {
  display: flex; align-items: center; gap: 4px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line);
}

/* ---- AI writer panel ---- */
.ai-panel { border-color: #c7d2fe; }
.ai-panel textarea {
  width: 100%; min-height: 70px; resize: vertical; font: inherit;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
}
.ai-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
.ai-result {
  margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 14px;
}
.ai-text {
  white-space: pre-wrap; word-break: break-word; font: inherit;
  font-size: 13.5px; background: var(--bg-alt); border-radius: 9px;
  padding: 13px; margin: 0;
}
.ai-result-actions { display: flex; gap: 8px; margin-top: 10px; }
.ai-variant {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 7px;
  font-size: 13px;
}
.ai-variant span { flex: 1; }

@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; height: auto; }
  .inbox-list { border-right: none; border-bottom: 1px solid var(--line);
    max-height: 300px; }
  .auto-grid { grid-template-columns: 1fr; }
}

/* ---- command palette (Ctrl/Cmd + K) ------------------------------------- */
.cmd-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 9px; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 600;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.cmd-trigger:hover {
  border-color: var(--primary); color: var(--ink);
  box-shadow: 0 2px 8px rgba(79, 70, 229, .12);
}
.cmd-trigger svg { width: 15px; height: 15px; }
.cmd-trigger-kbd {
  font: 600 11px ui-monospace, monospace; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px;
}
@media (max-width: 760px) {
  .cmd-trigger-txt, .cmd-trigger-kbd { display: none; }
}
.cmd-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; animation: cmdFade .12s ease;
}
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-box {
  width: min(560px, 92vw); background: var(--surface);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: cmdPop .14s ease;
}
@keyframes cmdPop {
  from { transform: translateY(-8px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.cmd-input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  padding: 17px 20px; font-size: 15px; color: var(--ink);
  outline: none;
}
.cmd-input::placeholder { color: var(--muted); }
.cmd-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 9px; cursor: pointer;
}
.cmd-item.on { background: var(--primary); }
.cmd-item.on .cmd-label { color: #fff; }
.cmd-item.on .cmd-sub { color: var(--lavender, #c7d2fe); }
.cmd-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.cmd-sub {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.cmd-empty {
  padding: 24px; text-align: center; color: var(--muted);
  font-size: 13px;
}

/* ---- buttons: extra sizes + danger -------------------------------------- */
.btn--xs {
  padding: 5px 10px; font-size: 12px; border-radius: 8px; gap: 5px;
}
.btn--danger {
  background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.btn--danger:hover { background: #fee2e2; border-color: #fca5a5; }

/* ---- Watchtower (competitive intelligence) ------------------------------ */
.wt-empty .wt-steps {
  margin: 0 0 16px; padding-left: 20px; color: var(--muted);
  font-size: 14px; line-height: 1.9;
}
.wt-empty .wt-steps strong { color: var(--ink); }

.wt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.wt-card {
  border: 1px solid var(--line); border-radius: 13px; padding: 15px;
  background: var(--surface); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.wt-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .5);
  transform: translateY(-2px);
}
.wt-card-top { display: flex; gap: 12px; align-items: center; }
.wt-av {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  flex: none; border: 1px solid var(--line);
}
.wt-av--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 800;
  font-size: 15px;
}
.wt-av--lg { width: 76px; height: 76px; font-size: 24px; }
.wt-card-id { min-width: 0; flex: 1; }
.wt-card-name {
  font-weight: 700; font-size: 15px; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.wt-dot {
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wt-card-head {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px;
  font-size: 12.5px; color: var(--muted);
}
.wt-tag {
  background: #eef2ff; color: var(--primary); font-weight: 700;
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
}
.wt-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 13px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.wt-when { font-size: 12px; color: var(--muted); }
.wt-card-actions { display: flex; gap: 6px; flex: none; }

.wt-feed { display: flex; flex-direction: column; gap: 2px; }
.wt-change {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 10px; border-radius: 9px; border-left: 3px solid transparent;
}
.wt-change[data-watch-open] { cursor: pointer; }
.wt-change:hover { background: var(--bg-alt); }
.wt-change.is-new {
  background: #f5f3ff; border-left-color: var(--primary);
}
.wt-chip {
  flex: none; color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  margin-top: 1px;
}
.wt-change-body { flex: 1; min-width: 0; }
.wt-change-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.wt-change-text {
  font-size: 13px; color: var(--muted); margin-top: 1px;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.wt-change-when {
  flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap;
}

.wt-profile {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
.wt-profile-id { flex: 1; min-width: 220px; }
.wt-profile-act { display: flex; flex-direction: column; gap: 8px; }
.wt-toppost {
  border-left: 3px solid var(--primary);
}
.wt-toppost-tag {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primary);
}
.wt-fmt {
  background: var(--bg-alt); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  padding: 2px 8px; border-radius: 999px;
}
@media (max-width: 600px) {
  .wt-grid { grid-template-columns: 1fr; }
  .wt-profile-act { flex-direction: row; width: 100%; }
}

/* ---- banner presets + media library ------------------------------------ */
.banner-presets {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px;
}
.preset-btn {
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; transition: .15s;
}
.preset-btn:hover { border-color: var(--primary); }
.preset-btn.on {
  border-color: var(--primary); background: #eef2ff;
  box-shadow: 0 2px 8px -3px rgba(79, 70, 229, .5);
}
.preset-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.preset-dim { font-size: 11px; color: var(--muted); }
.preset-btn.on .preset-name { color: var(--primary); }

.banner-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.banner-cta-txt { flex: 1; min-width: 240px; }

.media-grid {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.media-item {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.media-thumb {
  display: block; aspect-ratio: 16 / 9; background: var(--bg-alt);
  overflow: hidden;
}
.media-thumb img {
  width: 100%; height: 100%; object-fit: contain;
}
.media-meta {
  padding: 9px 11px 4px; display: flex; flex-direction: column; gap: 1px;
}
.media-name {
  font-weight: 700; font-size: 13px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-dim { font-size: 11.5px; color: var(--muted); }
.media-actions {
  display: flex; gap: 6px; padding: 8px 11px 11px; margin-top: auto;
}
.media-actions .btn { flex: 1; justify-content: center; }

/* ---- plan gating — locked (free) accounts ------------------------------- */
.side-lock {
  margin-left: auto; display: inline-flex; flex: none; color: #94a3b8;
}
.side-lock svg { width: 13px; height: 13px; }
.side-item.is-locked { color: var(--muted); }
.side-item.is-locked .ic { opacity: .55; }
.side-item.is-locked:hover .side-lock { color: var(--primary); }

.lock-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, #4f46e5, #3730a3);
  color: #fff; border-radius: 13px; padding: 14px 18px; margin-bottom: 16px;
  box-shadow: 0 10px 26px -14px rgba(79, 70, 229, .75);
}
.lock-banner-txt {
  font-size: 13.5px; line-height: 1.5; flex: 1; min-width: 220px;
  color: #e0e7ff;
}
.lock-banner-txt strong { color: #fff; }
.lock-banner .btn--primary { background: var(--surface); color: var(--primary); }
.lock-banner .btn--primary:hover { background: #eef2ff; }

/* Little lock glyph on every gated primary CTA. */
#dash.view-locked #view .btn--primary:not(.js-upgrade)::after,
#view .tier-locked .btn--primary:not(.js-upgrade)::after {
  content: "🔒"; font-size: .82em; line-height: 1; margin-left: 1px;
}
/* Sub-feature panels above the account's plan. */
.tier-locked > h2::after {
  content: "🔒"; font-size: .8em; margin-left: 6px;
}

/* Upgrade modal plan cards. */
.upgrade-plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
  margin: 8px 0 4px;
}
.upgrade-plan {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 13px;
  position: relative; display: flex; flex-direction: column;
}
.upgrade-plan.is-pop {
  border-color: var(--primary);
  box-shadow: 0 8px 22px -12px rgba(79, 70, 229, .55);
}
.upgrade-pop {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px;
  border-radius: 999px; white-space: nowrap;
}
.upgrade-plan h3 { margin: 2px 0 0; font-size: 15px; }
.upgrade-price {
  font-size: 24px; font-weight: 800; color: var(--ink); margin: 2px 0 8px;
}
.upgrade-price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.upgrade-plan ul { list-style: none; margin: 0 0 12px; padding: 0; flex: 1; }
.upgrade-plan li {
  font-size: 12px; color: var(--muted); padding: 3px 0 3px 15px;
  position: relative; line-height: 1.4;
}
.upgrade-plan li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px;
  height: 6px; border-radius: 50%; background: var(--primary);
}
.upgrade-plan .btn { width: 100%; justify-content: center; }
@media (max-width: 620px) {
  .upgrade-plans { grid-template-columns: 1fr; }
}

/* ---- payment modal: price, wallets, promo ------------------------------ */
.pay-price { display: flex; align-items: center; gap: 9px; margin: 2px 0 4px; }
.pay-now { font-size: 26px; font-weight: 800; color: var(--ink); }
.pay-was {
  font-size: 16px; color: var(--muted); text-decoration: line-through;
}
.pay-badge {
  background: #dcfce7; color: #15803d; font-size: 11.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
}
.pay-wallets { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.pay-wallets:empty { margin: 0; }
.wallet-slot { min-height: 44px; }
.wallet-btn {
  height: 44px; border: 0; border-radius: 9px; cursor: pointer;
  font-weight: 600; font-size: 15px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wallet-apple { background: #000; color: #fff; }
.wallet-apple::before { content: "\F8FF"; font-size: 17px; }
.pay-or {
  text-align: center; border-top: 1px solid var(--line); margin: 6px 0 12px;
}
.pay-or span {
  position: relative; top: -10px; background: var(--surface); padding: 0 10px;
  font-size: 12px; color: var(--muted);
}
.pay-card { margin: 4px 0 12px; min-height: 90px; }
.promo-row { display: flex; gap: 8px; margin-top: 4px; }
.promo-row input {
  flex: 1; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px;
}
.promo-row input:disabled { background: var(--bg-alt); color: var(--muted); }
.promo-msg { font-size: 12.5px; margin-top: 6px; min-height: 16px; }
.promo-msg.is-ok { color: #15803d; }
.promo-msg.is-err { color: #b91c1c; }
.pay-err { color: #b91c1c; font-size: 13px; margin-top: 10px; }

/* ---- /demo subtle reminder bar -----------------------------------------
   Lighter than the previous gradient block - thin pill-style strip with
   a Start free link + dismiss X. Designed to fade into the page so demo
   users don't feel pressured on every route change. */
.demo-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  color: var(--ink);
  border-radius: 10px;
  padding: 8px 14px; margin: 0 0 14px;
  font-size: 13px;
}
.demo-banner-txt { flex: 1; line-height: 1.4; color: var(--muted); }
.demo-banner-txt strong { color: var(--ink); font-weight: 700; }
.demo-banner-cta {
  font-weight: 700; font-size: 13px;
  color: var(--primary); text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(79, 70, 229, .08);
  white-space: nowrap;
}
.demo-banner-cta:hover { background: rgba(79, 70, 229, .15); }
.demo-banner-x {
  background: transparent; border: 0; padding: 4px 8px;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
  min-width: 32px; min-height: 32px;
  border-radius: 6px;
}
.demo-banner-x:hover { color: var(--ink); background: rgba(15, 23, 42, .05); }
:root[data-theme="dark"] .demo-banner-x:hover { background: rgba(255, 255, 255, .06); }
@media (max-width: 480px) {
  .demo-banner { font-size: 12.5px; padding: 7px 10px; gap: 8px; }
  .demo-banner-cta { padding: 5px 10px; font-size: 12px; }
}

/* ---- branded dialogs (alert / confirm) --------------------------------- */
.ui-dialog-backdrop {
  /* Was z-index: 320 which sat BELOW the persona menu (1000) — clicking
     Cancel/Confirm landed on the menu instead. The dimmer would still
     paint but the buttons were dead. Bumped above every floater we own
     so nothing eats the click ever again. */
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: cmdFade .12s ease;
  /* Belt-and-suspenders: make sure no ancestor's pointer-events:none
     leaks down and disables the dialog. */
  pointer-events: auto;
}
.ui-dialog {
  background: var(--surface); border-radius: 16px; width: min(400px, 92vw);
  padding: 26px 26px 22px; text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  animation: cmdPop .14s ease; border-top: 4px solid var(--primary);
  position: relative; z-index: 1;
}
.ui-dialog-actions .btn { pointer-events: auto; cursor: pointer; }
.ui-dialog--confirm { border-top-color: #d97706; }
.ui-dialog-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.ui-dialog-icon svg { width: 24px; height: 24px; }
.ui-dialog--info .ui-dialog-icon { background: #eef2ff; color: var(--primary); }
.ui-dialog--confirm .ui-dialog-icon { background: #fef3c7; color: #d97706; }
.ui-dialog h3 {
  margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--ink);
}
.ui-dialog p {
  margin: 0 0 18px; font-size: 14px; color: var(--muted); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.ui-dialog-actions {
  display: flex; gap: 10px; justify-content: center;
}
.ui-dialog-actions .btn { min-width: 104px; justify-content: center; }

/* ---- show / hide password toggle --------------------------------------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border: 0; background: none; cursor: pointer;
  color: var(--muted); border-radius: 7px; padding: 0;
}
.pw-toggle:hover { color: var(--ink); background: var(--bg-alt); }
.pw-toggle svg { width: 18px; height: 18px; }

/* ---- theme toggle (Settings > Appearance) ----
   Segmented control. Inactive options are transparent and pick up --ink
   on whatever the surrounding container background happens to be. Active
   option lifts to --surface with a subtle shadow + outline so the user
   can SEE which theme they selected (the previous version relied on a
   `var(--bg)` background that blended into the container in dark mode).
*/
.theme-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 10px;
}
.theme-opt {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-weight: 600; font-size: 13px;
  padding: 6px 14px; border-radius: 7px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.theme-opt:hover { background: rgba(99,102,241,.08); }
.theme-opt:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.theme-opt.is-active {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary-dark);
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
:root[data-theme="dark"] .theme-opt.is-active {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ===========================================================================
   DARK-MODE SURFACE OVERRIDES (Coder Standards Manual §1 + §4)
   ===========================================================================
   Every surface in this file that hardcoded `background: #fff` would render
   white-on-dark in dark mode - text uses --ink (light slate) so the cards
   stay white and text disappears. Solution: per-class dark overrides that
   flip the surface to --surface (#131c33) while text + borders + tokens
   handle themselves via the existing token system.

   This block goes at the END so it wins over all the earlier rules.
   Adding new components? Set `background: var(--surface)` from the start
   so you don't need a dark override row here.
   =========================================================================== */
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .tablecard,
:root[data-theme="dark"] .stat-box,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .price-card,
:root[data-theme="dark"] .mock {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

/* Modal backdrop should stay dim, but the modal CARD itself flips. */
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .65); }

/* Topbar over the dashboard - lift slightly above body. */
:root[data-theme="dark"] .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* Side-nav items: hover + active backgrounds need to lift on dark. */
:root[data-theme="dark"] .side-item:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
}
:root[data-theme="dark"] .side-item.is-active {
  background: rgba(129, 140, 248, .15);  /* matches --primary tint */
  color: var(--ink);
}

/* Tablecard rows - keep the alternating-row look readable. */
:root[data-theme="dark"] .tablecard table tr:nth-child(even) {
  background: rgba(255, 255, 255, .025);
}
:root[data-theme="dark"] .tablecard table th,
:root[data-theme="dark"] .tablecard table td {
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .tablecard table th { background: var(--bg-alt); }

/* Small swatches / color pickers / tag inputs - dark surface variant. */
:root[data-theme="dark"] .swatch,
:root[data-theme="dark"] .color-input,
:root[data-theme="dark"] .pill {
  background: var(--bg-alt);
  border-color: var(--line);
}

/* Bottom tab bar already uses var(--bg) for dark via its own rule; no
   override needed here. */

/* Inputs inside dark-mode panels need a slightly-lifted bg or they
   blend into the surface. Site.css already handles raw inputs - this
   covers inputs nested in modals/panels where stacked context matters. */
:root[data-theme="dark"] .panel input,
:root[data-theme="dark"] .panel select,
:root[data-theme="dark"] .panel textarea,
:root[data-theme="dark"] .modal input,
:root[data-theme="dark"] .modal select,
:root[data-theme="dark"] .modal textarea {
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .panel input::placeholder,
:root[data-theme="dark"] .modal input::placeholder { color: var(--muted); }

/* Bottom tab bar dark adapt - was already in the original block above,
   but reinforce here in case theming switches after route(). */
:root[data-theme="dark"] .bottom-tabs {
  background: var(--surface);
  border-top-color: var(--line);
}

/* Light blue tinted "active/selected" states (#eef2ff) - in dark mode
   they become unreadable light blocks. Map them to a tinted dark surface
   so text using var(--primary-dark) still shows.
*/
:root[data-theme="dark"] .side-item.active,
:root[data-theme="dark"] .fdot.on,
:root[data-theme="dark"] .plan-opt.current,
:root[data-theme="dark"] .banner-tpl.on,
:root[data-theme="dark"] .rule-chip.ai,
:root[data-theme="dark"] .inbox-folder.on,
:root[data-theme="dark"] .thread-row.on,
:root[data-theme="dark"] .auto-chip.auto-do {
  background: rgba(129, 140, 248, .18);
  color: var(--ink);
  border-color: var(--primary);
}

/* Unread notification row - light blue tint that becomes light-on-light. */
:root[data-theme="dark"] .notif-row.unread {
  background: rgba(129, 140, 248, .12);
  color: var(--ink);
}

/* Onboard tile + .ab-variant.win - light-tinted backgrounds. */
:root[data-theme="dark"] .onboard {
  background: rgba(99, 102, 241, .08);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .ab-variant.win {
  background: rgba(34, 197, 94, .10);
  border-color: var(--ok, #22c55e);
  color: var(--ink);
}

/* Pill / accent backgrounds used as inline labels. */
:root[data-theme="dark"] .pill-accent,
:root[data-theme="dark"] .badge-accent {
  background: rgba(129, 140, 248, .18);
  color: var(--ink);
}

/* Lock-banner "upgrade" white pill needs adaptive surface. */
:root[data-theme="dark"] .lock-banner .btn--primary {
  background: var(--surface); color: var(--primary);
}
:root[data-theme="dark"] .lock-banner .btn--primary:hover {
  background: rgba(129, 140, 248, .15);
}

/* Topbar text - keep readable on lifted surface. */
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .topbar a,
:root[data-theme="dark"] .topbar button { color: var(--ink); }

/* Calendar wrap doesn't need a bg of its own; cells own the surface. */
:root[data-theme="dark"] .cal-wrap { background: transparent; }

/* Light-mode sweep: make sure NO container that uses var(--surface) ends
   up with white text on white. var(--ink) is dark slate in light mode by
   default - this just guards any place we wrote color:#fff inline for a
   container background we have now flipped to var(--surface). */
.card, .panel, .modal, .price-card, .mock, .tablecard, .stat-box,
.cal-cell:not(.empty) {
  color: var(--ink);
}

/* =========================================================================
   COMMAND CENTER — live LinkedIn workbench inside the dashboard
   ========================================================================= */
.side-item-primary { position: relative; font-weight: 600; }
.side-item-primary .cc-dot {
  position: absolute; top: 50%; right: 14px;
  transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  box-shadow: 0 0 0 2px rgba(74,222,128,0.18);
}

.cc-wrap { display: grid; gap: 14px; }
.cc-hero {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(79,70,229,0.10) 0%, rgba(99,102,241,0.04) 100%);
  border: 1px solid rgba(99,102,241,0.20);
}
.cc-hero h1 { margin: 0; font-size: 22px; font-weight: 800; }
.cc-hero .cc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cc-hero .cc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; }
.cc-hero .cc-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.cc-hero .cc-status.live .dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }

/* HUD strip - daily quotas */
.cc-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cc-hud .stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.cc-hud .stat .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.cc-hud .stat .value { font-size: 20px; font-weight: 800; margin-top: 2px; }
.cc-hud .stat .bar { height: 4px; background: rgba(99,102,241,0.12); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.cc-hud .stat .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #4f46e5, #6366f1); border-radius: 999px; }

/* 2-column grid: main = feed, side = invites/messages/views */
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 980px) { .cc-grid { grid-template-columns: 1fr; } }

.cc-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 0; overflow: hidden;
}
.cc-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 13.5px;
}
.cc-panel-head .count {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: rgba(99,102,241,0.10); color: #4f46e5; font-weight: 700;
}
.cc-panel-body { max-height: 620px; overflow-y: auto; }
.cc-panel-body.tight { max-height: 360px; }

/* Feed item */
.cc-post { padding: 14px; border-bottom: 1px solid var(--border); }
.cc-post:last-child { border-bottom: 0; }
.cc-post-head { display: flex; gap: 10px; align-items: flex-start; }
.cc-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#cbd5e1,#94a3b8);
  flex-shrink: 0; background-size: cover; background-position: center;
}
.cc-author { flex: 1; min-width: 0; }
.cc-author .name { font-weight: 700; font-size: 13.5px; }
.cc-author .headline { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-author .time { font-size: 11px; color: var(--muted); }
.cc-post-body { font-size: 13px; line-height: 1.45; margin-top: 8px; white-space: pre-wrap; }
.cc-post-meta { font-size: 11px; color: var(--muted); margin-top: 6px; }
.cc-post-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cc-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; gap: 5px;
}
.cc-btn:hover { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.30); color: #4f46e5; }
.cc-btn.primary { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.cc-btn.primary:hover { background: #4338ca; }
.cc-btn.success { background: #16a34a; border-color: #16a34a; color: #fff; }
.cc-btn.danger { background: transparent; color: #dc2626; border-color: rgba(220,38,38,0.30); }
.cc-btn.done { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.30); color: #15803d; cursor: default; }

/* Invite / message / view rows */
.cc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.cc-row:last-child { border-bottom: 0; }
.cc-row .info { flex: 1; min-width: 0; }
.cc-row .info .name { font-weight: 700; font-size: 13px; }
.cc-row .info .sub  { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-row .actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Empty / install-extension state */
.cc-empty {
  padding: 30px 24px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: 12px;
}
.cc-empty h2 { font-size: 18px; margin: 8px 0 6px; }
.cc-empty p  { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.cc-empty .cc-btn.primary { padding: 9px 16px; font-size: 13px; }

/* Spinner during initial load */
.cc-loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

/* =========================================================================
   IA v2: sidebar groups, NBA pill, Today panel
   ========================================================================= */

/* Sidebar group containers — replaces flat 17-item list with 5 chunks. */
.side-group {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.04));
}
.side-group:last-of-type { border-bottom: 0; }
.side-label-group {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--muted, #94a3b8);
  padding: 4px 14px 6px;
  opacity: 0.85;
}

/* Next-Best-Action pill in the topbar. The whole point: ONE thing that
   needs doing, surfaced where every user looks first. */
.nba-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,0.10) 0%, rgba(245,158,11,0.06) 100%);
  border: 1px solid rgba(245,158,11,0.30);
  color: #b45309;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  margin-right: 4px;
}
.nba-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.20); }
.nba-pill .nba-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.18);
  flex-shrink: 0;
}
.nba-pill.nba-good {
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.25);
  color: #15803d;
}
.nba-pill.nba-good .nba-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.nba-pill.nba-bad {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.30);
  color: #b91c1c;
}
.nba-pill.nba-bad .nba-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.nba-pill .nba-arrow { width: 12px; height: 12px; opacity: 0.7; }
.nba-pill:hover .nba-arrow { opacity: 1; transform: translateX(2px); transition: transform 0.12s; }
@media (max-width: 780px) {
  .nba-pill .nba-text { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Dark-mode harmonization */
[data-theme="dark"] .nba-pill { color: #fcd34d; }
[data-theme="dark"] .nba-pill.nba-good { color: #86efac; }
[data-theme="dark"] .nba-pill.nba-bad { color: #fca5a5; }

/* Today panel — sits atop the Command Center. Five quick-glance cards
   that summarize "what changed since last visit". */
.cc-today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cc-today-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  text-align: left;
  font: inherit;
  color: inherit;
}
.cc-today-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.10);
  border-color: rgba(99,102,241,0.35);
}
.cc-today-card .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted, #64748b);
}
.cc-today-card .value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink, #0f172a);
}
.cc-today-card .sub {
  font-size: 11.5px;
  color: var(--muted, #64748b);
  margin-top: 2px;
}
.cc-today-card.urgent { border-color: rgba(245,158,11,0.40); background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, transparent 100%); }
.cc-today-card.urgent .value { color: #b45309; }
.cc-today-card.good    { border-color: rgba(22,163,74,0.30); }
.cc-today-card.good .value { color: #15803d; }

/* =========================================================================
   PERSONA SWITCHER (topbar dropdown)
   ========================================================================= */
.persona-switcher { position: relative; margin-right: 8px; }
.persona-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink, #0f172a);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.persona-trigger:hover { border-color: rgba(99,102,241,0.40); background: rgba(99,102,241,0.04); }
.persona-trigger .persona-ic { width: 14px; height: 14px; opacity: 0.7; }
.persona-trigger .persona-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-trigger .persona-caret { width: 12px; height: 12px; opacity: 0.6; }
.persona-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 240px; max-width: 320px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  z-index: 1000;
  padding: 6px;
}
.persona-menu-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em;
  font-weight: 700; color: var(--muted, #94a3b8);
  padding: 6px 10px 8px;
}
.persona-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.persona-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 500;
  background: transparent; border: 0;
  color: var(--ink, #0f172a); text-align: left;
  cursor: pointer; width: 100%;
}
.persona-item:hover { background: rgba(99,102,241,0.06); }
.persona-item.active { background: rgba(99,102,241,0.10); color: #4f46e5; font-weight: 700; }
.persona-item .persona-check { width: 14px; height: 14px; flex-shrink: 0; opacity: 0; }
.persona-item.active .persona-check { opacity: 1; color: #4f46e5; }
.persona-item .persona-meta {
  font-size: 11px; color: var(--muted, #94a3b8); margin-left: auto; font-weight: 500;
}
.persona-menu-foot {
  border-top: 1px solid var(--border, #e2e8f0); margin-top: 4px; padding: 4px;
}
.persona-action {
  width: 100%; padding: 8px 10px; border-radius: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: transparent; border: 0; color: #4f46e5;
  text-align: left; cursor: pointer;
}
.persona-action:hover { background: rgba(99,102,241,0.06); }
@media (max-width: 780px) {
  .persona-trigger .persona-name { max-width: 80px; }
}