/* ── 4 colors. Nothing else. ── */
:root {
  /* 3 brand colors - nothing else */
  --ink:    #0a0a13;
  --paper:  #ede8ff;
  --violet: #b340f4;

  /* derived tokens - no new hex values */
  --bg:      var(--ink);
  --s0:      color-mix(in srgb, var(--paper) 4%, var(--ink));
  --s1:      color-mix(in srgb, var(--paper) 8%, var(--ink));
  --card2:   color-mix(in srgb, var(--paper) 6%, var(--ink));
  --border:  rgba(179,64,244,.14);
  --border2: rgba(237,232,255,.05);
  --accent:  var(--violet);
  --glow:    rgba(179,64,244,.2);
  --text:    var(--paper);
  --text1:   var(--paper);
  --muted:   rgba(237,232,255,.42);
  --dim:     rgba(237,232,255,.28);
  --r:       12px;
  --r-pill:  36px;
  --r-sm:    6px;
  --mono:    ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:    system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Alias tokens for backwards compat */
  --s2:       color-mix(in srgb, var(--paper) 12%, var(--ink));
  --bg2:      var(--s1);
  --surface:  var(--s1);
  --surface2: var(--s1);
  --card:     var(--s1);
  --text2:    var(--muted);
  --err:      #e53935;
  --warn:     #fb8c00;

  /* Low-use alias tokens from extracted JS styles */
  --acc:            var(--accent);
  --fg:             var(--text);
  --t2:             var(--muted);
  --t3:             var(--dim);
  --border1:        var(--border);
  --mu2:            var(--muted);
  --text-secondary: var(--muted);
  --font-xs:        .68rem;
  --opacity-rest:   1;
  --space-1:        4px;
  --transition:     all var(--mt-fast);

  /* Motion tokens (Feature MT) — Linear-style consistent timing */
  --mt-instant:     80ms ease-out;
  --mt-fast:        150ms ease-out;
  --mt-default:     220ms cubic-bezier(.25,.46,.45,.94);
  --mt-slow:        350ms cubic-bezier(.25,.46,.45,.94);
  --mt-spring:      cubic-bezier(.34,1.56,.64,1);

  /* Semantic status tokens (Feature SC) — Stripe-style strict color semantics     */
  /* NEVER use ARCHO group colors for status:                                       */
  /* Trecho=#00C88C, Fanero=#FFD60A, Pliro=#FF9F0A, Gnorizo=#BF5AF2, Echo=#818CF8  */
  --status-ok:      #34C759;  /* Apple system green — distinct from Trecho #00C88C */
  --status-warn:    #F5A623;  /* Amber — distinct from Fanero #FFD60A + Pliro       */
  --status-danger:  #FF3B30;  /* Apple system red — all error/destructive states    */
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; }
html { color-scheme: dark; font-size: 120%; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; }
body.scroll-lock,
body:has(#replyOverlay.open),
body:has(#seqPanel.open),
body:has(#rulesPanel.open),
body:has(#contactPanel.open),
body:has(.acm-backdrop.open),
body:has(#uSearch.open),
body:has(#publexOverlay.pub-open),
body:has(#broadcastOverlay.bc-open),
body:has(#analyticsOverlay.an-open),
body:has(#toolsOverlay.tl-open),
body:has(#socialOverlay.soc-open),
body:has(#crmOverlay.crm-open) { overflow: hidden; }

/* ── Lock ── */
#lock {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--violet) 18%, var(--ink)) 0%, var(--bg) 70%);
}
.lock-box { display: flex; flex-direction: column; align-items: center; gap:20px; width: min(320px,90vw); }
.lock-logo { width: 64px; height: 64px; border-radius: 18px; }
.lock-t { font-size: 1.4rem; font-weight: 800; letter-spacing: .08em; }
.lock-sub { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: -12px; }
.lock-s { font-size: .9rem; color: var(--muted); margin-top:-8px; }
#lockBtn { width: 100%; }
.lock-inp {
  width: 100%; padding:12px 16px;
  background: var(--s1); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text);
  font-size: 1.05rem; font-family: var(--mono); text-align: center; letter-spacing: .14em;
  outline: none; transition: border-color var(--mt-default), box-shadow var(--mt-default);
}
.lock-inp::placeholder { letter-spacing: 0; color: var(--muted); font-family: var(--sans); font-size: 1.08rem; }
.lock-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.lock-err { font-size: .9rem; color: var(--text); min-height: 1em; }
.pw-wrap { position:relative; display:block; width:100%; }
.pw-wrap input { padding-right: 40px !important; }
.pw-eye {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; padding:4px; cursor:pointer;
  color:var(--dim); display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast);
}
.pw-eye:hover { color:var(--text); }
.pw-eye svg { display:block; pointer-events:none; }

/* ── App ── */
#app { display: none; }

/* ── Live dot ── */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; position: relative; will-change: transform, opacity; }
.live-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--accent); animation: livePulseRing 1.9s ease-out infinite; will-change: transform, opacity; }
@keyframes livePulseRing { 0%{transform:scale(1);opacity:.7} 65%{transform:scale(2.6);opacity:0} 100%{transform:scale(1);opacity:0} }
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
@media (prefers-reduced-motion: reduce) { .live-dot, .pulse, .spin, .fade-in, .slide-in { animation: none !important; } * { transition-duration: .01ms !important; } }

/* ── Nav pill shared base ── */
.pill-base {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: 9100;
  display: flex; align-items: center; gap:0;
  padding:0 6px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.72),
    0 32px 80px rgba(0,0,0,.32),
    0 0 80px rgba(179,64,244,.07),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.18);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}

/* Sliding active indicator */
.mnav-btns { display: flex; align-items: center; position: relative; }
.mnav-active-bg {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 42px; border-radius: 24px; pointer-events: none; z-index: 0; opacity: 0;
  background: rgba(179,64,244,.12);
  border: 1px solid rgba(179,64,244,.24);
  box-shadow: 0 0 18px rgba(179,64,244,.15), inset 0 1px 0 rgba(237,232,255,.07);
  transition: left var(--mt-slow) cubic-bezier(.34,1.4,.64,1), width var(--mt-slow) cubic-bezier(.34,1.4,.64,1), opacity var(--mt-default);
}
html[data-theme="light"] .mnav-active-bg {
  background: rgba(179,64,244,.09);
  border-color: rgba(179,64,244,.2);
  box-shadow: 0 0 12px rgba(179,64,244,.1);
}
@keyframes navIconPop {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.22) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.mnav-btn.active .mnav-btn-icon { animation: navIconPop .38s cubic-bezier(.34,1.56,.64,1) both; }
.mnav-btn { position: relative; z-index: 1; }
.mnav-btn.active .mnav-btn-lbl { font-weight: 800; }

/* ── Upper meta pill ── */
/* ── Bottom mega-nav pill ── */
.bottom-nav { bottom: 20px; overflow: visible; }
.bnav-section {
  display: flex; align-items: center; gap:8px;
  padding:8px 14px;
}
.bnav-divider {
  width: 1px; height: 24px; background: var(--border2); flex-shrink: 0;
}

/* ── Orb: live count + period switcher fused to pill left ── */
.bnav-orb {
  position: relative;
  width: auto; height: 44px; flex-shrink: 0;
  border-radius: 22px;
  margin:0;
  padding:0 12px;
  background: color-mix(in srgb, var(--violet) 10%, var(--ink));
  border: 1px solid rgba(179,64,244,.28);
  box-shadow:
    0 0 0 1px rgba(179,64,244,.10),
    0 0 18px rgba(179,64,244,.16),
    inset 0 1px 0 rgba(237,232,255,.06);
  display: flex; flex-direction: row; align-items: center;
  gap:8px; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* live count inside orb */
.orb-live {
  display: flex; align-items: center; gap:4px;
  font-size: .72rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  line-height: 1; flex-shrink: 0;
}
.orb-live-n {
  font-size: .92rem; font-weight: 900; letter-spacing: -.02em; line-height: 1;
}
/* divider between live and periods */
.orb-sep {
  width: 1px; height: 16px; background: rgba(237,232,255,.12); flex-shrink: 0;
}
/* period buttons inside orb */
.orb-periods {
  display: flex; align-items: center; gap:2px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  min-width: 0;
}
.orb-periods::-webkit-scrollbar { display: none; }
.orb-per {
  scroll-snap-align: center; flex-shrink: 0;
  padding:4px 8px; min-height: 28px;
  border-radius: 5px; border: 1px solid transparent;
  background: transparent; color: rgba(237,232,255,.4);
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast), background var(--mt-fast), border-color var(--mt-fast);
}
.orb-per:hover { color: var(--text); }
.orb-per.active {
  color: var(--accent);
  background: rgba(179,64,244,.14);
  border-color: rgba(179,64,244,.3);
}
/* badge on orb */
.orb-crm-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding:0 4px;
  background: var(--accent); color: #fafafa;
  border-radius: 8px; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--mt-default) cubic-bezier(.34,1.56,.64,1), opacity var(--mt-default);
}
.orb-crm-badge[data-n="0"], .orb-crm-badge:empty { opacity: 0; transform: scale(.5); }

/* ── keep these for JS refs that write to them ── */
.bnav-delta { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .82rem; transition: color var(--mt-slow); }
.bnav-delta.up { color: #4ade80; }
.bnav-delta.dn { color: var(--muted); }
.bnav-delta.flat { color: var(--muted); }


/* ── Mega-nav action buttons ── */
.mnav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap:4px;
  padding:8px 12px; min-height: 48px; min-width: 56px;
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast), background var(--mt-fast);
  position: relative;
}
.mnav-btn:hover { color: var(--text); background: rgba(237,232,255,.04); }
.mnav-btn.active { color: var(--accent); }
.mnav-btn-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.mnav-btn-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
/* Sort wrapper */
.crm-sort-wrap { display: flex; align-items: center; }
.crm-sort-icon { display: none; pointer-events: none; color: var(--muted); }
/* Card head variants */
.card-head-short { display: none; }
.card-head-full  { display: inline; }

@media (max-width: 600px) {
  /* Rules button - icon only */
  #btnRules .btn-lbl { display: none; }
  /* Sort dropdown - transparent, icon overlaid */
  .crm-sort-wrap { position: relative; }
  #crmSortSel { opacity: 0; position: absolute; inset: 0; width: 100%; cursor: pointer; }
  .crm-sort-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border2); border-radius: 8px; pointer-events: none; }
  /* Email under name in collapsed rows */
  .crm-sub { display: none; }
  /* Type badge - icon only, no text */
  .crm-type-badge { font-size: 0; padding:2px 4px; }
  /* Analytics kpi-sub descriptions */
  .kpi-sub { display: none; }
  /* kpi-delta comparison lines */
  .kpi-delta { display: none; }
}
/* badge on Inbox button */
.mnav-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding:0 4px;
  background: var(--accent); color: #fafafa;
  border-radius: 8px; font-size: .62rem; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  font-family: var(--sans); line-height: 1;
}
.mnav-badge[data-n]:not([data-n="0"]) { display: flex; }

/* ── Overlay sub-nav pill - sits ABOVE both main nav pills ── */
.ov-pill {
  position: fixed; bottom: 88px; left: 0; right: 0; margin:0 auto;
  z-index: 9050; /* above section overlays (9000), below search (9100) */
  display: flex; align-items: center; gap:0; justify-content: space-between;
  width: max-content;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: 0 12px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(179,64,244,.1), inset 0 1px 0 rgba(237,232,255,.05);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  overflow-x: auto; scrollbar-width: none;
}
.ov-pill::-webkit-scrollbar { display: none; }
/* Two-row pill: stacks sub-row above main-row inside the same pill */
.tl-pill-2row {
  flex-direction: column;
  align-items: stretch;
  padding:0;
  overflow: visible;
}
.tl-main-row {
  display: flex; align-items: center; gap:0; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.06);
}
.tl-sub-row {
  display: flex; align-items: center; gap:0; justify-content: space-between;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tl-sub-row::-webkit-scrollbar { display: none; }
/* Group tab: vertical layout with Greek name + verb */
.tl-grp {
  position: relative;
  flex-direction: column;
  gap: 1px;
  padding: 8px 16px 12px;
  min-height: 64px;
}
.tl-grp-name {
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; line-height: 1;
}
.tl-grp-verb {
  font-size: .57rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; opacity: .38; line-height: 1;
}
.tl-grp.active { color: var(--accent); }
.tl-grp.active::after {
  content: ''; position: absolute; bottom: 7px; left: 50%;
  transform: translateX(-50%); width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent);
}
/* Per-group accent colors when active */
.tl-grp[data-grp="trecho"].active  { color: #00C88C; }
.tl-grp[data-grp="trecho"].active::after  { background: #00C88C; }
.tl-grp[data-grp="merano"].active  { color: #007AFF; }
.tl-grp[data-grp="merano"].active::after  { background: #007AFF; }
.tl-grp[data-grp="gnorizo"].active { color: #BF5AF2; }
.tl-grp[data-grp="gnorizo"].active::after { background: #BF5AF2; }
.tl-grp[data-grp="fanero"].active  { color: #FFD60A; }
.tl-grp[data-grp="fanero"].active::after  { background: #FFD60A; }
.tl-grp[data-grp="pliro"].active   { color: #FF9F0A; }
.tl-grp[data-grp="pliro"].active::after   { background: #FF9F0A; }
.tl-grp[data-grp="syndo"].active   { color: #818CF8; }
.tl-grp[data-grp="syndo"].active::after   { background: #818CF8; }
/* Sub-row buttons - smaller, accent underline */
.tl-sub-btn {
  display: flex; align-items: center; gap:4px;
  padding:0 14px; min-height: 40px;
  border: none; background: transparent;
  color: var(--muted); font-size: .77rem; font-weight: 600;
  font-family: var(--sans); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast);
  border-bottom: 2px solid transparent; margin-bottom:-1px;
}
.tl-sub-btn:hover { color: var(--text); }
.tl-sub-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.ov-tab {
  display: flex; align-items: center; justify-content: center; gap:4px;
  padding:0 16px; min-height: 50px;
  border: none; background: transparent; color: var(--muted);
  font-size: .81rem; font-weight: 700; cursor: pointer;
  font-family: var(--sans); white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast), background var(--mt-fast);
}
.ov-tab:hover { color: var(--text); }
.ov-tab.active { color: var(--accent); background: rgba(179,64,244,.08); }
.ov-pill-div { width: 1px; height: 24px; background: var(--border2); flex-shrink: 0; }
.ov-close {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin:6px;
  border: 1px solid var(--border); border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--mt-fast), color var(--mt-fast), background var(--mt-fast);
}
.ov-close:hover { border-color: rgba(179,64,244,.5); color: var(--accent); background: rgba(179,64,244,.06); }

/* ══ MOBILE nav pills ══════════════════════════════════ */
@media (max-width: 768px) {
  #kSidebar { display: none !important; }
  /* Hide the campaigns sticky meta bar on mobile - it's empty and wastes 54px */
  .bc-topbar-meta { display: none !important; }
  /* Settings panel: slide up from bottom, full-width above bottom nav */
  .ks-panel {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 62px !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 80vh !important;
    border-radius: 16px 16px 0 0 !important;
    transform-origin: bottom center !important;
    z-index: 9650 !important;
  }
  /* Settings tabs: tall enough to tap */
  .ks-tabs { padding: 0 4px; gap: 0; }
  .ks-tab { padding: 12px 12px; font-size: .74rem; min-height: 44px; flex: 1; text-align: center; border-radius: 0; }
  /* ── Main pill: true edge-to-edge bar ── */
  .bottom-nav {
    left: 0; right: 0;
    transform: none;
    max-width: 100%;
    bottom: 0;
    height: 62px;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(179,64,244,.14);
    padding: 0;
    background: color-mix(in srgb, var(--ink) 96%, transparent);
    backdrop-filter: blur(32px) saturate(180%);
    box-shadow: 0 -1px 0 rgba(237,232,255,.04), 0 -20px 60px rgba(0,0,0,.5);
    gap: 0;
  }

  /* Hide non-essential pill chrome */
  #kratoNavLogo { display: none; }
  .bnav-orb { display: none; }
  .bnav-divider { display: none; }
  .bnav-dv-hide-m { display: none; }

  /* Floating gear: absorbed into pill on mobile */
  #kratoGearBtn { display: none !important; }

  /* Search button inside pill */
  #cmdKBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    padding: 0;
    border: none;
    border-left: 1px solid rgba(237,232,255,.06);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  #cmdKBtn svg { width: 20px; height: 20px; }
  #cmdKBtn:active { color: var(--text); }

  /* Settings button inside pill */
  #mnavSettingsBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    padding: 0;
    border: none;
    border-left: 1px solid rgba(237,232,255,.06);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  #mnavSettingsBtn svg { width: 20px; height: 20px; }
  #mnavSettingsBtn:active { color: var(--accent); }

  /* Buttons row fills the pill */
  .mnav-btns { flex: 1; height: 100%; display: flex; align-items: stretch; }

  /* Sliding active pill */
  .mnav-active-bg { height: 48px; border-radius: 10px; }

  /* Individual nav buttons */
  .mnav-btn {
    flex: 1;
    padding: 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 0;
    transition: color var(--mt-fast);
  }
  .mnav-btn:active { opacity: .7; transform: scale(.9); }

  /* Larger icons, no labels */
  .mnav-btn-icon { width: 28px; height: 28px; }
  .mnav-btn-icon svg { width: 24px; height: 24px; }
  .mnav-btn-lbl { display: none; }

  /* Active glow */
  .mnav-btn.active { color: var(--accent); }
  .mnav-btn.active .mnav-btn-icon { filter: drop-shadow(0 0 5px rgba(179,64,244,.55)); }

  /* Badge position */
  .mnav-badge { top: 8px; right: 8px; }

  /* ── Overlay pill: edge-to-edge bar above bottom nav ── */
  .ov-pill {
    left: 0; right: 0;
    width: 100%;
    max-width: 100%;
    bottom: 62px;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(179,64,244,.14);
    border-bottom: 1px solid rgba(237,232,255,.04);
  }
  .ov-tab { padding: 0 14px; font-size: .8rem; min-height: 52px; }
  .ov-tab svg { width: 18px; height: 18px; }
  .ov-close { width: 40px; height: 40px; margin: 6px; }
  .tl-grp { min-height: 60px; padding: 7px 12px 10px; }
  .tl-grp-name { font-size: .74rem; }
  .tl-grp-verb { font-size: .54rem; }

  #analyticsOverlay, #toolsOverlay, #broadcastOverlay, #socialOverlay { bottom: 116px !important; }

  /* Tab labels - icon only on small screens */
  .tab-lbl { display: none; }
  .card-head-short { display: inline; }
  .card-head-full  { display: none; }

  /* Sub-row: compact so Bands/Artists fit without hidden scroll */
  .tl-sub-btn { padding: 0 10px; min-height: 44px; font-size: .74rem; }
  .tl-sub-row { position: relative; }
  /* Fade-right hint when sub-row overflows */
  .tl-sub-row::after {
    content: '';
    position: sticky; right: 0;
    display: block; width: 32px; height: 100%;
    flex-shrink: 0;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ink) 95%, transparent));
    pointer-events: none;
  }
}

/* ── Content layout ── */
.wrap { padding:20px 20px 100px; display: flex; flex-direction: column; gap:40px; max-width: 1500px; margin:0 auto; }

/* ── Section header ── */
.sh {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text); margin-bottom:-6px;
  display: flex; align-items: center; gap:10px;
}
.sh::before {
  content: ''; flex-shrink: 0; width: 4px; height: 12px; border-radius: 2px;
  background: rgba(237,232,255,.25);
}

/* ── KPI clusters (grouped sub-sections of the overview grid) ── */
.kpi-clusters { display: flex; flex-direction: column; gap:24px; }
.kpi-cluster-lbl {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(237,232,255,.3); padding-left:2px; margin-bottom:-4px;
}
.kpi-cluster .kpi-grid { gap:8px; }

/* ── Traffic chapter dividers ── */
.sec-chapter {
  display: flex; align-items: center; gap:12px;
  margin-top:4px; margin-bottom:-4px;
}
.sec-chapter-lbl {
  font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(237,232,255,.35); white-space: nowrap;
}
.sec-chapter::after { content: ''; flex: 1; height: 1px; background: var(--border2); }

/* ── Deep-dive analytics CTA ── */
.deep-dive-card {
  display: flex; align-items: center; gap:14px;
  padding:14px 16px; border-radius: var(--r);
  background: var(--s0); border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-default), border-color var(--mt-default);
  text-decoration: none;
}
.deep-dive-card:hover { background: rgba(179,64,244,.07); border-color: rgba(179,64,244,.3); border-left-color: var(--accent); }
.deep-dive-card-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(179,64,244,.13); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.deep-dive-card-body { flex: 1; }
.deep-dive-card-title { font-size: .84rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.deep-dive-card-sub { font-size: .74rem; color: var(--muted); margin-top:2px; }
.deep-dive-card-arr { font-size: 1.1rem; color: var(--muted); flex-shrink: 0; font-weight: 700; }

/* ── Status bar ── */
.status { display: flex; gap:14px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.sdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right:4px; }
.sdot.ok { background: #22c55e; } .sdot.err { background: #e05555; }

/* ── Card ── */
.card {
  background: var(--s1); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.card-head {
  padding:14px 16px; border-bottom: 1px solid var(--border2);
  font-size: .79rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  display: flex; align-items: center; gap:8px;
}
.card-body { padding:16px; }

/* ── KPI grid ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.kpi {
  background: var(--s1); border: 1px solid var(--border);
  border-radius: var(--r); padding:16px;
  display: flex; flex-direction: column; gap:4px;
  position: relative; overflow: hidden; cursor: default;
  transition: border-color var(--mt-default);
}
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--border2);
  opacity: 0; transition: opacity var(--mt-default);
}
.kpi:hover { border-color: var(--border2); }
.kpi-lbl { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.kpi-val { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-val.green { color: #4ade80; }
.kpi-val-hero { font-size: 2.2rem; }
.kpi-val.accent { color: var(--text); }
.kpi-val.amber { color: #fbbf24; }
.kpi-val.blue { color: #60a5fa; }
.kpi-sub { font-size: .8rem; color: var(--muted); }
.kpi-sub.up { color: #4ade80; } .kpi-sub.dn { color: var(--muted); }

/* ── Charts row ── */
.charts-row { display: grid; gap:16px; grid-template-columns: 1fr 1fr 200px; }
@media(max-width:900px) { .charts-row { grid-template-columns: 1fr; } }

/* ── Donut ── */
.donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:14px; padding:14px; }
.donut-legend { display: flex; flex-direction: column; gap:8px; width: 100%; }
.donut-item { display: flex; align-items: center; gap:8px; font-size: .94rem; }
.donut-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-lbl { flex: 1; color: var(--text); }
.donut-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }

/* ── Bar chart rows ── */
.bar-list { display: flex; flex-direction: column; gap:10px; }
.bar-item { display: flex; align-items: center; gap:10px; }
.bar-label { font-size: .9rem; color: var(--text); min-width: 90px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 8px; border-radius: var(--r-pill); background: rgba(237,232,255,.06); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); }
.bar-fill.animate { transition: width .7s cubic-bezier(.16,1,.3,1); }
.bar-count { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
/* aliases used by renderRegistrantGeo / renderUtm / renderTimeToConvert */
.bar-row  { display: flex; align-items: center; gap:10px; }
.bar-lbl  { font-size: .9rem; color: var(--text); min-width: 90px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val  { font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

/* ── Funnel ── */
.funnel { display: flex; flex-direction: column; gap:0; padding:16px 14px 10px; }
.funnel-stage { display: grid; grid-template-columns: 100px 1fr 90px; align-items: center; gap:0 12px; }
.funnel-bar-wrap { display: flex; justify-content: center; }
.funnel-bar { height: 38px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; transition: width .8s cubic-bezier(.16,1,.3,1); white-space: nowrap; overflow: hidden; padding:0 10px; }
.funnel-label { font-size: .78rem; color: var(--muted); text-align: right; line-height: 1.3; padding-right:4px; }
.funnel-stat { display: flex; flex-direction: column; align-items: flex-start; }
.funnel-num { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.funnel-pct { font-size: .72rem; color: var(--muted); margin-top:2px; }
.funnel-drop { display: grid; grid-template-columns: 100px 1fr 90px; align-items: center; gap:0 12px; padding:4px 0; }
.funnel-drop-line { display: flex; align-items: center; justify-content: center; gap:6px; font-size: .72rem; }
.funnel-drop-badge { padding:2px 8px; border-radius: var(--r-pill); font-weight: 700; font-size: .7rem; }

/* ── Heatmap / hourly ── */
.hourly-bars { display: flex; align-items: flex-end; gap:4px; height: 80px; padding:0; }
.h-bar { flex: 1; border-radius: 3px 3px 0 0; min-width: 4px; transition: opacity var(--mt-default); position: relative; cursor: default; }
.h-bar:hover { opacity: .75; }
.hourly-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top:4px; padding:0 2px; }

/* ── Feed ── */
.feed-list { max-height: 240px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.feed-row { display: flex; align-items: center; gap:8px; padding:12px 14px; border-bottom: 1px solid var(--border2); font-size: .89rem; }
.feed-row:last-child { border-bottom: none; }
.fbadge { flex-shrink: 0; padding:2px 8px; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(237,232,255,.05); color: var(--dim); border: 1px solid var(--border); }
.flbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsub { font-size: .8rem; color: var(--muted); }
.ftime { flex-shrink: 0; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Event chips ── */
.evt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px,1fr)); gap:8px; }
.evt-chip {
  background: var(--s0); border: 1px solid var(--border2); border-radius: var(--r);
  padding:8px 12px; display: flex; align-items: center; justify-content: space-between;
}
.evt-lbl { font-size: .88rem; color: var(--muted); }
.evt-n { font-size: 1rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Two-col grid ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap:16px; }
.two-col-start { align-items: start; }
@media(max-width:700px) { .two-col { grid-template-columns: 1fr; } }

/* ── Overlay page header (tab title + description) ── */
.ov-pg-hdr {
  display: flex; align-items: baseline; gap:12px;
  padding:20px 28px 0;
  flex-shrink: 0;
}
.ov-pg-title {
  font-size: 1.1rem; font-weight: 800; color: var(--text);
  letter-spacing: -.01em; white-space: nowrap;
}
.ov-pg-desc {
  font-size: .75rem; color: var(--muted); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 768px) { .ov-pg-hdr { display: none; } }
/* Desktop-only close button inside ov-pg-hdr */
.ov-close-desk { display:none; }
@media (min-width: 769px) { .ov-close-desk { display:flex; margin-left:auto; flex-shrink:0; } }

/* Desktop: tighten ov-pg-hdr, hide the dead bc-topbar, scale font sizes up */
@media (min-width: 769px) {
  /* Larger type scale across the system */
  .ov-pg-title  { font-size: 1.35rem; }
  .ov-pg-desc   { font-size: .82rem; }
  .ov-pg-hdr    { padding:20px 28px 10px; align-items: center; gap:16px; }

  /* Hide the empty broadcast meta bar - ov-pg-hdr provides context */
  .bc-topbar-meta { display: none !important; }

  /* Section titles and card heads larger */
  .sect-title, .an-lbl   { font-size: 1rem !important; }
  .card-head             { font-size: .9rem; font-weight: 700; }
  .kpi-val               { font-size: 2.6rem; }
  .kpi-lbl               { font-size: .78rem; }

  /* Settings header as tab header - no modal feel */
  .ks-hd {
    padding:20px 24px 16px;
    border-bottom: 1px solid var(--border2);
  }
  .ks-hd-title { font-size: .95rem; font-weight: 800; letter-spacing: .1em; }
  .ks-db-status { margin-left:auto; }

  /* Admissions register form full-width, two columns */
  #admSectionRegister { max-width: none !important; }
  #admSectionRegister .reg-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  #admSectionRegister .reg-form input[type="email"],
  #admSectionRegister .reg-form button { grid-column: 1 / -1; }
  #admSectionRegister .card { max-width: 620px; }
}

/* DB status chip - replaces old inline style */
.ks-db-status {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding:4px 8px; border-radius: 20px;
  background: rgba(234,179,8,.15); color: #ca8a04;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--mt-fast);
}
.ks-db-status:hover { background: rgba(234,179,8,.25); }
.ks-db-status.ok    { background: rgba(34,197,94,.15); color: #16a34a; }
.ks-db-status.err   { background: rgba(239,68,68,.15);  color: #dc2626; }

/* ── Overlay panels ── */
.ov-body  { padding-bottom:210px; }
.an-panel {
  padding:32px 24px;
  display: flex; flex-direction: column; gap:24px;
}

/* behaviorGrid has inline gap:10px - override to match system */
#behaviorGrid { gap:16px !important; }

/* Analytics labels - no margins; gap drives all rhythm ── */
.an-lbl     { margin:0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.an-lbl-gap { margin:0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); }

/* ── Utility ── */
.card-meta   { font-size: .82rem; color: var(--muted); margin-bottom:12px; }
.flex-col-12 { display: flex; flex-direction: column; gap:14px; }
.flex-col-14 { display: flex; flex-direction: column; gap:16px; }
.lbl-caps    { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom:6px; }
.hint-empty  { font-size: .85rem; color: var(--muted); padding:8px 0; }
.max-scroll  { max-height: 260px; overflow-y: auto; }
.row-spaced  { display: flex; justify-content: space-between; align-items: center; }
.row-spaced-top { display: flex; justify-content: space-between; margin-top:28px; }

/* ── Form inputs ── */
.form-input { width: 100%; box-sizing: border-box; background: var(--s1); border: 1px solid var(--border2); border-radius: 8px; padding:10px 12px; color: var(--text); font-size: .92rem; font-family: var(--sans); outline: none; }

/* ── CTA buttons ── */
.btn-primary-xl { padding:12px 28px; background: var(--accent); color: #fafafa; border: none; border-radius: var(--r-pill); font-size: .9rem; font-weight: 700; cursor: pointer; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.btn-ghost-xl   { padding:12px 20px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer; color: var(--muted); font-size: .88rem; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }

/* ── Table header caps ── */
.th-sm { text-align: left; padding:8px 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }

/* ── KPI modifiers ── */
.kpi-sm      { padding:10px 12px; }
.kpi-val-lg  { font-size: 1.4rem; }

/* ── Spacing helpers ── */
.mb-16       { margin-bottom:16px; }
.m0          { margin:0; }
.flex-1      { flex: 1; }
.mr-4        { margin-right:4px; }

/* ── Button height ── */
.btn-tall    { min-height: 48px; }

/* ── Flex helpers ── */
.flex-row-48    { display: flex; align-items: center; gap:8px; min-height: 48px; }
.flex-wrap-6    { display: flex; gap:6px; flex-wrap: wrap; }
.row-spaced-mb8 { display: flex; align-items: center; justify-content: space-between; margin-bottom:8px; }
.row-spaced-mb6 { display: flex; align-items: center; justify-content: space-between; margin-bottom:6px; }
.row-spaced-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom:0; flex-wrap: wrap; gap:8px; }

/* ── Text helpers ── */
.lbl-caps-inline { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.font-mono-sm    { font-family: var(--mono); font-size: .82rem; }

/* ── Card variant ── */
.card-s0     { background: var(--s0); border: 1px solid var(--border2); border-radius: 12px; padding:20px; margin-bottom:0; }
.kpi-hero-tile { border-color: var(--border2); }

/* ── Button variants ── */
.btn-tab-ghost { padding:8px 16px; border: none; border-radius: var(--r-pill); font-size: .82rem; font-weight: 700; cursor: pointer; font-family: var(--sans); background: transparent; color: var(--muted); transition: all var(--mt-fast); }
.filter-pill   { padding:8px 14px; font-size: .78rem; background: var(--s1); border: 1px solid var(--border2); border-radius: var(--r-pill); cursor: pointer; color: var(--text); font-family: var(--sans); min-height: 44px; white-space: nowrap; }

/* ── Extra utility ── */
.p0            { padding:0; }
.flex-8        { display: flex; gap:8px; }
.txt           { color: var(--text); }
.txt2          { color: var(--text2); }
.txt-muted-sm  { font-size: .8rem; color: var(--muted); }
.txt-84        { font-size: .84rem; }
.badge-sm      { font-size: .76rem; padding:4px 10px; }
.sect-title    { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.kpi-val-xl    { font-size: 1.5rem; }
.card-light    { border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; background: #fafafa; }

/* ── Reg form ── */
.reg-form { display: flex; flex-direction: column; gap:8px; }
.reg-inp {
  padding:8px 12px; background: var(--s0); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 1.06rem; outline: none;
  transition: border-color var(--mt-default), box-shadow var(--mt-default);
}
.reg-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.reg-inp::placeholder { color: var(--muted); }
.reg-btn {
  padding:10px; background: var(--accent); border: none; border-radius: var(--r);
  color: var(--ink); font-size: 1.02rem; font-weight: 600; cursor: pointer;
  transition: opacity var(--mt-default), transform var(--mt-fast);
}
.reg-btn:hover { opacity: .88; transform: translateY(-1px); }
.reg-msg { font-size: .91rem; text-align: center; min-height: 1.3em; }
.reg-msg.ok { color: var(--text); } .reg-msg.err { color: var(--text); } .reg-msg.sending { color: var(--muted); }

/* ── Log table ── */
.log-ctrl { display: flex; gap:8px; flex-wrap: wrap; margin-bottom:0; }
.log-ctrl input, .log-ctrl select {
  flex: 1; min-width: 90px; padding:8px 12px;
  background: var(--s0); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font-size: .94rem; outline: none;
}
.log-ctrl input:focus, .log-ctrl select:focus { border-color: var(--accent); }
.log-ctrl option { background: var(--s0); }
.log-exp {
  padding:8px 12px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--r); color: var(--muted); font-size: .94rem; cursor: pointer; white-space: nowrap;
  transition: border-color var(--mt-default), color var(--mt-default);
}
.log-exp:hover { border-color: var(--accent); color: var(--accent); }
.tbl-wrap { overflow: auto; max-height: 380px; border-radius: var(--r); border: 1px solid var(--border); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead { position: sticky; top: 0; z-index: 2; }
th {
  padding:8px 12px; text-align: left; white-space: nowrap;
  background: var(--s0); border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; user-select: none;
}
th:hover { color: var(--text); }
td { padding:10px 12px; white-space: nowrap; border-bottom: 1px solid var(--border2); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(179,64,244,.05); }

/* ── Sparklines ── */
canvas { display: block; }
.sparkline-wrap { height: 56px; position: relative; }

@keyframes insightIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── Responsive ── */
@media(max-width:560px) { .kpi-val { font-size: 1.68rem; } .wrap { padding:12px 12px 100px; gap:24px; } }

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST SYSTEM - 375px baseline
   Every panel, card, table, grid, and form is tuned for thumb use
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Panel containers ── */
  .an-panel {
    padding:16px 14px;
    gap:16px;
  }
  .ov-body { padding-bottom:180px; }

  /* ── Cards ── */
  .card-head { padding:12px 14px; font-size: .74rem; }
  .card-body { padding:14px; }
  .card-s0   { padding:14px; }

  /* ── KPI tiles ── */
  .kpi-grid  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
  .kpi       { padding:12px 14px; }
  .kpi-lbl   { font-size: .68rem; }
  .kpi-sm    { padding:8px 10px; }

  /* ── charts-row → single column (two-col already stacks at 700px) ── */
  .charts-row { grid-template-columns: 1fr; gap:12px; }

  /* ── Tables: tighter cells, horizontal scroll ── */
  td  { padding:8px 10px; font-size: .82rem; }
  .th-sm { padding:8px 10px; font-size: .68rem; }
  .tbl-wrap { border-radius: 10px; }
  .lm-table td, .lm-table th { font-size: .8rem; }

  /* ── Bar lists ── */
  .bar-list { gap:8px; }

  /* ── Section labels ── */
  .sect-title { font-size: .94rem; }
  .an-lbl, .an-lbl-gap { font-size: .68rem; }
  .cp-section-lbl { font-size: .68rem; }

  /* ── Flex helpers ── */
  .row-spaced-hdr { gap:8px; }
  .flex-col-12, .flex-col-14 { gap:12px; }

  /* ── Log controls: stack on very small screens ── */
  .log-ctrl { gap:6px; }
  .log-ctrl input, .log-ctrl select { font-size: .86rem; padding:8px 10px; }

  /* ── Link manager form: full-width stacked ── */
  .lm-form .inp-slug,
  .lm-form .inp-target,
  .lm-form .inp-note,
  .lm-form .inp-domain { flex: 1 1 100%; }

  /* ── Form inputs ── */
  .form-input { font-size: .9rem; padding:10px 12px; }

  /* ── Broadcast overlay sub-elements ── */
  .bc-row-3 { grid-template-columns: 1fr; }

  /* ── Overlay pill closer to nav ── */
  .ov-pill { bottom: 58px; max-width: calc(100vw - 16px); }
  .ov-tab  { padding:0 12px; font-size: .74rem; min-height: 44px; }
  .tl-grp  { min-height: 56px; padding: 6px 10px 9px; }
  .tl-grp-verb { display: none; }
  .tl-sub-btn { padding:0 12px; min-height: 38px; font-size: .72rem; }

  /* ── Sliding active indicator: match compact button height ── */
  .mnav-active-bg { height: 36px; }

  /* ── behaviorGrid: single col ── */
  #behaviorGrid { grid-template-columns: 1fr !important; }

  /* ── Overlay close button ── */
  .ov-close { width: 36px; height: 36px; margin:4px; }

  /* ── Donut wrap: side-by-side on mobile saves vertical space ── */
  .donut-wrap { flex-direction: row; align-items: center; gap:16px; padding:14px; }

  /* ── Overlays: no horizontal bleed from wide tables ── */
  #analyticsOverlay, #toolsOverlay, #broadcastOverlay, #socialOverlay { overflow-x: hidden; }

  /* ── tbl-wrap inside overlays: full bleed scroll, no border radius eating space ── */
  .an-panel .tbl-wrap { border-radius: 8px; }
}

@media (max-width: 400px) {
  /* Ultra-narrow: tighten further */
  .an-panel { padding:12px 10px; gap:14px; }
  .kpi-grid  { grid-template-columns: 1fr 1fr; gap:6px; }
  .kpi       { padding:10px 12px; }
  td         { padding:8px 8px; font-size: .79rem; }
  .ov-tab    { padding:0 8px; font-size: .7rem; }
  .bnav-orb  { padding:0 8px; }
}

/* ── Comparison delta ── */
.kpi-delta { font-size: .78rem; font-variant-numeric: tabular-nums; }
.kpi-delta.up  { color: #4ade80; }
.kpi-delta.dn  { color: var(--muted); }
.kpi-delta.flat { color: var(--muted); }
/* Von Restorff - hero KPI visually dominates the grid */
.kpi-hero { border-color: rgba(237,232,255,.28); background: color-mix(in srgb, var(--paper) 8%, var(--s1)); }
.kpi-hero::before { opacity: 1 !important; }
.kpi-hero .kpi-val { font-size: 2.6rem; }

/* Goal bar structural styles (was inline) */
.kgb-wrap { background:var(--s0); border:1px solid var(--border2); border-radius:10px; padding:10px 14px; flex-direction:column; gap:6px; }

@media (min-width: 560px) { .kpi-hero { grid-column: span 2; } }
/* Confirmation Bias - anomaly pulse on extreme deltas */
.kpi-anomaly { animation: anomalyPulse 2.5s ease-in-out 2; }
@keyframes anomalyPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 3px rgba(179,64,244,.35)} }

/* ══ UNIVERSAL SEARCH ═══════════════════════════════════ */
#uSearch {
  position:fixed; inset:0; z-index:9600;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(48px,9vh,110px);
  background:rgba(10,10,19,.82); backdrop-filter:blur(14px) saturate(180%);
  opacity:0; pointer-events:none; transition:opacity var(--mt-fast);
}
#uSearch.open { opacity:1; pointer-events:auto; }
.us-box {
  width:min(700px,calc(100vw - 20px));
  background:color-mix(in srgb, var(--ink) 91%, transparent);
  border:1px solid rgba(179,64,244,.24); border-radius:20px;
  box-shadow:0 36px 90px rgba(0,0,0,.88),0 0 0 1px rgba(179,64,244,.07);
  overflow:hidden;
  transform:translateY(-18px) scale(.97);
  transition:transform var(--mt-default) cubic-bezier(.34,1.56,.64,1);
}
#uSearch.open .us-box { transform:translateY(0) scale(1); }

.us-input-wrap { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border2); }
#usInput {
  flex:1; background:none; border:none; outline:none;
  font-size:1.02rem; color:var(--text); font-family:var(--sans);
  caret-color:var(--accent);
}
#usInput::placeholder { color:var(--muted); }
.us-shortcut { font-size:.7rem; color:var(--muted); opacity:.55; font-family:var(--mono); border:1px solid var(--border2); border-radius:5px; padding:2px 8px; flex-shrink:0; letter-spacing:.04em; }
.us-esc-btn { font-size:.7rem; color:var(--muted); opacity:.5; font-family:var(--mono); cursor:pointer; padding:4px 8px; border:1px solid var(--border2); border-radius:5px; background:none; -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-instant),color var(--mt-instant); flex-shrink:0; }
.us-esc-btn:hover { opacity:1; color:var(--text); }

.us-recents { display:flex; gap:6px; flex-wrap:wrap; padding:8px 18px 6px; border-bottom:1px solid rgba(237,232,255,.04); }
.us-recents:empty { display:none; }
.us-recent-tag { font-size:.74rem; padding:4px 10px; border-radius:var(--r-pill); background:var(--s1); border:1px solid var(--border2); color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-instant),color var(--mt-instant); }
.us-recent-tag:hover { border-color:rgba(179,64,244,.4); color:var(--text); }

.us-body { max-height:min(460px,58vh); overflow-y:auto; padding:6px 0 10px; }
.us-body::-webkit-scrollbar { width:4px; }
.us-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.us-cat-head {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px 4px; font-size:.62rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.us-cat-pill { background:rgba(237,232,255,.06); color:var(--dim); border-radius:var(--r-pill); padding:1px 8px; font-size:.64rem; font-weight:700; letter-spacing:.04em; }

.us-row {
  display:flex; align-items:center; gap:12px;
  padding:8px 18px; cursor:pointer; min-height:44px;
  transition:background var(--mt-instant); -webkit-tap-highlight-color:transparent;
  border-left:2px solid transparent;
}
.us-row:hover { background:var(--s1); }
.us-row.kb-active { background:color-mix(in srgb,var(--accent) 9%,var(--s1)); border-left-color:var(--accent); }
.us-row-icon {
  width:30px; height:30px; border-radius:8px; background:var(--s1);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0; transition:background var(--mt-instant);
}
.us-row.kb-active .us-row-icon { background:color-mix(in srgb,var(--accent) 18%,var(--s1)); }
.us-row-body { flex:1; min-width:0; }
.us-row-primary { font-size:.88rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.us-row-primary mark { background:none; color:var(--accent); font-weight:700; font-style:normal; }
.us-row-secondary { font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.us-row-secondary mark { background:none; color:color-mix(in srgb,var(--accent) 75%,var(--muted)); font-weight:600; font-style:normal; }
.us-row-meta { font-size:.7rem; padding:2px 8px; border-radius:var(--r-pill); border:1px solid var(--border2); color:var(--muted); white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; }

.us-more { width:100%; text-align:left; padding:6px 18px 6px 61px; font-size:.78rem; color:var(--accent); background:none; border:none; cursor:pointer; font-family:var(--sans); opacity:.7; -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-instant); }
.us-more:hover { opacity:1; }

.us-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 18px; border-top:1px solid var(--border2); font-size:.73rem; color:var(--muted); }
.us-footer-count { font-variant-numeric:tabular-nums; }
.us-footer-keys { opacity:.5; display:flex; gap:8px; align-items:center; }
.us-footer-keys kbd { font-family:var(--mono); font-size:.68rem; border:1px solid var(--border2); border-radius:3px; padding:1px 4px; }

.us-empty { padding:36px 16px; text-align:center; }
.us-empty-ico { font-size:2rem; margin-bottom:12px; opacity:.5; }
.us-empty-msg { font-size:.88rem; color:var(--muted); margin-bottom:6px; }
.us-empty-sub { font-size:.76rem; color:var(--muted); opacity:.55; }

.us-prompt { padding:10px 0 4px; }
.us-cmd-group { padding:6px 18px 2px; font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); opacity:.55; }
.us-cmd-row { display:flex; align-items:center; gap:10px; padding:8px 14px; margin:0 6px; border-radius:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; border:1px solid transparent; transition:background var(--mt-instant),border-color var(--mt-instant); }
.us-cmd-row:hover, .us-cmd-row.kb-active { background:color-mix(in srgb,var(--accent) 9%,var(--s1)); border-color:rgba(179,64,244,.18); }
.us-cmd-icon { width:28px; height:28px; border-radius:7px; background:var(--s1); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.85rem; color:var(--muted); transition:background var(--mt-instant); }
.us-cmd-row.kb-active .us-cmd-icon { background:color-mix(in srgb,var(--accent) 18%,var(--s1)); color:var(--accent); }
.us-cmd-label { font-size:.88rem; color:var(--text); flex:1; }
.us-cmd-label mark { background:none; color:var(--accent); font-weight:700; font-style:normal; }
.us-cmd-hint { font-size:.72rem; color:var(--muted); }

/* ── Loading pulse - Doherty feedback on period switch ── */
.wrap.loading { opacity: .55; pointer-events: none; transition: opacity var(--mt-fast); }
.wrap.loading .kpi-val, .wrap.loading canvas { animation: shimmer .9s ease-in-out infinite alternate; }
@keyframes shimmer { from { opacity: .4; } to { opacity: 1; } }

/* ── Skeleton loader ── */
.skel { background: linear-gradient(90deg, var(--s0) 25%, var(--s1) 50%, var(--s0) 75%); background-size: 200% 100%; animation: skelShimmer 1.5s infinite linear; border-radius: 4px; will-change: background-position; }
@keyframes skelShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion:reduce) { .skel { animation:none; } }
.skel-line { height: 12px; margin:8px 0; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w80 { width: 80%; }
.skel-kpi { height: 42px; border-radius: 8px; margin:4px 0; }

/* ── Bar / map tooltip ── */
#btt {
  position: fixed; z-index: 8000; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  border: 1px solid var(--border); border-radius: 8px;
  padding:8px 12px; font-size: .8rem; color: var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,.75);
  backdrop-filter: blur(12px);
  opacity: 0; transition: opacity var(--mt-instant);
  white-space: nowrap; max-width: 240px; line-height: 1.45;
}
#btt.vis { opacity: 1; }

/* ── CRM Inbox ── */
.crm-tabs {
  display: flex; gap:2px; padding:10px 14px;
  border-bottom: 1px solid var(--border2); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20; background: var(--bg);
}
.crm-tab {
  padding:0 12px; border-radius: var(--r-pill);
  border: none; background: transparent; color: var(--muted);
  font-size: .82rem; cursor: pointer; font-family: var(--sans);
  transition: all var(--mt-fast); -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap:4px;
  min-height: 44px; line-height: 1; box-sizing: border-box;
}
.crm-tab .tab-icon { display: block; flex-shrink: 0; }
.crm-tab .tab-lbl, .crm-tab-ct { display: inline-flex; align-items: center; line-height: 1; }
/* CRM card: cap container height so the tab row + list scroll inside instead of pushing the page.
   Mobile 300px, desktop 700px. Tabs stay pinned; only the list scrolls. */
.crm-card-scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.crm-card-scroll::-webkit-scrollbar { width: 4px; }
.crm-card-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@media (min-width: 768px) { .crm-card-scroll { max-height: 900px; } }
.crm-tab:hover { color: var(--text); }
.crm-tab.active { background: rgba(179,64,244,.12); color: var(--accent); }
.crm-tab-ct {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding:0 4px;
  background: rgba(179,64,244,.14); color: var(--muted);
  border-radius: 9px; font-size: .64rem; font-weight: 700; margin-left:4px;
  vertical-align: middle; letter-spacing: 0;
}
.crm-tab.active .crm-tab-ct { background: rgba(179,64,244,.22); color: var(--accent); }
.crm-tab-ct-new { background: rgba(179,64,244,.9) !important; color: #fafafa !important; }
/* Von Restorff: donations tab is the highest-value action - the money moment. Give it visual priority
   even at rest, so recipients (Peak-End) can find it instantly. Purple wash on ct so it reads as "yours to review". */
.crm-tab-donations .tab-icon { color: #b340f4; }
.crm-tab-donations.active { color: #b340f4; background: rgba(179,64,244,.08); }
.crm-tab-donations:not(.active):hover { color: #b340f4; }
.crm-tab-ct-donations { background: linear-gradient(135deg,#7b1fa2,#b340f4) !important; color: #fafafa !important; font-weight: 800 !important; }
.crm-list { display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.crm-list.filter-all { overflow-y: auto; }
.crm-list::-webkit-scrollbar { width: 4px; }
.crm-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.crm-contact {
  border-left: 3px solid transparent;
  cursor: pointer; transition: background var(--mt-fast), border-color var(--mt-default);
}
.crm-contact:last-child { border-bottom: none; }
.crm-contact:hover { background: var(--s0); }
.crm-contact[data-status="new"]     { border-left-color: var(--violet); }
.crm-contact[data-status="replied"] { border-left-color: rgba(179,64,244,.35); }
.crm-contact[data-status="done"]    { border-left-color: rgba(237,232,255,.3); }
.crm-head { display: flex; align-items: center; gap:10px; padding:12px 14px; user-select: none; }
@media (min-width: 769px) {
  .crm-head { padding:18px 16px; gap:13px; }
  .crm-avatar { width:42px; height:42px; font-size:.95rem; }
}
.crm-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
  background: rgba(237,232,255,.07); color: var(--muted);
  border: 1px solid rgba(237,232,255,.12);
}
.crm-meta { flex: 1; min-width: 0; }
.crm-name { font-size: .88rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Role chip: subtle inline label next to the name, e.g. "Mayor of Thessaloniki".
   Gray so it recedes vs. the name (Gestalt hierarchy). Same gray we use in the pass email. */
.crm-role { display: inline-block; margin-left:8px; padding:2px 8px; border-radius: 100px; background: rgba(237,232,255,.06); color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .2px; vertical-align: middle; white-space: nowrap; }
.contact-name .crm-role { font-size: .66rem; margin-left:6px; padding:2px 8px; }
.crm-sub  { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-right { display: flex; flex-direction: column; align-items: flex-end; gap:4px; flex-shrink: 0; }
.crm-time  { font-size: .71rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.crm-type-badge {
  display: inline-flex; align-items: center; gap:4px;
  padding:2px 8px; border-radius: var(--r-pill);
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.crm-type-badge.registration { background: rgba(179,64,244,.1); color: var(--muted); border: 1px solid rgba(179,64,244,.18); }
.crm-type-badge.contact      { background: rgba(237,232,255,.06); color: var(--muted);  border: 1px solid var(--border2); }
.crm-type-badge.paypal       { background: rgba(179,64,244,.08);    color: var(--muted);   border: 1px solid rgba(179,64,244,.16); }
.crm-type-badge.stripe       { background: rgba(179,64,244,.08);   color: var(--muted);       border: 1px solid rgba(179,64,244,.18); }
.crm-type-badge.newsletter   { background: rgba(237,232,255,.04); color: var(--muted);  border: 1px solid var(--border2); }
.crm-type-badge.import       { background: rgba(179,64,244,.08);  color: var(--muted);       border: 1px solid rgba(179,64,244,.16); }
.crm-new-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
  animation: pdot 1.8s ease-in-out infinite; margin-left:4px; vertical-align: middle;
}
.crm-preview {
  padding:0 14px 10px 56px; font-size: .83rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5;
}
.crm-contact.open .crm-preview { display: none; }
.crm-body { padding:0 14px 14px 56px; display: none; }
@media (max-width:480px) { .crm-body { padding-left:14px; } .crm-tabs { gap:0; padding:6px 10px; } .crm-tab { padding:4px 8px; font-size: .76rem; } }
.crm-contact.open .crm-body { display: block; }
.crm-details {
  display: flex; flex-wrap: wrap; gap:6px 16px;
  margin-bottom:10px; font-size: .78rem; color: var(--muted);
}
.crm-details span { display: flex; align-items: center; gap:4px; }
.crm-msg { font-size: .88rem; color: var(--text); line-height: 1.65; margin-bottom:14px; white-space: pre-wrap; word-break: break-word; }
.crm-actions { display: flex; gap:6px; flex-wrap: wrap; margin-bottom:12px; }
.crm-btn {
  padding:4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .79rem; cursor: pointer;
  font-family: var(--sans); transition: all var(--mt-fast); -webkit-tap-highlight-color: transparent;
  line-height: 1.4; min-height: 44px;
}
.crm-btn:hover { border-color: var(--accent); color: var(--accent); }
.crm-btn.primary:hover { border-color: var(--accent); color: var(--accent); }
.crm-btn.active  { border-color: var(--accent); color: var(--accent); background: rgba(179,64,244,.09); }
.crm-btn.spam-active { border-color: rgba(179,64,244,.5); color: var(--muted); }
.crm-notes {
  width: 100%; padding:8px 10px;
  background: var(--s0); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text);
  font-size: .83rem; resize: vertical; min-height: 48px;
  font-family: var(--sans); outline: none; line-height: 1.5;
  transition: border-color var(--mt-default);
}
.crm-notes:focus { border-color: var(--accent); }
.crm-notes::placeholder { color: var(--muted); opacity: .6; }
.crm-notes-lbl { font-size: .72rem; color: var(--muted); margin-bottom:4px; letter-spacing: .06em; text-transform: uppercase; }

/* ── CRM Search ── */
.crm-search-wrap { padding:10px 0 2px; position: relative; }
.crm-search {
  width: 100%; padding:8px 72px 8px 36px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
  color: var(--text); font-size: .88rem; font-family: var(--sans);
  transition: border-color var(--mt-default), box-shadow var(--mt-default); box-sizing: border-box;
}
.crm-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(179,64,244,.1); }
.crm-search::placeholder { color: var(--muted); }
.crm-search-right { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap:4px; margin-top:4px; }
.crm-search-count { font-size: .71rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity var(--mt-fast); pointer-events: none; }
.crm-search-count.visible { opacity: 1; }
.crm-search-clear { width: 20px; height: 20px; border-radius: 50%; background: var(--s1); border: 1px solid var(--border2); color: var(--muted); font-size: .72rem; cursor: pointer; display: none; align-items: center; justify-content: center; line-height: 1; -webkit-tap-highlight-color: transparent; transition: background var(--mt-instant), color var(--mt-instant); }
.crm-search-clear:hover { background: var(--border); color: var(--text); }
.crm-search-clear.visible { display: flex; }
mark.crm-hl { background: rgba(179,64,244,.28); color: var(--text); border-radius: 2px; padding:0 1px; }
.crm-tab-trash { margin-left:auto; color: var(--muted); }
.crm-tab-trash.active { color: var(--violet); background: rgba(179,64,244,.08); }
.crm-btn.danger { border-color: rgba(179,64,244,.35); color: var(--accent); }
.crm-btn.danger:hover { border-color: var(--accent); color: var(--accent); background: rgba(179,64,244,.08); }
.crm-btn.perm-delete { border-color: rgba(179,64,244,.5); color: var(--violet); }
.crm-btn.perm-delete:hover { background: rgba(179,64,244,.15); }

/* ── Urgency ── */
.crm-urgent .crm-time { color: var(--text); font-weight: 700; }
.crm-urgent .crm-avatar { box-shadow: 0 0 0 2px var(--accent); }

/* ── Bulk select ── */
.crm-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin-right:8px; }
#bulkBar {
  display: none; position: sticky; bottom: 0; left: 0; right: 0; z-index: 200;
  background: color-mix(in srgb, var(--accent) 12%, var(--ink));
  border-top: 1px solid var(--border); padding:10px 14px;
  align-items: center; gap:10px; flex-wrap: wrap;
  border-radius: 0 0 var(--r) var(--r);
}
#bulkBar.show { display: flex; }
#bulkBar .bulk-lbl { font-size: .83rem; color: var(--muted); margin-right:4px; }
#bulkBar .crm-btn { font-size: .79rem; }

/* ── Inbox toolbar ── */
.crm-toolbar { display: flex; align-items: center; gap:8px; padding:8px 0 2px; flex-wrap: wrap; }
.crm-toolbar-btn {
  padding:4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .78rem; cursor: pointer;
  font-family: var(--sans); transition: all var(--mt-fast); -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.crm-toolbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.crm-toolbar-btn.active { background: rgba(179,64,244,.1); color: var(--accent); border-color: var(--accent); }

/* ── Thread view ── */
.crm-thread { border: 1px solid var(--border); border-radius: var(--r); margin-bottom:8px; overflow: hidden; }
.crm-thread-head {
  display: flex; align-items: center; gap:10px; padding:12px 14px;
  cursor: pointer; background: var(--s0);
  width: 100%; border: none; text-align: left; color: var(--text); font-family: var(--sans); font-size: 1rem;
}
.crm-thread-head:hover { background: var(--s1); }
.crm-thread-count { font-size: .72rem; padding:2px 8px; border-radius: var(--r-pill); background: rgba(237,232,255,.07); color: var(--muted); font-weight: 700; }
.crm-thread-body { display: none; }
.crm-thread.open .crm-thread-body { display: block; }

/* ── Follow-up ── */
.crm-followup-wrap { display: flex; align-items: center; gap:8px; margin-top:10px; }
.crm-followup-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.crm-followup-inp {
  padding:4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: .8rem;
  font-family: var(--sans); cursor: pointer;
}
.crm-followup-inp:focus { outline: none; border-color: var(--accent); }
.crm-due .crm-avatar { box-shadow: 0 0 0 2px var(--accent); }

/* ── Kbd shortcut hint ── */
.crm-kbd-hint { display: none; }
#btnSaveFilter { display: none; }
@media (max-width: 600px) {
  #btnThreads, #btnExport, #btnSelectAll { display: none; }
  #btnCrmOverflow { display: inline-flex !important; }
}
.crm-overflow-menu { position:absolute; top:100%; left:0; z-index:200; background:var(--s1); border:1px solid var(--border2); border-radius:10px; padding:6px; display:none; flex-direction:column; gap:2px; min-width:160px; box-shadow:0 8px 32px rgba(0,0,0,.8); }
.crm-overflow-menu.open { display:flex; }
.crm-overflow-item { background:none; border:none; color:var(--text); font-size:.85rem; font-family:var(--sans); padding:8px 12px; border-radius:7px; cursor:pointer; text-align:left; display:flex; align-items:center; gap:8px; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.crm-overflow-item:hover { background:var(--s1); }
kbd { display: inline-block; padding:1px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: .68rem; font-family: var(--mono); }

/* ── Smart tags ── */
.crm-tags { display: flex; flex-wrap: wrap; gap:4px; margin:8px 0 0; }
.crm-tag {
  display: inline-flex; align-items: center; gap:4px;
  padding:2px 8px 2px 8px; border-radius: var(--r-pill);
  font-size: .71rem; font-weight: 600; cursor: default;
  border: 1px solid transparent; letter-spacing: .03em;
}
.crm-tag[data-t="VIP"]        { background: rgba(237,232,255,.08); color: var(--text); border-color: rgba(237,232,255,.2); }
.crm-tag[data-t="Scholarship"]{ background: rgba(237,232,255,.06); color: var(--muted); border-color: rgba(237,232,255,.15); }
.crm-tag[data-t="No-show"]    { background: rgba(237,232,255,.05); color: var(--dim); border-color: rgba(237,232,255,.12); }
.crm-tag[data-t="Volunteer"]  { background: rgba(237,232,255,.06); color: var(--muted); border-color: rgba(237,232,255,.14); }
.crm-tag[data-t="Sponsor"]    { background: rgba(237,232,255,.06); color: var(--muted); border-color: rgba(237,232,255,.14); }
.crm-tag[data-t="Press"]      { background: rgba(237,232,255,.06); color: var(--muted); border-color: rgba(237,232,255,.14); }
.crm-tag .tag-x { cursor: pointer; opacity: .7; font-size: .8rem; line-height: 1; }
.crm-tag .tag-x:hover { opacity: 1; }
.crm-add-tag {
  padding:2px 8px; border-radius: var(--r-pill); border: 1px dashed var(--border);
  background: transparent; color: var(--muted); font-size: .71rem; cursor: pointer;
  font-family: var(--sans); transition: all var(--mt-fast);
}
.crm-add-tag:hover { border-color: var(--accent); color: var(--accent); }
.tag-menu {
  position: absolute; z-index: 999; background: var(--ink); border: 1px solid var(--border);
  border-radius: var(--r); padding:4px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap:2px; min-width: 140px;
}
.tag-menu button {
  text-align: left; padding:6px 10px; border: none; background: transparent;
  color: var(--text); font-size: .8rem; cursor: pointer; border-radius: 5px;
  font-family: var(--sans); transition: background var(--mt-instant);
}
.tag-menu button:hover { background: var(--s1); }

/* ── Activity log ── */
.crm-log { margin-top:12px; }
.crm-log-lbl { font-size: .72rem; color: var(--muted); margin-bottom:6px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; user-select: none; background: none; border: none; padding: 0; font-family: var(--sans); display: block; }
.crm-log-lbl:hover { color: var(--text); }
.crm-log-entries { display: none; flex-direction: column; gap:4px; max-height: 180px; overflow-y: auto; }
.crm-log.open .crm-log-entries { display: flex; }
.crm-log-entry {
  font-size: .75rem; color: var(--muted); padding:4px 8px;
  border-left: 2px solid var(--border); background: var(--s0);
  border-radius: 0 5px 5px 0;
}
.crm-log-entry strong { color: var(--text); font-weight: 600; }

/* ── Snooze ── */
.crm-snooze-wrap { position:relative; display:inline-block; }
.snooze-menu {
  position:absolute; bottom:calc(100% + 4px); left:0; z-index:900;
  background:var(--ink); border:1px solid var(--border); border-radius:var(--r);
  padding:4px; min-width:170px; box-shadow:0 -8px 24px rgba(0,0,0,.45);
  display:none; flex-direction:column; gap:2px;
}
.snooze-menu.open { display:flex; }
.snooze-opt {
  padding:8px 12px; border:none; background:transparent; color:var(--text);
  font-size:.8rem; cursor:pointer; border-radius:5px; text-align:left;
  font-family:var(--sans); transition:background var(--mt-instant); display:flex; align-items:center; gap:8px;
}
.snooze-opt:hover { background:var(--s1); }
.snooze-opt .snooze-time { color:var(--muted); font-size:.72rem; margin-left:auto; }
.crm-snoozed { opacity:.55; }
.crm-snoozed .crm-avatar { filter:grayscale(1); }
.snooze-badge {
  font-size:.65rem; padding:1px 6px; border-radius:var(--r-pill);
  background:rgba(237,232,255,.06); color:var(--dim); border:1px solid rgba(237,232,255,.12);
  white-space:nowrap;
}

/* ── Pin / Star ── */
.crm-pin-btn {
  background:none; border:none; cursor:pointer; font-size:1rem; line-height:1;
  padding:2px; color:var(--muted); transition:all var(--mt-fast); flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
}
.crm-contact:hover .crm-pin-btn,
.crm-contact:focus-within .crm-pin-btn { opacity:1; }
.crm-pin-btn.pinned { color:var(--accent); filter:drop-shadow(0 0 4px rgba(179,64,244,.5)); opacity:1; }
.crm-pin-btn:hover { transform:scale(1.25); }
.crm-contact.pinned-card { border-left:2px solid var(--accent); }
@keyframes pinRise { from { transform:translateY(6px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.crm-contact.pin-anim { animation:pinRise .28s ease; }

/* ── Sentiment ── */
.sentiment-badge { font-size:.82rem; cursor:default; flex-shrink:0; }
.sentiment-badge[data-s="negative"] { animation:pulse-neg 2.4s infinite; }
@keyframes pulse-neg { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ── Response time KPI strip ── */
#crmRtBar {
  display:flex; gap:18px; align-items:center; padding:8px 0 0;
  font-size:.75rem; color:var(--muted); flex-wrap:wrap;
}
.rt-kpi { display:flex; align-items:center; gap:4px; }
.rt-val { font-weight:700; font-variant-numeric:tabular-nums; }
.rt-val.good  { color:var(--text); }
.rt-val.warn  { color:var(--muted); }
.rt-val.bad   { color:var(--dim); }

/* ── Peak hours sparkline ── */
#peakWrap { padding:6px 0 0; }
#peakWrap canvas { display:block; }
.peak-lbl { font-size:.68rem; color:var(--muted); margin-bottom:4px; }

/* ── Contact score ── */
.contact-score-wrap { display:flex; align-items:center; gap:6px; }
.contact-score-bar { flex:1; height:4px; background:var(--s1); border-radius:2px; overflow:hidden; min-width:40px; }
.contact-score-fill { height:100%; border-radius:2px; transition:width .5s ease; }
.contact-score-num { font-size:.7rem; font-weight:700; min-width:26px; text-align:right; font-variant-numeric:tabular-nums; }

/* ── Country breakdown ── */
#countryBreakdown { padding:8px 0 0; }
.country-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:.77rem; }
.country-flag { font-size:.88rem; width:20px; text-align:center; }
.country-name { color:var(--muted); min-width:80px; }
.country-bar-track { flex:1; height:5px; background:var(--s1); border-radius:3px; overflow:hidden; }
.country-bar-fill { height:100%; background:rgba(237,232,255,.55); border-radius:3px; transition:width .5s; }
.country-count { color:var(--text); font-weight:600; min-width:24px; text-align:right; }

/* ── Inbox Zero ── */
#inboxZero {
  display:none; position:absolute; inset:0; z-index:500;
  flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
#inboxZero.show { display:flex; }
.iz-icon { font-size:3.5rem; animation:izPop .4s cubic-bezier(.34,1.56,.64,1); }
.iz-text { font-size:1.05rem; font-weight:700; color:var(--text); margin-top:8px; animation:izFade .4s .2s both; }
.iz-sub  { font-size:.78rem; color:var(--muted); margin-top:4px; animation:izFade .4s .35s both; }
@keyframes izPop  { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
@keyframes izFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.iz-confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.iz-dot {
  position:absolute; width:6px; height:6px; border-radius:50%;
  animation:izFly 1.2s ease-out forwards;
}
@keyframes izFly {
  from { transform:translateY(50%) scale(0); opacity:1; }
  to   { transform:translateY(-200px) scale(1) rotate(360deg); opacity:0; }
}

/* ── Scheduled send dropdown ── */
.sched-wrap { position:relative; }
.sched-menu {
  display:none; position:absolute; bottom:calc(100%+4px); left:0; z-index:900;
  background:var(--ink); border:1px solid var(--border); border-radius:var(--r);
  padding:4px; min-width:200px; box-shadow:0 -8px 24px rgba(0,0,0,.5);
  flex-direction:column; gap:2px;
}
.sched-menu.open { display:flex; }
.sched-opt {
  padding:8px 12px; border:none; background:transparent; color:var(--text);
  font-size:.82rem; cursor:pointer; border-radius:5px; text-align:left;
  font-family:var(--sans); transition:background var(--mt-instant); display:flex; justify-content:space-between; align-items:center;
}
.sched-opt:hover { background:var(--s1); }
.sched-opt span { color:var(--muted); font-size:.72rem; }
.sched-sep { height:1px; background:var(--border); margin:2px 0; }
#schedBtn {
  padding:10px 18px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:.88rem; cursor:pointer;
  font-family:var(--sans); transition:all var(--mt-fast); white-space:nowrap;
}
#schedBtn:hover { border-color:var(--accent); color:var(--accent); }
#schedBtn.scheduled { border-color:var(--accent); color:var(--accent); background:rgba(179,64,244,.1); }

/* ── Sequence panel ── */
.seq-row {
  background:var(--s1); border:1px solid var(--border2); border-radius:var(--r);
  padding:12px 14px; margin-bottom:8px; transition:border-color var(--mt-fast);
}
.seq-row:last-child { margin-bottom:0; }
.seq-row-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.seq-row-email { font-size:.84rem; font-weight:700; color:var(--text); }
.seq-row-meta { font-size:.72rem; color:var(--muted); margin-left:auto; }
.seq-row-subject { font-size:.82rem; color:var(--text); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seq-row-body-preview { font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px; }
.seq-row-actions { display:flex; gap:8px; flex-wrap:wrap; }
.seq-row-btn {
  display:flex; align-items:center; gap:4px; padding:8px 12px;
  background:var(--s0); border:1px solid var(--border2); border-radius:var(--r-pill);
  font-size:.76rem; font-weight:600; cursor:pointer; color:var(--text);
  font-family:var(--sans); -webkit-tap-highlight-color:transparent; min-height:36px;
  transition:background var(--mt-fast), border-color var(--mt-fast);
}
.seq-row-btn:hover { background:var(--s2); border-color:var(--border); }
.seq-row-btn.del { color:var(--red,var(--accent)); }
.seq-status-pill {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.seq-status-pending { background:rgba(237,232,255,.07); color:var(--muted); }
.seq-status-sent { background:rgba(237,232,255,.05); color:var(--dim); }
.seq-status-skipped { background:rgba(179,64,244,.12); color:var(--muted); }
.seq-group { margin-bottom:20px; }
.seq-group-hd {
  font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; padding:0 0 8px; border-bottom:1px solid var(--border2); margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.seq-filter-btn {
  padding:6px 12px; background:var(--s1); border:1px solid var(--border2);
  border-radius:var(--r-pill); font-size:.76rem; font-weight:600; cursor:pointer;
  color:var(--muted); font-family:var(--sans); -webkit-tap-highlight-color:transparent;
  transition:background var(--mt-fast), color var(--mt-fast), border-color var(--mt-fast); min-height:32px;
}
.seq-filter-btn.active { background:var(--s2); border-color:var(--border); color:var(--text); }
#seqPanel {
  display:none; position:fixed; inset:0; z-index:4500;
  background:rgba(10,10,19,.8); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#seqPanel.open { display:flex; }
#seqBox {
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r);
  padding:28px; width:min(520px,94vw); max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.7);
}
#seqBox h3 { font-size:1rem; font-weight:700; margin:0 0 16px; color:var(--text); }
.seq-step {
  background:var(--s0); border:1px solid var(--border); border-radius:var(--r);
  padding:14px; margin-bottom:10px;
}
.seq-step-head { font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.seq-inp {
  width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.84rem; font-family:var(--sans);
  margin-bottom:8px; outline:none; box-sizing:border-box;
}
.seq-inp:focus { border-color:var(--accent); }
.seq-ta { resize:vertical; min-height:60px; line-height:1.5; }
.seq-presets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.seq-preset {
  padding:4px 12px; border-radius:var(--r-pill); border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:.76rem; cursor:pointer;
  font-family:var(--sans); transition:all var(--mt-fast);
}
.seq-preset:hover, .seq-preset.active { border-color:var(--accent); color:var(--accent); background:rgba(179,64,244,.08); }

/* ── Auto-rules panel ── */
#rulesPanel {
  display:none; position:fixed; inset:0; z-index:4500;
  background:rgba(10,10,19,.8); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
#rulesPanel.open { display:flex; }
#rulesBox {
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r);
  padding:28px; width:min(540px,94vw); max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.7);
}
#rulesBox h3 { font-size:1rem; font-weight:700; margin:0 0 6px; color:var(--text); }
.rules-sub { font-size:.78rem; color:var(--muted); margin-bottom:16px; }
.rule-builder {
  display:grid; grid-template-columns:1fr auto 1fr auto; gap:8px; align-items:center;
  background:var(--s0); border:1px solid var(--border); border-radius:var(--r); padding:12px; margin-bottom:10px;
}
.rule-sel {
  padding:8px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.82rem; font-family:var(--sans);
  outline:none; cursor:pointer;
}
.rule-sel:focus { border-color:var(--accent); }
.rule-arrow { color:var(--muted); font-size:.8rem; white-space:nowrap; padding:0 4px; }
.rules-list { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.rule-row {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--s0); border:1px solid var(--border); border-radius:var(--r);
  font-size:.8rem; color:var(--text);
}
.rule-row .rule-del { margin-left:auto; color:var(--muted); cursor:pointer; font-size:.85rem; transition:color var(--mt-fast); background:none; border:none; }
.rule-row .rule-del:hover { color:var(--violet); }

/* ── Contacts view ── */
.contacts-toolbar { display:flex; align-items:center; gap:10px; padding:10px 0 8px; flex-wrap:wrap; position:sticky; top:0; z-index:10; background:var(--s0); border-bottom:1px solid transparent; }
.contacts-search-wrap { position:relative; flex:1; min-width:180px; display:flex; align-items:center; }
.contacts-search {
  width:100%; padding:8px 36px 8px 34px;
  border-radius:8px; border:1px solid var(--border); background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 11px center;
  color:var(--text); font-size:.87rem; font-family:var(--sans); box-sizing:border-box;
  transition:border-color var(--mt-fast), box-shadow var(--mt-fast);
}
.contacts-search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(179,64,244,.1); }
.contacts-search-clear { position:absolute; right:8px; width:20px; height:20px; border-radius:50%; background:var(--s1); border:1px solid var(--border2); color:var(--muted); font-size:.68rem; cursor:pointer; display:none; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:background var(--mt-instant); }
.contacts-search-clear:hover { background:var(--border); color:var(--text); }
.contacts-search-clear.visible { display:flex; }
.contacts-sort {
  padding:8px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--muted); font-size:.8rem; font-family:var(--sans); cursor:pointer;
}
.contacts-count { font-size:.78rem; color:var(--muted); }
.contacts-list { display:flex; flex-direction:column; gap:0; position:relative; }
/* Alphabetical section header (Apple/Samsung style) */
.contacts-alpha-head {
  position:sticky; top:0; z-index:2;
  padding:4px 14px 4px;
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); background:color-mix(in srgb,var(--ink) 96%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border2);
  user-select:none;
}
/* A-Z scrubber on the right */
.contacts-az-scrubber {
  position:absolute; right:0; top:0; bottom:0; width:20px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:0; z-index:10; pointer-events:none; opacity:0; transition:opacity var(--mt-fast);
}
.contacts-list:hover .contacts-az-scrubber { opacity:1; pointer-events:auto; }
.contacts-az-letter {
  font-size:.58rem; font-weight:700; color:var(--accent); line-height:1.5;
  cursor:pointer; padding:0 4px; -webkit-tap-highlight-color:transparent;
  transition:color var(--mt-instant), transform var(--mt-instant);
}
.contacts-az-letter:hover { color:var(--text); transform:scale(1.4); }
.cl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; padding:16px 0; }
.cl-card { background:var(--s1); border:1px solid var(--border2); border-radius:var(--r); padding:16px; cursor:pointer; transition:border-color var(--mt-fast),box-shadow var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.cl-card:hover { border-color:var(--accent); box-shadow:0 0 0 3px rgba(179,64,244,.1); }
.cl-card-name { font-weight:700; font-size:.9rem; color:var(--text); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-card-meta { font-size:.75rem; color:var(--muted); }
.cl-card-actions { display:flex; gap:6px; margin-top:12px; }
.cl-detail-header { display:flex; align-items:center; gap:10px; padding:12px 0 16px; flex-wrap:wrap; }
.cl-member { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border2); }
.cl-member:last-child { border-bottom:none; }
.cl-member-av { width:28px; height:28px; border-radius:50%; background:var(--s1); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:var(--muted); flex-shrink:0; }
.cl-member-info { flex:1; min-width:0; }
.cl-member-name { font-size:.84rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-member-email { font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-row {
  display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer;
  transition:background var(--mt-fast);
}
.contact-row:first-child { border-top:1px solid var(--border); border-radius:var(--r) var(--r) 0 0; }
.contact-row:last-child  { border-radius:0 0 var(--r) var(--r); }
.contact-row:hover { background:var(--s0); }
.contact-av {
  width:38px; height:38px; border-radius:50%; background:var(--s1);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:700; color:var(--text); flex-shrink:0;
}
@media (min-width: 769px) {
  .contact-row { padding:18px 16px; gap:14px; }
  .contact-av { width:48px; height:48px; font-size:1.05rem; }
}
.contact-info { min-width:0; }
.contact-name { font-size:.9rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-sub  { font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.contact-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.contact-stage {
  font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:var(--r-pill);
  letter-spacing:.04em; text-transform:uppercase;
}
.stage-lead        { background:rgba(179,64,244,.1); color:var(--muted); border:1px solid rgba(179,64,244,.2); }
.stage-interested  { background:rgba(179,64,244,.1);  color:var(--muted); border:1px solid rgba(179,64,244,.2); }
.stage-registered  { background:rgba(179,64,244,.1);  color:var(--muted); border:1px solid rgba(179,64,244,.2); }
.stage-paid        { background:rgba(179,64,244,.1);   color:var(--muted); border:1px solid rgba(179,64,244,.2); }
.stage-attended    { background:rgba(179,64,244,.1);  color:var(--muted); border:1px solid rgba(179,64,244,.2); }
.stage-vip         { background:rgba(179,64,244,.12);   color:var(--text); border:1px solid rgba(179,64,244,.25); }
.stage-cancelled   { background:rgba(179,64,244,.06);   color:var(--dim); border:1px solid rgba(179,64,244,.15); }
.stage-waitlisted  { background:rgba(179,64,244,.08);  color:var(--dim); border:1px solid rgba(179,64,244,.18); }
.contact-badges { display:flex; gap:4px; }
.contact-amt { font-size:.78rem; color:var(--text); font-weight:700; font-variant-numeric:tabular-nums; }
.contact-ago { font-size:.7rem; color:var(--muted); }

/* ── Contact detail panel ── */
#contactPanel {
  position:fixed; top:0; right:-480px; bottom:0; width:min(480px,100vw);
  background:var(--ink); border-left:1px solid var(--border);
  z-index:9600; display:flex; flex-direction:column;
  transition:right .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 32px rgba(0,0,0,.45);
}
#contactPanel.open { right:0; }
.cp-head {
  display:flex; align-items:center; gap:14px; padding:20px 20px 16px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.cp-av {
  width:52px; height:52px; border-radius:50%; background:var(--s1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:700; color:var(--text); flex-shrink:0;
}
.cp-info { flex:1; min-width:0; }
.cp-name { font-size:1.05rem; font-weight:700; color:var(--text); }
.cp-email { font-size:.8rem; color:var(--muted); margin-top:2px; }
.cp-close {
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all var(--mt-fast); -webkit-tap-highlight-color:transparent;
}
.cp-close:hover { border-color:var(--accent); color:var(--accent); }
.cp-body { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
.cp-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cp-kpi { background:var(--s0); border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; }
.cp-kpi-val-date { font-size:.82rem; font-weight:700; letter-spacing:0; }
.cp-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cp-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); margin-top:4px; }
.cp-section-lbl { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:0; }
/* referral section inside contact panel */
.cp-referral { display:flex; flex-direction:column; gap:6px; }
.cp-ref-loading { font-size:.75rem; color:var(--muted); padding:4px 0; }
.cp-ref-hdr { display:flex; align-items:center; justify-content:space-between; }
.cp-ref-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cp-ref-score { font-size:.72rem; font-weight:700; color:var(--accent); }
.cp-ref-row { display:flex; align-items:center; gap:8px; background:var(--s0); border:1px solid var(--border); border-radius:8px; padding:7px 10px; font-size:.75rem; }
.cp-ref-prog { font-weight:600; color:var(--text); flex:1; }
.cp-ref-stat { color:var(--muted); white-space:nowrap; }
.cp-ref-copy { background:none; border:1px solid var(--border); border-radius:6px; padding:3px 8px; font-size:.7rem; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.cp-ref-gen { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:.75rem; color:var(--accent); cursor:pointer; -webkit-tap-highlight-color:transparent; text-align:left; }
.cp-stage-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cp-stage-btn {
  padding:4px 12px; border-radius:var(--r-pill); border:1px solid var(--border);
  background:transparent; color:var(--muted); font-size:.75rem; cursor:pointer;
  font-family:var(--sans); transition:all var(--mt-fast); -webkit-tap-highlight-color:transparent;
}
.cp-stage-btn.active { background:var(--accent); color:#fafafa; border-color:var(--accent); }
.cp-timeline { display:flex; flex-direction:column; gap:0; }
.cp-event {
  display:flex; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--border); font-size:.82rem;
}
.cp-event:last-child { border-bottom:none; }
.cp-event-icon { font-size:1rem; flex-shrink:0; width:24px; text-align:center; }
.cp-event-body { flex:1; min-width:0; }
.cp-event-title { color:var(--text); font-weight:600; }
.cp-event-sub { color:var(--muted); font-size:.75rem; margin-top:2px; white-space:pre-wrap; word-break:break-word; }
.cp-event-ts { color:var(--muted); font-size:.68rem; white-space:nowrap; flex-shrink:0; }
.cp-notes { width:100%; padding:10px 12px; background:var(--s0); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:.84rem; resize:vertical; min-height:70px; font-family:var(--sans); outline:none; line-height:1.55; }
.cp-notes:focus { border-color:var(--accent); }
.cp-edit-form { display:none; flex-direction:column; gap:10px; background:var(--s0); border:1px solid var(--border); border-radius:var(--r); padding:14px; margin-top:2px; }
.cp-edit-form.open { display:flex; }
.cp-edit-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cp-edit-field { display:flex; flex-direction:column; gap:4px; }
.cp-edit-field label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.cp-edit-field input { padding:8px 10px; background:var(--s1); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:.84rem; font-family:var(--sans); outline:none; -webkit-tap-highlight-color:transparent; }
.cp-edit-field input:focus { border-color:var(--accent); }
.cp-edit-actions { display:flex; gap:8px; justify-content:flex-end; }
.cp-edit-save { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill); padding:8px 20px; font-size:.84rem; font-family:var(--sans); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cp-edit-cancel { background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 16px; font-size:.84rem; font-family:var(--sans); cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ════ BROADCAST CSS: moved to krato-broadcast.js ════ */
/* ── Analytics overlay ── */
#analyticsOverlay { display:none; position:fixed; inset:0; z-index:9000; background:var(--bg); overflow-y:auto; transform:translateY(40px); opacity:0; transition:transform .28s cubic-bezier(.22,1,.36,1), opacity var(--mt-default) ease; }
#analyticsOverlay.an-open { transform:translateY(0); opacity:1; }
@media(prefers-reduced-motion:reduce) { #analyticsOverlay { transition:none; } }
/* ── Social overlay ── */
#socialOverlay { display:none; position:fixed; inset:0; z-index:9000; background:var(--bg); overflow-y:auto; transform:translateY(40px); opacity:0; transition:transform .28s cubic-bezier(.22,1,.36,1), opacity var(--mt-default) ease; }
#socialOverlay.soc-open { transform:translateY(0); opacity:1; }
@media(prefers-reduced-motion:reduce) { #socialOverlay { transition:none; } }
/* ── Social module ────────────────────────────────────────────────────── */

/* Platform pills - 12px minimum, clear platform colour coding */
.soc-platform-pill { display:inline-flex; align-items:center; gap:6px; font:600 14px/1 var(--sans); padding:6px 14px; border-radius:20px; flex-shrink:0; }
.soc-platform-pill--instagram { background:rgba(225,48,108,.15); color:#e1306c; }
.soc-platform-pill--facebook  { background:rgba(66,103,178,.18); color:#7b96d9; }
.soc-platform-pill--tiktok    { background:rgba(255,255,255,.08); color:var(--text); border:1px solid rgba(255,255,255,.12); }
html[data-theme="light"] .soc-platform-pill--tiktok { background:rgba(10,10,19,.07); border-color:rgba(10,10,19,.14); }
.soc-platform-pill--meta      { background:rgba(66,103,178,.18); color:#7b96d9; }

/* Section label - social-specific, heavier than an-lbl for context clarity */
.soc-lbl { font:800 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin:0 0 16px; }
.soc-lbl + * { margin-top:0; }

/* Overview connected account pills */
.soc-ov-pill { display:inline-flex; align-items:center; gap:12px; background:var(--s1); border:1px solid var(--border); border-radius:var(--r-pill); padding:12px 18px; min-height:48px; }
.soc-ov-pill-name { font:600 15px/1 var(--sans); color:var(--text); }
.soc-quick-row { display:flex; gap:8px; flex-wrap:wrap; }

/* Account cards */
.soc-acc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.soc-acc-card { display:flex; flex-direction:column; gap:0; background:var(--s1); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.soc-acc-card-top { display:flex; align-items:center; gap:16px; padding:22px 20px 18px; }
.soc-acc-avatar-wrap { position:relative; flex-shrink:0; }
.soc-acc-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--s0); display:block; }
.soc-acc-avatar-ph { width:56px; height:56px; border-radius:50%; background:var(--s0); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.soc-acc-platform-badge { position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:var(--bg); border:2px solid var(--s1); display:flex; align-items:center; justify-content:center; }
.soc-acc-info { flex:1; min-width:0; }
.soc-acc-name { font:700 20px/1.2 var(--sans); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.soc-acc-handle { font:400 15px/1 var(--sans); color:var(--muted); margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.soc-acc-divider { height:1px; background:var(--border2); margin:0 18px; }
.soc-acc-stats { display:flex; align-items:baseline; gap:6px; padding:16px 20px; }
.soc-acc-stat-val { font:700 22px/1 var(--sans); color:var(--text); }
.soc-acc-stat-lbl { font:400 15px/1 var(--sans); color:var(--muted); }
.soc-acc-meta--warn { font:500 14px/1 var(--sans); color:#fbbf24; display:flex; align-items:center; gap:4px; padding:12px 20px; }
.soc-acc-footer { padding:12px 16px 16px; margin-top:auto; }
.soc-disconnect-btn { padding:10px 18px; font:600 14px/1 var(--sans); letter-spacing:.04em; color:var(--muted); background:transparent; border:1px solid var(--border2); border-radius:var(--r-pill); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast),border-color var(--mt-fast),background var(--mt-fast); min-height:40px; }
.soc-disconnect-btn:hover { color:#ef4444; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.06); }

/* Connect cards */
.soc-connect-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.soc-connect-card { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r); border:1px dashed var(--border2); background:var(--s0); cursor:pointer; color:var(--text); font:500 15px/1.3 var(--sans); transition:background var(--mt-fast), border-color var(--mt-fast); -webkit-tap-highlight-color:transparent; min-height:64px; }
.soc-connect-card:hover { background:var(--s1); border-color:var(--border); }
.soc-connect-plus { margin-left:auto; color:var(--accent); font-size:1.2rem; line-height:1; }

/* Compose */
.soc-field { display:flex; flex-direction:column; gap:8px; }
.soc-char-row { display:flex; justify-content:space-between; align-items:center; }
.soc-char-info { font:400 15px/1 var(--sans); color:var(--muted); }
.soc-char-count { font:600 15px/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--text); }
.soc-char-count--warn { color:#fbbf24; }
.soc-char-count--over { color:#f87171; }
.soc-platform-row { display:flex; gap:8px; flex-wrap:wrap; }
.soc-mtype { padding:14px 20px; border-radius:8px; border:1px solid var(--border2); background:transparent; color:var(--muted); cursor:pointer; font:600 17px/1 var(--sans); transition:background var(--mt-fast), border-color var(--mt-fast), color var(--mt-fast); -webkit-tap-highlight-color:transparent; min-height:52px; }
.soc-mtype.soc-active { background:var(--s1); color:var(--text); border-color:var(--border); }
.soc-compose-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.soc-desk-tabs { display:none !important; }

/* Media preview */
.soc-media-preview { position:relative; border-radius:var(--r); overflow:hidden; background:var(--s0); }
.soc-media-thumb { display:block; width:100%; max-height:220px; object-fit:contain; background:var(--s0); }
.soc-media-remove { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.72); color:#fafafa; border:none; border-radius:6px; padding:6px 12px; font:600 12px/1.4 var(--sans); cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ── Compose preview - pass-email design language ── */
.soc-prev-col { position:sticky; top:-5px; }
.soc-prev-body { padding:0 !important; overflow:hidden; }
.soc-prev { background:#111; border-radius:16px; overflow:hidden; font-family:-apple-system,system-ui,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif; border:1px solid #222; }
.soc-prev-brand { padding:22px 24px 18px; background:#0d0d0d; border-bottom:1px solid #1e1e1e; display:flex; align-items:center; justify-content:space-between; }
.soc-prev-brand-name { font-size:13px; font-weight:700; color:#b340f4; letter-spacing:5px; text-transform:uppercase; }
.soc-prev-brand-tag  { font-size:12px; color:#555; letter-spacing:3px; text-transform:uppercase; font-weight:600; }
.soc-prev-empty { padding:56px 28px; text-align:center; background:#111; }
.soc-prev-empty-pulse { width:72px; height:72px; border-radius:50%; background:rgba(179,64,244,.12); border:1px solid rgba(179,64,244,.25); margin:0 auto 24px; display:flex; align-items:center; justify-content:center; }
.soc-prev-empty-icon { color:#b340f4; opacity:.7; }
.soc-prev-empty-title { font-size:20px; font-weight:800; color:#fafafa; margin-bottom:10px; letter-spacing:-.3px; }
.soc-prev-empty-sub { font-size:16px; color:#888; line-height:1.7; }
.soc-prev-media { background:#0a0a0a; position:relative; }
.soc-prev-media-el { display:block; width:100%; max-height:320px; object-fit:cover; }
.soc-prev-media-badge { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); color:#fafafa; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; padding:5px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.1); }
.soc-prev-divider { border:none; border-top:2px dashed #222; margin:0; }
.soc-prev-caption-wrap { padding:22px 24px; border-bottom:1px solid #1a1a1a; }
.soc-prev-label { font-size:11px; font-weight:700; color:#b340f4; letter-spacing:4px; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.soc-prev-label::after { content:''; flex:1; height:1px; background:rgba(179,64,244,.2); }
.soc-prev-caption { font-size:17px; color:#e8e8e8; line-height:1.75; white-space:pre-wrap; word-break:break-word; font-weight:400; }
.soc-prev-caption--ph { color:#444; font-style:italic; font-size:16px; }
.soc-prev-strip { display:flex; align-items:center; gap:12px; padding:18px 24px; background:#0d0d0d; border-top:1px solid #1a1a1a; }
.soc-prev-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid #2a2a2a; }
.soc-prev-avatar--ph { background:#1e1e1e; }
.soc-prev-acct-name { font-size:17px; font-weight:700; color:#fafafa; line-height:1; }
.soc-prev-acct-time { font-size:13px; color:#555; margin-top:5px; letter-spacing:.3px; }

/* Chevrons */
.ksid-chev { width:18px; height:18px; }
.ksid-grp-chev { width:14px; height:14px; }

/* Social pill nav: hidden everywhere */
#socPill { display:none !important; }

/* Compose two-col: always side by side */
#socPanelCompose .two-col { grid-template-columns:1fr 1fr; }
@media(max-width:600px) { #socPanelCompose .two-col { grid-template-columns:1fr; } }

/* Post list - 2-col grid */
.soc-post-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media(max-width:600px) { .soc-post-list { grid-template-columns:1fr; } }
.soc-post-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.soc-post-caption { font:400 14px/1.6 var(--sans); color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.soc-post-meta { font:400 12px/1 var(--sans); color:var(--dim); margin-top:8px; }
.soc-post-err { font:400 12px/1.5 var(--sans); color:#f87171; margin-top:4px; }
.soc-post-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* Status chips - 11px, clear semantic colours */
.soc-status-chip { display:inline-flex; align-items:center; gap:4px; font:600 11px/1 var(--sans); padding:4px 9px; border-radius:20px; flex-shrink:0; text-transform:uppercase; letter-spacing:.05em; }
.soc-status--draft     { background:var(--s1); color:var(--muted); }
.soc-status--scheduled { background:rgba(251,191,36,.14); color:#fbbf24; }
.soc-status--published { background:rgba(74,222,128,.14); color:#4ade80; }
.soc-status--failed    { background:rgba(248,113,113,.14); color:#f87171; }
.soc-status--publishing{ background:rgba(165,180,252,.14); color:#a5b4fc; }

/* Calendar */
.soc-cal-head-row { display:flex; align-items:center; gap:10px; }
.soc-cal-head-row > span { flex:1; text-align:center; font:700 18px/1 var(--sans); color:var(--text); }
.soc-cal-nav { background:none; border:1px solid var(--border2); border-radius:var(--r); padding:9px 14px; cursor:pointer; color:var(--muted); line-height:1; display:flex; align-items:center; gap:6px; font:600 15px/1 var(--sans); min-height:42px; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), color var(--mt-fast); }
.soc-cal-nav:hover { border-color:var(--accent); color:var(--accent); }
.soc-cal-nav--today { padding:9px 16px; }
.soc-cal-cell--empty { opacity:.2; pointer-events:none; }
.soc-cal-header { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:8px; }
.soc-cal-day-hd { text-align:center; font:700 14px/1 var(--sans); color:var(--muted); padding:10px 0; text-transform:uppercase; letter-spacing:.06em; }
.soc-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.soc-cal-cell { min-height:110px; background:var(--s0); border:1px solid var(--border2); border-radius:var(--r); padding:10px 8px 8px; display:flex; flex-direction:column; gap:5px; }
.soc-cal-cell--today { border-color:var(--accent); background:rgba(179,64,244,.04); }
.soc-cal-date { font:700 16px/1 var(--sans); color:var(--muted); margin-bottom:5px; }
.soc-cal-date--today { color:var(--accent); }
.soc-cal-event { background:rgba(179,64,244,.15); border-radius:5px; padding:5px 8px; font:500 13px/1.4 var(--sans); color:#c7d2fe; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.soc-cal-event--ig  { background:rgba(225,48,108,.18); color:#f9a8d4; }
.soc-cal-event--fb  { background:rgba(66,103,178,.2);  color:#93c5fd; }
.soc-cal-event--ttk { background:rgba(255,255,255,.08); color:var(--text); }

/* Stats grid */
.soc-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.soc-stats-acc-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.soc-stats-acc-top span:last-child { min-width:0; overflow-wrap:break-word; word-break:break-word; }

/* Empty state */
.soc-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 24px; text-align:center; gap:12px; }
.soc-empty-title { font:700 16px/1.4 var(--sans); color:var(--muted); }
.soc-empty-sub { font:400 14px/1.6 var(--sans); color:var(--dim); max-width:320px; }
/* Toast */
/* Compose form - pass-email design language, mirrors .soc-prev */
.soc-compose-form { background:#111; border:1px solid #222; border-radius:16px; overflow:hidden; font-family:-apple-system,system-ui,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif; display:flex; flex-direction:column; }
.soc-compose-sec { padding:18px 24px; }
.soc-compose-sep { display:none; }
.soc-compose-lbl { font:700 11px/1 var(--sans); letter-spacing:3px; text-transform:uppercase; color:#b340f4; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.soc-compose-lbl-line { display:none; }
.soc-compose-textarea { width:100%; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:10px; color:#f0f0f0; font:400 20px/1.6 var(--sans); padding:16px 18px; resize:vertical; min-height:160px; box-sizing:border-box; transition:border-color var(--mt-fast); }
.soc-compose-textarea:focus { outline:none; border-color:#b340f4; }
.soc-compose-textarea::placeholder { color:#555; }
.soc-compose-inp-dark { width:100%; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:8px; color:#f0f0f0; font:400 19px/1.4 var(--sans); padding:14px 18px; box-sizing:border-box; transition:border-color var(--mt-fast); }
.soc-compose-inp-dark:focus { outline:none; border-color:#b340f4; }
.soc-compose-url-inp { width:100%; background:#0a0a0a; border:1px solid #2a2a2a; border-radius:8px; color:#f0f0f0; font:400 18px/1.4 var(--sans); padding:14px 18px; box-sizing:border-box; margin-top:10px; transition:border-color var(--mt-fast); }
.soc-compose-url-inp:focus { outline:none; border-color:#b340f4; }
.soc-compose-url-inp::placeholder { color:#555; }
.soc-compose-pick-btn { width:100%; padding:18px 16px; background:#0d0d0d; border:1px dashed #3a3a3a; border-radius:8px; color:#bbb; font:500 18px/1 var(--sans); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; min-height:60px; transition:border-color var(--mt-fast), color var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.soc-compose-pick-btn:hover { border-color:#b340f4; color:#b340f4; }
.soc-compose-actions { padding:18px 24px; background:#0d0d0d; border-top:1px solid #1a1a1a; display:flex; gap:12px; flex-wrap:wrap; }
.soc-compose-publish-btn { flex:1; padding:18px 28px; background:#b340f4; color:#fafafa; border:none; border-radius:10px; font:700 18px/1 var(--sans); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; min-height:60px; transition:background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.soc-compose-publish-btn:hover { background:#9f2de0; }
.soc-compose-draft-btn { padding:17px 24px; background:transparent; border:1px solid #3a3a3a; border-radius:10px; color:#ccc; font:600 17px/1 var(--sans); cursor:pointer; min-height:60px; transition:border-color var(--mt-fast), color var(--mt-fast); -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.soc-compose-draft-btn:hover { border-color:#666; color:#fafafa; }
/* Compose select dark override */
.soc-compose-sec .ks-sel-w.full { width:100%; }
.soc-compose-sec .ks-sel-w.full .ks-sel { background:#0a0a0a; border-color:#2a2a2a; color:#f0f0f0; width:100%; font-size:19px; padding:15px 40px 15px 18px; height:auto; min-height:58px; }
/* Preview pill in strip */
.soc-prev-pill { margin-left:auto; }
/* Count badge in card-head */
.soc-count-badge { background:var(--s0); border-radius:var(--r-pill); font:700 11px/1 var(--sans); padding:3px 9px; color:var(--muted); }

.soc-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--s1); border:1px solid var(--border); color:var(--text); padding:10px 20px; border-radius:100px; font:500 13px/1 var(--sans); z-index:10000; pointer-events:none; opacity:0; transition:opacity var(--mt-default),transform var(--mt-default); white-space:nowrap; }
.soc-toast.soc-toast--ok  { border-color:rgba(74,222,128,.3); color:#4ade80; }
.soc-toast.soc-toast--err { border-color:rgba(248,113,113,.3); color:#f87171; }
.soc-toast.soc-visible { opacity:1; transform:translateX(-50%) translateY(0); }
/* Responsive */
@media(max-width:700px) { .soc-acc-grid { grid-template-columns:1fr; } .soc-connect-grid { grid-template-columns:1fr; } .soc-cal-cell { min-height:56px; padding:4px; } }

/* ── Social: light-mode overrides for compose form + preview ── */
html[data-theme="light"] .soc-compose-form { background:var(--s1); border-color:var(--border); }
html[data-theme="light"] .soc-compose-sep { border-top-color:var(--border2); }
html[data-theme="light"] .soc-compose-textarea { background:var(--bg); border-color:var(--border2); color:var(--text); }
html[data-theme="light"] .soc-compose-textarea::placeholder { color:var(--muted); }
html[data-theme="light"] .soc-compose-textarea:focus { border-color:var(--accent); }
html[data-theme="light"] .soc-compose-inp-dark { background:var(--bg); border-color:var(--border2); color:var(--text); }
html[data-theme="light"] .soc-compose-inp-dark:focus { border-color:var(--accent); }
html[data-theme="light"] .soc-compose-url-inp { background:var(--bg); border-color:var(--border2); color:var(--text); }
html[data-theme="light"] .soc-compose-url-inp::placeholder { color:var(--muted); }
html[data-theme="light"] .soc-compose-url-inp:focus { border-color:var(--accent); }
html[data-theme="light"] .soc-compose-pick-btn { background:var(--s0); border-color:var(--border2); color:var(--muted); }
html[data-theme="light"] .soc-compose-actions { background:var(--s0); border-top-color:var(--border2); }
html[data-theme="light"] .soc-compose-draft-btn { border-color:var(--border2); color:var(--muted); }
html[data-theme="light"] .soc-compose-draft-btn:hover { border-color:var(--border); color:var(--text); }
html[data-theme="light"] .soc-compose-sec .ks-sel-w.full .ks-sel { background:var(--bg); border-color:var(--border2); color:var(--text); }
html[data-theme="light"] .soc-prev { background:var(--s1); border-color:var(--border); }
html[data-theme="light"] .soc-prev-brand { background:var(--s0); border-bottom-color:var(--border2); }
html[data-theme="light"] .soc-prev-brand-tag { color:var(--muted); }
html[data-theme="light"] .soc-prev-empty { background:var(--s1); }
html[data-theme="light"] .soc-prev-empty-title { color:var(--text); }
html[data-theme="light"] .soc-prev-empty-sub { color:var(--dim); }
html[data-theme="light"] .soc-prev-media { background:var(--s0); }
html[data-theme="light"] .soc-prev-divider { border-top-color:var(--border2); }
html[data-theme="light"] .soc-prev-caption-wrap { border-bottom-color:var(--border2); }
html[data-theme="light"] .soc-prev-caption { color:var(--text); }
html[data-theme="light"] .soc-prev-caption--ph { color:var(--dim); }
html[data-theme="light"] .soc-prev-strip { background:var(--s0); border-top-color:var(--border2); }
html[data-theme="light"] .soc-prev-avatar { border-color:var(--border2); }
html[data-theme="light"] .soc-prev-avatar--ph { background:var(--s1); }
html[data-theme="light"] .soc-prev-acct-name { color:var(--text); }
html[data-theme="light"] .soc-prev-acct-time { color:var(--dim); }

/* Same overrides for system light (prefers-color-scheme, no explicit theme set) */
@media (prefers-color-scheme:light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-form { background:var(--s1); border-color:var(--border); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-sep { border-top-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-textarea { background:var(--bg); border-color:var(--border2); color:var(--text); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-textarea::placeholder { color:var(--dim); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-inp-dark { background:var(--bg); border-color:var(--border2); color:var(--text); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-url-inp { background:var(--bg); border-color:var(--border2); color:var(--text); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-url-inp::placeholder { color:var(--muted); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-pick-btn { background:var(--s0); border-color:var(--border2); color:var(--muted); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-actions { background:var(--s0); border-top-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-compose-draft-btn { border-color:var(--border2); color:var(--muted); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev { background:var(--s1); border-color:var(--border); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-brand { background:var(--s0); border-bottom-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-brand-tag { color:var(--muted); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-empty { background:var(--s1); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-empty-title { color:var(--text); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-empty-sub { color:var(--dim); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-media { background:var(--s0); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-divider { border-top-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-caption-wrap { border-bottom-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-caption { color:var(--text); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-caption--ph { color:var(--dim); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-strip { background:var(--s0); border-top-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-avatar { border-color:var(--border2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-avatar--ph { background:var(--s1); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-acct-name { color:var(--text); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-prev-acct-time { color:var(--dim); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .soc-platform-pill--tiktok { background:rgba(10,10,19,.07); border-color:rgba(10,10,19,.14); }
}

/* ── Tools overlay ── */
#toolsOverlay { display:none; position:fixed; inset:0; z-index:9000; background:var(--bg); overflow-y:auto; transform:translateY(40px); opacity:0; transition:transform .28s cubic-bezier(.22,1,.36,1), opacity var(--mt-default) ease; }
#toolsOverlay.tl-open { transform:translateY(0); opacity:1; }
@media(prefers-reduced-motion:reduce) { #toolsOverlay { transition:none; } }
/* ── Saved filters ── */
.crm-saved-filters { display: flex; flex-wrap: wrap; gap:6px; padding:6px 0 0; }
.saved-filter-chip {
  display: inline-flex; align-items: center; gap:4px;
  padding:4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--s0);
  color: var(--muted); font-size: .74rem; cursor: pointer;
  font-family: var(--sans); transition: all var(--mt-fast);
}
.saved-filter-chip:hover { border-color: var(--accent); color: var(--text); }
.saved-filter-chip .sf-x { opacity: .6; font-size: .8rem; margin-left:2px; }
.saved-filter-chip .sf-x:hover { opacity: 1; color: var(--violet); }

/* ── Revenue mini-card ── */
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:8px; margin-bottom:14px; }
.rev-tile {
  background: var(--s0); border: 1px solid var(--border); border-radius: var(--r);
  padding:10px 12px; display: flex; flex-direction: column; gap:2px;
}
.rev-tile-lbl { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rev-tile-val { font-size: 1.25rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.rev-tile-sub { font-size: .7rem; color: var(--muted); }
.rev-bar-list { display: flex; flex-direction: column; gap:6px; }
.rev-bar-row { display: flex; align-items: center; gap:8px; font-size: .78rem; }
.rev-bar-lbl { color: var(--muted); min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-bar-track { flex: 1; height: 6px; background: var(--s1); border-radius: 3px; overflow: hidden; }
.rev-bar-fill { height: 100%; background: rgba(237,232,255,.55); border-radius: 3px; transition: width .4s; }
.rev-bar-val { color: var(--text); font-weight: 600; min-width: 50px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Merge button ── */
.crm-merge-banner {
  margin:6px 0; padding:6px 10px; border-radius: var(--r);
  background: rgba(179,64,244,.1); border: 1px solid rgba(179,64,244,.3);
  font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap:8px;
}
.crm-merge-banner button {
  padding:2px 10px; border-radius: var(--r-pill); border: 1px solid rgba(179,64,244,.5);
  background: transparent; color: var(--accent); font-size: .75rem; cursor: pointer;
  font-family: var(--sans);
}


/* ── Templates chips ── */
.reply-templates { display: flex; gap:6px; flex-wrap: wrap; }
.reply-tpl {
  padding:4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .76rem; cursor: pointer;
  font-family: var(--sans); transition: all var(--mt-fast);
}
.reply-tpl:hover { border-color: var(--accent); color: var(--accent); }

/* ── Reply panel ── */
#replyOverlay {
  display: none; position: fixed; inset: 0; z-index: 4000;
  background: rgba(10,10,19,.72); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#replyOverlay.open { display: flex; }
#replyBox {
  background: var(--s1); border: 1px solid var(--border);
  border-radius: var(--r); padding:28px; width: min(560px, 94vw);
  display: flex; flex-direction: column; gap:14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
#replyBox h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin:0; }
#replyBox .reply-to { font-size: .82rem; color: var(--muted); }
#replySubject {
  width: 100%; padding:10px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: .9rem; font-family: var(--sans);
}
#replyBody {
  width: 100%; padding:12px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: .9rem; font-family: var(--sans);
  resize: vertical; min-height: 140px; line-height: 1.6;
}
#replySubject:focus, #replyBody:focus { outline: none; border-color: var(--accent); }
.reply-actions { display: flex; gap:10px; align-items: center; }
#replySend {
  padding:10px 24px; background: var(--accent); color: #fafafa;
  border: none; border-radius: 8px; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--mt-fast);
}
#replySend:disabled { opacity: .5; cursor: not-allowed; }
#replyCancel {
  padding:10px 20px; background: transparent; color: var(--muted);
  border: 1px solid var(--border2); border-radius: 8px;
  font-size: .9rem; cursor: pointer;
}
#replyStatus { font-size: .82rem; color: var(--muted); margin-left:auto; }
.crm-new-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding:0 6px;
  background: var(--accent); color: var(--ink);
  border-radius: 10px; font-size: .69rem; font-weight: 800;
  margin-left:8px; vertical-align: middle;
  transition: transform var(--mt-default) cubic-bezier(.34,1.56,.64,1), opacity var(--mt-default);
}
.crm-new-badge[data-n="0"], .crm-new-badge:empty { opacity: 0; transform: scale(.55); }
.crm-empty { padding:30px; text-align: center; color: var(--muted); font-size: .88rem; }
/* pill badge */
.bnav-crm-badge {
  position: absolute; top: 1px; right: 3px;
  min-width: 15px; height: 15px; padding:0 4px;
  background: var(--accent); color: var(--ink);
  border-radius: 8px; font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); pointer-events: none;
  transition: transform var(--mt-default) cubic-bezier(.34,1.56,.64,1), opacity var(--mt-default);
}
.bnav-crm-badge[data-n="0"], .bnav-crm-badge:empty { opacity: 0; transform: scale(.5); }

/* ── Add Contact Modal ─────────────────────────── */
.acm-backdrop {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(10,10,19,.72); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.acm-backdrop.open { opacity: 1; pointer-events: auto; }
.acm-sheet {
  width: min(480px, 100vw); max-height: 92dvh;
  background: color-mix(in srgb, var(--ink) 96%, var(--paper));
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding:0 0 env(safe-area-inset-bottom, 0);
  overflow-y: auto; scrollbar-width: none;
  transform: translateY(40px); transition: transform .28s cubic-bezier(.34,1.3,.64,1);
}
.acm-backdrop.open .acm-sheet { transform: translateY(0); }
.acm-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin:14px auto 0; }
.acm-head { display: flex; align-items: center; justify-content: space-between; padding:16px 20px 8px; }
.acm-title { font-size: 1rem; font-weight: 800; letter-spacing: .01em; }
.acm-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color var(--mt-fast), color var(--mt-fast); }
.acm-close:hover { border-color: var(--accent); color: var(--accent); }
.acm-body { padding:4px 20px 24px; display: flex; flex-direction: column; gap:12px; }
.acm-field { display: flex; flex-direction: column; gap:4px; }
.acm-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.acm-input {
  width: 100%; padding:12px 14px;
  background: var(--s1); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text);
  font-size: .95rem; font-family: var(--sans);
  outline: none; transition: border-color var(--mt-default), box-shadow var(--mt-default);
  -webkit-tap-highlight-color: transparent;
}
.acm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.acm-input::placeholder { color: var(--muted); }
.acm-row { display: flex; gap:10px; }
.acm-row .acm-field { flex: 1; }
.acm-submit {
  width: 100%; padding:12px; margin-top:4px;
  background: var(--accent); color: #fafafa;
  border: none; border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 800; font-family: var(--sans);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity var(--mt-fast), transform var(--mt-fast);
}
.acm-submit:hover { opacity: .88; }
.acm-submit:active { transform: scale(.98); }
.acm-submit:disabled { opacity: .4; cursor: not-allowed; }
.acm-msg { font-size: .85rem; text-align: center; min-height: 1.2em; color: var(--muted); }
.acm-add-btn {
  display: flex; align-items: center; gap:4px;
  padding:4px 10px; height: 28px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-pill); color: var(--accent);
  font-size: .75rem; font-weight: 800; font-family: var(--sans);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast), border-color var(--mt-fast);
  margin-left:auto; flex-shrink: 0;
}
.acm-add-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ── Link Manager ─────────────────────────────── */
.lm-form { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:16px; }
.lm-form input, .lm-form select {
  flex: 1 1 140px; padding:8px 12px;
  background:var(--s1); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); font-size:.9rem;
  outline:none; transition:border-color var(--mt-default), box-shadow var(--mt-default);
}
.lm-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
.lm-form input::placeholder { color:var(--muted); }
.lm-form .inp-slug { font-family:var(--mono); flex: 0 0 160px; }
.lm-form .inp-target { flex: 2 1 280px; }
.lm-form .inp-note   { flex: 1 1 160px; }
.lm-form .inp-domain { flex: 1 1 180px; }
.lm-btn {
  padding:8px 18px; border-radius:var(--r); border:none; cursor:pointer;
  font-size:.88rem; font-weight:600; transition:opacity var(--mt-fast);
}
.lm-btn:hover { opacity:.82; }
.lm-btn-primary { background:var(--accent); color:#fafafa; }
.lm-btn-sm {
  padding:4px 10px; border-radius:6px; border:1px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer;
  font-size:.78rem; transition:color var(--mt-fast), border-color var(--mt-fast);
}
.lm-btn-sm:hover { color:var(--text); border-color:var(--accent); }
.lm-btn-del { color:var(--accent); }
.lm-btn-del:hover { border-color:var(--accent); }
.lm-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.lm-table th {
  text-align:left; padding:6px 10px; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  border-bottom:1px solid var(--border2);
}
.lm-table th[data-sort],
#scanTbl th[data-sc],
#logTbl thead th[data-sort],
#cashTbl thead th[data-sort] { cursor:pointer; user-select:none; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.lm-table th[data-sort]:hover, #scanTbl th[data-sc]:hover,
#logTbl thead th[data-sort]:hover, #cashTbl thead th[data-sort]:hover { color:var(--text); }
.lm-table th[data-sort]::after, #scanTbl th[data-sc]::after,
#logTbl thead th[data-sort]::after, #cashTbl thead th[data-sort]::after { content:' ⇅'; opacity:.3; font-size:.7rem; }
.lm-table th[data-sort].asc::after, #scanTbl th[data-sc].asc::after,
#logTbl thead th[data-sort].asc::after, #cashTbl thead th[data-sort].asc::after  { content:' ↑'; opacity:1; color:var(--accent); }
.lm-table th[data-sort].desc::after, #scanTbl th[data-sc].desc::after,
#logTbl thead th[data-sort].desc::after, #cashTbl thead th[data-sort].desc::after { content:' ↓'; opacity:1; color:var(--accent); }
.lm-table td { padding:12px 10px; border-bottom:1px solid var(--border2); vertical-align:middle; }
.lm-table tr:last-child td { border-bottom:none; }
.lm-table tr:hover td { background:var(--s0); }
.lm-slug { font-family:var(--mono); color:var(--text); font-weight:700; font-size:.9rem; }
.lm-target { color:var(--muted); font-size:.8rem; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-note  { color:var(--muted); font-size:.8rem; font-style:italic; }
.lm-clicks { font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); min-width:40px; text-align:right; }
.lm-actions { display:flex; gap:4px; flex-wrap:wrap; }
.lm-edit-row { background:var(--s1); }
.lm-edit-row td { padding:8px 10px; }
.lm-edit-inp { width:100%; padding:8px 10px; background:var(--s0); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.86rem; outline:none; }
.lm-edit-inp:focus { border-color:var(--accent); }
.lm-copy-url { display:flex; align-items:center; gap:6px; }
.lm-url-pill {
  font-family:var(--mono); font-size:.76rem; padding:4px 8px;
  background:var(--s1); border-radius:999px; color:var(--muted);
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Section Navigator ── */
.sec-nav-btn {
  display:flex; align-items:center; gap:6px;
  padding:4px 12px; min-height:32px;
  border-radius:var(--r-pill); border:1px solid transparent;
  background:transparent; color:var(--muted); font-size:.8rem;
  font-weight:600; cursor:pointer; font-family:var(--sans);
  transition:border-color var(--mt-default), color var(--mt-default), background var(--mt-default);
  -webkit-tap-highlight-color:transparent;
}
.sec-nav-btn:hover { color:var(--text); }
.sec-nav-btn.open {
  border-color:rgba(179,64,244,.38);
  color:var(--accent); background:rgba(179,64,244,.11);
}
.sec-nav-label {
  font-size:.76rem; font-weight:600;
  max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:opacity var(--mt-default);
}
/* Picker overlay */
.sec-picker {
  position:fixed;
  left:50%; bottom:140px;
  transform:translateX(-50%) translateY(10px) scale(.96);
  z-index:198;
  width:min(580px, calc(100vw - 24px));
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(32px) saturate(200%);
  border:1px solid rgba(179,64,244,.2);
  border-radius:22px;
  box-shadow:0 -8px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(179,64,244,.07), inset 0 1px 0 rgba(237,232,255,.07);
  padding:12px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  opacity:0; pointer-events:none;
  transition:opacity var(--mt-default) ease, transform .26s cubic-bezier(.34,1.5,.64,1);
}
.sec-picker.open {
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.sec-chip {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 8px 10px;
  border-radius:14px; border:1px solid transparent;
  background:rgba(237,232,255,.04);
  cursor:pointer; text-align:center;
  transition:background .14s, border-color .14s, transform var(--mt-fast), box-shadow .14s;
  -webkit-tap-highlight-color:transparent;
  opacity:0; transform:translateY(8px) scale(.93);
}
.sec-picker.open .sec-chip {
  opacity:1; transform:translateY(0) scale(1);
  transition:background .14s, border-color .14s, transform var(--mt-default) cubic-bezier(.34,1.3,.64,1), box-shadow .14s, opacity var(--mt-default) ease;
}
.sec-chip:hover { background:rgba(237,232,255,.1); transform:translateY(-2px) scale(1.03) !important; }
.sec-chip.active {
  border-color:rgba(179,64,244,.5);
  background:rgba(179,64,244,.12);
  box-shadow:0 0 0 1px rgba(179,64,244,.15), 0 4px 20px rgba(179,64,244,.12);
}
.sec-group { display:contents; }
.sec-group-lbl {
  font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:4px 6px 2px; grid-column:1/-1; opacity:.6;
}
.sec-group-chips { display:contents; }
.sec-chip-icon { font-size:1.35rem; line-height:1; }
.sec-chip-lbl {
  font-size:.65rem; font-weight:700; color:var(--muted);
  letter-spacing:.04em; line-height:1.2; text-transform:uppercase;
}
.sec-chip.active .sec-chip-lbl { color:var(--accent); }
@media (max-width:600px) {
  .sec-nav-label { display:block; max-width:80px; font-size:.78rem; }
  .sec-picker { grid-template-columns:repeat(3,1fr); bottom:128px; }
}

/* ══════════════════════════════════════════════════════════════════
   UX PSYCHOLOGY AUDIT - applied 2026-08-18
   Principles: Tufte · Von Restorff · Hick · Fitts · Gestalt ·
   Peak-End · Zeigarnik · Goal Gradient · Miller · Kahneman ·
   Fogg · IKEA · Doherty · Aesthetic-Usability · Serial Position ·
   Flow State · Pratfall · Paradox of Choice · Confirmation Bias ·
   WCAG 1.4.3 · WCAG 1.4.11 · Focus states · Reduced motion
══════════════════════════════════════════════════════════════════ */

/* ── WCAG 1.4.3: bump muted text contrast
   Old .42 opacity on #0a0a13 ≈ 3.1:1 - marginal.
   .52 opacity ≈ 3.8:1 - safely above 3:1 for large text,
   near 4.5:1 for small text. */
:root {
  --muted: rgba(237,232,255,.52);
}

/* ── WCAG focus rings (Principle 24 + Flow State)
   Use :focus-visible so mouse users don't see rings,
   keyboard users always do.
   !important overrides any inline outline:none. */
.mnav-btn:focus-visible,
.crm-tab:focus-visible,
.ov-tab:focus-visible,
.crm-btn:focus-visible,
.crm-toolbar-btn:focus-visible,
.crm-add-tag:focus-visible,
.orb-per:focus-visible,
.ov-close:focus-visible,
.acm-close:focus-visible,
.cp-close:focus-visible,
.bc-back-btn:focus-visible,
.bc-step-item:focus-visible,
.bc-preview-nav-btn:focus-visible,
.bc-send-btn:focus-visible,
.bc-pause-btn:focus-visible,
.bc-stop-btn:focus-visible,
.bc-tag-btn:focus-visible,
.saved-filter-chip:focus-visible,
.sec-nav-btn:focus-visible,
.sec-chip:focus-visible,
.reply-tpl:focus-visible,
.seq-preset:focus-visible,
.cp-stage-btn:focus-visible,
.snooze-opt:focus-visible,
.sched-opt:focus-visible,
.us-row:focus-visible,
.us-cmd-row:focus-visible,
.us-more:focus-visible,
.us-esc-btn:focus-visible,
.lm-btn:focus-visible,
.lm-btn-sm:focus-visible,
.log-exp:focus-visible,
#replySend:focus-visible,
#replyCancel:focus-visible,
#wlPromoteBtn:focus-visible,
#cmdKBtn:focus-visible,
.deep-dive-card:focus-visible,
.crm-pin-btn:focus-visible,
.acm-submit:focus-visible,
.cp-edit-save:focus-visible,
.cp-edit-cancel:focus-visible,
.mnav-btn:focus-visible,
.crm-overflow-item:focus-visible,
.contacts-az-letter:focus-visible,
.cl-card:focus-visible,
.bc-manual-row:focus-visible,
.bc-step-item:focus-visible,
.crm-search-clear:focus-visible,
.contacts-search-clear:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Input/textarea/select focus rings - layer on top of existing border glow */
.lock-inp:focus-visible,
.reg-inp:focus-visible,
.crm-notes:focus-visible,
.cp-notes:focus-visible,
.lm-edit-inp:focus-visible,
.seq-inp:focus-visible,
.rule-sel:focus-visible,
.crm-followup-inp:focus-visible,
.contacts-sort:focus-visible,
.bc-select:focus-visible,
.bc-input:focus-visible,
.bc-textarea:focus-visible,
#replySubject:focus-visible,
#replyBody:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
}

/* ── Fitts's Law: touch targets ≥ 44×44px (Principle 4 + 22) ── */

/* crm-search-clear: 20×20 visual - expand hit area with padding trick */
.crm-search-clear {
  width: 28px;
  height: 28px;
}
.crm-search-right {
  gap:8px;
}

/* contacts-search-clear: 18×18 → 28×28 minimum (sits inside field) */
.contacts-search-clear {
  width: 28px;
  height: 28px;
  right: 6px;
}

/* acm-close: 32×32 → 44×44 */
.acm-close {
  width: 44px;
  height: 44px;
}

/* cp-close: 32×32 → 44×44 */
.cp-close {
  width: 44px;
  height: 44px;
}

/* ov-close: 38×38 → 44×44 */
.ov-close {
  width: 44px;
  height: 44px;
}

/* orb-per: 18px tall tiny buttons - bump on mobile */
@media (max-width: 600px) {
  .orb-per {
    min-width: 24px;
    min-height: 22px;
    padding:4px 4px;
  }
}

/* crm-tab: ensure all tabs are comfortably tappable */
.crm-tab {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── Von Restorff: hero KPI stands apart (Principle 2) ── */
/* Hero already has kpi-hero class. Strengthen label distinction. */
.kpi-hero .kpi-lbl {
  color: rgba(179,64,244,.8);
  font-weight: 700;
}
/* Hero KPI: subtle paper glow on border */
.kpi-hero {
  box-shadow: 0 0 0 1px rgba(237,232,255,.12), inset 0 0 20px rgba(237,232,255,.03);
}

/* ── Von Restorff: primary CTA in crm-actions should rest differently ── */
/* Serial Position + Fogg: primary action is visually distinct at rest */
.crm-btn.primary {
  border-color: rgba(179,64,244,.35);
  color: rgba(179,64,244,.85);
}

/* ── Gestalt proximity: kpi-grid uses 8px grid rhythm ── */
.kpi-grid {
  gap:8px;
}

/* ── Peak-End Rule: empty state has warmth (Principle 6 + 17 Pratfall) ── */
.crm-empty {
  padding:40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:8px;
}

/* ── Doherty Threshold: universal loading state (Principle 13) ──
   JS can add data-loading="true" to any async button for instant feedback */
[data-loading="true"],
.btn-loading {
  opacity: 0.55;
  cursor: wait !important;
  pointer-events: none;
  position: relative;
}

/* ── Aesthetic-Usability: consistent spacing rhythm (Principle 14) ──
   Cards within sections are already 12px gap. Tighten kpi-cluster gap. */
.kpi-cluster .kpi-grid {
  gap:8px;
}

/* ── Zeigarnik + Goal Gradient: pending-count badges pop (Principles 7+8) ──
   Ensure new-message badge pulses on the nav (already done via pdot animation).
   Add explicit pulse to urgent contacts */
.crm-contact[data-status="new"] .crm-name {
  color: var(--text);
}

/* ── Reduced motion: extend coverage to newer components (Principle 24) ── */
@media (prefers-reduced-motion: reduce) {
  .kpi,
  .crm-contact,
  .cl-card,
  .deep-dive-card,
  .saved-filter-chip,
  .sec-chip,
  .orb-crm-badge,
  .crm-new-badge,
  .bnav-crm-badge,
  .mnav-badge,
  .bc-send-btn,
  .bc-progress-bar-fill {
    transition: none !important;
  }
  .kpi-anomaly { animation: none !important; }
  .sentiment-badge[data-s="negative"] { animation: none !important; }
  .kpi::before { transition: none !important; }
  .iz-icon, .iz-text, .iz-sub, .iz-dot { animation: none !important; }
  .bc-done-icon { animation: none !important; }
  @keyframes pdot { from{} to{} }
}

/* ── Hick's Law: CRM tabs - more than 7 items muted further on small screens ──
   On screens < 400px collapse least-used tabs to reduce decision cost */
@media (max-width: 600px) {
  .crm-tab[data-filter="snoozed"],
  .crm-tab[data-filter="contacts"] {
    display: none;
  }
}

/* ── Kahneman System 1: icon-only buttons get title tooltip (HTML)
   Done via title/aria-label attributes already on most.
   Make sure status dots have visible adjacent labels (already do). */

/* ── WCAG 1.4.11: raise interactive element border contrast ──
   Current --border rgba(179,64,244,.14) on dark bg = ~1.8:1 (fails 3:1).
   Apply a stronger resting border to interactive containers. */
.crm-btn,
.crm-toolbar-btn,
.log-exp {
  border-color: rgba(237,232,255,.12);
}
.crm-btn:hover,
.crm-toolbar-btn:hover {
  border-color: var(--accent);
}

/* ── Fogg Behavior: primary send CTA is full-width, prominent ──
   bc-send-btn already has good size. Reinforce with glow at rest. */
.bc-send-btn:not(:disabled) {
  box-shadow: 0 0 0 0 rgba(179,64,244,0);
  transition: opacity var(--mt-default), transform var(--mt-fast), box-shadow var(--mt-default);
}
.bc-send-btn:not(:disabled):hover {
  box-shadow: 0 0 20px rgba(179,64,244,.35);
}

/* ── Flow State: no jarring outlines on interactive panels ──
   Overlay panels already use smooth transitions. Ensure deep-dive-card
   doesn't show browser outline (overridden by focus-visible above for KB). */
.deep-dive-card:not(:focus-visible) {
  outline: none;
}

/* ══ EXTENDED AUDIT - 55 principles + 7 conflict-resolution rules ══ */

/* ── Euclidean Commensurability (#55): 4px grid
   All spacing values must be in {4,8,12,16,24,32,48,64,96}.
   Fix the visible CSS-class-level violations. */
.kpi {
  gap:4px; /* was 5px */
}
.bnav-orb {
  gap:4px; /* was 5px */
}
.donut-legend {
  gap:8px; /* was 7px */
}
.snooze-opt {
  padding:8px 12px; /* was 7px 12px */
}
.bc-check-item {
  padding:8px 12px; /* was 9px 12px */
}
.crm-thread-count {
  padding:2px 8px; /* was 2px 7px */
}
.crm-tag {
  padding:2px 8px; /* was 2px 9px 2px 8px */
}
.funnel-drop-badge {
  padding:2px 8px; /* was 2px 7px */
}
.us-row {
  padding:8px 16px; /* was 8px 18px – snap to grid */
  min-height: 44px;
}
.us-cat-head {
  padding:8px 16px 4px; /* was 10px 18px 4px */
}
.us-footer {
  padding:8px 16px; /* was 8px 18px */
}
.us-input-wrap {
  padding:12px 16px; /* was 14px 18px */
}
.us-recents {
  padding:8px 16px 4px; /* was 9px 18px 6px */
}

/* ── Stroop Effect (#35): colors must match semantic meaning
   --red maps to var(--violet) by design choice. Delete actions that
   use var(--accent) appear violet - ambiguous vs. interactive violet.
   Enforce that all destructive/delete actions use actual red var(--accent). */
.lm-btn-del {
  color: var(--text); /* destructive action label */
  border-color: rgba(179,64,244,.3);
}
.lm-btn-del:hover {
  border-color: var(--accent);
  background: rgba(179,64,244,.06);
}
/* Scan table invalid badge - override any violet usage to real red */
.scan-badge-invalid {
  color: var(--dim);
}
/* Stop/cancel buttons - use actual red not violet */
.bc-stop-btn {
  border-color: rgba(179,64,244,.4);
  color: var(--accent);
}

/* ── Golden Ratio (#50): φ = 1.618
   Apply to key layout proportions. The two-col layout at ~50/50 can
   adopt φ on wide screens: left col 38.2% / right col 61.8%.
   But since the existing 1fr 1fr is intentional for data density,
   only apply to specific content/aside pairs via modifier. */
.phi-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
}
@media (max-width: 700px) { .phi-split { grid-template-columns: 1fr; } }

/* ── Ataraxia / Epicurean (#53): remove anxiety at every state ──
   Unsaved state indicator so users never fear losing work. */
.bc-draft-saved {
  display: inline-flex; align-items: center; gap:4px;
  font-size: .72rem; color: var(--dim); opacity: .7;
  transition: opacity var(--mt-slow);
}
/* Loading skeleton must never be empty/confusing - always show intent */
.skel::after {
  content: ''; /* pure decoration; provides visible shimmer already */
}

/* ── Stoic Dichotomy (#54): system errors must name source + action ──
   Error messages in JS use these classes. Ensure they look different
   from warnings and include actionable context. */
.err-system {
  color: var(--text); /* system error */
}
.err-user {
  color: var(--text); /* user input error */
}
.err-network {
  color: var(--muted); /* network warning */
}

/* ── Positive Framing (#15): empty states show potential not failure ── */
/* "No contacts" → visual treatment encourages, not criticizes */
.crm-empty {
  color: rgba(237,232,255,.6); /* slightly brighter than muted */
  font-size: .9rem;
}

/* ── Autonomy Bias (#16): undo-ability cues ──
   Trash state has "restore" capability. Visually differentiate trashed items. */
.crm-contact.trashed {
  opacity: .6;
  text-decoration: none;
}

/* ── Social Proof / Trust (#17): timestamps and counts build trust ──
   Status bar at bottom: make the sync dots more visible */
.sdot {
  width: 6px; /* was 5px → snap to grid */
  height: 6px;
}

/* ── Loss Aversion (#18): destructive buttons require visual friction ──
   Permanent delete gets stronger red + border treatment */
.crm-btn.perm-delete {
  border-color: rgba(179,64,244,.4); /* more distinct from accent violet */
  color: var(--accent);
}
.crm-btn.perm-delete:hover {
  background: rgba(179,64,244,.1);
  border-color: var(--accent);
}

/* ── Self-Determination Theory (#19): show success metrics clearly ──
   kpi-val in green is already prominent. Add subtle warmth to good numbers. */
.kpi-val.green {
  text-shadow: 0 0 24px rgba(179,64,244,.25);
}

/* ── Doherty + Fogg: button visual feedback on click ──
   :active state for all primary buttons should feel instantaneous. */
.bc-send-btn:active,
.acm-submit:active,
.reg-btn:active {
  transform: scale(.97);
  opacity: .9;
}
.crm-btn:active,
.crm-toolbar-btn:active,
.ov-tab:active {
  transform: scale(.97);
  transition-duration: .05s;
}

/* ── Information Scent (#43): icon buttons need strong labels ──
   On mobile, .mnav-btn-lbl is hidden. Ensure the orb's period buttons
   have enough context via aria (already set). Re-show labels at ≥480px
   to improve scent on medium screens (tablets in landscape). */
@media (min-width: 480px) and (max-width: 600px) {
  .mnav-btn-lbl {
    display: block; /* show abbreviated labels on mid-size screens */
    font-size: .55rem;
  }
}

/* ── Jakob's Law (#29): search follows convention ──
   Search clear button appears on right (convention). Already correct.
   Ensure placeholder text matches convention. */
.crm-search::placeholder,
.contacts-search::placeholder,
#usInput::placeholder {
  color: rgba(237,232,255,.38); /* slightly lighter than muted to distinguish */
}

/* ── Recognition Over Recall (#13): icon-only buttons must have visible context ──
   The ov-close has no label on mobile. Add a subtle tooltip-like title via CSS
   (title attr handles this, but visually reinforce with aria). */
.ov-close::after,
.acm-close::after,
.cp-close::after {
  /* No visible text needed - title/aria-label handles accessibility.
     But ensure button is large enough to be discoverable. Already done above. */
}

/* ── Cialdini Reciprocity (#31): helpful empty states ──
   UTM empty states already say "Ready · add ?utm_source= to start tracking".
   That's genuinely helpful. Reinforce with positive tone. */
#utmEmpty, #utmMediumEmpty, #utmCampaignEmpty {
  line-height: 1.6;
  padding:12px;
  background: rgba(179,64,244,.04);
  border-radius: var(--r);
  border: 1px dashed var(--border);
}

/* ── Commitment & Consistency (#32): step-by-step with visible progress ──
   bc-steps already shows numbered steps. Mark completed steps distinctly. */
.bc-step-item.done {
  cursor: default;
}
.bc-step-item.done .bc-step-lbl {
  color: rgba(179,64,244,.8); /* lime for completed = consistent with lime=success */
}

/* ── Weber-Fechner Law (#41): front-load progress bar visual momentum ──
   Progress bar starts with a slightly exaggerated initial fill to
   make early progress feel faster. Apply via CSS custom-property hook. */
#sk-bar {
  min-width: 8px; /* even at 0% show a sliver - momentum starts immediately */
}

/* ── Gestalt Closure (#40): skeleton screens imply incoming content ──
   Skeleton lines already use shimmer. Ensure they're shaped like real content. */
.skel-line {
  border-radius: 4px; /* was 4px - keep ✓ */
}

/* ── Picture Superiority (#45): pair stat tiles with icons ──
   kpi-lbl uppercase labels help. kpi-hero already has green glow.
   The status dots (sdot) are visual markers alongside text. */

/* ── Variable Reward (#47): occasional delight - inbox zero animation ──
   Already implemented with iz-confetti. Don't make it predictable.
   The JS should fire it only when transitioning TO zero, not repeatedly. */

/* ── Anchoring (#33): show largest/best number first ──
   In kpi-clusters, "Pulse" (Live now) appears first. Hero KPI at position 1.
   Already correct structure. */

/* ── Occam's Razor (#12): strip decorative dividers where spacing alone suffices ──
   The bnav-divider between orb and nav buttons adds visual structure.
   The sec-chapter::after lines add structure between content groups.
   Both are functional (encode section boundaries), keep them. */

/* ── Cognitive Load Theory (#11): reduce extraneous animation ──
   Only animate elements that carry information in their motion. */
.orb-crm-badge,
.mnav-badge,
.crm-new-badge {
  /* Bounce animation (cubic-bezier(.34,1.56,.64,1)) already only on count change.
     Good - motion carries information (new item). */
}

/* ── Default Effect (#36): ensure forms have sensible pre-selected options ──
   Sort select defaults to "Newest first" already. Good.
   Scan day select defaults to "All days". Good. */

/* ── Scarcity Principle (#38): capacity tracker shows urgency at fill thresholds ──
   Already applied in JS. Reinforce with CSS for high-fill states. */
.slot-fill-high {
  color: var(--muted); /* nearly full warning */
  font-weight: 800;
}
.slot-fill-critical {
  color: var(--text); /* sold out */
  font-weight: 800;
}

/* ── Reactance Theory (#44): avoid controlling language in error messages ──
   Handled in JS text strings. CSS ensures error style is warm not harsh. */
.lock-err {
  /* Override color from var(--accent)=violet to an actual warm amber for wrong-password.
     Wrong password is a user error (mild), not a system failure (red). */
  color: var(--muted); /* informative */
}

/* ── F-Pattern Reading (#5): critical info left-aligned ──
   Most content is already left-aligned. Ensure the KPI values
   are flush left (default flex column). Already done. */

/* ── Gestalt Continuity: bar fills have smooth edges ──
   Already using border-radius on bar tracks. Good. */

/* ── Kairos (#49): CTAs appear at peak motivation moments ──
   "Add contact" is at inbox top (admin is in workflow mode).
   "Send campaign" is the bc-send-btn, shown only in broadcast mode.
   "Promote next" waitlist button appears only when waitlist is shown.
   These are correctly gated. */

/* ── Tesler's Law (#30): absorb complexity in CSS not user-visible UI ──
   The sec-picker grid adjusts automatically via auto-fill columns.
   The ov-pill scrolls horizontally (hides overflow complexity from user). */

/* ── Mental Models (#42): admin expects data tables to have sort indicators ──
   Sort arrows already shown via ::after pseudo-element. Good.
   Sort state classes asc/desc apply correct indicators. */

/* ── Social Comparison (#46): show percentile context for KPIs ──
   kpi-sub elements show comparisons ("vs last week"). Already implemented.
   Ensure these are never shown negative without a path forward. */
.kpi-sub.dn {
  /* Negative delta - add context hint that this is informational */
  font-style: normal; /* don't italicize negatives - treat as data, not judgment */
}

/* ── Ethos Pathos Logos (#48): every major CTA needs credibility + emotion + proof ──
   bc-send-btn shows recipient count (Logos), green on send success (Pathos),
   sender name / from domain shown in preview (Ethos). Already present. */

/* ── Primum Non Nocere (#51): never leave user worse off ──
   All deletes go to Trash first. Bulk actions are reversible.
   The one exception: "permanent delete" is explicitly labeled and color-coded red. ✓ */

/* ── Aristotle's Telos (#52): every element has a purpose ──
   The .live-dot animation communicates "system is live and polling".
   The .bnav-delta communicates period-over-period change.
   Both have clear single-sentence purposes. */

/* ── Serial Position for tab groups ──
   In the crm-tabs, "All" is first (primacy: most-used) ✓
   "Trash" is last (recency: least-used, distinct from main flow) ✓ */

/* ── Hick's Law: bottom nav has exactly 5 buttons + 1 orb + 1 search ──
   That's 7 interactive targets in the nav = ceiling of Miller's Law.
   No additional buttons should be added without removing one. */

/* ── No pure white (#fafafa) - use #fafafa instead ──
   Replace explicit #fafafa on button text and small elements.
   Colored button backgrounds (violet/lime) need near-white text. */
.bc-send-btn,
.acm-submit,
.reg-btn,
.cp-edit-save,
.lm-btn-primary,
.bc-step-item.active .bc-step-num,
.cp-stage-btn.active,
.orb-crm-badge,
.crm-new-badge,
.bnav-crm-badge,
.mnav-badge {
  color: #fafafa; /* near-white, not pure #fafafa */
}
/* Section visibility - toggled by settings */
.krato-section-hidden { display: none !important; }
/* Scroll lock - applied when settings panel is open */
body.krato-noscroll { overflow: hidden; }

/* Utility: small uppercase label used in modals/settings forms */
.ks-field-lbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 4px;
}
/* Utility: full-width box-sizing input wrapper */
.ks-inp-full { width: 100%; box-sizing: border-box; }

/* Krata sub-admin identity badge (fixed top-right) */
.krata-role-badge {
  position: fixed; top: 8px; right: 12px; z-index: 9000;
  background: var(--accent); color: #fafafa;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  padding: 4px 10px; border-radius: var(--r-pill);
  opacity: .9; pointer-events: none; font-family: var(--sans);
}

/* ═══ Settings Panel ═══ */
#kratoPanelWrap {
  position: fixed; bottom: 20px; left: 20px; z-index: 9500;
  display: flex; flex-direction: column; align-items: flex-start; gap:10px;
  pointer-events: none; /* wrapper is transparent to hits - children opt in */
}
#kratoGearBtn { pointer-events: all; }
.ks-panel.ks-open { pointer-events: all; }

/* Settings backdrop blur */
#kratoSettingsBg {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9600;
  background: rgba(6,4,14,.38);
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  border: none; padding: 0; cursor: default;
}
#kratoSettingsBg.ks-bg-open {
  opacity: 1; pointer-events: all;
}

.ks-panel {
  width: 308px;
  max-height: 82vh;
  background: rgba(9,7,18,.91);
  backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(179,64,244,.22);
  border-radius: 20px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.75),
    0 8px 24px rgba(0,0,0,.4),
    0 0 0 1px rgba(179,64,244,.07),
    inset 0 1px 0 rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  transform-origin: bottom left;
  transition: opacity var(--mt-default) ease, transform var(--mt-default) cubic-bezier(.34,1.4,.64,1);
  opacity: 0;
  transform: scale(.9) translateY(12px);
  pointer-events: none;
}
.ks-panel.ks-open { opacity:1; transform:scale(1) translateY(0); pointer-events:all; }
@media (min-width: 768px) { .ks-panel { width: 455px; } }

/* Partners full-screen panel */
.partners-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  background: var(--bg);
}
@media (min-width: 769px) {
  .partners-panel { left: 220px; }
  body.ks-col .partners-panel { left: 64px; }
}
.partners-actions {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
}
.partners-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  min-height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--s1);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--mt-fast);
  -webkit-tap-highlight-color: transparent;
}
.partners-action-btn:hover { border-color: var(--accent); color: var(--accent); }

html[data-theme="light"] .ks-panel {
  background: rgba(250,249,255,.95);
  border-color: rgba(179,64,244,.18);
  box-shadow: 0 20px 60px rgba(10,8,30,.13), 0 4px 16px rgba(10,8,30,.07), 0 0 0 1px rgba(179,64,244,.08);
}

/* Header */
.ks-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px;
  border-bottom: 1px solid rgba(237,232,255,.07);
  flex-shrink: 0;
}
html[data-theme="light"] .ks-hd { border-color: rgba(10,8,30,.08); }
.ks-hd-title {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}
.ks-hd-close {
  width:44px; height:44px; border-radius:50%; border:none;
  background: rgba(237,232,255,.06); color:var(--muted);
  font-size:.95rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--mt-fast), color var(--mt-fast);
  -webkit-tap-highlight-color:transparent;
}
.ks-hd-close:hover { background:rgba(237,232,255,.12); color:var(--text); }
html[data-theme="light"] .ks-hd-close { background:rgba(10,8,30,.06); }
html[data-theme="light"] .ks-hd-close:hover { background:rgba(10,8,30,.1); }

/* Settings search */
.ks-search-wrap { position:relative; display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid rgba(237,232,255,.07); flex-shrink:0; }
html[data-theme="light"] .ks-search-wrap { border-color:rgba(10,8,30,.08); }
.ks-search-ic { color:var(--muted); flex-shrink:0; }
.ks-search-inp { flex:1; background:rgba(237,232,255,.06); border:1px solid transparent; border-radius:8px; padding:8px 10px; font-size:.8rem; color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--mt-fast),background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.ks-search-inp:focus { background:rgba(237,232,255,.1); border-color:rgba(179,64,244,.3); }
.ks-search-inp::placeholder { color:var(--muted); opacity:.5; }
html[data-theme="light"] .ks-search-inp { background:rgba(10,8,30,.05); }
.ks-sr-empty { padding:32px 16px; text-align:center; font-size:.8rem; color:var(--muted); }
/* Spotlight results panel */
@keyframes ks-spot-in { from{opacity:0;transform:translateY(-6px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes ks-spot-out { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-4px) scale(.98)} }
.ks-spotlight { position:fixed; background:color-mix(in srgb,var(--bg) 97%,transparent); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(179,64,244,.28); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 0 1px rgba(179,64,244,.08),inset 0 1px 0 rgba(237,232,255,.07); z-index:99999; overflow:hidden; max-height:380px; display:flex; flex-direction:column; animation:ks-spot-in .18s cubic-bezier(.22,.68,0,1.2) both; transform-origin:top center; }
html[data-theme="light"] .ks-spotlight { border-color:rgba(179,64,244,.2); box-shadow:0 20px 50px rgba(10,8,30,.16),0 0 0 1px rgba(10,8,30,.07); }
.ks-spotlight.ks-spot-closing { animation:ks-spot-out .12s ease forwards; }
.ks-spotlight-list { overflow-y:auto; flex:1; padding:6px; }
.ks-spot-item { display:flex; align-items:center; gap:12px; padding:0 12px; min-height:48px; border-radius:10px; cursor:pointer; transition:background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.ks-spot-item:hover, .ks-spot-item.ks-spot-active { background:rgba(179,64,244,.12); }
html[data-theme="light"] .ks-spot-item:hover, html[data-theme="light"] .ks-spot-item.ks-spot-active { background:rgba(179,64,244,.08); }
.ks-spot-icon { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,rgba(179,64,244,.18),rgba(179,64,244,.08)); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-solid,#b340f4); border:1px solid rgba(179,64,244,.15); }
html[data-theme="light"] .ks-spot-icon { background:linear-gradient(135deg,rgba(179,64,244,.12),rgba(179,64,244,.05)); }
.ks-spot-text { flex:1; min-width:0; }
.ks-spot-label { font-size:.82rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-spot-label mark { background:rgba(179,64,244,.2); color:var(--accent-solid,#b340f4); font-weight:700; border-radius:3px; padding:0 2px; }
html[data-theme="light"] .ks-spot-label mark { background:rgba(179,64,244,.15); }
.ks-spot-section { font-size:.7rem; color:var(--muted); margin-top:2px; }
.ks-spot-arrow { color:var(--dim); opacity:0; transition:opacity var(--mt-fast); flex-shrink:0; }
.ks-spot-item:hover .ks-spot-arrow, .ks-spot-item.ks-spot-active .ks-spot-arrow { opacity:1; }
.ks-spot-kbd { font-size:.62rem; color:var(--dim); background:rgba(237,232,255,.07); border:1px solid rgba(237,232,255,.12); border-radius:5px; padding:2px 6px; flex-shrink:0; font-family:var(--mono,monospace); }
html[data-theme="light"] .ks-spot-kbd { background:rgba(10,8,30,.05); border-color:rgba(10,8,30,.1); }
.ks-spot-footer { display:flex; align-items:center; gap:12px; padding:8px 14px; border-top:1px solid rgba(237,232,255,.07); font-size:.65rem; color:var(--dim); flex-shrink:0; }
html[data-theme="light"] .ks-spot-footer { border-color:rgba(10,8,30,.07); }
.ks-spot-footer span { display:flex; align-items:center; gap:4px; }
@media(hover:none) { .ks-spot-footer { display:none; } }
/* Flash when jumping to a setting */
@keyframes ks-flash { 0%,100%{background:transparent} 25%{background:rgba(179,64,244,.2)} }
.ks-row-flash, .ks-row-stack-flash { animation:ks-flash .9s ease; border-radius:10px; }
/* Empty state */
.ks-spot-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 16px; color:var(--muted); }
.ks-spot-empty svg { opacity:.3; }
.ks-spot-empty p { font-size:.8rem; text-align:center; }

/* Scrollable body - clips its own content so panel can be overflow:visible for spotlight */
.ks-body {
  overflow-y: auto; padding:6px 0 14px; flex:1;
  scrollbar-width: thin; scrollbar-color: rgba(179,64,244,.18) transparent;
  border-radius: 0 0 20px 20px;
}
.ks-body::-webkit-scrollbar { width:3px; }
.ks-body::-webkit-scrollbar-thumb { background:rgba(179,64,244,.18); border-radius:3px; }

/* Sections */
.ks-section { padding:10px 16px 14px; }
.ks-sep { height:1px; background:rgba(237,232,255,.055); margin:4px 0; }
html[data-theme="light"] .ks-sep { background:rgba(10,8,30,.08); }

.ks-section-label {
  display:flex; align-items:center; gap:6px;
  font-size:.61rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent); opacity:.75;
  padding:2px 0 8px;
}
.ks-section-label svg { flex-shrink:0; opacity:.9; }

/* Rows */
.ks-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; min-height:44px; padding:2px 0;
  border-bottom: 1px solid rgba(237,232,255,.05);
}
html[data-theme="light"] .ks-row { border-color:rgba(10,8,30,.07); }
.ks-row:last-child { border-bottom:none; }
.ks-row-label { font-size:.82rem; color:var(--text); font-weight:450; flex:1; min-width:0; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-row-sub { font-size:.7rem; color:var(--muted); margin-top:2px; white-space:normal; }
.ks-row.ks-row-sub { border-bottom-style:dashed; opacity:.85; }
.ks-row.ks-row-sub > .ks-row-label { padding-left:20px; }
.ks-row.ks-row-subsub { border-bottom-style:dashed; opacity:.7; }
.ks-row.ks-row-subsub > .ks-row-label { padding-left:38px; }

.ks-row-stack {
  display:flex; flex-direction:column; gap:6px;
  padding:8px 0; border-bottom:1px solid rgba(237,232,255,.05);
}
html[data-theme="light"] .ks-row-stack { border-color:rgba(10,8,30,.07); }

/* Alerts - milestone grid */
.ks-milestone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:4px 0 8px; }
.ks-milestone-item { display:flex; flex-direction:column; gap:4px; }
.ks-milestone-lbl { font-size:.66rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
/* Alerts - burst row */
.ks-burst-pair { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ks-burst-seg { display:flex; align-items:center; gap:6px; }
.ks-burst-seg .ks-inp { width:56px; text-align:center; }
.ks-burst-seg-lbl { font-size:.8rem; color:var(--text); white-space:nowrap; }
/* Helper text below a row */
.ks-row-hint { font-size:.68rem; color:var(--dim); padding:0 0 8px; line-height:1.4; }
/* Profile header */
.ks-profile-hd { display:flex; align-items:center; gap:12px; padding:4px 0 12px; }
.ks-profile-av-wrap { position:relative; flex-shrink:0; }
.ks-profile-av { width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--s1); border:2px solid var(--border2); }
.ks-profile-ph { width:52px; height:52px; border-radius:50%; background:rgba(179,64,244,.15); border:2px solid rgba(179,64,244,.25); display:flex; align-items:center; justify-content:center; }
.ks-profile-upload-lbl { position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid var(--bg); }
.ks-profile-info { flex:1; min-width:0; }
.ks-profile-info-title { font-size:.72rem; font-weight:700; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.ks-profile-info-sub { font-size:.75rem; color:var(--dim); }
/* Action buttons */
.ks-action-group { display:flex; flex-direction:column; gap:6px; padding:4px 0 4px; }
.ks-action-btn { width:100%; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; border:1px solid var(--border2); background:rgba(179,64,244,.07); color:var(--accent); font-size:.78rem; font-weight:700; cursor:pointer; text-align:left; letter-spacing:.02em; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-action-btn:hover { background:rgba(179,64,244,.12); }
.ks-export-btn { flex:1; max-width:max-content; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border-radius:9px; border:1px solid var(--border2); background:rgba(179,64,244,.07); color:var(--accent); font-size:.78rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-export-btn:hover { background:rgba(179,64,244,.12); }
/* Link-style buttons inside settings */
.ks-link-btn { background:none; border:none; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; min-height:44px; }
.ks-link-accent { color:var(--accent); font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.ks-link-muted  { color:var(--dim); font-size:.72rem; font-weight:600; }
.ks-inline-actions { display:flex; gap:12px; align-items:center; padding:4px 0 8px; }
/* Subheading inside section */
.ks-subhead { font-size:.68rem; font-weight:700; color:var(--dim); letter-spacing:.05em; text-transform:uppercase; padding:8px 0 4px; }
/* Tier table */
.ks-tier-hd { display:grid; grid-template-columns:1fr 72px 64px; gap:4px; padding-bottom:4px; }
.ks-tier-hd-c { font-size:.68rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.ks-tier-hd-c:not(:first-child) { text-align:right; }
.ks-tier-row { display:grid; grid-template-columns:1fr 72px 64px; gap:4px; margin-bottom:6px; }
/* Passcode status */
.ks-passcode-row { display:flex; gap:12px; align-items:center; padding:4px 0 6px; }
/* webhook hint */
.ks-webhook-hint { font-size:.7rem; color:var(--dim); padding:2px 0 4px; opacity:.65; }
.ks-textarea { resize:vertical; min-height:60px; }
/* krata team add button */
.ks-preset-btn { padding:5px 12px; border-radius:7px; border:1px solid var(--border2); background:var(--s2); color:var(--text); font-size:.75rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast),border-color var(--mt-fast); }
.ks-preset-btn:hover { background:rgba(179,64,244,.1); border-color:rgba(179,64,244,.4); color:var(--accent); }
.ks-add-krata-btn { width:100%; padding:8px 0; border-radius:8px; border:1px dashed rgba(179,64,244,.4); background:rgba(179,64,244,.06); color:var(--accent); font-size:.8rem; font-weight:700; cursor:pointer; letter-spacing:.03em; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-add-krata-btn:hover { background:rgba(179,64,244,.1); }
.ks-krata-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
/* utility overrides for MIS compliance */
.ks-msg-top  { margin-top:8px; }
.ks-msg-bottom { margin-bottom:8px; }
.ks-mt8 { margin-top:8px; }
.ks-nowrap { white-space:nowrap; }
.ks-inp-flex { flex:1; min-width:0; }
/* api keys */
.ks-apikeys-list { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.ks-apikey-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-radius:7px; background:var(--s1); border:1px solid var(--border2); font-size:.72rem; }
.ks-apikey-meta { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.ks-apikey-name { font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ks-apikey-prefix { color:var(--dim); font-size:.67rem; font-family:monospace; }
.ks-apikey-used { color:var(--dim); font-size:.67rem; }
.ks-apikey-revoke { flex-shrink:0; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid rgba(224,85,85,.35); background:rgba(224,85,85,.07); color:#e05555; font-size:.72rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-apikey-revoke:hover { background:rgba(224,85,85,.15); }
.ks-apikey-confirm { flex-shrink:0; min-height:44px; padding:0 10px; border-radius:8px; border:1px solid rgba(224,85,85,.6); background:rgba(224,85,85,.18); color:#e05555; font-size:.72rem; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); }
.ks-apikey-create-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ks-newkey-box { background:rgba(var(--accent-rgb,179,64,244),.06); border:1px solid rgba(var(--accent-rgb,179,64,244),.2); border-radius:8px; padding:12px; margin-top:8px; }
.ks-newkey-label { font-size:.68rem; font-weight:700; color:var(--accent); margin-bottom:8px; letter-spacing:.04em; text-transform:uppercase; }
.ks-newkey-val-row { display:flex; gap:8px; align-items:center; }
.ks-newkey-val { font-family:monospace; font-size:.72rem; color:var(--text); word-break:break-all; flex:1; }
.ks-copy-btn { flex-shrink:0; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid var(--border2); background:var(--s1); color:var(--text); font-size:.72rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-copy-btn:hover { background:rgba(237,232,255,.08); }
.ks-newkey-dismiss { margin-top:8px; width:100%; padding:8px 0; border-radius:8px; border:1px solid var(--border2); background:none; color:var(--dim); font-size:.7rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); }
/* webhook events */
.ks-events-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.ks-ev-chk { display:flex; align-items:center; gap:5px; font-size:.72rem; color:var(--text); cursor:pointer; min-height:32px; }
.ks-ev-chk input { accent-color:var(--accent); cursor:pointer; width:16px; height:16px; }
.ks-secret-row { display:flex; gap:8px; align-items:center; }
.ks-secret-row .ks-inp { flex:1; }
/* delivery log */
.ks-delivery-log { display:flex; flex-direction:column; gap:4px; max-height:280px; overflow-y:auto; margin-top:8px; }
.ks-dl-row { display:grid; grid-template-columns:auto 1fr auto auto auto auto; gap:8px; align-items:center; padding:8px; border-radius:8px; background:var(--s1); border:1px solid var(--border2); font-size:.69rem; }
.ks-dl-status { font-weight:800; font-size:.7rem; min-width:28px; text-align:center; }
.ks-dl-status.ok { color:#4caf7d; }
.ks-dl-status.err { color:#e05555; }
.ks-dl-attempts { font-size:.65rem; color:var(--t3); background:var(--s2); border-radius:4px; padding:2px 4px; font-weight:700; }
.ks-dl-retry { min-height:28px; padding:0 8px; border-radius:6px; border:1px solid var(--border2); background:var(--s2); color:var(--t2); font-size:.65rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ks-dl-retry:hover { background:var(--acc); color:#fafafa; border-color:var(--acc); }
.ks-dl-retry.ks-dl-retry-ok { background:transparent; color:#4caf7d; border-color:#4caf7d; cursor:default; }
.ks-openapi-link { color:var(--acc); text-decoration:none; font-size:.7rem; font-weight:700; }
.ks-openapi-link:hover { text-decoration:underline; }
.ks-dl-event { color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ks-dl-ms { color:var(--dim); font-size:.67rem; white-space:nowrap; }
.ks-dl-ts { color:var(--dim); font-size:.67rem; white-space:nowrap; }
/* api reference */
.ks-apiref-list { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.ks-apiref-row { display:flex; align-items:baseline; gap:8px; padding:8px; border-radius:8px; background:var(--s1); font-size:.71rem; }
.ks-badge { flex-shrink:0; padding:2px 5px; border-radius:4px; font-size:.62rem; font-weight:800; letter-spacing:.04em; }
.ks-badge-get { background:rgba(76,175,125,.15); color:#4caf7d; }
.ks-badge-post { background:rgba(179,64,244,.12); color:var(--accent); }
.ks-apiref-desc { color:var(--dim); font-size:.68rem; }
.ks-code { font-family:monospace; font-size:.72rem; color:var(--text); background:rgba(237,232,255,.06); padding:1px 4px; border-radius:3px; }
/* active sessions */
.ks-sessions-list { display:flex; flex-direction:column; gap:4px; margin-bottom:4px; max-height:400px; overflow-y:auto; }
@media (max-width:768px) { .ks-sessions-list { max-height:200px; } }
.ks-session-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-radius:8px; background:var(--s1); border:1px solid var(--border2); font-size:.72rem; }
.ks-session-row.ks-session-current { border-color:var(--accent); }
.ks-session-meta { display:flex; flex-direction:column; gap:1px; }
.ks-session-role { font-weight:700; color:var(--text); }
.ks-session-ip { color:var(--dim); font-size:.68rem; }
.ks-session-time { color:var(--dim); font-size:.68rem; }
.ks-session-revoke { flex-shrink:0; min-height:44px; padding:0 12px; border-radius:8px; border:1px solid rgba(224,85,85,.35); background:rgba(224,85,85,.07); color:#e05555; font-size:.72rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-session-revoke:hover { background:rgba(224,85,85,.15); }
.ks-session-confirm { flex-shrink:0; min-height:44px; padding:0 10px; border-radius:8px; border:1px solid rgba(224,85,85,.6); background:rgba(224,85,85,.18); color:#e05555; font-size:.72rem; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); }
.ks-dim-note { color:var(--dim); font-size:.72rem; padding:4px 0; }
/* unsubscribe list */
.ks-unsub-bar { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.ks-unsub-list { display:flex; flex-direction:column; gap:3px; max-height:220px; overflow-y:auto; margin-bottom:4px; }

.ks-unsub-email { color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ks-unsub-ts { color:var(--dim); font-size:.67rem; flex-shrink:0; }
.ks-unsub-del { flex-shrink:0; min-height:44px; padding:0 10px; border-radius:8px; border:1px solid rgba(224,85,85,.3); background:rgba(224,85,85,.06); color:#e05555; font-size:.72rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-unsub-del:hover { background:rgba(224,85,85,.14); }
.ks-unsub-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-radius:8px; background:var(--s1); border:1px solid var(--border2); font-size:.72rem; }
/* danger zone */
.ks-danger-label { color:#e05555 !important; opacity:1 !important; }
.ks-danger-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 0; border-radius:9px; border:1px solid rgba(224,85,85,.35); background:rgba(224,85,85,.07); color:#e05555; font-size:.78rem; font-weight:700; cursor:pointer; letter-spacing:.03em; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:background var(--mt-fast); }
.ks-danger-btn:hover { background:rgba(224,85,85,.12); }
/* ── Settings tabs ── */
.ks-tabs { display:flex; gap:2px; padding:4px 8px 0; border-bottom:1px solid rgba(237,232,255,.06); overflow-x:auto; scrollbar-width:none; min-height:max-content; }
.ks-tabs::-webkit-scrollbar { display:none; }
.ks-tab { flex-shrink:0; padding:6px 10px; border:none; background:none; border-radius:8px 8px 0 0; font-size:.72rem; font-weight:700; letter-spacing:.03em; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:color var(--mt-fast), background var(--mt-fast); }
.ks-tab:hover { color:var(--text); background:rgba(237,232,255,.05); }
.ks-tab.active { color:var(--accent); background:rgba(179,64,244,.08); }
.ks-tab-pane[hidden] { display:none !important; }
.ks-logout-section { padding-top:8px; padding-bottom:8px; }
.ks-row-stack:last-child { border-bottom:none; }
.ks-row-stack-lbl { font-size:.72rem; color:var(--muted); font-weight:600; }

/* Toggle */
.ks-tog {
  width:44px; height:24px; border-radius:12px; border:none;
  cursor:pointer; position:relative; flex-shrink:0;
  background:rgba(237,232,255,.09);
  transition: background .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.ks-section-toggle { background:var(--accent); }
.ks-section-toggle .ks-tog-thumb { transform:translateX(16px); }
.ks-nav-toggle { background:var(--accent); }
.ks-nav-toggle .ks-tog-thumb { transform:translateX(16px); }
.ks-tog-thumb {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fafafa;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform var(--mt-default) cubic-bezier(.34,1.56,.64,1);
  display:block;
}

/* Select */
/* Font size switcher in settings */
.ks-fs-btns {
  display: flex; gap:4px; flex-wrap: wrap; flex-shrink: 1;
}
.ks-fs-btn {
  min-width: 32px; height: 28px; padding:0 8px;
  border: 1px solid rgba(237,232,255,.1); border-radius: 7px;
  background: rgba(237,232,255,.06); color: var(--muted);
  font-family: var(--sans); font-size: .65rem; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast), color var(--mt-fast), border-color var(--mt-fast);
  white-space: nowrap;
}
.ks-fs-btn:hover { background: rgba(237,232,255,.1); color: var(--text); }
.ks-fs-btn.ks-fs-active {
  background: rgba(179,64,244,.18); border-color: rgba(179,64,244,.4);
  color: var(--accent); font-weight: 800;
}
html[data-theme="light"] .ks-fs-btn { border-color: rgba(10,8,30,.12); background: rgba(10,8,30,.04); }

.ks-sel-w { position:relative; flex-shrink:0; }
.ks-sel-w.full { width:100%; }
.ks-sel-w::after {
  content:''; position:absolute; right:9px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;
  border-top:4px solid var(--muted);
  pointer-events:none;
}
.ks-sel {
  appearance:none; -webkit-appearance:none;
  font-size:.78rem; padding:4px 24px 4px 8px;
  border-radius:8px; border:1px solid rgba(237,232,255,.1);
  background:rgba(237,232,255,.06); color:var(--text);
  font-family:var(--sans); cursor:pointer; outline:none;
  min-width:108px; transition:border-color var(--mt-fast);
}
html[data-theme="light"] .ks-sel { border-color:rgba(10,8,30,.12); background:rgba(10,8,30,.04); }
.ks-sel:focus { border-color:rgba(179,64,244,.5); }
.ks-sel-w.full .ks-sel { width:100%; }

/* Input */
.ks-inp {
  width:100%; box-sizing:border-box;
  font-size:.8rem; padding:8px 10px;
  border-radius:8px; border:1px solid rgba(237,232,255,.1);
  background:rgba(237,232,255,.06); color:var(--text);
  font-family:var(--sans); outline:none;
  transition:border-color var(--mt-fast);
}
.ks-row .ks-inp { flex-shrink:0; }
html[data-theme="light"] .ks-inp { border-color:rgba(10,8,30,.12); background:rgba(10,8,30,.04); }
.ks-inp:focus { border-color:rgba(179,64,244,.5); }
.ks-inp::placeholder { color:var(--dim); }

/* Color input */
.ks-color {
  width:34px; height:26px; border-radius:7px;
  border:1px solid rgba(237,232,255,.12); cursor:pointer;
  padding:2px; background:rgba(237,232,255,.06); flex-shrink:0;
}
html[data-theme="light"] .ks-color { border-color:rgba(10,8,30,.12); background:rgba(10,8,30,.04); }

/* Gear button - hidden on desktop (settings lives in sidebar) */
@media (min-width: 769px) { #kratoGearBtn { display: none !important; } }
.ks-gear-btn {
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(237,232,255,.1);
  background:rgba(9,7,18,.84);
  backdrop-filter:blur(20px);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--mt-default), border-color var(--mt-default), box-shadow var(--mt-default);
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 20px rgba(0,0,0,.55), 0 0 0 1px rgba(179,64,244,.07);
}
html[data-theme="light"] .ks-gear-btn {
  background:rgba(250,249,255,.9);
  border-color:rgba(10,8,30,.12);
  box-shadow:0 4px 16px rgba(10,8,30,.1), 0 0 0 1px rgba(179,64,244,.06);
}
.ks-gear-btn:hover, .ks-gear-btn.ks-gear-open {
  color:var(--accent);
  border-color:rgba(179,64,244,.32);
  box-shadow:0 4px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(179,64,244,.22), 0 0 18px rgba(179,64,244,.14);
}
.ks-gear-btn svg { transition:transform .36s cubic-bezier(.34,1.2,.64,1); }
.ks-gear-btn.ks-gear-open svg { transform:rotate(62deg); }

/* Logout */
.ks-logout {
  width:100%; display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid rgba(210,50,50,.2);
  border-radius:10px; padding:8px 12px;
  color:rgba(220,70,70,.78); cursor:pointer;
  font-size:.8rem; font-family:var(--sans); font-weight:600;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--mt-fast), border-color var(--mt-fast);
}
.ks-logout:hover { background:rgba(210,50,50,.08); border-color:rgba(210,50,50,.35); }
/* Light theme token override */
html[data-theme="light"] {
  color-scheme: light;
  --bg:      var(--paper);
  --s0:      color-mix(in srgb, var(--ink) 3%,  var(--paper));
  --s1:      color-mix(in srgb, var(--ink) 7%,  var(--paper));
  --card2:   color-mix(in srgb, var(--ink) 5%,  var(--paper));
  --border:  rgba(179,64,244,.18);
  --border2: rgba(10,10,19,.09);
  --text:    var(--ink);
  --text1:   var(--ink);
  --muted:   rgba(10,10,19,.52);
  --dim:     rgba(10,10,19,.36);
}
html[data-theme="light"] .orb-sep {
  background: rgba(10,10,19,.12);
}
html[data-theme="light"] .pill-base {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-color: rgba(10,10,19,.12);
  box-shadow: 0 4px 24px rgba(10,10,19,.1), 0 1px 4px rgba(10,10,19,.06);
}
html[data-theme="light"] .bnav-divider {
  background: rgba(10,10,19,.1);
}
html[data-theme="light"] .mnav-btn,
html[data-theme="light"] .orb-per,
html[data-theme="light"] #cmdKBtn {
  color: var(--muted);
}
html[data-theme="light"] .mnav-btn.active,
html[data-theme="light"] .orb-per.active {
  color: var(--ink);
}
html[data-theme="light"] .orb-live-n,
html[data-theme="light"] .mnav-btn-lbl {
  color: var(--ink);
}

/* ── System light mode (prefers-color-scheme: light, no explicit theme set) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg:      var(--paper);
    --s0:      color-mix(in srgb, var(--ink) 3%,  var(--paper));
    --s1:      color-mix(in srgb, var(--ink) 7%,  var(--paper));
    --card2:   color-mix(in srgb, var(--ink) 5%,  var(--paper));
    --border:  rgba(179,64,244,.18);
    --border2: rgba(10,10,19,.09);
    --text:    var(--ink);
    --text1:   var(--ink);
    --muted:   rgba(10,10,19,.52);
    --dim:     rgba(10,10,19,.36);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .orb-sep { background: rgba(10,10,19,.12); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .pill-base {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    border-color: rgba(10,10,19,.12);
    box-shadow: 0 4px 24px rgba(10,10,19,.1), 0 1px 4px rgba(10,10,19,.06);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .bnav-orb {
    background: color-mix(in srgb, var(--violet) 10%, var(--paper));
    border-color: rgba(179,64,244,.24);
    box-shadow: 0 2px 12px rgba(10,10,19,.08), 0 0 0 1px rgba(179,64,244,.12);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ov-pill {
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    border-color: rgba(10,10,19,.12);
    box-shadow: 0 4px 24px rgba(10,10,19,.14), 0 0 0 1px rgba(179,64,244,.1);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .bnav-divider { background: rgba(10,10,19,.1); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .mnav-btn,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .orb-per,
  :root:not([data-theme="dark"]):not([data-theme="light"]) #cmdKBtn { color: var(--muted); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .mnav-btn.active,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .orb-per.active { color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .orb-live-n,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .mnav-btn-lbl { color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-panel {
    background: color-mix(in srgb, var(--ink) 3%, var(--paper));
    border-color: rgba(10,10,19,.12);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spotlight { border-color:rgba(179,64,244,.2); box-shadow:0 20px 50px rgba(10,8,30,.16),0 0 0 1px rgba(10,8,30,.07); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spot-item:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spot-item.ks-spot-active { background:rgba(179,64,244,.08); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spot-icon { background:linear-gradient(135deg,rgba(179,64,244,.12),rgba(179,64,244,.05)); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spot-label mark { background:rgba(179,64,244,.15); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spot-kbd { background:rgba(10,8,30,.05); border-color:rgba(10,8,30,.1); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .ks-spot-footer { border-color:rgba(10,8,30,.07); }
}

/* ── QR generator + tooltip: explicit light theme ── */
:root[data-theme="light"] .qrg-lbl { color: rgba(10,10,19,.42); }
:root[data-theme="light"] .qrg-inp,
:root[data-theme="light"] .qrg-select { background: rgba(10,10,19,.04); border-color: rgba(10,10,19,.14); color: var(--ink); }
:root[data-theme="light"] .qrg-inp:focus { border-color: rgba(179,64,244,.5); }
:root[data-theme="light"] .qrg-logo-btn { background: rgba(10,10,19,.04); border-color: rgba(179,64,244,.28); color: rgba(10,10,19,.55); }
:root[data-theme="light"] .qrg-logo-btn:hover { border-color: rgba(179,64,244,.6); color: var(--ink); }
:root[data-theme="light"] .qrg-logo-name { color: rgba(10,10,19,.45); }
:root[data-theme="light"] .qrg-logo-clear { color: rgba(10,10,19,.35); }
:root[data-theme="light"] .qrg-logo-clear:hover { color: var(--ink); }
:root[data-theme="light"] .qrg-size-lbl { color: rgba(10,10,19,.36); }
:root[data-theme="light"] .qrg-h1 { color: var(--ink); }
:root[data-theme="light"] .qrg-empty { color: rgba(10,10,19,.35); }
:root[data-theme="light"] .qrg-dl-svg { background: rgba(179,64,244,.1); border-color: rgba(179,64,244,.3); }
:root[data-theme="light"] #btt { background: color-mix(in srgb, var(--paper) 97%, transparent); border-color: rgba(10,10,19,.14); box-shadow: 0 4px 18px rgba(10,10,19,.14); color: var(--ink); }
:root[data-theme="light"] #mapTooltip { background: color-mix(in srgb, var(--paper) 97%, transparent) !important; border-color: rgba(179,64,244,.28) !important; box-shadow: 0 4px 16px rgba(10,10,19,.12) !important; color: var(--ink) !important; }

/* ── QR generator + tooltip: system light (inside prefers-color-scheme) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-lbl { color: rgba(10,10,19,.42); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-inp,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-select { background: rgba(10,10,19,.04); border-color: rgba(10,10,19,.14); color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-inp:focus { border-color: rgba(179,64,244,.5); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-logo-btn { background: rgba(10,10,19,.04); border-color: rgba(179,64,244,.28); color: rgba(10,10,19,.55); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-logo-btn:hover { border-color: rgba(179,64,244,.6); color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-logo-name { color: rgba(10,10,19,.45); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-logo-clear { color: rgba(10,10,19,.35); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-logo-clear:hover { color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-size-lbl { color: rgba(10,10,19,.36); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-h1 { color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-empty { color: rgba(10,10,19,.35); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .qrg-dl-svg { background: rgba(179,64,244,.1); border-color: rgba(179,64,244,.3); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) #btt { background: color-mix(in srgb, var(--paper) 97%, transparent); border-color: rgba(10,10,19,.14); box-shadow: 0 4px 18px rgba(10,10,19,.14); color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) #mapTooltip { background: color-mix(in srgb, var(--paper) 97%, transparent) !important; border-color: rgba(179,64,244,.28) !important; box-shadow: 0 4px 16px rgba(10,10,19,.12) !important; color: var(--ink) !important; }
}

/* Also fix .bnav-orb and .ov-pill for explicit light theme */
html[data-theme="light"] .bnav-orb {
  background: color-mix(in srgb, var(--violet) 10%, var(--paper));
  border-color: rgba(179,64,244,.24);
  box-shadow: 0 2px 12px rgba(10,10,19,.08), 0 0 0 1px rgba(179,64,244,.12);
}
html[data-theme="light"] .ov-pill {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-color: rgba(10,10,19,.12);
  box-shadow: 0 4px 24px rgba(10,10,19,.14), 0 0 0 1px rgba(179,64,244,.1);
}

html[data-theme="light"] .ksid-orb {
  background: rgba(179,64,244,.05);
  border-color: rgba(179,64,244,.15);
}
/* System light via prefers-color-scheme (also covers explicit data-theme="light") */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #kSidebar { background: #fafafa; border-right-color: rgba(10,8,30,.1); }
  :root:not([data-theme="dark"]) #kTopBar  { background: #fafafa; border-bottom-color: rgba(10,8,30,.1); }
}
:root[data-theme="light"] #kSidebar { background: #fafafa; border-right-color: rgba(10,8,30,.1); }
:root[data-theme="light"] #kTopBar  { background: #fafafa; border-bottom-color: rgba(10,8,30,.1); }


/* ══════════════════════════════════════════════════════════
   SIDEBAR  desktop ≥769px
   Mobile ≤768px: unchanged bottom-nav pill
   No duplicate icons. No duplicate live indicators.
   One settings entry point. One search entry point.
   Sub-sections = accordion dropdowns inside the sidebar.
   Overlays offset by sidebar width so sidebar never hides.
   Euclidean: 4/8px grid. Fitts: 44px targets. Miller: ≤7 items.
   Serial Position: brand top, settings bottom.
   Von Restorff: accent border on active item only.
   F-Pattern: labels left-aligned, flush with icons.
   Gestalt Proximity: divider between primary and utility nav.
   Reactance: collapse is user-controlled, persisted.
══════════════════════════════════════════════════════════ */

/* ── Sidebar shell ─────────────────────────────────────── */
@media (min-width: 769px) {
  /* Hide bottom-nav entirely on desktop */
  #bottomNav { display: none !important; }
  /* Also hide mobile-only pill buttons */
  #mnavSettingsBtn { display: none !important; }

  /* Layout: sidebar left, content right */
  #app { display: flex; flex-direction: column; }

  #kSidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 220px; z-index: 9500;
    display: flex; flex-direction: column;
    background: var(--ink);
    border-right: 1px solid var(--border2);
    transition: width .22s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }
  body.ks-col #kSidebar { width: 64px; }

  /* Content area pushed right of sidebar */
  .wrap {
    margin-left:220px;
    padding:24px 28px 48px;
    transition: margin-left .22s cubic-bezier(.4,0,.2,1);
  }
  body.ks-col .wrap { margin-left:64px; }

  /* Overlays: offset from sidebar so it stays visible */
  #analyticsOverlay,
  #toolsOverlay,
  #broadcastOverlay,
  #socialOverlay {
    left: 220px;
    transition: left .22s cubic-bezier(.4,0,.2,1),
                transform .28s cubic-bezier(.22,1,.36,1),
                opacity .2s ease;
  }
  body.ks-col #analyticsOverlay,
  body.ks-col #toolsOverlay,
  body.ks-col #broadcastOverlay,
  body.ks-col #socialOverlay { left: 64px; }

  /* Desktop: all navigation lives in the sidebar - pills are redundant, hide them */
  #anPill, #tlPill, #bcPill { display: none !important; }
  #tlSubRow { display: none !important; }

  /* No pill overhead, so overlay body starts at top */
  .ov-body { padding-top:16px; }

  /* Full-width content - overlays are already constrained by the sidebar offset */
  .an-panel, .bc-panel,
  [id^="tlPanel"] { max-width: none !important; margin-left:0 !important; margin-right:0 !important; }

  /* Settings as full desktop overlay (no modal, no backdrop) */
  #kratoSettingsBg { display: none !important; }
  /* Settings wrapper is transparent on desktop - the panel itself is the overlay */
  #kratoSettingsBg { display: none !important; }
  #kratoPanelWrap {
    position: static !important;
    display: contents !important;
    pointer-events: none !important;
    opacity: 1 !important;
    z-index: auto !important;
  }
  #kratoSettingsPanel {
    position: fixed !important;
    left: 220px !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 9650 !important;
    display: none;
    width: auto !important; max-width: none !important;
    height: 100% !important; max-height: 100vh !important;
    border-radius: 0 !important; border: none !important;
    box-shadow: none !important;
    background: var(--bg) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transform: none !important;
    opacity: 0;
    transition: opacity var(--mt-default) ease !important;
    pointer-events: none !important;
    overflow-y: auto !important;
  }
  body.ks-col #kratoSettingsPanel { left: 64px !important; }
  body.ks-col #kratoSettingsBg { left: 64px; }
  #kratoSettingsPanel.ks-open {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
}

/* ── Sidebar brand header ───────────────────────────────── */
.ksid-hdr {
  display: flex; align-items: center; gap:12px;
  padding:16px 12px;
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.ksid-logo {
  width: 32px; height: 32px; border-radius: 8px;
  flex-shrink: 0; object-fit: cover;
}
.ksid-brand {
  display: flex; flex-direction: column; min-width: 0;
  transition: opacity var(--mt-fast);
}
body.ks-col .ksid-brand { opacity: 0; pointer-events: none; width: 0; overflow: hidden; min-width: 0; flex: 0 0 0; }
body.ks-col .ksid-live { display: none; }
body.ks-col .ksid-hdr { justify-content: center; gap:0; padding:14px 8px; }
body.ks-col .ksid-col-btn { margin-left:6px; flex-shrink: 0; }
.ksid-brand-name {
  font-size: .8rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ksid-brand-sub {
  font-size: .64rem; color: var(--muted); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Live indicator: single small pill in brand header */
.ksid-live {
  display: flex; align-items: center; gap:4px;
  margin-left:auto; flex-shrink: 0;
  font-size: .7rem; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
body.ks-col .ksid-live-n { display: none; }

/* ── Nav list ───────────────────────────────────────────── */
.ksid-nav {
  flex: 1; display: flex; flex-direction: column;
  padding:8px; gap:1px;
  overflow-y: auto; overflow-x: hidden;
}
.ksid-nav::-webkit-scrollbar { width: 3px; }
.ksid-nav::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.ksid-sep {
  height: 1px; background: var(--border2);
  margin:6px 4px; flex-shrink: 0;
}

/* Nav button: primary level */
.ksid-btn {
  display: flex; align-items: center; gap:10px;
  width: 100%; height: 44px;
  padding:0 12px; border-radius: 10px;
  border: 1px solid transparent; background: transparent;
  cursor: pointer; font-family: var(--sans);
  font-size: .82rem; font-weight: 600; color: var(--muted);
  transition: background var(--mt-fast), color var(--mt-fast), border-color var(--mt-fast);
  white-space: nowrap; overflow: hidden; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.ksid-btn:hover { background: rgba(237,232,255,.06); color: var(--text); }
.ksid-btn.ks-active {
  background: rgba(179,64,244,.11);
  border-color: rgba(179,64,244,.22);
  color: var(--text);
}
.ksid-btn.ks-active .ksid-ic { color: var(--accent); }

.ksid-ic {
  width: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Labels + chevron fade when collapsed */
.ksid-lbl, .ksid-chev { transition: opacity var(--mt-fast); }
body.ks-col .ksid-lbl,
body.ks-col .ksid-chev,
body.ks-col .ksid-badge { opacity: 0; }

.ksid-chev {
  margin-left:auto; flex-shrink: 0;
  transition: transform var(--mt-default), opacity var(--mt-fast);
  color: var(--muted);
}
.ksid-btn[aria-expanded="true"] .ksid-chev { transform: rotate(180deg); }

/* ARCHO group headers: Greek name + verb subtitle */
.ksid-lbl-wrap {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
body.ks-col .ksid-lbl-wrap { opacity: 0; pointer-events: none; width: 0; overflow: hidden; flex: 0 0 0; }
.ksid-grp-verb {
  font-size: .56rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; opacity: .42; line-height: 1; white-space: nowrap;
}
.ksid-grp-hdr { height: auto; min-height: 44px; padding-block: 10px; }

/* Per-group active colors (ARCHO color system) */
.ksid-btn[data-grp="gnorizo"].ks-active { background: rgba(191,90,242,.1); border-color: rgba(191,90,242,.2); }
.ksid-btn[data-grp="gnorizo"].ks-active .ksid-ic,
.ksid-btn[data-grp="gnorizo"][aria-expanded="true"] .ksid-ic { color: #BF5AF2; }
.ksid-btn[data-grp="fero"].ks-active { background: rgba(0,122,255,.1); border-color: rgba(0,122,255,.2); }
.ksid-btn[data-grp="fero"].ks-active .ksid-ic,
.ksid-btn[data-grp="fero"][aria-expanded="true"] .ksid-ic { color: #007AFF; }
.ksid-btn[data-grp="trecho"].ks-active { background: rgba(0,200,140,.1); border-color: rgba(0,200,140,.2); }
.ksid-btn[data-grp="trecho"].ks-active .ksid-ic,
.ksid-btn[data-grp="trecho"][aria-expanded="true"] .ksid-ic { color: #00C88C; }
.ksid-btn[data-grp="fanero"].ks-active { background: rgba(255,214,10,.1); border-color: rgba(255,214,10,.2); }
.ksid-btn[data-grp="fanero"].ks-active .ksid-ic,
.ksid-btn[data-grp="fanero"][aria-expanded="true"] .ksid-ic { color: #FFD60A; }
.ksid-btn[data-grp="pliro"].ks-active { background: rgba(255,159,10,.1); border-color: rgba(255,159,10,.2); }
.ksid-btn[data-grp="pliro"].ks-active .ksid-ic,
.ksid-btn[data-grp="pliro"][aria-expanded="true"] .ksid-ic { color: #FF9F0A; }
.ksid-btn[data-grp="echo"].ks-active { background: rgba(129,140,248,.1); border-color: rgba(129,140,248,.2); }
.ksid-btn[data-grp="echo"].ks-active .ksid-ic,
.ksid-btn[data-grp="echo"][aria-expanded="true"] .ksid-ic { color: #818CF8; }

/* Badge: unread count (Zeigarnik) */
.ksid-badge {
  margin-left:auto; flex-shrink: 0;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent); color: #fafafa;
  font-size: .62rem; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  padding:0 4px;
}
.ksid-badge.ks-show { display: flex; }

/* Accordion sub-nav (dropdown inside sidebar) */
.ksid-sub {
  display: none; flex-direction: column;
  padding:2px 0 4px 32px; gap:1px;
}
.ksid-sub.ks-open { display: flex; }
body.ks-col .ksid-sub { display: none !important; }

.ksid-sub-btn {
  display: flex; align-items: center; gap:8px;
  width: 100%; height: 36px;
  padding:0 12px 0 8px; border-radius: 8px;
  border: none; background: transparent;
  cursor: pointer; font-family: var(--sans);
  font-size: .78rem; font-weight: 500; color: var(--muted);
  transition: background var(--mt-fast), color var(--mt-fast);
  white-space: nowrap; overflow: hidden;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.ksid-sub-btn:hover { background: rgba(237,232,255,.05); color: var(--text); }
.ksid-sub-btn.ks-active { color: var(--accent); font-weight: 700; }
.ksid-sub-accent { color: var(--accent); }
.ksid-sub-accent:hover { background: rgba(179,64,244,.08); color: var(--accent); }
.ksid-sub-ic {
  width: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
}

/* Level-3 group toggle (inside level-2 .ksid-sub) */
.ksid-grp-btn { justify-content: flex-start; }
.ksid-grp-chev {
  margin-left:auto; flex-shrink: 0;
  opacity: .45; transition: transform var(--mt-default) ease;
}
.ksid-grp-btn[aria-expanded="true"] .ksid-grp-chev { transform: rotate(180deg); }
.ksid-grp-btn[aria-expanded="true"] { color: var(--text); }

/* Level-3 sub-items */
.ksid-subsub {
  display: none; flex-direction: column;
  padding:1px 0 2px 28px; gap:1px;
}
.ksid-subsub.ks-open { display: flex; }
.ksid-subsub-btn {
  display: flex; align-items: center;
  width: 100%; height: 30px;
  padding:0 10px; border-radius: 6px;
  border: none; background: transparent;
  cursor: pointer; font-family: var(--sans);
  font-size: .73rem; font-weight: 500; color: var(--muted);
  transition: background var(--mt-fast), color var(--mt-fast);
  white-space: nowrap; overflow: hidden;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.ksid-subsub-btn:hover { background: rgba(237,232,255,.05); color: var(--text); }
.ksid-subsub-btn.ks-active { color: var(--accent); font-weight: 700; }

/* ── Footer: settings + collapse ────────────────────────── */
.ksid-foot {
  padding:8px; border-top: 1px solid var(--border2);
  display: flex; flex-direction: column; gap:1px; flex-shrink: 0;
}
/* Echo: notification bell badge */
.ksid-bell-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: #FF9F0A; border-radius: 99px;
  font-size: .55rem; font-weight: 800; color: #000;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
}
/* Echo: bell dropdown */
#echoBellDD {
  position: fixed; z-index: 9999;
  background: var(--s1); border: 1px solid var(--border2); border-radius: 10px;
  padding: 10px; min-width: 220px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#echoBellDD .echo-dd-hdr { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
#echoBellDD .echo-dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: .78rem; color: var(--text); -webkit-tap-highlight-color: transparent; transition: background var(--mt-instant); }
#echoBellDD .echo-dd-item:hover { background: rgba(255,255,255,.06); }
#echoBellDD .echo-dd-item .echo-dd-ct { background: #FF9F0A; color: #000; border-radius: 99px; padding: 1px 6px; font-size: .6rem; font-weight: 800; margin-left: auto; }
#echoBellDD .echo-dd-empty { font-size: .78rem; color: var(--muted); text-align: center; padding: 8px 0; }

.ksid-col-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: none; border-radius: 7px; background: transparent;
  cursor: pointer; color: var(--muted);
  transition: background var(--mt-fast), color var(--mt-fast);
  -webkit-tap-highlight-color: transparent;
  margin-left:2px;
}
.ksid-col-btn:hover { background: rgba(237,232,255,.08); color: var(--text); }

/* Light theme */
html[data-theme="light"] #kSidebar,
html[data-theme="light"] .ov-pill { background: #fafafa; }
html[data-theme="light"] #kSidebar { border-right-color: rgba(10,8,30,.1); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #kSidebar { background: #fafafa; border-right-color: rgba(10,8,30,.1); }
  :root:not([data-theme="dark"]) .ov-pill { background: #fafafa; }
}

/* ── Utility: legend swatches (non-interactive, data-semantic colors) ── */
.legend-swatch {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; margin-right: 4px; vertical-align: middle;
}
.legend-swatch-converted { background: #4ade80; }
.legend-swatch-abandoned { background: rgba(237,232,255,.38); }

/* ── Photo thumbnail: neutral border, not accent ── */
#pmPhotoThumb { border-radius: 50%; object-fit: cover; border: 2px solid var(--border); flex-shrink: 0; display: block; }

/* ════ UNDO TOAST ════ */
#kratoUndoToast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--s2,#232238); border:1px solid var(--border); border-radius:var(--r-pill); padding:10px 18px; display:flex; align-items:center; gap:12px; font-size:.83rem; color:var(--text); z-index:99999; box-shadow:0 4px 24px rgba(0,0,0,.35); transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity var(--mt-default); opacity:0; pointer-events:none; white-space:nowrap; }
#kratoUndoToast.visible { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
#kratoUndoToast .undo-label { color:var(--muted); }
#kratoUndoToast .undo-btn { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill); padding:4px 14px; font-size:.78rem; font-weight:700; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; }
#kratoUndoToast .undo-timer { font-size:.72rem; color:var(--muted); min-width:14px; text-align:right; font-variant-numeric:tabular-nums; }

/* ════ KEYBOARD SHORTCUTS OVERLAY ════ */
#kratoShortcutsOverlay { position:fixed; inset:0; z-index:99998; display:none; align-items:center; justify-content:center; }
#kratoShortcutsOverlay.open { display:flex; }
#kratoShortcutsBg { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
#kratoShortcutsPanel { position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:28px 32px; max-width:480px; width:92%; max-height:80vh; overflow-y:auto; z-index:1; }
#kratoShortcutsPanel h3 { margin:0 0 20px; font-size:1rem; font-weight:700; color:var(--text); }
.ks-shortcut-group { margin-bottom:18px; }
.ks-shortcut-group-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
.ks-shortcut-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border2); font-size:.82rem; color:var(--text); gap:12px; }
.ks-shortcut-row:last-child { border-bottom:none; }
.ks-shortcut-row .ks-keys { display:flex; gap:4px; flex-shrink:0; }
.ks-key { background:var(--s1); border:1px solid var(--border); border-radius:4px; padding:2px 7px; font-size:.72rem; font-family:monospace; color:var(--text); font-weight:600; }

/* ════ NEEDS ATTENTION CARD ════ */
#kratoAttentionBar { display:none; background:var(--s1); border:1px solid var(--border); border-radius:var(--r); padding:10px 14px; margin:0 0 14px; gap:8px; flex-wrap:wrap; align-items:center; }
#kratoAttentionBar.visible { display:flex; }
.ka-item { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px 10px; cursor:pointer; -webkit-tap-highlight-color:transparent; text-decoration:none; }
.ka-item:hover { border-color:var(--accent); color:var(--accent); }
.ka-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.ka-dot.warn { background:#f59e0b; }
.ka-label-prefix { font-size:.7rem; color:var(--muted); margin-right:2px; }

/* ════ EMAIL TEMPLATES MODAL ════ */
#bcTemplatesOverlay { position:fixed; inset:0; z-index:9600; display:none; align-items:center; justify-content:center; }
#bcTemplatesOverlay.open { display:flex; }
#bcTemplatesBg { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
#bcTemplatesPanel { position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:24px; width:min(560px,94vw); max-height:80vh; display:flex; flex-direction:column; z-index:1; }
#bcTemplatesPanel h3 { margin:0 0 16px; font-size:.95rem; font-weight:700; }
.bct-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.bct-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s1); border:1px solid var(--border2); border-radius:var(--r); cursor:pointer; transition:border-color var(--mt-fast); }
.bct-item:hover { border-color:var(--accent); }
.bct-item-info { flex:1; min-width:0; }
.bct-item-name { font-size:.85rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bct-item-sub { font-size:.75rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bct-item-load { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill); padding:4px 12px; font-size:.75rem; font-weight:700; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.bct-item-del { background:none; border:none; color:var(--muted); cursor:pointer; padding:4px; border-radius:4px; line-height:1; -webkit-tap-highlight-color:transparent; }
.bct-item-del:hover { color:#ef4444; }
.bct-empty { text-align:center; padding:32px 0; color:var(--muted); font-size:.85rem; }
.bct-save-row { display:flex; gap:8px; margin-top:14px; border-top:1px solid var(--border2); padding-top:14px; }
.bct-save-input { flex:1; background:var(--s1); border:1px solid var(--border); border-radius:var(--r); padding:7px 10px; font-size:.82rem; color:var(--text); font-family:var(--sans); outline:none; }
.bct-save-input:focus { border-color:var(--accent); }
.bct-save-btn { background:var(--s1); border:1px solid var(--border); border-radius:var(--r-pill); padding:7px 14px; font-size:.78rem; font-weight:600; cursor:pointer; color:var(--text); font-family:var(--sans); -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.bct-save-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ════ AUDIT LOG ════ */
.ks-audit-row { display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px; padding:7px 0; border-bottom:1px solid var(--border2); align-items:start; font-size:.78rem; }
.ks-audit-row:last-child { border-bottom:none; }
.ks-audit-ts { color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ks-audit-action { color:var(--text); font-weight:600; }
.ks-audit-detail { color:var(--muted); font-size:.73rem; margin-top:1px; }
.ks-audit-badge { font-size:.68rem; background:var(--s1); border:1px solid var(--border2); border-radius:3px; padding:1px 5px; color:var(--muted); white-space:nowrap; }

/* ════ ONBOARDING WIZARD ════ */
#obOverlay { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; background:radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--violet) 18%, var(--ink)) 0%, var(--bg) 70%); }
#obOverlay.open { display:flex; }
#obBox { background:var(--s1); border:1px solid var(--border); border-radius:var(--r); width:min(480px,94vw); padding:32px 28px; display:flex; flex-direction:column; gap:22px; }
.ob-head { text-align:center; }
.ob-head h2 { font-size:1.25rem; font-weight:800; margin:0 0 6px; }
.ob-head p  { font-size:.85rem; color:var(--muted); margin:0; }
.ob-steps { display:flex; gap:0; align-items:center; justify-content:center; }
.ob-step-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; border:2px solid var(--border2); color:var(--muted); flex-shrink:0; transition:all var(--mt-default); }
.ob-step-dot.active { border-color:var(--accent); color:var(--accent); }
.ob-step-dot.done { background:var(--accent); border-color:var(--accent); color:#fafafa; }
.ob-step-line { flex:1; height:2px; background:var(--border2); max-width:40px; }
.ob-step-line.done { background:var(--accent); }
.ob-panel { display:none; flex-direction:column; gap:14px; }
.ob-panel.active { display:flex; }
.ob-label { font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:-8px; }
.ob-input { background:var(--s0); border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; font-size:.9rem; color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--mt-default); width:100%; }
.ob-input:focus { border-color:var(--accent); }
.ob-hint  { font-size:.75rem; color:var(--muted); margin-top:-10px; }
.ob-logo-preview { width:56px; height:56px; border-radius:var(--r); border:1px solid var(--border2); object-fit:cover; display:none; }
.ob-logo-preview.show { display:block; }
.ob-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px; }
.ob-btn { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill); padding:9px 22px; font-size:.85rem; font-weight:700; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-fast); }
.ob-btn:hover { opacity:.88; }
.ob-btn-ghost { background:none; border:1px solid var(--border2); color:var(--muted); border-radius:var(--r-pill); padding:8px 18px; font-size:.82rem; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; }
.ob-btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.ob-skip { font-size:.75rem; color:var(--muted); cursor:pointer; text-decoration:underline; text-underline-offset:2px; background:none; border:none; padding:0; font-family:var(--sans); }
.ob-skip:hover { color:var(--text); }

/* ════ SUBSCRIPTIONS PANEL ════ */
#subPanel { position:fixed; inset:0; z-index:9500; display:none; align-items:flex-end; justify-content:flex-end; }
#subPanel.open { display:flex; }
#subPanelBg { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
#subPanelInner { position:relative; z-index:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--r) var(--r) 0 0; width:min(680px,100vw); height:80vh; display:flex; flex-direction:column; margin:0 0 0 auto; }
#subPanel header { display:flex; align-items:center; gap:10px; padding:16px 20px 12px; border-bottom:1px solid var(--border2); flex-shrink:0; }
#subPanel header h3 { margin:0; font-size:.95rem; font-weight:700; flex:1; }
.sub-search-row { display:flex; gap:8px; padding:10px 20px; flex-shrink:0; }
.sub-search-inp { flex:1; background:var(--s1); border:1px solid var(--border); border-radius:var(--r-pill); padding:7px 14px; font-size:.82rem; color:var(--text); font-family:var(--sans); outline:none; }
.sub-search-inp:focus { border-color:var(--accent); }
.sub-search-btn { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill); padding:7px 16px; font-size:.8rem; font-weight:700; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; }
.sub-list { flex:1; overflow-y:auto; padding:8px 20px 16px; display:flex; flex-direction:column; gap:10px; }
.sub-card { background:var(--s1); border:1px solid var(--border2); border-radius:var(--r); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.sub-card-top { display:flex; align-items:center; gap:10px; }
.sub-card-name { flex:1; font-weight:700; font-size:.88rem; }
.sub-card-badge { font-size:.7rem; padding:2px 8px; border-radius:var(--r-pill); font-weight:700; border:1px solid; }
.sub-card-badge.active { background:rgba(34,197,94,.1); color:#22c55e; border-color:rgba(34,197,94,.25); }
.sub-card-badge.canceled { background:rgba(239,68,68,.08); color:#ef4444; border-color:rgba(239,68,68,.2); }
.sub-card-badge.trialing { background:rgba(245,158,11,.1); color:#f59e0b; border-color:rgba(245,158,11,.25); }
.sub-card-badge.past_due { background:rgba(239,68,68,.1); color:#ef4444; border-color:rgba(239,68,68,.25); }
.sub-card-meta { font-size:.75rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 12px; }
.sub-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sub-act-btn { background:none; border:1px solid var(--border2); border-radius:var(--r-pill); padding:5px 12px; font-size:.75rem; font-weight:600; cursor:pointer; font-family:var(--sans); color:var(--muted); -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); }
.sub-act-btn:hover { border-color:var(--accent); color:var(--accent); }
.sub-act-btn.danger:hover { border-color:#ef4444; color:#ef4444; }
.sub-empty { text-align:center; padding:48px 0; color:var(--muted); font-size:.85rem; }
.sub-loading { text-align:center; padding:32px 0; color:var(--muted); font-size:.82rem; }

/* ════ CRM MESSAGE THREAD ════ */
.cp-thread { display:flex; flex-direction:column; gap:10px; padding:0 0 12px; }
.cp-msg { max-width:88%; display:flex; flex-direction:column; gap:3px; }
.cp-msg.out { align-self:flex-end; align-items:flex-end; }
.cp-msg.in  { align-self:flex-start; align-items:flex-start; }
.cp-msg-bubble { padding:9px 13px; border-radius:12px; font-size:.82rem; line-height:1.5; }
.cp-msg.out .cp-msg-bubble { background:var(--accent); color:#fafafa; border-radius:12px 12px 3px 12px; }
.cp-msg.in  .cp-msg-bubble { background:var(--s1); border:1px solid var(--border2); color:var(--text); border-radius:12px 12px 12px 3px; }
.cp-msg-meta { font-size:.68rem; color:var(--muted); padding:0 2px; }
.cp-msg-subject { font-size:.72rem; font-weight:700; color:var(--muted); margin-bottom:2px; }
.cp-reply-form { display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--border2); margin-top:4px; }
.cp-reply-subj { background:var(--s1); border:1px solid var(--border2); border-radius:var(--r); padding:7px 10px; font-size:.8rem; color:var(--text); font-family:var(--sans); outline:none; }
.cp-reply-subj:focus { border-color:var(--accent); }
.cp-reply-body { background:var(--s1); border:1px solid var(--border2); border-radius:var(--r); padding:8px 10px; font-size:.82rem; color:var(--text); font-family:var(--sans); outline:none; resize:vertical; min-height:72px; }
.cp-reply-body:focus { border-color:var(--accent); }
.cp-reply-send { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill); padding:7px 18px; font-size:.8rem; font-weight:700; cursor:pointer; font-family:var(--sans); -webkit-tap-highlight-color:transparent; align-self:flex-end; }
.cp-reply-send:disabled { opacity:.45; cursor:default; }
.cp-thread-toggle { background:none; border:none; color:var(--accent); font-size:.78rem; cursor:pointer; padding:6px 0 0; font-family:var(--sans); -webkit-tap-highlight-color:transparent; }

/* ════ OPEN RATE SPARKLINES ════ */
.dash-sparkrow { display:flex; gap:6px; align-items:flex-end; height:32px; }
.dash-spark-bar { flex:1; background:var(--accent); border-radius:2px 2px 0 0; opacity:.55; transition:opacity var(--mt-fast); min-width:3px; }
.dash-spark-bar:hover { opacity:1; }


/* ════ FEEDBACK MODAL ════ */
.kfb-backdrop {
  position: fixed; inset: 0; z-index: 30000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.kfb-backdrop[hidden] { display: none; }
.kfb-card {
  background: var(--s0); border: 1px solid var(--border2); border-radius: 16px;
  padding: 24px; width: 100%; max-width: 440px;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--sans);
}
.kfb-hd { display: flex; align-items: center; justify-content: space-between; }
.kfb-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.kfb-close {
  background: none; border: none; color: var(--dim); font-size: 1.1rem;
  cursor: pointer; padding: 2px 6px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast);
}
.kfb-close:hover { color: var(--text); }
.kfb-body {
  width: 100%; resize: vertical; min-height: 120px;
  background: var(--s1); border: 1px solid var(--border2); border-radius: 10px;
  color: var(--text); font-family: var(--sans); font-size: .88rem; line-height: 1.5;
  padding: 12px; outline: none; box-sizing: border-box;
  transition: border-color var(--mt-fast);
}
.kfb-body:focus { border-color: var(--accent); }
.kfb-note { font-size: .75rem; color: var(--muted); line-height: 1.5; margin: 0; }
.kfb-foot { display: flex; justify-content: flex-end; gap: 8px; }
.kfb-btn {
  padding: 9px 20px; border-radius: 10px; font-size: .85rem; font-weight: 700;
  cursor: pointer; border: none; transition: opacity var(--mt-fast);
  -webkit-tap-highlight-color: transparent;
}
.kfb-btn:disabled { opacity: .5; cursor: default; }
.kfb-cancel { background: var(--s1); color: var(--muted); border: 1px solid var(--border2); }
.kfb-cancel:hover:not(:disabled) { color: var(--text); }
.kfb-send { background: var(--accent); color: #fafafa; }
.kfb-send:hover:not(:disabled) { opacity: .88; }

/* ── Publish overlay: hide nav pill and lock scroll ── */
body:has(#publexOverlay.pub-open) .pill-base,
body:has(#publexOverlay.pub-open) .bottom-nav { pointer-events: none; opacity: 0; }

/* ══════════════════════════════════════════════════════════
   PRATO - Daily panel (personal tasks + habits)
══════════════════════════════════════════════════════════ */
#plxViewDaily { padding: 0; overflow-y: auto; height: 100%; }
.prt-wrap { max-width: 720px; margin: 0 auto; padding: 20px 16px 48px; }

/* Sidebar Daily button */
.prt-daily-sidebar-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px; border: none; border-radius: 8px;
  background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: .82rem;
  text-align: left; -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast), color var(--mt-fast);
}
.prt-daily-sidebar-btn:hover { background: var(--s1); color: var(--text); }
.prt-daily-sidebar-btn.active { background: var(--s2); color: var(--accent); font-weight: 600; }

/* Stats row */
.prt-stats-row {
  display: flex; align-items: center; gap: 0;
  background: var(--s1); border: 1px solid var(--border2); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 20px; flex-wrap: wrap; gap: 8px;
}
.prt-stat { text-align: center; min-width: 56px; }
.prt-stat-val { font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--text); }
.prt-stat-lbl { font-size: .65rem; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.prt-stat-sep { width: 1px; height: 32px; background: var(--border2); flex-shrink: 0; }
.prt-stat-spacer { flex: 1; }
.prt-focus-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border2);
  background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: .8rem;
  -webkit-tap-highlight-color: transparent; transition: background var(--mt-fast), color var(--mt-fast);
}
.prt-focus-btn:hover { background: var(--s2); color: var(--text); }

/* Section */
.prt-section { margin-bottom: 24px; }
.prt-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.prt-section-title { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prt-add-btn {
  font: inherit; font-size: .78rem; color: var(--accent); background: none;
  border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent; transition: background var(--mt-fast);
}
.prt-add-btn:hover { background: var(--s2); }
.prt-empty-hint { font-size: .8rem; color: var(--muted); padding: 12px 0; }

/* Habits */
.prt-habit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border2); border-radius: 10px;
  margin-bottom: 8px; background: var(--s1);
}
.prt-habit-check {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border2); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: border-color var(--mt-fast), background var(--mt-fast);
}
.prt-habit-check.done { border-color: #34C759; background: rgba(52,199,89,.18); color: #34C759; }
.prt-habit-body { flex: 1; min-width: 0; }
.prt-habit-name { font-size: .87rem; font-weight: 600; color: var(--text); }
.prt-habit-name.done { text-decoration: line-through; color: var(--muted); }
.prt-h7-dots { display: flex; gap: 3px; margin-top: 4px; }
.prt-h7-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--border2); flex-shrink: 0; }
.prt-h7-dot.on { background: #34C759; }
.prt-habit-streak { text-align: center; flex-shrink: 0; min-width: 36px; }
.prt-streak-val { display: block; font-size: .9rem; font-weight: 800; color: var(--text); line-height: 1; }
.prt-streak-lbl { display: block; font-size: .62rem; color: var(--muted); }
.prt-habit-streak.fire .prt-streak-val { color: #FF9F0A; }

/* Habit 7-day bars */
.prt-habit-week {
  background: var(--s1); border: 1px solid var(--border2); border-radius: 10px;
  padding: 10px 12px; margin-top: 10px;
}
.prt-habit-week-lbl { font-size: .68rem; color: var(--muted); margin-bottom: 8px; }
.prt-habit-week-bars { display: flex; gap: 4px; align-items: flex-end; height: 44px; }
.prt-wbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.prt-wbar-fill { width: 100%; background: #34C759; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .3s; }
.prt-wbar-lbl { font-size: .6rem; color: var(--muted); }

/* Task urgency groups */
.prt-urgency-group { margin-bottom: 16px; }
.prt-urgency-lbl {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px;
}
.prt-u-1 { background: rgba(255,59,48,.15); color: #FF3B30; }
.prt-u-2 { background: rgba(255,159,10,.15); color: #FF9F0A; }
.prt-u-3 { background: rgba(255,204,0,.15);  color: #c8a000; }
.prt-u-4 { background: rgba(90,200,250,.12); color: #5AC8FA; }
.prt-u-5 { background: var(--s2); color: var(--muted); }

/* Task rows */
.prt-task-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border2); border-radius: 9px;
  margin-bottom: 6px; background: var(--s1); transition: background var(--mt-fast);
}
.prt-task-row.overdue { border-color: rgba(255,59,48,.3); }
.prt-task-row.done { opacity: .6; }
.prt-task-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border2); background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; transition: border-color var(--mt-fast), background var(--mt-fast);
}
.prt-task-check.done { border-color: var(--accent); background: rgba(var(--accent-rgb,0,122,255),.15); color: var(--accent); }
.prt-task-body { flex: 1; min-width: 0; cursor: pointer; }
.prt-task-title { font-size: .87rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prt-task-title.done { text-decoration: line-through; color: var(--muted); }
.prt-task-due { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.prt-task-due.overdue { color: #FF3B30; }
.prt-task-snooze {
  flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--muted); border-radius: 4px; -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity var(--mt-fast);
}
.prt-task-row:hover .prt-task-snooze { opacity: 1; }
.prt-del-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 4px 6px;
  color: var(--muted); font-size: .75rem; border-radius: 4px;
  -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity var(--mt-fast), color var(--mt-fast);
}
.prt-task-row:hover .prt-del-btn,
.prt-habit-row:hover .prt-del-btn { opacity: 1; }
.prt-del-btn:hover { color: #FF3B30; }

/* Done section */
.prt-done-section { margin-top: 12px; }
.prt-done-summary {
  font-size: .78rem; color: var(--muted); cursor: pointer; padding: 6px 0;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.prt-done-summary::-webkit-details-marker { display: none; }

/* Task modal */
.prt-modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9500;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.prt-modal {
  width: 100%; max-width: 440px; background: var(--surface, var(--card));
  border: 1px solid var(--border2); border-radius: 14px; overflow: hidden;
}
.prt-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 0; margin-bottom: 16px;
}
.prt-modal-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.prt-modal-close {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: .85rem; padding: 4px 8px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.prt-modal-body { padding: 0 20px 20px; }
.prt-lbl { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 4px; margin-top: 12px; font-weight: 600; }
.prt-inp { width: 100%; box-sizing: border-box; }
.prt-ta  { width: 100%; box-sizing: border-box; resize: none; }
.prt-sel { width: 100%; box-sizing: border-box; }
.prt-modal-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.prt-modal-ft { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.prt-btn-primary {
  padding: 10px 20px; background: var(--accent); color: #fafafa;
  border: none; border-radius: 9px; font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.prt-btn-ghost {
  padding: 10px 16px; background: none; color: var(--muted);
  border: 1px solid var(--border2); border-radius: 9px; font: inherit; font-size: .85rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.prt-btn-danger {
  padding: 10px 16px; background: none; color: #FF3B30;
  border: 1px solid rgba(255,59,48,.3); border-radius: 9px; font: inherit; font-size: .85rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

@media (max-width: 480px) {
  .prt-modal-row2 { grid-template-columns: 1fr; }
  .prt-stats-row { justify-content: center; }
  .prt-stat-spacer { display: none; }
  .prt-focus-btn { width: 100%; justify-content: center; }
}

/* ── Prato: Tabs ─────────────────────────────────────────── */
.prt-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px;
}
.prt-tab-btn {
  flex: 1; padding: 7px 0; background: none; border: none;
  border-radius: 7px; font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast), color var(--mt-fast);
}
.prt-tab-btn.active {
  background: var(--surface2); color: var(--text);
}

/* ── Prato: Kanban toggle ─────────────────────────────────── */
.prt-kanban-toggle {
  margin-right: 6px;
  color: var(--muted);
  border-color: var(--border);
}

/* ── Prato: Kanban board ──────────────────────────────────── */
.prt-kanban-board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.prt-kanban-col {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 8px; min-height: 160px; transition: box-shadow var(--mt-fast);
}
.prt-kanban-col.prt-kanban-over { box-shadow: 0 0 0 2px var(--accent); }
.prt-kanban-col-hd {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.prt-kanban-col-cnt {
  background: var(--surface2); color: var(--muted);
  font-size: .65rem; padding: 1px 6px; border-radius: 10px;
}
.prt-kanban-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
  cursor: grab; position: relative; transition: transform var(--mt-fast), box-shadow var(--mt-fast);
}
.prt-kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.prt-kanban-card.prt-dragging { opacity: .45; transform: rotate(2deg); }
.prt-kanban-card-title { font-size: .82rem; color: var(--text); line-height: 1.35; margin-bottom: 3px; }
.prt-kanban-card-due { font-size: .7rem; color: var(--muted); }
.prt-kanban-card-dot {
  width: 7px; height: 7px; border-radius: 50%;
  position: absolute; top: 8px; right: 8px;
}
.prt-blocked-chip {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: rgba(255,59,48,.15); color: #FF3B30;
  border-radius: 8px; padding: 1px 6px; margin-top: 3px;
}
@media (max-width: 640px) {
  .prt-kanban-board {
    grid-template-columns: unset; display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; gap: 10px; padding-bottom: 4px;
  }
  .prt-kanban-board::-webkit-scrollbar { display: none; }
  .prt-kanban-col { flex: 0 0 80vw; scroll-snap-align: start; }
}

/* ── Prato: task in-progress / blocked indicators ─────────── */
.prt-task-row.in-progress { border-left-color: #FF9F0A; }
.prt-ip-chip {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: rgba(255,159,10,.15); color: #FF9F0A;
  border-radius: 8px; padding: 1px 6px; margin-left: 5px; vertical-align: middle;
}
.prt-blocked-badge {
  font-size: .7rem; color: #FF3B30; margin-top: 2px;
}

/* ── Prato: templates row ─────────────────────────────────── */
.prt-tpl-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.prt-tpl-lbl {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.prt-tpl-chip {
  background: rgba(0,122,255,.08); border: 1px solid rgba(0,122,255,.2);
  border-radius: 20px; padding: 4px 10px; font: inherit; font-size: .75rem;
  color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast);
}
.prt-tpl-chip:hover { background: rgba(0,122,255,.18); }

/* ── Prato: recurring tasks ───────────────────────────────── */
.prt-rec-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.prt-rec-row:last-child { border-bottom: none; }
.prt-rec-body { flex: 1; min-width: 0; }
.prt-rec-title { font-size: .85rem; color: var(--text); font-weight: 500; }
.prt-rec-meta { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.prt-rec-spawn {
  padding: 5px 10px; font-size: .75rem; white-space: nowrap;
  border-radius: 7px; -webkit-tap-highlight-color: transparent;
}

/* ── Prato: filter chips & bulk bar ────────────────────── */
.prt-filter-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.prt-filter-chip {
  padding:5px 13px; border-radius:20px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:var(--muted); font-size:.75rem;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast),color var(--mt-fast),border-color var(--mt-fast);
}
.prt-filter-chip:hover { background:rgba(255,255,255,.1); color:var(--fg); }
.prt-filter-chip.active { background:rgba(10,132,255,.18); color:#0A84FF; border-color:rgba(10,132,255,.35); }
.prt-bulk-toggle {
  padding:5px 13px; border-radius:20px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:var(--muted); font-size:.75rem;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.prt-bulk-bar {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:rgba(10,132,255,.1); border:1px solid rgba(10,132,255,.25);
  border-radius:10px; margin-bottom:10px; font-size:.78rem; color:var(--fg);
}
.prt-bulk-cb { width:16px; height:16px; accent-color:#0A84FF; cursor:pointer; flex-shrink:0; }

/* ── Prato: urgency badge on task row ──────────────────── */
.prt-urg-badge {
  padding:3px 9px; border-radius:12px; font-size:.7rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
  white-space:nowrap; flex-shrink:0; transition:opacity var(--mt-fast);
}
.prt-urg-badge:hover { opacity:.75; }

/* ── Prato: drag-drop list state ───────────────────────── */
.prt-task-row.prt-drag-over { border-color:rgba(10,132,255,.5); background:rgba(10,132,255,.08); }

/* ── Prato: calendar ───────────────────────────────────── */
.prt-cal-nav {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.prt-cal-nav-title { font-size:.95rem; font-weight:600; color:var(--fg); }
.prt-cal-nav-btn {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; color:var(--fg); font-size:1.1rem; width:34px; height:34px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; display:flex;
  align-items:center; justify-content:center;
}
.prt-cal-nav-btn:hover { background:rgba(255,255,255,.12); }
.prt-cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.prt-cal-heads .prt-cal-head {
  text-align:center; font-size:.68rem; font-weight:600; color:var(--muted);
  padding:4px 0; text-transform:uppercase; letter-spacing:.04em;
}
.prt-cal-cell {
  min-height:64px; background:rgba(255,255,255,.03); border-radius:6px;
  padding:4px 5px; cursor:pointer; transition:background var(--mt-fast);
  border:1px solid transparent;
}
.prt-cal-cell:hover { background:rgba(255,255,255,.08); }
.prt-cal-cell.other { opacity:.25; cursor:default; }
.prt-cal-cell.today { border-color:rgba(10,132,255,.4); background:rgba(10,132,255,.07); }
.prt-cal-day { font-size:.72rem; font-weight:600; color:var(--fg); margin-bottom:2px; }
.prt-cal-cell.today .prt-cal-day { color:#0A84FF; }
.prt-cal-pill {
  font-size:.62rem; border-radius:4px; padding:1px 4px; margin-bottom:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  cursor:pointer; line-height:1.4;
}
.prt-cal-more { font-size:.62rem; color:var(--muted); padding:1px 4px; }
@media(max-width:480px) {
  .prt-cal-cell { min-height:48px; }
  .prt-cal-pill { display:none; }
  .prt-cal-day { font-size:.7rem; }
}

/* ── Prato: goals ──────────────────────────────────────── */
.prt-goal-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:16px; margin-bottom:12px;
}
.prt-goal-hd { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:8px; }
.prt-goal-title { font-size:.9rem; font-weight:600; color:var(--fg); margin-bottom:3px; }
.prt-goal-streak { font-size:.72rem; color:#FF9F0A; }
.prt-goal-pct-wrap { text-align:right; flex-shrink:0; }
.prt-goal-pct { font-size:1.2rem; font-weight:700; color:#34C759; }
.prt-goal-ratio { font-size:.68rem; color:var(--muted); }
.prt-goal-bar-bg {
  height:8px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin-bottom:10px;
}
.prt-goal-bar-fill { height:100%; background:#34C759; border-radius:4px; transition:width .4s; }
.prt-goal-mils { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.prt-goal-mil {
  font-size:.68rem; padding:3px 9px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--muted);
}
.prt-goal-mil.hit { background:rgba(52,199,89,.12); border-color:rgba(52,199,89,.3); color:#34C759; }
.prt-goal-ft { display:flex; gap:8px; align-items:center; }

/* ── Prato: schedule & bookings ────────────────────────── */
.prt-sched-day {
  display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.prt-sched-day:last-child { border-bottom:none; }
.prt-sched-day-lbl { font-size:.75rem; font-weight:600; color:var(--muted); width:32px; flex-shrink:0; text-transform:uppercase; }
.prt-sched-slots { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.prt-sched-chip {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  background:rgba(10,132,255,.15); border:1px solid rgba(10,132,255,.3);
  border-radius:12px; color:#0A84FF; font-size:.72rem;
}
.prt-sched-rm { cursor:pointer; opacity:.7; -webkit-tap-highlight-color:transparent; }
.prt-sched-rm:hover { opacity:1; }
.prt-booking-row {
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap;
}
.prt-booking-row:last-child { border-bottom:none; }

/* ── Prato: drag handle ────────────────────────────────── */
.prt-drag-handle {
  cursor: grab; color: var(--muted); font-size: .9rem; flex-shrink: 0;
  padding: 2px 4px 0; user-select: none; touch-action: none;
  min-width: 18px; text-align: center; line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.prt-drag-handle:active { cursor: grabbing; }

/* ── Prato: task body note snippet ────────────────────── */
.prt-task-note {
  font-size: .7rem; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}

/* ── Prato: suggested due date ─────────────────────────── */
.prt-task-suggest {
  font-size: .68rem; color: var(--muted); margin-top: 2px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s;
}
.prt-task-suggest:hover { color: #0A84FF; }

/* ── Prato: tab badge ──────────────────────────────────── */
.prt-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #0A84FF; color: #fafafa; border-radius: 8px;
  font-size: .62rem; font-weight: 700; line-height: 1;
}

/* ── Prato: 7-day due strip ────────────────────────────── */
.prt-7day-strip {
  display:flex; gap:4px; margin-bottom:12px; align-items:flex-end;
  padding:8px 10px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07); border-radius:10px;
}
.prt-strip-col {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:2px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.prt-strip-col.today .prt-strip-day { color:#0A84FF; font-weight:700; }
.prt-strip-bar {
  width:100%; border-radius:3px; min-height:4px; transition:height var(--mt-default);
}
.prt-strip-cnt { font-size:.6rem; color:var(--fg); font-weight:700; }
.prt-strip-day { font-size:.62rem; color:var(--muted); text-transform:uppercase; }

/* ── Prato: tag chips row ──────────────────────────────── */
.prt-tag-chips { margin-top:-6px; }
.prt-tag-chip { border-color:rgba(191,90,242,.25) !important; }
.prt-tag-chip.active { background:rgba(191,90,242,.15) !important; color:#BF5AF2 !important; border-color:rgba(191,90,242,.4) !important; }

/* ── Prato: tag pill on row ────────────────────────────── */
.prt-tag-pill {
  display:inline-flex; align-items:center; padding:1px 7px;
  background:rgba(191,90,242,.12); border:1px solid rgba(191,90,242,.25);
  border-radius:10px; color:#BF5AF2; font-size:.62rem; font-weight:600;
  white-space:nowrap;
}

/* ── Prato: link button on row ─────────────────────────── */
.prt-link-btn {
  display:inline-flex; align-items:center; padding:1px 7px;
  background:rgba(10,132,255,.1); border:1px solid rgba(10,132,255,.25);
  border-radius:10px; color:#0A84FF; font-size:.62rem; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap;
  transition:background .14s;
}
.prt-link-btn:hover { background:rgba(10,132,255,.2); }

/* ── Prato: auto-source badge ──────────────────────────── */
.prt-source-auto {
  display:inline-flex; align-items:center; padding:1px 6px;
  background:rgba(191,90,242,.12); color:#BF5AF2;
  border-radius:10px; font-size:.6rem; font-weight:700;
  margin-left:5px; vertical-align:middle;
}

/* ── Prato: overdue escalation glow ───────────────────── */
@keyframes prtoGlow {
  from { box-shadow:0 0 0 1px rgba(255,69,58,.2); }
  to   { box-shadow:0 0 10px rgba(255,69,58,.45); }
}
.prt-task-row.escalated {
  animation: prtoGlow 2s ease-in-out infinite alternate;
  border-color: rgba(255,69,58,.35) !important;
}

/* ── Prato: weekly velocity card ───────────────────────── */
.prt-week-card {
  display:flex; align-items:center; gap:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:10px; padding:10px 14px; margin-bottom:12px;
}
.prt-week-stat { flex:1; text-align:center; }
.prt-week-val { font-size:1.1rem; font-weight:700; color:var(--fg); line-height:1; }
.prt-week-done { color:#34C759; }
.prt-week-streak { color:#FF9F0A; }
.prt-week-lbl { font-size:.62rem; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
.prt-week-sep { width:1px; height:32px; background:rgba(255,255,255,.08); flex-shrink:0; }

/* ── Prato: focus chip ─────────────────────────────────── */
.prt-focus-chip.active {
  background:rgba(10,132,255,.18) !important; color:#0A84FF !important;
  border-color:rgba(10,132,255,.35) !important;
}


/* ══════════════════════════════════════════════════════════
   PLIRO - Commerce Panel (inside #toolsOverlay / #tlPanelPliro)
══════════════════════════════════════════════════════════ */

/* Segmented control */
.plr-seg {
  display: flex;
  gap: 2px;
  background: var(--s0);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 20px;
}
.plr-seg::-webkit-scrollbar { display: none; }

.plr-seg-btn {
  flex: 1;
  min-width: max-content;
  padding: 6px 14px;
  background: none;
  border: none;
  border-radius: 7px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast), color var(--mt-fast);
}
.plr-seg-btn.active {
  background: var(--s1);
  color: var(--text);
}
.plr-seg-btn:hover:not(.active) { color: var(--text); }

/* Badge on Orders tab button */
.plr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #4ade80;
  color: #0a0a13;
  font-size: .6rem;
  font-weight: 800;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Body / panel content */
.plr-body { display: flex; flex-direction: column; gap: 16px; }

/* Card */
.plr-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plr-card-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 2px;
}
.plr-card-sub { font-size: .75rem; color: var(--dim); }

/* Inputs */
.plr-input, .plr-select {
  width: 100%;
  padding: 9px 12px;
  background: var(--s0);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.plr-input::placeholder { color: var(--dim); }
.plr-input:focus, .plr-select:focus { border-color: var(--accent); }
textarea.plr-input { resize: vertical; min-height: 60px; }

.plr-select-sm {
  padding: 4px 8px;
  background: var(--s0);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 2-column grid */
.plr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Buttons */
.plr-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.plr-btn-save {
  padding: 9px 18px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: var(--r-pill, 36px);
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--mt-fast);
}
.plr-btn-save:hover { opacity: .88; }
.plr-btn-save:active { opacity: .75; }

.plr-btn-ghost {
  padding: 8px 14px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill, 36px);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast), border-color var(--mt-fast);
}
.plr-btn-ghost:hover { color: var(--text); border-color: var(--border2); }

.plr-btn-del {
  padding: 8px 14px;
  background: transparent;
  color: rgba(255,69,58,.8);
  border: 1px solid rgba(255,69,58,.25);
  border-radius: var(--r-pill, 36px);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}
.plr-btn-del:hover { background: rgba(255,69,58,.08); }

.plr-btn-link {
  padding: 7px 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: var(--r-pill, 36px);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}
.plr-btn-link:hover { color: var(--text); }

/* List */
.plr-list { display: flex; flex-direction: column; gap: 8px; }

.plr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--s0);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.plr-item-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.plr-item-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.plr-item-name { font-weight: 600; font-size: .88rem; color: var(--text); }
.plr-item-price { font-weight: 700; font-size: .9rem; color: #4ade80; margin-left: auto; }
.plr-type-pill {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  background: var(--s1);
  border-radius: 6px;
  padding: 2px 7px;
}
.plr-stock { font-size: .75rem; color: var(--dim); }
.plr-order-prod { font-size: .78rem; color: var(--muted); }
.plr-order-date { font-size: .75rem; color: var(--dim); }
.plr-st-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.plr-empty { text-align: center; padding: 40px 0; color: var(--dim); font-size: .88rem; }

/* Checkout URL */
.plr-co-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .78rem;
  color: var(--muted);
  word-break: break-all;
}

/* Discounts */
.plr-disc-code { font-weight: 800; font-family: monospace; font-size: .9rem; color: var(--text); letter-spacing: .05em; }
.plr-disc-type {
  font-size: .72rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(74,222,128,.1);
  border-radius: 6px;
  padding: 2px 7px;
}
.plr-disc-meta { font-size: .75rem; color: var(--dim); }

/* Revenue */
.plr-rev-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plr-stat-tile {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.plr-stat-val { font-size: 1.2rem; font-weight: 800; color: #4ade80; }
.plr-stat-lbl { font-size: .72rem; color: var(--muted); margin-top: 3px; }

/* Bar chart */
.plr-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
  padding-top: 4px;
}
.plr-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.plr-bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .7; min-height: 2px; }
.plr-bar-lbl { font-size: .68rem; color: var(--dim); white-space: nowrap; }

/* Forecast */
.plr-forecast-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plr-fc-tile {
  background: var(--s0);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.plr-fc-val { font-size: 1rem; font-weight: 800; color: #4ade80; }
.plr-fc-lbl { font-size: .72rem; color: var(--dim); margin-top: 2px; }

/* Milestone bar */
.plr-mile-bar {
  height: 8px;
  background: var(--s1);
  border-radius: 4px;
  overflow: hidden;
}
.plr-mile-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4ade80, var(--accent));
  transition: width .6s ease;
}
.plr-mile-meta { font-size: .75rem; color: var(--dim); margin-top: 4px; }

/* Bundle checkboxes */
.plr-check-group { display: flex; flex-direction: column; gap: 6px; }
.plr-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  color: var(--muted);
  cursor: pointer;
}
.plr-check-label input[type=checkbox] { accent-color: var(--accent); }

/* Customers */
.plr-cust-stats { font-size: .78rem; color: var(--dim); margin-bottom: 8px; }
.plr-cust-list { display: flex; flex-direction: column; gap: 6px; }
.plr-cust-row {
  display: grid;
  grid-template-columns: 24px 1fr 80px 56px 64px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--s0);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.plr-cust-rank { font-size: .72rem; font-weight: 700; color: var(--dim); text-align: center; }
.plr-cust-name { font-size: .84rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plr-cust-bar-wrap { height: 4px; background: var(--s1); border-radius: 2px; overflow: hidden; }
.plr-cust-bar { height: 100%; border-radius: 2px; background: var(--accent); opacity: .7; }
.plr-cust-ltv { font-size: .84rem; font-weight: 700; color: #4ade80; text-align: right; }
.plr-cust-cnt { font-size: .72rem; color: var(--dim); text-align: right; }

/* Mobile */
@media (max-width: 480px) {
  .plr-rev-stats, .plr-forecast-row { grid-template-columns: 1fr 1fr; }
  .plr-row2 { grid-template-columns: 1fr; }
  .plr-cust-row { grid-template-columns: 24px 1fr 56px 56px; }
  .plr-cust-bar-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VRISCO - Knowledge Base
   Cyan accent: #5AC8FA
═══════════════════════════════════════════════════════════════ */

/* ── Header ── */
.vrs-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.vrs-search-wrap { position:relative; flex:1; min-width:200px; }
.vrs-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.vrs-search-input { padding-left:32px !important; }
.vrs-btn-new { background:var(--accent); color:#fafafa; border:none; border-radius:var(--r-pill,36px); padding:8px 16px; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; min-height:36px; -webkit-tap-highlight-color:transparent; }
.vrs-btn-new:hover { opacity:.88; }

/* ── Stats ── */
.vrs-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.vrs-stat { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; text-align:center; }
.vrs-stat-val { display:block; font-size:1.5rem; font-weight:800; color:var(--ink); }
.vrs-stat-val.cyan { color:#5AC8FA; }
.vrs-stat-val.warn { color:#FF9F0A; }
.vrs-stat-lbl { display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; }

/* ── Category chips ── */
.vrs-cats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.vrs-cat-chip { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:20px; padding:3px 12px; font-size:.72rem; font-weight:600; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast),border-color var(--mt-fast),color var(--mt-fast); }
.vrs-cat-chip.active, .vrs-cat-chip:hover { background:rgba(90,200,250,.12); border-color:rgba(90,200,250,.35); color:rgba(90,200,250,.9); }

/* ── Article list ── */
.vrs-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.vrs-item { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:16px; display:flex; align-items:flex-start; gap:12px; cursor:pointer; transition:border-color .14s,transform var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.vrs-item:hover { border-color:rgba(90,200,250,.35); transform:translateY(-1px); }
.vrs-item-inner { flex:1; min-width:0; }
.vrs-item-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.vrs-cat-badge { background:rgba(90,200,250,.1); border:1px solid rgba(90,200,250,.2); border-radius:20px; padding:2px 10px; font-size:.7rem; font-weight:600; color:rgba(90,200,250,.85); white-space:nowrap; }
.vrs-status-badge { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.vrs-status-badge.pub  { color:#34C759; }
.vrs-status-badge.draft{ color:#FF9F0A; }
.vrs-item-title { font-size:.875rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.vrs-item-excerpt { font-size:.76rem; color:var(--muted); line-height:1.5; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vrs-item-footer { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.vrs-meta-pill { font-size:.68rem; color:var(--dim,var(--muted)); }
.vrs-fb-inline { display:flex; gap:5px; }
.vrs-fb-up { font-size:.68rem; color:#34C759; font-weight:600; }
.vrs-fb-dn { font-size:.68rem; color:#FF3B30; font-weight:600; }
.vrs-item-actions { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }

/* ── Sidebar grid (templates + portal) ── */
.vrs-sidebar-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.vrs-card { background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:16px; }
.vrs-section-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:10px; }
.vrs-tmpl-btn { display:block; width:100%; text-align:left; background:none; border:1px solid var(--border2,var(--border)); border-radius:8px; padding:9px 12px; font-size:.78rem; color:var(--text,var(--ink)); cursor:pointer; margin-bottom:6px; min-height:38px; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast),background var(--mt-fast); }
.vrs-tmpl-btn:hover { border-color:rgba(90,200,250,.35); background:rgba(90,200,250,.05); }
.vrs-tmpl-btn:last-child { margin-bottom:0; }
.vrs-portal-hint { font-size:.74rem; color:var(--muted); margin-bottom:10px; line-height:1.5; }
.vrs-portal-toggle { display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--text,var(--ink)); margin:8px 0; cursor:pointer; }
.vrs-portal-url { font-size:.68rem; color:var(--muted); word-break:break-all; margin-top:8px; border-top:1px solid var(--border); padding-top:8px; }

/* ── Reading view ── */
.vrs-back-btn { background:none; border:none; color:var(--muted); font-size:.78rem; cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; margin-bottom:16px; -webkit-tap-highlight-color:transparent; }
.vrs-back-btn:hover { color:var(--ink); }
.vrs-reading-title { font-size:1.35rem; font-weight:800; color:var(--ink); margin:8px 0 10px; line-height:1.25; }
.vrs-reading-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.74rem; color:var(--muted); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.vrs-reading-body { font-size:.875rem; line-height:1.75; color:var(--text,var(--ink)); white-space:pre-wrap; word-break:break-word; }
.vrs-h1,.vrs-h2,.vrs-h3 { font-weight:700; color:var(--ink); margin:1.2em 0 .4em; }
.vrs-h1 { font-size:1.2rem; }
.vrs-h2 { font-size:1rem; }
.vrs-h3 { font-size:.9rem; }
.vrs-code { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:.85em; font-family:monospace; }
.vrs-internal-link { color:#5AC8FA; text-decoration:underline; cursor:pointer; }
.vrs-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.vrs-tag { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:20px; padding:2px 10px; font-size:.7rem; color:var(--muted); }
.vrs-reading-actions { display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap; }
.vrs-fb-btn { border:none; border-radius:20px; padding:6px 14px; font-size:.76rem; font-weight:600; cursor:pointer; min-height:34px; -webkit-tap-highlight-color:transparent; }
.vrs-fb-btn.up { background:rgba(52,199,89,.1); color:#34C759; }
.vrs-fb-btn.dn { background:rgba(255,59,48,.1); color:#FF3B30; }
.vrs-fb-btn:hover { opacity:.8; }

/* ── Shared form inputs ── */
.vrs-input { background:var(--bg,#0d0d1a); border:1px solid var(--border2,var(--border)); border-radius:8px; color:var(--ink); font-size:.82rem; padding:8px 10px; width:100%; box-sizing:border-box; outline:none; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast); }
.vrs-input:focus { border-color:rgba(90,200,250,.5); }
.vrs-textarea { resize:vertical; min-height:280px; font-family:inherit; line-height:1.6; }
.vrs-label { display:block; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:5px; }
.vrs-field { margin-bottom:12px; }
.vrs-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.vrs-btn-save { background:var(--accent); color:#fafafa; border:none; border-radius:8px; padding:9px 18px; font-size:.82rem; font-weight:700; cursor:pointer; min-height:38px; -webkit-tap-highlight-color:transparent; }
.vrs-btn-save:hover { opacity:.88; }
.vrs-btn-ghost { background:none; border:1px solid var(--border2,var(--border)); border-radius:8px; color:var(--text,var(--ink)); font-size:.78rem; padding:7px 14px; cursor:pointer; min-height:34px; -webkit-tap-highlight-color:transparent; }
.vrs-btn-ghost:hover { border-color:rgba(90,200,250,.35); }
.vrs-btn-del { background:none; border:1px solid rgba(255,59,48,.25); color:#FF3B30; border-radius:8px; font-size:.74rem; padding:6px 10px; cursor:pointer; min-height:30px; -webkit-tap-highlight-color:transparent; }
.vrs-btn-del:hover { background:rgba(255,59,48,.06); }

/* ── Editor overlay ── */
.vrs-overlay { position:fixed; inset:0; z-index:9600; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); overflow-y:auto; padding:20px; display:flex; align-items:flex-start; justify-content:center; }
.vrs-overlay-inner { background:var(--card2); border:1px solid var(--border); border-radius:14px; width:100%; max-width:780px; padding:24px; box-sizing:border-box; }
.vrs-overlay-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.vrs-overlay-title { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.vrs-overlay-close { background:none; border:none; color:var(--muted); font-size:1rem; cursor:pointer; padding:4px; -webkit-tap-highlight-color:transparent; }
.vrs-overlay-footer { display:flex; align-items:center; gap:10px; margin-top:16px; }

/* ── Internal link dropdown ── */
.vrs-link-dd { position:absolute; z-index:9990; background:var(--card2,#1a1820); border:1px solid rgba(255,255,255,.12); border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:300px; }
.vrs-link-dd-item { padding:9px 14px; cursor:pointer; font-size:.8rem; color:var(--ink); transition:background var(--mt-instant); }
.vrs-link-dd-item:hover { background:rgba(90,200,250,.14); }

/* ── Empty state ── */
.vrs-empty { text-align:center; padding:64px 0; }
.vrs-empty-icon { font-size:2rem; margin-bottom:10px; }
.vrs-empty-title { font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:6px; }
.vrs-empty-sub { font-size:.78rem; color:var(--muted); }

/* ── mb-2 helper (reading view cat badge spacing) ── */
#tlPanelVrisco .mb-2 { margin-bottom:8px; }

/* ── Mobile ── */
@media (max-width:600px) {
  .vrs-stats { grid-template-columns:1fr 1fr 1fr; }
  .vrs-sidebar-grid { grid-template-columns:1fr; }
  .vrs-grid3 { grid-template-columns:1fr; }
  .vrs-item { flex-direction:column; }
  .vrs-item-actions { flex-direction:row; }
  .vrs-reading-title { font-size:1.1rem; }
}
.vrs-share-btn { background:rgba(90,200,250,.08); border:1px solid rgba(90,200,250,.2); border-radius:10px; color:rgba(90,200,250,.85); font-size:.68rem; font-weight:600; padding:2px 9px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; min-height:22px; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); }
.vrs-share-btn:hover { background:rgba(90,200,250,.16); }

/* ── Vrisco tab bar ── */
.vrs-tab-bar { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--border2); padding-bottom:0; }
.vrs-tab { background:none; border:none; border-bottom:2px solid transparent; padding:6px 12px; font:.78rem/1 var(--sans); color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; margin-bottom:-1px; transition:color var(--mt-fast),border-color var(--mt-fast); }
.vrs-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.vrs-tab:hover { color:var(--ink); }

/* ── Vrisco analytics ── */
.vrs-an-table { display:flex; flex-direction:column; border:1px solid var(--border2); border-radius:10px; overflow:hidden; font-size:.78rem; }
.vrs-an-row { display:grid; grid-template-columns:1fr 72px 72px; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border2); align-items:center; }
.vrs-an-row:last-child { border-bottom:none; }
.vrs-an-head { background:var(--card2); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.vrs-an-title { color:var(--accent); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vrs-an-title:hover { text-decoration:underline; }
.vrs-an-num { text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.warn-text { color:var(--warn,#f59e0b); }
.vrs-an-esc-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.vrs-an-esc-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; border:1px solid var(--border2); border-radius:8px; }
.vrs-an-esc-cta { font-size:.72rem; padding:4px 10px; min-height:28px; }

/* ── Vrisco widget config ── */
.vrs-snippet-wrap { position:relative; }
.vrs-snippet { background:var(--card2); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; font:12px/1.6 'Courier New',monospace; color:var(--ink); white-space:pre; overflow-x:auto; margin:0 0 4px; }
.vrs-snippet-copy { position:absolute; top:8px; right:8px; font-size:.72rem; padding:3px 10px; min-height:26px; }

/* ── RSS + Link intelligence (settings + links panel) ── */
.ks-btn-sm { padding:5px 12px; border:1px solid var(--border2); border-radius:8px; background:transparent; color:var(--text); font-size:.78rem; font-family:var(--sans); cursor:pointer; white-space:nowrap; min-height:32px; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast),color var(--mt-fast); }
.ks-btn-sm:hover { border-color:var(--accent); color:var(--accent); }
.ks-row-desc { font-size:.75rem; color:var(--muted); padding:0 0 4px 2px; }
.ks-rss-item { display:flex; align-items:center; gap:8px; padding:5px 8px; border:1px solid var(--border2); border-radius:8px; font-size:.78rem; }
.ks-rss-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ks-rss-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.ks-rss-sub { font-size:.7rem; color:var(--muted); margin-top:1px; }
.ks-rss-del { background:none; border:none; color:var(--muted); cursor:pointer; padding:2px 5px; font-size:.85rem; -webkit-tap-highlight-color:transparent; }
.ks-rss-del:hover { color:var(--accent); }
/* Link intelligence */
.lm-intel-chip { display:flex; align-items:flex-start; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid var(--border2); background:var(--s1); margin-bottom:6px; font-size:.78rem; }
.lm-intel-icon { flex-shrink:0; font-size:.85rem; margin-top:1px; }
.lm-intel-txt { flex:1; color:var(--muted); line-height:1.4; }
.lm-leader-card { margin-bottom:16px; }
.lm-leader-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.lm-leader-rank { flex-shrink:0; font-size:.72rem; font-weight:700; width:18px; text-align:center; }
.lm-leader-body { flex:1; min-width:0; }
.lm-leader-name { font-size:.78rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-leader-bar-wrap { height:3px; border-radius:2px; background:var(--border2); margin-top:3px; overflow:hidden; }
.lm-leader-bar { height:100%; border-radius:2px; transition:width .5s; }
.lm-leader-vel { flex-shrink:0; text-align:right; font-size:.72rem; font-weight:700; color:var(--text); }
.lm-leader-vel-sub { font-size:.65rem; font-weight:400; color:var(--muted); }
.lm-heatmap-wrap { overflow-x:auto; }
.lm-heatmap-grid { display:grid; gap:2px; min-width:520px; }
.lm-heatmap-cell { border-radius:2px; height:10px; }
.lm-heatmap-day-lbl { font-size:.63rem; color:var(--muted); display:flex; align-items:center; }
.lm-heatmap-hr-lbl { font-size:.58rem; color:var(--muted); text-align:center; }

/* ── Link analytics cards ── */
.lm-an-card { margin-bottom:6px; }
.lm-an-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.lm-an-row:last-child { margin-bottom:0; }
.lm-an-label { flex:1; min-width:0; font-size:.78rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-an-bar-wrap { flex:1.6; min-width:0; height:4px; border-radius:2px; background:var(--border2); overflow:hidden; }
.lm-an-bar { height:100%; border-radius:2px; transition:width .5s; }
.lm-an-right { flex-shrink:0; text-align:right; font-size:.72rem; font-weight:700; color:var(--text); min-width:44px; }

/* Click velocity */
.lm-vel-row { align-items:center; }
.lm-vel-dot { width:9px; height:9px; border-radius:50%; background:rgba(237,232,255,.18); flex-shrink:0; }
.lm-vel-dot-hot { background:#34C759; animation:lm-pulse 1.4s ease-in-out infinite; }
@keyframes lm-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.lm-vel-right { min-width:50px; }

/* ROI star */
.lm-roi-star { flex-shrink:0; width:14px; color:#FFD60A; font-size:.78rem; }

/* Sparklines */
.lm-spark-row { margin-bottom:10px; }
.lm-spark-row:last-child { margin-bottom:0; }
.lm-spark-label { font-size:.74rem; color:var(--muted); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lm-spark-bars { display:flex; gap:3px; align-items:flex-end; height:32px; }
.lm-spark-bar { flex:1; background:var(--accent); border-radius:2px; transition:height var(--mt-slow); min-width:4px; }

/* Sources concentration badge */
.lm-conc-badge { font-size:.65rem; font-weight:700; background:rgba(255,159,10,.12); color:#FF9F0A; border:1px solid rgba(255,159,10,.25); border-radius:20px; padding:1px 7px; margin-left:4px; white-space:nowrap; }

/* Dormancy card */
.lm-dorm-card .card-head { color:#FF9F0A; }
.lm-dorm-row { display:flex; align-items:center; gap:8px; padding:3px 0; border-bottom:1px solid var(--border2); font-size:.78rem; }
.lm-dorm-row:last-of-type { border-bottom:none; }
.lm-dorm-age { flex-shrink:0; font-size:.68rem; color:var(--muted); }

/* Week-over-week */
.lm-wow-row { margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border2); }
.lm-wow-row:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.lm-wow-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:.78rem; gap:8px; }
.lm-wow-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:600; }
.lm-wow-delta { margin-left:6px; font-size:.72rem; font-weight:700; }
.lm-wow-ms { display:flex; align-items:center; gap:8px; margin-top:3px; }
.lm-wow-ms-bar { flex:1; }

/* Hour-of-day */
.lm-hour-chart { display:flex; gap:4px; align-items:flex-end; height:40px; }
.lm-hour-bar { flex:1; border-radius:2px 2px 0 0; transition:height var(--mt-slow); min-width:1px; }
.lm-hour-lbls { display:flex; gap:4px; margin-top:4px; }
.lm-hour-lbl { flex:1; text-align:center; font-size:.55rem; color:var(--muted); }

/* Day-of-week */
.lm-dow-chart { display:flex; gap:8px; align-items:flex-end; height:44px; }
.lm-dow-col { flex:1; display:flex; align-items:flex-end; justify-content:center; }
.lm-dow-bar { width:100%; border-radius:3px 3px 0 0; transition:height var(--mt-slow); }
.lm-dow-lbls { display:flex; gap:8px; margin-top:4px; }
.lm-dow-lbl { flex:1; text-align:center; font-size:.67rem; color:var(--muted); }

/* Nudge banners */
.lm-nudge { border-radius:10px; padding:10px 14px; font-size:.78rem; color:var(--muted); }
.lm-nudge-blue { background:rgba(0,122,255,.06); border:1px solid rgba(0,122,255,.18); }
.lm-nudge-warn { background:rgba(255,159,10,.07); border:1px solid rgba(255,159,10,.2); }
.lm-nudge-title { font-size:.78rem; font-weight:600; color:var(--accent); margin-bottom:3px; }
.lm-nudge-sub { font-size:.74rem; color:var(--muted); }

/* UTM builder */
.lm-utm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.lm-utm-lbl { display:block; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px; }
.lm-utm-inp { width:100%; background:var(--s1); border:1px solid var(--border2); border-radius:8px; color:var(--text); font-size:.8rem; padding:7px 10px; outline:none; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast); box-sizing:border-box; }
.lm-utm-inp:focus { border-color:var(--accent); }
.lm-utm-result { font-family:var(--mono); font-size:.77rem; background:var(--s1); border:1px solid var(--border2); border-radius:8px; padding:10px 12px; color:var(--muted); word-break:break-all; min-height:36px; }
@media (max-width:540px) { .lm-utm-grid { grid-template-columns:1fr; } }

/* ── Feature Pack CSS ──────────────────────────────── */

/* Overview stats row */
.lm-ov-row { display:flex; align-items:center; justify-content:space-around; gap:8px; padding:6px 0; }
.lm-ov-stat { text-align:center; }
.lm-ov-n { font-size:1.6rem; font-weight:800; color:var(--text); line-height:1; }
.lm-ov-sub { font-size:.66rem; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:.06em; }
.lm-ov-sep { font-size:1.2rem; color:var(--border2); }
.lm-ov-best { display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 12px; background:rgba(255,214,10,.06); border:1px solid rgba(255,214,10,.18); border-radius:10px; }
.lm-ov-best-star { color:#FFD60A; font-size:.9rem; }
.lm-ov-best-label { flex:1; font-size:.8rem; font-weight:600; color:var(--text); }
.lm-ov-best-n { font-size:.72rem; color:var(--muted); white-space:nowrap; }

/* Device mix */
.lm-dm-section-lbl { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:4px; }

/* Bot quality & TTFC & Ref diversity shared stat display */
.lm-bq-body { text-align:center; padding:12px 0 4px; }
.lm-bq-score { font-size:2.4rem; font-weight:800; line-height:1; }
.lm-bq-label { font-size:.72rem; color:var(--muted); margin-top:4px; }
.lm-bq-tag { font-size:.75rem; font-weight:600; margin-top:6px; }

/* Unused campaign nudge */
.lm-uc-card { border-color:rgba(255,159,10,.2); }
.lm-uc-row { display:flex; align-items:center; padding:3px 0; border-bottom:1px solid var(--border1); }
.lm-uc-row:last-of-type { border-bottom:none; }

/* Label completeness */
.lm-lc-row { }

/* Head-to-head comparison */
.lm-h2h-selrow { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.lm-h2h-sel-grp { flex:1; }
.lm-h2h-sel { width:100%; background:var(--s1); border:1px solid var(--border2); border-radius:8px; color:var(--text); font-size:.77rem; padding:6px 8px; outline:none; -webkit-tap-highlight-color:transparent; }
.lm-h2h-sel-a { border-color:rgba(0,122,255,.4); }
.lm-h2h-sel-b { border-color:rgba(255,159,10,.4); }
.lm-h2h-vs { font-size:.75rem; font-weight:700; color:var(--muted); flex-shrink:0; }
.lm-h2h-tot-a,.lm-h2h-tot-b { font-size:.65rem; color:var(--muted); margin-top:2px; text-align:center; }
.lm-h2h-chart { display:flex; gap:3px; align-items:flex-end; height:44px; margin-top:4px; overflow-x:auto; }
.lm-h2h-col { display:flex; flex-direction:column; align-items:center; gap:1px; flex-shrink:0; min-width:14px; }
.lm-h2h-bar { width:6px; border-radius:2px 2px 0 0; transition:height var(--mt-default); }
.lm-h2h-bar-a { background:rgba(0,122,255,.7); }
.lm-h2h-bar-b { background:rgba(255,159,10,.7); }
.lm-h2h-day { font-size:.48rem; color:var(--muted); writing-mode:vertical-lr; margin-top:2px; }
.lm-h2h-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.lm-h2h-dot-a { background:rgba(0,122,255,.7); }
.lm-h2h-dot-b { background:rgba(255,159,10,.7); }

/* Longevity */
.lm-lng-bar-row { display:flex; height:14px; border-radius:7px; overflow:hidden; margin-bottom:10px; }
.lm-lng-bar-seg { transition:width .4s; }
.lm-lng-legend { display:flex; flex-direction:column; gap:6px; font-size:.78rem; }
.lm-lng-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }

@media (max-width:480px) {
  .lm-ov-n { font-size:1.2rem; }
  .lm-h2h-selrow { flex-direction:column; align-items:stretch; }
  .lm-h2h-vs { text-align:center; }
}

/* ── Utility classes ─────────────────────────────────────────────────────── */
/* Layout */
.flex          { display: flex; }
.row-sb        { display: flex; justify-content: space-between; }
.items-c       { align-items: center; }
.gap4          { gap: 16px; }
.gap3          { gap: 12px; }
.gap2          { gap: 8px; }
.ta-c          { text-align: center; }
.w100          { width: 100%; }

/* Typography */
.fw600         { font-weight: 600; }
.fw700         { font-weight: 700; }
.txt-mu        { color: var(--muted); }
.txt-xs        { font-size: .75rem; }
.txt-sm        { font-size: .85rem; }
.txt-accent    { color: var(--accent); }
.uc            { text-transform: uppercase; }
.ls6           { letter-spacing: .06em; }
.fs-tiny       { font-size: .7rem; }
.pointer       { cursor: pointer; }

/* Spacing */
.mb2           { margin-bottom: 8px; }
.mb3           { margin-bottom: 12px; }
.mb4           { margin-bottom: 16px; }
.mb5           { margin-bottom: 20px; }
.mt2           { margin-top: 8px; }
.mt3           { margin-top: 12px; }
.mb2px         { margin-bottom: 2px; }
.mt2px         { margin-top: 2px; }
.mb4px         { margin-bottom: 4px; }

/* Padding */
.p5            { padding: 20px; }
.p45           { padding: 16px; }
.p9            { padding: 9px 12px; }

/* Form inputs */
.c-text        { color: var(--text); }
.bg-card2      { background: var(--card2); }
.b1            { border: 1px solid var(--border); }
.r-sm          { border-radius: 8px; }
.ff-inherit    { font-family: var(--sans); }
.no-outline    { outline: none; }
.box-border    { box-sizing: border-box; }
.resize-v      { resize: vertical; }
.d-none        { display: none !important; }

/* Field label and section title */
.field-label   { display: block; font-size: .77rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.section-title { font-size: .88rem; font-weight: 700; color: var(--text); margin: 0; }

/* Primary button */
.sbtn {
  background: var(--accent); color: #fafafa; border: none;
  border-radius: var(--r); padding: 8px 18px; font-size: .82rem; font-weight: 600;
  cursor: pointer; font-family: var(--sans); min-height: 36px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.sbtn:hover { opacity: .86; }

/* Secondary button */
.dbtn {
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  padding: 6px 14px; font-size: .78rem; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: var(--sans); min-height: 34px; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.dbtn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Forms & Notes overlays ─────────────────────────────────────────────── */
.vf-panel            { max-width: 860px; }

/* Stats row */
.vf-stats-row        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vf-stat-val         { font-weight: 700; font-size: 1.4rem; color: var(--text); }
.vf-stat-hi          { color: var(--accent); }
.vf-stat-warn        { color: #FF9F0A; }

/* Builder */
.vf-builder-cols     { display: grid; grid-template-columns: 1fr; gap: 20px; }
.vf-field-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vf-fields-wrap      { display: flex; flex-direction: column; gap: 4px; }

/* Draggable field rows */
.vf-drag-row         { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); cursor: default; -webkit-tap-highlight-color: transparent; flex-wrap: wrap; }
.vf-drag-row.vf-drag-on  { border-color: var(--accent); }
.vf-drag-row.vf-dragging { opacity: .45; }
.vf-drag-row.vf-drag-over { outline: 2px solid var(--accent); outline-offset: -2px; }
.vf-drag-handle      { cursor: grab; color: var(--muted); font-size: 1rem; line-height: 1; user-select: none; }
.vf-drag-lbl         { display: flex; align-items: center; gap: 6px; font-size: .8rem; cursor: pointer; flex: 1; }
.vf-drag-chk         { accent-color: var(--accent); cursor: pointer; }
.vf-cond-btn         { font-size: .7rem; padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px; background: none; color: var(--muted); cursor: pointer; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.vf-cond-btn.vf-cond-active  { color: var(--accent); border-color: var(--accent); }
.vf-cond-panel       { display: none; width: 100%; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--border2); margin-top: 4px; }
.vf-cond-panel.vf-cond-open  { display: flex; }
.vf-cond-sel         { font-size: .75rem; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-family: var(--sans); }
.vf-cond-val         { font-size: .75rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); width: 90px; font-family: var(--sans); }
.vf-cond-clear       { font-size: .7rem; padding: 3px 6px; border: none; background: none; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vf-prev-field-wrap  { position: relative; margin-bottom: 6px; }
.vf-prev-cond-badge  { font-size: .65rem; color: var(--accent); margin-bottom: 3px; display: block; }
.vf-preview-col      { display: none; }
.vf-preview-card     { border-radius: 10px; padding: 20px; background: var(--card2); box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.vf-prev-title       { font-weight: 700; font-size: 1rem; margin-bottom: 12px; color: var(--text); }
.vf-prev-btn         { font-weight: 600; border: none; width: 100%; margin-top: 4px; color: #fafafa; border-radius: 6px; background: var(--accent); padding: 10px 0; font-size: .9rem; cursor: default; font-family: var(--sans); }

/* Form list cards */
.vf-form-card        { margin-bottom: 14px; }
.vf-form-hdr         { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.vf-form-acts        { display: flex; gap: 8px; flex-shrink: 0; }
.vf-del-btn          { background: none; border: 1px solid rgba(255,69,58,.25); color: rgba(255,69,58,.8); padding: 4px 10px; cursor: pointer; border-radius: 6px; font-size: .72rem; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.vf-del-btn:hover    { background: rgba(255,69,58,.06); }
.vf-embed-ta         { width: 100%; font-family: monospace; font-size: .68rem; background: rgba(0,0,0,.15); border: 1px solid var(--border); border-radius: 6px; padding: 10px; box-sizing: border-box; resize: vertical; height: 110px; color: var(--muted); outline: none; display: block; }
.vf-copy-row         { display: flex; gap: 8px; margin-top: 8px; }

/* Inline close (inside builder/note-new panel) */
.ov-close-inline     { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px; line-height: 1; -webkit-tap-highlight-color: transparent; }
.ov-close-inline:hover { color: var(--text); }

/* Note cards */
.nt-card             { margin-bottom: 12px; }
.nt-hdr              { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.nt-badges           { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.nt-pri              { font-size: .7rem; font-weight: 600; color: var(--muted); }
.nt-pri--important   { color: #FF9F0A; }
.nt-pri--urgent      { color: #FF453A; }
.nt-pin-lbl          { font-size: .7rem; font-weight: 600; color: var(--accent); }
.nt-body             { white-space: pre-wrap; font-size: .88rem; margin-bottom: 12px; line-height: 1.5; color: var(--text); }
.nt-acts             { display: flex; gap: 8px; }
.nt-pri-radio        { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: .78rem; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card2); -webkit-tap-highlight-color: transparent; }
.nt-pri-inp          { accent-color: var(--accent); cursor: pointer; }
.vf-field-chk        { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: .78rem; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); -webkit-tap-highlight-color: transparent; }
.vf-field-chk-inp    { accent-color: var(--accent); cursor: pointer; }

/* Submissions inbox modal */
.vf-inbox-ov         { position: fixed; inset: 0; z-index: 12000; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.vf-inbox-sheet      { background: var(--s1); border: 1px solid var(--border); border-radius: 14px; padding: 24px; max-width: 600px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; }
.vf-inbox-hdr        { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.vf-inbox-body       { overflow-y: auto; flex: 1; }
.vf-inbox-row        { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--border2); }
.vf-inbox-empty      { text-align: center; padding: 32px; color: var(--muted); font-size: .85rem; }

@media (min-width: 769px) {
  .vf-builder-cols   { grid-template-columns: 1fr 300px; }
  .vf-preview-col    { display: block; position: sticky; top: 80px; }
}

/* ── Segment Builder ──────────────────────────────────── */
.seg-modal-inner { background:var(--s0); border:1px solid var(--border2); border-radius:16px; padding:24px; width:100%; max-width:680px; max-height:92vh; overflow-y:auto; font-family:var(--sans); box-shadow:0 24px 64px rgba(0,0,0,.5); }
.seg-modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.seg-modal-title { font-size:1rem; font-weight:800; color:var(--text); }
.seg-close { background:none; border:none; color:var(--dim); font-size:1.2rem; cursor:pointer; padding:0 4px; -webkit-tap-highlight-color:transparent; }
.seg-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
@media (max-width:540px) { .seg-row-2col { grid-template-columns:1fr; } }
.seg-lbl { display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.seg-inp { background:var(--s1); border:1px solid var(--border2); border-radius:8px; padding:8px 10px; color:var(--text); font-family:var(--sans); font-size:.82rem; outline:none; transition:border var(--mt-fast); }
.seg-inp:focus { border-color:rgba(179,64,244,.5); }
.seg-full { width:100%; }
.seg-logic-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.seg-logic-btn { padding:5px 14px; border-radius:20px; border:1px solid var(--border2); background:var(--s1); color:var(--muted); font-size:.78rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); }
.seg-logic-active { background:rgba(179,64,244,.15); border-color:rgba(179,64,244,.5); color:var(--accent); }
.seg-rules-wrap { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.seg-rule-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.seg-fld { min-width:120px; flex:1; }
.seg-op  { min-width:130px; flex:1; }
.seg-val { min-width:130px; flex:2; }
.seg-del-btn { background:none; border:1px solid rgba(255,80,80,.3); border-radius:7px; padding:5px 9px; font-size:.75rem; color:rgba(255,80,80,.8); cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.seg-add-rule-btn { width:100%; padding:7px 0; border-radius:8px; border:1px dashed rgba(179,64,244,.4); background:rgba(179,64,244,.05); color:var(--accent); font-size:.8rem; font-weight:700; cursor:pointer; margin-bottom:14px; -webkit-tap-highlight-color:transparent; font-family:var(--sans); }
.seg-preview-bar { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--s1); border:1px solid var(--border2); border-radius:10px; margin-bottom:14px; flex-wrap:wrap; }
.seg-prev-ct { font-size:.88rem; color:var(--accent); }
.seg-prev-sample { display:flex; gap:5px; flex-wrap:wrap; }
.seg-sample-chip { padding:2px 8px; border-radius:20px; background:var(--s2); border:1px solid var(--border2); font-size:.7rem; color:var(--muted); }
.seg-modal-footer { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.seg-save-btn { flex:1; padding:10px 0; border-radius:10px; background:var(--accent); color:#fafafa; border:none; font-size:.88rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); }
.seg-cancel-btn { flex:1; padding:10px 0; border-radius:10px; background:var(--s1); color:var(--muted); border:1px solid var(--border2); font-size:.88rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); }
.seg-save-msg { font-size:.75rem; color:var(--muted); }
.seg-saved-section { border-top:1px solid var(--border2); padding-top:16px; }
.seg-saved-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--s1); border:1px solid var(--border2); border-radius:9px; margin-bottom:5px; }
.seg-saved-name { flex:1; font-size:.82rem; font-weight:700; color:var(--text); cursor:pointer; }
.seg-saved-name:hover { color:var(--accent); }
.seg-saved-meta { font-size:.7rem; color:var(--dim); white-space:nowrap; }
.seg-saved-del { background:none; border:1px solid rgba(255,80,80,.25); border-radius:6px; padding:3px 8px; font-size:.7rem; color:rgba(255,80,80,.7); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.seg-empty { font-size:.78rem; color:var(--dim); padding:8px 0; }

/* ══════════════════════════════════════════════════════════
   AUTOMATION BUILDER
   ══════════════════════════════════════════════════════════ */
.auto-list-panel { display:flex; flex-direction:column; gap:6px; padding:4px 0; }
.auto-row { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.auto-row-info { flex:1; display:flex; flex-direction:column; gap:2px; cursor:pointer; }
.auto-row-info:hover .auto-row-name { color:var(--accent); }
.auto-row-name { font-size:.85rem; font-weight:700; color:var(--text); }
.auto-row-evt { font-size:.72rem; color:var(--dim); }
.auto-row-actions { display:flex; align-items:center; gap:6px; }
.auto-badge { font-size:.62rem; font-weight:700; padding:2px 7px; border-radius:99px; letter-spacing:.04em; }
.auto-badge.active { background:rgba(52,199,89,.15); color:#34c759; border:1px solid rgba(52,199,89,.3); }
.auto-badge.inactive { background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--border); }
.auto-toggle-btn,.auto-test-btn,.auto-del-btn { background:none; border:1px solid var(--border); border-radius:7px; padding:4px 8px; font-size:.78rem; cursor:pointer; color:var(--text); -webkit-tap-highlight-color:transparent; }
.auto-toggle-btn:hover { border-color:var(--accent); color:var(--accent); }
.auto-test-btn:hover { border-color:#FF9F0A; color:#FF9F0A; }
.auto-del-btn:hover { border-color:rgba(255,80,80,.5); color:rgba(255,80,80,.8); }
.auto-empty,.auto-loading { font-size:.78rem; color:var(--dim); padding:16px 0; text-align:center; }
.auto-new-btn { display:flex; align-items:center; justify-content:center; gap:6px; background:var(--accent); color:#fafafa; border:none; border-radius:10px; padding:10px 20px; font-size:.85rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* Builder modal */
.ab-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; z-index:9900; opacity:0; transition:opacity .28s; }
.ab-modal-overlay.open { opacity:1; }
.ab-modal-inner { background:var(--bg); border-radius:18px 18px 0 0; width:100%; max-width:600px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.ab-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--border); }
.ab-modal-hdr span { font-size:.95rem; font-weight:800; color:var(--text); }
.ab-hdr-btns { display:flex; gap:8px; }
.ab-save-btn { background:var(--accent); color:#fafafa; border:none; border-radius:8px; padding:6px 16px; font-size:.82rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ab-close-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:.85rem; cursor:pointer; color:var(--dim); -webkit-tap-highlight-color:transparent; }
.ab-modal-body { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.ab-field { display:flex; flex-direction:column; gap:4px; }
.ab-label { font-size:.7rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.ab-input,.ab-select,.ab-textarea { background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:.83rem; padding:8px 10px; width:100%; box-sizing:border-box; outline:none; -webkit-tap-highlight-color:transparent; }
.ab-input:focus,.ab-select:focus,.ab-textarea:focus { border-color:var(--accent); }
.ab-textarea { resize:vertical; font-family:monospace; }
.ab-sel-sm { background:var(--card); border:1px solid var(--border); border-radius:7px; color:var(--text); font-size:.78rem; padding:5px 8px; outline:none; -webkit-tap-highlight-color:transparent; }
.ab-inp-sm { background:var(--card); border:1px solid var(--border); border-radius:7px; color:var(--text); font-size:.78rem; padding:5px 8px; outline:none; -webkit-tap-highlight-color:transparent; }
.ab-section-hdr { display:flex; align-items:center; gap:8px; font-size:.8rem; font-weight:800; color:var(--text); margin-top:4px; }
.ab-hint { font-size:.68rem; font-weight:400; color:var(--dim); }
.ab-add-btn { margin-left:auto; background:none; border:1px solid var(--accent); border-radius:7px; padding:3px 10px; font-size:.72rem; color:var(--accent); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ab-cond-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.ab-cond-val { flex:1; min-width:80px; }
.ab-rm-btn { background:none; border:1px solid rgba(255,80,80,.25); border-radius:6px; padding:4px 9px; font-size:.72rem; color:rgba(255,80,80,.7); cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap; }
.ab-act-row { background:var(--card-alt,var(--card)); border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.ab-act-hdr { display:flex; align-items:center; gap:8px; }
.ab-act-extra { display:flex; flex-direction:column; gap:8px; }

/* Log */
.auto-log-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.auto-log-ts { font-size:.68rem; color:var(--dim); white-space:nowrap; }
.auto-log-name { font-size:.78rem; font-weight:700; color:var(--text); flex:1; min-width:120px; }
.auto-log-status { font-size:.72rem; font-weight:700; white-space:nowrap; }
.auto-log-status.ok { color:#34c759; }
.auto-log-status.fail { color:#FF453A; }
.auto-log-err { font-size:.68rem; color:rgba(255,80,80,.7); }

/* ══════════════════════════════════════════════════════════
   ATTENDEE PORTAL
   ══════════════════════════════════════════════════════════ */
.portal-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; z-index:9900; opacity:0; transition:opacity .28s; }
.portal-modal-overlay.open { opacity:1; }
.portal-modal-inner { background:var(--bg); border-radius:18px 18px 0 0; width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; }
.portal-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--border); font-size:.95rem; font-weight:800; color:var(--text); }
.portal-req-list { flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:2px; }
.portal-loading,.portal-empty { font-size:.78rem; color:var(--dim); text-align:center; padding:20px 0; }
.portal-req-row { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:6px; }
.portal-req-main { display:flex; align-items:flex-start; gap:10px; }
.portal-type { font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:6px; white-space:nowrap; margin-top:2px; }
.portal-type-transfer { background:rgba(108,99,255,.15); color:#8b83ff; }
.portal-type-cancel   { background:rgba(255,69,58,.12);  color:#FF6B6B; }
.portal-req-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.portal-req-name   { font-size:.83rem; font-weight:700; color:var(--text); }
.portal-req-detail { font-size:.72rem; color:var(--dim); }
.portal-req-ts     { font-size:.65rem; color:var(--dim); }
.portal-req-status { font-size:.7rem; font-weight:700; white-space:nowrap; }
.portal-req-status.pending { color:#FF9F0A; }
.portal-req-status.ok      { color:#34c759; }
.portal-req-status.fail    { color:#FF453A; }
.portal-req-btns { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.portal-approve-btn { flex:1; background:rgba(52,199,89,.12); color:#34c759; border:1px solid rgba(52,199,89,.3); border-radius:8px; padding:7px; font-size:.78rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.portal-reject-btn  { flex:1; background:rgba(255,69,58,.1);  color:#FF6B6B; border:1px solid rgba(255,69,58,.3);  border-radius:8px; padding:7px; font-size:.78rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.portal-filter-btn { background:none; border:1px solid var(--border); border-radius:7px; padding:4px 10px; font-size:.72rem; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.portal-filter-btn:hover { border-color:var(--accent); color:var(--accent); }
/* Portal link row inside CRM contact panel */
.portal-link-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.portal-link-copy-btn,.portal-link-send-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:.75rem; color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.portal-link-copy-btn:hover { border-color:var(--accent); color:var(--accent); }
.portal-link-send-btn:hover { border-color:#34c759; color:#34c759; }

/* Prato focus overlay */
#prtoFocusOverlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(7,6,13,.93); flex-direction:column; align-items:center; justify-content:center; }
.prto-exit-btn { position:absolute; top:20px; right:20px; background:none; border:1px solid var(--border2); border-radius:6px; padding:8px 16px; cursor:pointer; color:var(--muted); font:inherit; font-size:.8rem; -webkit-tap-highlight-color:transparent; }
#prtoFocusTask { font-size:.85rem; color:var(--muted); margin-bottom:20px; text-align:center; max-width:480px; padding:0 24px; }
.prto-ring-wrap { position:relative; width:200px; height:200px; margin-bottom:20px; }
.prto-ring-svg { position:absolute; inset:0; transform:rotate(-90deg); }
#prtoFocusArc { transition:stroke-dashoffset 1s linear; }
.prto-time-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#prtoFocusTimer { font-size:2rem; font-weight:800; letter-spacing:.04em; line-height:1; }
#prtoFocusPhase { font-size:.65rem; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.08em; }
.prto-btn-row { display:flex; gap:12px; }
#prtoFocusToggle { min-height:52px; min-width:140px; padding:14px 32px; background:var(--accent); color:#fafafa; border:none; border-radius:10px; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.prto-reset-btn { min-height:52px; padding:14px 20px; background:none; border:1.5px solid var(--border2); border-radius:10px; font:inherit; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; }
#prtoFocusSessions { color:var(--muted); margin-top:16px; font-size:.72rem; }
#prtoQuickFab { display:none; position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom) + 90px); z-index:350; width:40px; height:40px; border-radius:50%; background:rgba(30,28,50,.95); border:1px solid var(--border2); cursor:pointer; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.3); -webkit-tap-highlight-color:transparent; }

/* Auto-extracted utility classes from inline styles */
.kr-u1 { position:relative; }
.kr-u2 { width:140px; }
.kr-u3 { width:70px;text-align:right; }
.kr-u4 { margin:6px 0 8px;display:flex;flex-direction:column;gap:4px; }
.kr-u5 { gap:6px;flex-wrap:wrap; }
.kr-u6 { flex:1;min-width:0; }
.kr-u7 { width:120px; }
.kr-u8 { font-size:.75rem;min-height:1em;color:var(--accent);margin-top:2px; }
.kr-u9 { flex-direction:column;align-items:flex-start;gap:6px; }
.kr-u10 { margin:0; }
.kr-u11 { margin-bottom:10px; }
.kr-u12 { max-height:320px;overflow-y:auto; }
.kr-u13 { flex:1; }
.kr-u14 { background:var(--s1);border:1px solid var(--border);color:var(--muted); }
.kr-u15 { background:var(--s0);border:1px solid var(--border2);border-radius:16px;padding:24px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;font-family:var(--sans);box-shadow:0 20px 60px rgba(0,0,0,.4); }
.kr-u16 { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.kr-u17 { font-size:1rem;font-weight:800;color:var(--text); }
.kr-u18 { background:none;border:none;color:var(--dim);font-size:1.2rem;cursor:pointer;padding:0 4px; }
.kr-u19 { display:flex;flex-direction:column;gap:12px; }
.kr-u20 { margin-bottom:6px; }
.kr-u21 { display:flex;gap:6px;flex-wrap:wrap; }
.kr-u22 { text-transform:none;font-weight:400;color:var(--dim); }
.kr-u23 { margin-bottom:8px; }
.kr-u24 { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.kr-u25 { display:flex;gap:8px;margin-top:6px; }
.kr-u26 { flex:1;padding:10px 0;border-radius:10px;background:var(--accent);color:#fafafa;border:none;font-size:.88rem;font-weight:700;cursor:pointer; }
.kr-u27 { flex:1;padding:10px 0;border-radius:10px;background:var(--s1);color:var(--muted);border:1px solid var(--border2);font-size:.88rem;font-weight:700;cursor:pointer; }
.kr-u28 { font-size:.75rem;color:var(--muted);text-align:center;min-height:16px; }
.kr-u29 { display:flex;align-items:center;flex-wrap:wrap;gap:10px; }
.kr-u30 { gap:16px;margin-bottom:8px; }
.kr-u31 { width:100%; }
.kr-u32 { padding:10px 4px;display:flex;flex-direction:column;gap:10px; }
.kr-u33 { font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.04em; }
.kr-u34 { height:6px;border-radius:4px;background:var(--border2);overflow:hidden; }
.kr-u35 { height:100%;border-radius:4px;background:var(--accent);width:0%;transition:width .6s cubic-bezier(.22,1,.36,1); }
.kr-u36 { border-top:2px solid var(--accent); }
.kr-u37 { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.kr-u38 { display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-bottom:4px; }
.kr-u39 { height:8px;border-radius:999px;background:rgba(237,232,255,.07);overflow:hidden; }
.kr-u40 { height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent));transition:width .9s cubic-bezier(.16,1,.3,1);width:0%; }
.kr-u41 { border-top:1px solid var(--border2);padding-top:12px;display:none; }
.kr-u42 { font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); }
.kr-u43 { color:var(--text);font-weight:800; }
.kr-u44 { font-size:.76rem;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--border);background:transparent;color:var(--accent);cursor:pointer;font-family:var(--sans); }
.kr-u45 { display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto; }
.kr-u46 { border-top:1px solid var(--border2);padding-top:10px; }
.kr-u47 { font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px; }
.kr-u48 { flex:1;min-width:110px;background:var(--s0);border:1px solid var(--border2);border-radius:6px;padding:6px 10px;color:var(--text);font-size:.84rem;font-family:var(--sans); }
.kr-u49 { flex:1;min-width:140px;background:var(--s0);border:1px solid var(--border2);border-radius:6px;padding:6px 10px;color:var(--text);font-size:.84rem;font-family:var(--sans); }
.kr-u50 { padding:6px 14px;background:var(--accent);color:#fafafa;border:none;border-radius:6px;font-size:.82rem;cursor:pointer;font-family:var(--sans);white-space:nowrap; }
.kr-u51 { font-size:.78rem;min-height:1em;margin-top:4px;color:var(--text); }
.kr-u52 { width:100%;font-family:var(--sans);border:none;outline:none; }
.kr-u53 { flex-wrap:wrap;gap:8px; }
.kr-u54 { display:flex;gap:8px;margin-left:auto;flex-wrap:wrap; }
.kr-u55 { font-size:.72rem;color:var(--muted);margin-left:auto; }
.kr-u56 { width:28px;height:28px;border-radius:8px;margin:0 8px 0 11px;flex-shrink:0; }
.kr-u57 { display:flex;align-items:center;background:transparent;border:none;color:var(--muted);font-size:0.76rem;cursor:pointer;font-family:var(--mono);padding:0 11px 0 0; }
.kr-u58 { background:transparent;border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 12px;font-size:.78rem;color:var(--muted);cursor:pointer;font-family:var(--sans);margin-right:6px; }
.kr-u59 { display:flex;gap:8px;flex-wrap:wrap; }
.kr-u60 { padding:4px 0; }
.kr-u61 { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.kr-u62 { display:flex;gap:10px;margin-top:16px; }
.kr-u63 { flex:1;padding:11px;background:var(--accent);color:#fafafa;border:none;border-radius:8px;font-size:.9rem;cursor:pointer;font-family:var(--sans);font-weight:600; }
.kr-u64 { padding:11px 18px;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:8px;font-size:.9rem;cursor:pointer;font-family:var(--sans); }
.kr-u65 { margin-top:8px;font-size:.8rem;color:var(--text);min-height:18px; }
.kr-u66 { display:flex;gap:6px;align-items:center;grid-column:1/-1; }
.kr-u67 { padding:8px 14px;background:var(--accent);color:#fafafa;border:none;border-radius:6px;font-size:.82rem;cursor:pointer;font-family:var(--sans);white-space:nowrap; }
.kr-u68 { margin-top:18px;padding:9px 18px;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:8px;font-size:.87rem;cursor:pointer;font-family:var(--sans); }
.kr-u69 { margin-right:6px;vertical-align:middle; }
.kr-u70 { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px; }
.kr-u71 { margin:4px 0 0;display:none; }
.kr-u72 { color:var(--muted);text-align:center;padding:28px; }
.kr-u73 { padding:6px 12px;min-height:36px; }
.kr-u74 { padding:14px 16px;background:var(--s1);border-bottom:1px solid var(--border2); }
.kr-u75 { font-size:.78rem;color:var(--muted);margin-bottom:10px;font-weight:700;letter-spacing:.06em; }
.kr-u76 { color:var(--text);font-family:var(--mono); }
.kr-u77 { color:var(--muted);font-size:.82rem; }
.kr-u78 { display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--border2);font-size:.78rem; }
.kr-u79 { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px; }
.kr-u80 { font-weight:700;color:var(--text);flex-shrink:0; }
.kr-u81 { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; }
.kr-u82 { font-size:.7rem;color:var(--muted);margin-bottom:6px;font-weight:700;letter-spacing:.08em; }
.kr-u83 { display:flex;align-items:flex-end;height:52px;gap:0; }
.kr-u84 { padding:10px 14px;background:var(--s1); }
.kr-u85 { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.kr-u86 { padding:6px 14px;min-height:36px; }
.kr-u87 { display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end; }
.kr-u88 { flex:2 1 260px; }
.kr-u89 { font-size:.72rem;color:var(--muted);margin-bottom:3px; }
.kr-u90 { flex:1 1 160px; }
.kr-u91 { padding:8px 16px;font-size:.84rem;flex-shrink:0; }
.kr-u92 { color:var(--muted);font-size:.74rem; }
.kr-u93 { font-weight:700;font-size:.9rem;color:var(--text); }
.kr-u94 { color:var(--muted);flex-shrink:0; }
.kr-u95 { resize:none; }
.kr-u96 { position:relative;display:none; }
.kr-u97 { letter-spacing:.1em; }
.kr-u98 { margin-left:auto;position:relative; }
.kr-u99 { padding-right:8px;cursor:pointer;width:100%; }
.kr-u100 { padding:14px 16px;display:flex;flex-direction:column;gap:14px; }
.kr-u101 { margin-left:auto;padding:4px 12px;font-size:.74rem;font-weight:700;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);cursor:pointer;font-family:var(--sans); }
.kr-u102 { font-size:.78rem;color:var(--muted);margin-bottom:10px; }
.kr-u103 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px; }
.kr-u104 { height:8px;border-radius:999px;background:rgba(237,232,255,.07);overflow:hidden;display:flex;gap:2px; }
.kr-u105 { height:100%;background:var(--accent);border-radius:999px 0 0 999px;transition:width .9s cubic-bezier(.16,1,.3,1);width:0%; }
.kr-u106 { height:100%;background:var(--violet);border-radius:0 999px 999px 0;transition:width .9s cubic-bezier(.16,1,.3,1);width:0%; }
.kr-u107 { display:flex;gap:16px;margin-top:6px;font-size:.78rem;color:var(--muted); }
.kr-u108 { font-size:.88rem;color:var(--muted);line-height:1.5;padding:10px 12px;background:var(--s0);border-radius:8px;border:1px solid var(--border2);min-height:2.5em; }
.kr-u109 { display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:6px; }
.kr-u110 { padding:8px 10px 10px; }
.kr-u111 { position:relative;width:100%;background:rgba(10,10,19,0.8);border-radius:8px;overflow:hidden;min-height:260px; }
.kr-u112 { width:100%;height:auto;display:block; }
.kr-u113 { margin-top:10px; }
.kr-u114 { font-size:.78rem;background:var(--s1);padding:1px 5px;border-radius:4px; }
.kr-u115 { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.kr-u116 { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.kr-u117 { flex-shrink:0; }
.kr-u118 { flex:1;display:flex;flex-direction:column;gap:4px; }
.kr-u119 { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px; }
.kr-u120 { margin-top:14px;display:flex;flex-direction:column;gap:6px; }
.kr-u121 { font-size:.76rem;padding:4px 10px;color:var(--accent);border-color:rgba(179,64,244,.4); }
.kr-u122 { font-size:.72rem; }
.kr-u123 { grid-template-columns:repeat(2,1fr);max-width:360px;margin-bottom:0; }
.kr-u124 { display:flex;align-items:flex-end;gap:3px;height:64px;padding:0 2px; }
.kr-u125 { display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:4px;padding:0 2px; }
.kr-u126 { width:100%;border-collapse:collapse;font-size:.86rem; }
.kr-u127 { width:36px;cursor:default; }
.kr-u128 { display:flex;gap:8px;margin-top:8px;flex-wrap:wrap; }
.kr-u129 { font-size:.84rem;min-height:1.2em;margin-top:2px; }
.kr-u130 { padding:16px 10px; }
.kr-u131 { color:var(--muted);font-family:var(--mono); }
.kr-u132 { font-size:.84rem;color:var(--muted);margin-bottom:10px; }
.kr-u133 { font-family:var(--mono);font-size:.8rem;background:var(--s1);border:1px solid var(--border2);border-radius:10px;padding:14px 16px;white-space:pre-wrap;word-break:break-all;color:var(--muted);overflow-x:auto; }
.kr-u134 { margin-top:8px;margin-left:6px; }
.kr-u135 { margin-top:20px;margin-bottom:4px;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--muted); }
.kr-u136 { display:flex;gap:8px;align-items:center; }
.kr-u137 { font-size:.8rem;padding:6px 10px; }
.kr-u138 { margin-bottom:24px; }
.kr-u139 { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.kr-u140 { font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.08em;margin-bottom:8px; }
.kr-u141 { width:10px;height:10px;border-radius:50%;background:#6b7280;flex-shrink:0; }
.kr-u142 { font-size:.85rem;color:var(--muted); }
.kr-u143 { padding:40px;text-align:center;color:var(--muted);font-size:.85rem; }
.kr-u144 { font-size:.7rem;font-weight:800;letter-spacing:.1em;color:var(--muted);margin:0 0 8px; }
.kr-u145 { margin-bottom:20px; }
.kr-u146 { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px; }
.kr-u147 { display:flex;gap:8px;margin-bottom:10px; }
.kr-u148 { margin-bottom:28px; }
.kr-u149 { display:flex;gap:0;background:var(--s1);border:1px solid var(--border2);border-radius:10px;overflow:hidden;width:fit-content;margin-bottom:24px; }
.kr-u150 { padding:8px 20px;border:none;background:rgba(179,64,244,.15);color:var(--violet);font-size:.84rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent;transition:background var(--mt-fast),color var(--mt-fast); }
.kr-u151 { padding:8px 20px;border:none;background:transparent;color:var(--muted);font-size:.84rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent;transition:background var(--mt-fast),color var(--mt-fast); }
.kr-u152 { margin-top:12px; }
.kr-u153 { display:flex;align-items:center;gap:12px;margin-bottom:24px; }
.kr-u154 { font-size:1.05rem;font-weight:800; }
.kr-u155 { font-size:.78rem;color:var(--muted);margin-top:2px; }
.kr-u156 { font-size:.7rem;color:var(--muted);opacity:.6; }
.kr-u157 { font-size:.7rem;color:var(--violet);background:none;border:none;cursor:pointer;padding:4px 8px;margin:-4px -8px;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u158 { font-size:.7rem;color:var(--muted); }
.kr-u159 { padding:7px 16px;border-radius:100px;border:1px dashed var(--border2);background:transparent;color:var(--muted);font-size:.8rem;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent;transition:border-color var(--mt-fast),color var(--mt-fast); }
.kr-u160 { padding:7px 16px;border-radius:100px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:.8rem;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent;transition:border-color var(--mt-fast),color var(--mt-fast); }
.kr-u161 { font-size:.72rem;color:var(--muted);opacity:.6; }
.kr-u162 { font-size:.78rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px; }
.kr-u163 { font-size:.72rem;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u164 { padding:7px 14px;border-radius:100px;border:1.5px solid #b340f4;cursor:pointer;font-size:.8rem;font-weight:600;background:linear-gradient(135deg,#7b1fa2,#b340f4);color:#fafafa;font-family:var(--sans);-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 3px rgba(179,64,244,.25); }
.kr-u165 { padding:7px 14px;border-radius:100px;border:1.5px solid var(--border2);cursor:pointer;font-size:.8rem;font-weight:600;background:var(--s1);color:var(--muted);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u166 { display:flex;gap:0;background:var(--s1);border:1px solid var(--border2);border-radius:8px;overflow:hidden; }
.kr-u167 { flex:1;padding:9px;border:none;background:rgba(179,64,244,.15);color:var(--violet);font-size:.85rem;cursor:pointer;font-family:var(--sans);font-weight:600;border-radius:6px;-webkit-tap-highlight-color:transparent; }
.kr-u168 { flex:1;padding:9px;border:none;background:transparent;color:var(--muted);font-size:.85rem;cursor:pointer;font-family:var(--sans);font-weight:600;-webkit-tap-highlight-color:transparent; }
.kr-u169 { font-size:.72rem;color:var(--muted);background:none;border:none;cursor:pointer;padding:0;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u170 { width:100%;box-sizing:border-box;background:var(--s1);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;color:var(--text);font-size:.8rem;font-family:var(--mono);line-height:1.6;outline:none;resize:vertical; }
.kr-u171 { display:flex;gap:10px;flex-wrap:wrap; }
.kr-u172 { flex:1;padding:12px;border-radius:8px;border:1px solid rgba(179,64,244,.25);background:rgba(179,64,244,.1);color:var(--accent);font-size:.88rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u173 { flex:1;padding:12px;border-radius:8px;border:1px solid var(--border2);background:var(--s1);color:var(--text);font-size:.88rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u174 { margin-top:10px;font-size:.82rem;display:none;padding:8px 12px;border-radius:8px; }
.kr-u175 { font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px; }
.kr-u176 { width:100%;padding:9px 12px;background:var(--s1);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:.88rem;font-family:var(--sans);outline:none;margin-bottom:12px; }
.kr-u177 { font-size:.8rem;color:var(--muted);margin-bottom:12px;min-height:1.2em; }
.kr-u178 { flex:1;padding:10px;border-radius:8px;border:1px solid rgba(179,64,244,.25);background:rgba(179,64,244,.1);color:var(--accent);font-size:.84rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u179 { padding:10px 16px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:.84rem;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u180 { font-size:.8rem;color:var(--muted);margin-bottom:6px; }
.kr-u181 { background:var(--s1);border-radius:100px;height:6px;overflow:hidden; }
.kr-u182 { height:100%;background:var(--accent);border-radius:100px;transition:width var(--mt-slow);width:0%; }
.kr-u183 { font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px; }
.kr-u184 { font-size:.68rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);opacity:.6; }
.kr-u185 { width:100%;height:780px;border:none;display:block; }
.kr-u186 { display:flex;align-items:center;gap:12px; }
.kr-u187 { color:var(--dim);margin-bottom:10px; }
.kr-u188 { margin-bottom:12px; }
.kr-u189 { margin-bottom:16px; }
.kr-u190 { width:0%; }
.kr-u191 { padding:8px 14px;border-radius:100px;border:1px solid var(--border2);background:transparent;color:var(--muted);font-size:.78rem;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent;white-space:nowrap;transition:border-color var(--mt-fast),color var(--mt-fast); }
.kr-u192 { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.kr-u193 { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.kr-u194 { margin-left:auto;display:flex;gap:8px; }
.kr-u195 { display:flex;align-items:center;gap:5px; }
.kr-u196 { padding-bottom:6px; }
.kr-u197 { font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap; }
.kr-u198 { font-size:.8rem;font-weight:700;margin-bottom:12px;color:var(--text); }
.kr-u199 { width:100%;box-sizing:border-box;margin-bottom:8px; }
.kr-u200 { display:flex;gap:8px;margin-bottom:8px; }
.kr-u201 { flex:1;padding:6px 8px; }
.kr-u202 { display:flex; }
.kr-u203 { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;min-height:24px; }
.kr-u204 { font-size:.65rem;color:var(--dim);margin-top:5px; }
.kr-u205 { max-width:560px; }
.kr-u206 { display:flex;flex-direction:column;gap:4px;max-height:52vh;overflow-y:auto;padding-right:4px; }
.kr-u207 { display:flex;gap:8px;margin-top:10px; }
.kr-u208 { padding:9px 14px; }
.kr-u209 { display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto; }
.kr-u210 { display:flex;flex-direction:column;gap:6px;margin-top:10px; }
.kr-u211 { align-self:flex-end; }
.kr-u212 { display:flex;flex-direction:column;gap:6px; }
.kr-u213 { display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; }
.kr-u214 { flex:2;min-width:160px; }
.kr-u215 { flex:1;min-width:100px; }
.kr-u216 { padding:9px 14px;white-space:nowrap; }
.kr-u217 { max-width:440px; }
.kr-u218 { display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto; }
.kr-u219 { border-top:1px solid var(--border2); }
.kr-u220 { font-size:.8rem;color:var(--muted);margin:0 0 12px; }
.kr-u221 { display:flex;gap:8px; }
.kr-u222 { color:var(--dim);flex-shrink:0; }
.kr-u223 { max-width:130px; }
.kr-u224 { max-width:520px; }
.kr-u225 { display:flex;flex-direction:column;gap:8px; }
.kr-u226 { margin-top:14px;padding:10px 12px;background:rgba(179,64,244,.07);border:1px solid rgba(179,64,244,.18);border-radius:10px;font-size:.75rem;color:var(--dim);line-height:1.5; }
.kr-u227 { color:var(--text); }
.kr-u228 { margin-top:8px; }
.kr-u229 { flex:2; }
.kr-u230 { display:flex;align-items:center;gap:8px; }
.kr-u231 { background:#fafafa;border-radius:10px;padding:16px 10px;min-height:120px;display:flex;align-items:center;justify-content:center;width:260px;box-sizing:border-box; }
.kr-u232 { color:rgba(0,0,0,.3);font-size:.82rem; }
.kr-u233 { display:flex;flex-direction:column;gap:16px;align-items:center; }
.kr-u234 { max-width:260px; }
.kr-u235 { width:100%;max-width:400px;font-size:.85rem;color:var(--paper); }
.kr-u236 { width:100%;max-width:400px; }
.kr-u237 { margin-top:32px;padding-top:24px;border-top:1px solid rgba(237,232,255,.07); }
.kr-u238 { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px; }
.kr-u239 { margin:0;font-size:.95rem;font-weight:800;color:var(--text); }
.kr-u240 { padding:9px;max-width:max-content; }
.kr-u241 { justify-content:flex-end;gap:10px; }
.kr-u242 { display:flex;gap:0;margin-bottom:18px;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r-pill);padding:3px;width:fit-content; }
.kr-u243 { padding:7px 18px;border:none;border-radius:var(--r-pill);font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--sans);background:var(--accent);color:#fafafa;transition:all var(--mt-fast); }
.kr-u244 { display:flex;gap:6px;align-items:center; }
.kr-u245 { padding:6px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--s1);color:var(--muted);font-size:.78rem;cursor:pointer;font-family:var(--sans);white-space:nowrap;-webkit-tap-highlight-color:transparent; }
.kr-u246 { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r); }
.kr-u247 { display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);cursor:pointer; }
.kr-u248 { accent-color:var(--accent);width:15px;height:15px;cursor:pointer; }
.kr-u249 { display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);cursor:pointer;margin-left:auto; }
.kr-u250 { accent-color:var(--accent);width:16px;height:16px;cursor:pointer; }
.kr-u251 { padding:14px 16px;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r);display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.kr-u252 { padding:6px 12px;border-radius:8px;border:1px solid var(--border2);background:var(--s1);color:var(--muted);font-size:.78rem;cursor:pointer;font-family:var(--sans);white-space:nowrap;-webkit-tap-highlight-color:transparent; }
.kr-u253 { display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:10px 12px;background:var(--s0);border:1px dashed var(--border2);border-radius:var(--r); }
.kr-u254 { font-size:.78rem;color:var(--muted);white-space:nowrap; }
.kr-u255 { flex:1;min-width:160px;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--s1);color:var(--text);font-size:.82rem;font-family:var(--sans);outline:none;box-sizing:border-box; }
.kr-u256 { flex:1;min-width:140px;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--s1);color:var(--text);font-size:.82rem;font-family:var(--sans);outline:none;box-sizing:border-box; }
.kr-u257 { background:var(--accent);color:#fafafa;border-color:var(--accent); }
.kr-u258 { display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap; }
.kr-u259 { position:relative;flex:1;min-width:180px; }
.kr-u260 { width:100%;padding:9px 36px 9px 12px;border:1px solid var(--border2);border-radius:var(--r-pill);background:var(--s1);color:var(--text);font-size:.84rem;font-family:var(--sans);outline:none;box-sizing:border-box; }
.kr-u261 { position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.4; }
.kr-u262 { max-height:340px;overflow-y:auto;border:1px solid var(--border2);border-radius:var(--r);background:var(--s0); }
.kr-u263 { margin-top:8px;font-size:.78rem;color:var(--muted); }
.kr-u264 { display:flex;justify-content:flex-end;margin-top:22px; }
.kr-u265 { margin-bottom:14px;padding:10px 12px;background:var(--s0);border:1px dashed var(--border2);border-radius:var(--r); }
.kr-u266 { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.kr-u267 { border-color:var(--accent);color:var(--accent); }
.kr-u268 { display:flex;flex-direction:column;gap:16px; }
.kr-u269 { color:var(--muted);margin-left:auto;font-size:.72rem; }
.kr-u270 { display:flex;gap:12px;margin-top:5px;font-size:.73rem;color:var(--muted); }
.kr-u271 { display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap; }
.kr-u272 { font-size:.85rem;color:var(--text);font-weight:600;flex:1;text-align:center; }
.kr-u273 { padding:8px 16px;font-size:.78rem;color:var(--muted);background:var(--s1);border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;font-family:var(--sans);min-height:44px; }
.kr-u274 { font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px; }
.kr-u275 { font-weight:400;text-transform:none;letter-spacing:0;opacity:.6; }
.kr-u276 { margin-left:auto;display:inline-flex;gap:4px;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r-pill);padding:3px; }
.kr-u277 { padding:4px 10px;border:none;background:var(--accent);color:#fafafa;border-radius:var(--r-pill);font-size:.7rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u278 { padding:4px 10px;border:none;background:transparent;color:var(--muted);border-radius:var(--r-pill);font-size:.7rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u279 { transition:max-width var(--mt-default); }
.kr-u280 { width:100%;height:680px;border:none;display:block; }
.kr-u281 { gap:12px; }
.kr-u282 { display:flex;flex-direction:column;gap:6px;margin-bottom:20px; }
.kr-u283 { padding:16px;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r);margin-bottom:20px;display:flex;flex-direction:column;gap:8px;font-size:.83rem; }
.kr-u284 { font-size:.84rem;color:var(--text);font-weight:700; }
.kr-u285 { font-size:.84rem;color:var(--text);font-weight:800; }
.kr-u286 { margin-top:20px;padding:11px 24px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r-pill);font-size:.86rem;color:var(--text);cursor:pointer;font-family:var(--sans); }
.kr-u287 { display:flex;justify-content:space-between;margin-top:8px;flex-wrap:wrap;gap:10px; }
.kr-u288 { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
.kr-u289 { display:flex;flex-direction:column;gap:4px; }
.kr-u290 { display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);cursor:pointer; }
.kr-u291 { padding:6px 8px;border:1px solid var(--border2);border-radius:var(--r);background:var(--s1);color:var(--text);font-size:.78rem;font-family:var(--sans); }
.kr-u292 { text-align:right;margin-top:8px; }
.kr-u293 { font-size:.78rem;color:var(--muted); }
.kr-u294 { padding:18px 20px;color:var(--muted);font-size:.84rem; }
.kr-u295 { display:flex;align-items:center;gap:10px;padding:16px 20px 12px;flex-wrap:wrap; }
.kr-u296 { display:flex;align-items:center;gap:5px;padding:8px 14px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u297 { display:flex;align-items:center;gap:5px;padding:7px 13px;background:var(--s1);border:1px solid var(--border2);border-radius:var(--r-pill);font-size:.78rem;font-weight:600;cursor:pointer;color:var(--text);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u298 { padding:0 20px 20px;color:var(--muted);font-size:.84rem; }
.kr-u299 { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.kr-u300 { font-weight:700;font-size:.88rem;color:var(--text); }
.kr-u301 { margin-left:auto;background:transparent;border:none;cursor:pointer;color:var(--muted);padding:4px;-webkit-tap-highlight-color:transparent; }
.kr-u302 { width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--s1);color:var(--text);font-family:var(--sans);font-size:.84rem;margin-bottom:8px; }
.kr-u303 { width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--s1);color:var(--text);font-family:var(--sans);font-size:.84rem;resize:vertical; }
.kr-u304 { flex:1;padding:11px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);font-size:.84rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u305 { padding:11px 18px;background:var(--s1);border:1px solid var(--border2);border-radius:var(--r-pill);font-size:.84rem;font-weight:600;cursor:pointer;color:var(--text);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u306 { font-size:.78rem;margin-top:6px;min-height:18px; }
.kr-u307 { flex:1;border:none;width:100%;background:var(--bg); }
.kr-u308 { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.kr-u309 { background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1;padding:2px 4px; }
.kr-u310 { margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:2px 6px;-webkit-tap-highlight-color:transparent; }
.kr-u311 { color:var(--muted);font-size:.8rem;padding:12px 0; }
.kr-u312 { display:flex;gap:10px;align-items:center; }
.kr-u313 { margin-top:4px; }
.kr-u314 { font-size:.72rem;background:var(--s0);padding:1px 4px;border-radius:3px; }
.kr-u315 { text-align:center;padding:8px 0; }
.kr-u316 { font-size:2rem;margin-bottom:10px; }
.kr-u317 { font-weight:700;font-size:1rem;margin-bottom:6px; }
.kr-u318 { background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.2rem;line-height:1;padding:2px 4px;-webkit-tap-highlight-color:transparent; }
.kr-u319 { font-weight:400;font-size:.76rem;color:var(--muted); }
.kr-u320 { color:var(--dim);font-size:.68rem; }
.kr-u321 { color:var(--muted);font-size:.78rem;padding:8px 0; }
.kr-u322 { color:var(--muted);font-size:.78rem; }
.kr-u323 { height:' + h + '%; }


/* ═══ Extracted from index.php inline style blocks ═══ */

#crmReviewPanel { display:none; position:fixed; inset:0; z-index:9700; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); align-items:flex-end; justify-content:center; }
#crmReviewPanel.open { display:flex; }
.crm-review-sheet { background:var(--ink); border-radius:18px 18px 0 0; width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,.35); }
.crm-review-header { padding:16px 18px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border2); flex-shrink:0; }
.crm-review-title { font-size:.85rem; font-weight:800; color:var(--text); letter-spacing:.01em; }
.crm-review-sub { font-size:.7rem; color:var(--muted); margin-top:2px; }
.crm-review-close { background:none; border:none; cursor:pointer; color:var(--muted); padding:4px; border-radius:6px; -webkit-tap-highlight-color:transparent; }
.crm-review-close:hover { color:var(--text); }
.crm-review-list { overflow-y:auto; flex:1; padding:10px 12px 16px; display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.crm-review-item { background:var(--bg); border:1px solid var(--border2); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.crm-review-item.resolved { opacity:.35; pointer-events:none; }
.crm-review-rows { display:flex; flex-direction:column; gap:4px; }
.crm-review-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; border:1px solid var(--border2); cursor:pointer; transition:border-color var(--mt-fast), background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.crm-review-row:hover { border-color:var(--accent); background:rgba(179,64,244,.06); }
.crm-review-row.selected { border-color:var(--accent); background:rgba(179,64,244,.1); }
.crm-review-email { font-size:.78rem; font-weight:700; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-review-meta { font-size:.68rem; color:var(--muted); flex-shrink:0; }
.crm-review-keep-lbl { font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-left:auto; }
.crm-review-actions { display:flex; gap:6px; }
.crm-review-btn { flex:1; padding:7px 0; border-radius:8px; font-size:.74rem; font-weight:700; cursor:pointer; border:1px solid var(--border2); background:none; color:var(--muted); -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast), border-color var(--mt-fast), background var(--mt-fast); }
.crm-review-btn.merge { color:var(--accent); border-color:var(--accent); background:rgba(179,64,244,.07); }
.crm-review-btn.merge:hover { background:rgba(179,64,244,.16); }
.crm-review-btn.skip:hover { color:var(--text); border-color:var(--border); }
.crm-review-hint { font-size:.68rem; color:var(--dim); text-align:center; padding:4px 0 0; }
.crm-review-empty { text-align:center; padding:32px 16px; color:var(--muted); font-size:.8rem; }

.gl-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.gl-event-row { display:grid; grid-template-columns:90px 60px 1fr 1fr 80px; gap:8px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--border2); font-size:.78rem; min-width:0; }
#glEvents { overflow-x:auto; }
@media(max-width:600px){
  .gl-event-row { grid-template-columns:70px 50px 1fr 80px; font-size:.72rem; gap:5px; padding:9px 8px; }
  .gl-event-row > :nth-child(4) { display:none; }
}
.gl-event-row:last-child { border-bottom:none; }
.gl-event-badge { font-size:.65rem; font-weight:800; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.gl-ev-upload   { background:rgba(34,197,94,.15); color:#22c55e; }
.gl-ev-download { background:rgba(96,165,250,.15); color:#60a5fa; }
.gl-ev-zip      { background:rgba(251,191,36,.15); color:#fbbf24; }
.gl-ev-delete   { background:rgba(239,68,68,.15);  color:#ef4444; }
.gl-ev-restore  { background:rgba(34,197,94,.1);   color:#86efac; }
.gl-kpi { background:var(--s1); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; }
.gl-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); margin-bottom:4px; }
.gl-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.gl-country-row { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--border2); font-size:.79rem; }
.gl-country-row:last-child { border-bottom:none; }
.gl-bar { height:4px; background:var(--accent); border-radius:2px; margin-top:3px; opacity:.7; }

.reg-hero { display:flex; flex-direction:column; gap:24px; }
        @media (min-width:769px) { .reg-hero { flex-direction:row; gap:32px; align-items:flex-start; } }
        .reg-card-main { flex:1 1 420px; background:var(--s1); border:1px solid var(--border2); border-radius:18px; overflow:hidden; }
        .reg-card-top { background:linear-gradient(135deg,rgba(179,64,244,.18) 0%,rgba(64,128,244,.1) 100%); padding:28px 28px 24px; border-bottom:1px solid var(--border2); }
        .reg-card-top-label { font-size:.65rem; font-weight:800; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; margin-bottom:8px; }
        .reg-card-top-title { font-size:1.45rem; font-weight:900; color:var(--text); letter-spacing:-.02em; line-height:1.2; }
        .reg-card-top-sub { font-size:.78rem; color:var(--muted); margin-top:6px; line-height:1.5; }
        .reg-card-body { padding:28px; }
        .reg-field { margin-bottom:16px; }
        .reg-field:last-of-type { margin-bottom:0; }
        .reg-field-label { font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block; }
        .reg-field input { width:100%; box-sizing:border-box; background:var(--s2); border:1.5px solid var(--border2); border-radius:10px; padding:12px 14px; font-size:.9rem; color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--mt-fast),box-shadow var(--mt-fast); -webkit-tap-highlight-color:transparent; }
        .reg-field input:focus { border-color:rgba(179,64,244,.55); box-shadow:0 0 0 3px rgba(179,64,244,.12); }
        .reg-field input::placeholder { color:var(--muted); opacity:.5; }
        .reg-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .reg-submit-row { margin-top:22px; display:flex; flex-direction:column; gap:10px; }
        .reg-btn-main { width:100%; padding:14px; background:var(--accent); color:#fafafa; border:none; border-radius:12px; font-size:.95rem; font-weight:800; cursor:pointer; font-family:var(--sans); letter-spacing:.01em; transition:opacity var(--mt-fast),transform var(--mt-instant); -webkit-tap-highlight-color:transparent; }
        .reg-btn-main:hover { opacity:.9; }
        .reg-btn-main:active { transform:scale(.98); }
        .reg-btn-main:disabled { opacity:.5; cursor:not-allowed; }
        .reg-msg-new { margin-top:10px; font-size:.82rem; text-align:center; min-height:20px; font-weight:600; }
        .reg-msg-new.ok { color:#22c55e; }
        .reg-msg-new.err { color:#ef4444; }
        .reg-stats-panel { flex:0 0 220px; display:flex; flex-direction:column; gap:12px; }
        .reg-stat-card { background:var(--s1); border:1px solid var(--border2); border-radius:14px; padding:18px 20px; }
        .reg-stat-num { font-size:2rem; font-weight:900; color:var(--text); letter-spacing:-.03em; line-height:1; }
        .reg-stat-lbl { font-size:.7rem; font-weight:600; color:var(--muted); margin-top:5px; text-transform:uppercase; letter-spacing:.07em; }
        .reg-stat-trend { font-size:.72rem; color:#22c55e; font-weight:700; margin-top:3px; }
        .reg-recent-panel { margin-top:24px; background:var(--s1); border:1px solid var(--border2); border-radius:16px; overflow:hidden; }
        .reg-recent-hdr { padding:14px 20px; border-bottom:1px solid var(--border2); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
        .reg-recent-row { display:grid; grid-template-columns:1fr auto; align-items:center; padding:10px 20px; border-bottom:1px solid var(--border2); font-size:.82rem; gap:12px; }
        .reg-recent-row:last-child { border-bottom:none; }
        .reg-recent-name { font-weight:700; color:var(--text); }
        .reg-recent-email { font-size:.74rem; color:var(--muted); margin-top:1px; }
        .reg-recent-time { font-size:.72rem; color:var(--muted); white-space:nowrap; }
        .reg-pulse { width:8px; height:8px; background:#22c55e; border-radius:50%; display:inline-block; margin-right:6px; animation:regPulse 2s infinite; }
        @keyframes regPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }

/* ── Vol: 4px base grid, Tufte ink-efficiency, Fitts 44px targets ── */

  /* Top bar */
  .vol-topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
  }
  .vol-topbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 20px; border-radius: 10px;
    border: 1px solid var(--border2); background: var(--card2);
    color: var(--text1); font-size: .82rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--mt-fast);
  }
  .vol-topbtn:hover { opacity: .8; }
  .vol-topbtn--accent { background: var(--accent); border-color: var(--accent); color: #fafafa; }

  /* Sync dot (Doherty Threshold / Ataraxia) */
  .vol-sync { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--dim); }
  .vol-sync-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--dim); transition: background var(--mt-slow);
  }
  .vol-sync.ok   .vol-sync-dot { background: var(--accent); }
  .vol-sync.busy .vol-sync-dot { background: var(--accent); }
  .vol-sync.err  .vol-sync-dot { background: var(--accent); }

  /* MAM banner (Mavromatis Asymmetric Momentum) */
  .vol-mam {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 10px; margin-bottom: 20px;
    background: rgba(179,64,244,.08); border: 1px solid rgba(179,64,244,.25);
    font-size: .82rem; color: var(--text); font-weight: 700;
  }
  .vol-mam[hidden] { display: none; }
  .vol-mam svg { flex-shrink: 0; }

  /* KPI row */
  .vol-kpi-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
  .vol-kpi {
    background: var(--card2); border-radius: 10px; padding: 12px 16px; min-width: 80px;
    border-left: 3px solid transparent; /* Stroop: color = status color */
  }
  .vol-kpi-n   { font-size: 1.5rem; font-weight: 800; line-height: 1; }
  .vol-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); margin-top: 4px; }

  /* Filter tabs */
  .vol-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
  .vol-filter {
    min-height: 36px; padding: 0 16px; border-radius: 40px;
    border: 1px solid var(--border2); background: var(--card2);
    color: var(--dim); font-size: .72rem; font-weight: 700;
    cursor: pointer; letter-spacing: .04em;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mt-fast), border-color var(--mt-fast), color var(--mt-fast);
    position: relative;
  }
  .vol-filter.active           { background: var(--accent); border-color: var(--accent); color: #fafafa; }
  .vol-filter:hover:not(.active) { border-color: var(--accent); color: var(--text1); }
  /* Von Restorff: pending badge when items exist */
  .vol-filter.has-items::after {
    content: ''; position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  }

  /* ── Volunteer card (Stroop: left-border = status color) ── */
  .vol-card {
    background: var(--card2);
    border-left: 3px solid var(--border2); /* overridden per status */
    border-top: 1px solid var(--border2);
    border-right: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
    border-radius: 12px; margin-bottom: 8px;
    overflow: hidden;
  }
  .vol-card[data-status="pending"]   { border-left-color: rgba(237,232,255,.2); }
  .vol-card[data-status="accepted"]  { border-left-color: rgba(237,232,255,.35); }
  .vol-card[data-status="rejected"]  { border-left-color: rgba(237,232,255,.1); }
  .vol-card[data-status="contacted"] { border-left-color: rgba(179,64,244,.35); }

  /* Peak-End flash on status change */
  @keyframes vol-flash { 0%{background:rgba(179,64,244,.18)} 100%{background:transparent} }
  .vol-card-flash { animation: vol-flash .6s ease-out; }

  .vol-card-main {
    display: grid; grid-template-columns: 1fr auto;
    gap: 12px; padding: 14px 16px 12px;
    align-items: start;
  }
  .vol-card-left { min-width: 0; }

  /* Von Restorff: name dominant */
  .vol-card-name {
    font-size: 1.05rem; font-weight: 700; color: var(--text1);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .vol-card-meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: .76rem; color: var(--dim); margin-bottom: 8px;
    align-items: center;
  }
  .vol-card-meta a { color: var(--accent); text-decoration: none; }
  .vol-card-meta a:hover { text-decoration: underline; }
  .vol-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .vol-chip {
    font-size: .67rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; background: var(--bg); border: 1px solid var(--border2);
    color: var(--dim); white-space: nowrap;
  }
  .vol-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
  .vol-card-date  { font-size: .68rem; color: var(--dim); white-space: nowrap; }

  /* Status badge (no text-transform - tones already stripped in JS) */
  .vol-status {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: .68rem; font-weight: 800; letter-spacing: .05em;
    white-space: nowrap;
  }
  .vol-status.pending   { background: rgba(237,232,255,.07); color:var(--muted); }
  .vol-status.accepted  { background: rgba(237,232,255,.08); color:var(--text); }
  .vol-status.rejected  { background: rgba(237,232,255,.05); color:var(--dim); }
  .vol-status.contacted { background: rgba(179,64,244,.1); color:var(--muted); }

  /* Action row (Fitts: primary 44px, secondary 36px, Loss Aversion: delete far right) */
  .vol-card-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 16px 12px; border-top: 1px solid var(--border2);
  }
  /* Primary action */
  .vol-act-primary {
    min-height: 44px; padding: 0 16px; border-radius: 8px;
    font-size: .76rem; font-weight: 700; cursor: pointer;
    border: none; color: #fafafa;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--mt-fast);
  }
  .vol-act-primary:hover { opacity: .85; }
  .vol-act-primary.accepted  { background: var(--accent); }
  .vol-act-primary.rejected  { background: var(--accent); }
  .vol-act-primary.contacted { background: var(--accent); }
  .vol-act-primary.pending   { background: var(--accent); }
  /* Secondary action */
  .vol-act-secondary {
    min-height: 36px; padding: 0 14px; border-radius: 8px;
    font-size: .73rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--border2); background: transparent; color: var(--text1);
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--mt-fast), color var(--mt-fast);
  }
  .vol-act-secondary:hover { border-color: var(--accent); color: var(--accent); }
  /* Message toggle */
  .vol-act-ghost {
    min-height: 36px; padding: 0 12px; border-radius: 8px;
    font-size: .73rem; font-weight: 700; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--dim);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--mt-fast), border-color var(--mt-fast);
  }
  .vol-act-ghost:hover { color: var(--text1); border-color: var(--border2); }
  /* Delete: Loss Aversion - pushed far right, muted by default */
  .vol-act-del {
    min-height: 36px; padding: 0 12px; border-radius: 8px;
    font-size: .72rem; font-weight: 700; cursor: pointer;
    border: 1px solid rgba(179,64,244,.25); background: transparent; color: var(--dim);
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mt-fast), border-color var(--mt-fast), color var(--mt-fast);
  }
  .vol-act-del:hover { background: rgba(179,64,244,.1); border-color: rgba(179,64,244,.5); color: var(--accent); }

  /* Message box (Gestalt Closure: expands inline) */
  .vol-msg-box {
    padding: 10px 16px 14px 20px; border-top: 1px solid var(--border2);
    font-size: .8rem; line-height: 1.65; color: var(--text1);
    white-space: pre-wrap; background: var(--bg);
  }

  /* Empty state */
  .vol-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 0; text-align: center;
  }
  .vol-empty-state[hidden] { display: none; }
  .vol-empty-msg { font-size: .88rem; color: var(--dim); }

  /* ── Sections ── */
  .vol-section { margin-top: 36px; }
  .vol-section-hdr {
    font-size: .67rem; font-weight: 800; letter-spacing: .1em;
    color: var(--dim); margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border2);
  }

  /* ── Shared table ── */
  .vol-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
  .vol-tbl thead tr { border-bottom: 1px solid var(--border2); }
  .vol-tbl th {
    padding: 7px 10px; text-align: left;
    font-size: .64rem; font-weight: 700; letter-spacing: .07em; color: var(--dim);
  }
  .vol-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--border2); vertical-align: middle; color: var(--text1); }
  .vol-tbl tbody tr:hover { background: var(--card2); }

  .vol-empty-note { display: none; padding: 32px; text-align: center; color: var(--dim); font-size: .82rem; }

  /* Downloads table extras */
  .vol-dl-search {
    width: 100%; box-sizing: border-box;
    background: var(--card2); border: 1px solid var(--border2); border-radius: 8px;
    padding: 8px 12px; font-size: .82rem; color: var(--text1); outline: none;
    margin-bottom: 12px; -webkit-tap-highlight-color: transparent;
  }
  .vol-dl-search:focus { border-color: var(--accent); }
  .vol-sort-hdr { cursor: pointer; user-select: none; white-space: nowrap; }
  .vol-sort-hdr:hover { color: var(--text1); }
  .vol-sort-ico { font-size: .75em; margin-left: 3px; color: var(--accent); }
  .vol-utm-chip {
    display: inline-block; font-size: .67rem; font-weight: 700; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 4px; margin: 1px 2px 1px 0;
  }
  .utm-src  { background: rgba(237,232,255,.06); color:var(--dim); }
  .utm-med  { background: rgba(237,232,255,.06); color:var(--dim); }
  .utm-camp { background: rgba(237,232,255,.06); color:var(--dim); }
  .vol-dl-del {
    background: transparent; border: 1px solid var(--border2); color: var(--dim);
    border-radius: 5px; padding: 3px 8px; font-size: .75rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: border-color var(--mt-fast), color var(--mt-fast);
    min-width: 30px; min-height: 28px;
  }
  .vol-dl-del:hover { border-color: var(--accent); color: var(--accent); }
  .vol-dl-del:disabled { opacity: .4; cursor: default; }
  .vol-info-note {
    margin-top: 12px; padding: 11px 16px;
    background: var(--card2); border: 1px solid var(--border2);
    border-radius: 10px; font-size: .75rem; color: var(--dim); line-height: 1.7;
  }
  .vol-info-note strong { color: var(--text1); }

  @media (max-width: 560px) {
    .vol-card-main { grid-template-columns: 1fr; }
    .vol-card-right { flex-direction: row; align-items: center; }
    .vol-act-del { margin-left: 0; }
  }

  /* ══════════════════════════════════════════════════════
     Schedule module
     ══════════════════════════════════════════════════════ */

  /* Tab strip */
  .sched-tabs {
    display: flex; gap: 2px;
    background: var(--card2); border: 1px solid var(--border2); border-radius: 10px;
    padding: 3px; flex-shrink: 0;
  }
  .sched-tab {
    min-height: 36px; padding: 0 16px; border-radius: 8px;
    border: none; background: transparent;
    color: var(--dim); font-size: .76rem; font-weight: 700; letter-spacing: .04em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background var(--mt-fast), color var(--mt-fast);
  }
  .sched-tab.active { background: var(--accent); color: #fafafa; }
  .sched-tab:not(.active):hover { color: var(--text1); }

  /* Header */
  .sched-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
  }
  .sched-meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .sched-meta-row { display: flex; align-items: center; gap: 12px; }
  .sched-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .sched-lbl {
    font-size: .67rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--dim); white-space: nowrap;
  }
  .sched-title-input {
    background: transparent; border: none; border-bottom: 1px solid var(--border2);
    color: var(--text1); font-size: 1.1rem; font-weight: 700;
    padding: 2px 0; outline: none; width: 100%; max-width: 320px;
    -webkit-tap-highlight-color: transparent;
  }
  .sched-title-input:focus { border-bottom-color: var(--accent); }
  .sched-title-static { font-size: 1.1rem; font-weight: 700; color: var(--text1); }
  .sched-start-label { font-size: .76rem; color: var(--dim); }
  .sched-date-input {
    background: var(--card2); border: 1px solid var(--border2); border-radius: 6px;
    color: var(--text1); font-size: .8rem; padding: 5px 8px; outline: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .sched-date-input:focus { border-color: var(--accent); }
  .sched-share-btn { color: var(--accent) !important; border-color: rgba(179,64,244,.3) !important; }
  .sched-sync { margin-right: 4px; }

  /* Toggle */
  .sched-toggle {
    position: relative; width: 36px; height: 20px; border-radius: 20px;
    background: var(--border2); border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mt-default);
  }
  .sched-toggle.on { background: var(--accent); }
  .sched-toggle-knob {
    position: absolute; top: 3px; left: 3px;
    width: 14px; height: 14px; border-radius: 50%; background: #fafafa;
    transition: transform var(--mt-default);
  }
  .sched-toggle.on .sched-toggle-knob { transform: translateX(16px); }

  /* Grid */
  .sched-grid-wrap { min-width: 640px; }
  .sg-table { display: flex; flex-direction: column; gap: 0; }
  .sg-head { display: grid; grid-template-columns: 160px repeat(7,1fr); }
  .sg-row  { display: grid; grid-template-columns: 160px repeat(7,1fr); border-top: 1px solid var(--border2); }
  .sg-row:hover { background: rgba(237,232,255,.02); }
  .sg-head-cell {
    padding: 8px 10px; background: var(--card2);
    font-size: .64rem; font-weight: 700; letter-spacing: .07em; color: var(--dim);
    border-bottom: 1px solid var(--border2);
  }
  .sg-day-head {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 6px; background: var(--card2); border-left: 1px solid var(--border2);
    border-bottom: 1px solid var(--border2);
  }
  .sg-day-short { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--text1); }
  .sg-day-date  { font-size: .62rem; color: var(--dim); }
  .sg-name-cell {
    padding: 12px 10px; display: flex; align-items: center; gap: 6px;
    min-height: 52px;
  }
  .sg-vol-name { font-size: .82rem; font-weight: 700; color: var(--text1); flex: 1; min-width: 0; }
  .sg-del-row-btn {
    background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1rem;
    padding: 2px 4px; border-radius: 4px; line-height: 1;
    -webkit-tap-highlight-color: transparent; flex-shrink: 0; opacity: 0;
    transition: opacity var(--mt-fast), color var(--mt-fast);
  }
  .sg-row:hover .sg-del-row-btn { opacity: 1; }
  .sg-del-row-btn:hover { color: var(--accent); }
  .sg-cell {
    border-left: 1px solid var(--border2); padding: 8px 6px;
    min-height: 52px; display: flex; flex-direction: column; gap: 4px;
    align-items: stretch; justify-content: center;
    transition: background var(--mt-instant);
  }
  .sg-cell.editable { cursor: pointer; }
  .sg-cell.editable:hover { background: rgba(179,64,244,.07); }
  .sg-cell-plus { color: var(--border2); font-size: 1.1rem; text-align: center; line-height: 1; transition: color var(--mt-instant); }
  .sg-cell.editable:hover .sg-cell-plus { color: var(--accent); }
  .sg-shift-pill {
    background: rgba(179,64,244,.12); border: 1px solid rgba(179,64,244,.25);
    border-radius: 6px; padding: 4px 6px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .sg-shift-role { font-size: .72rem; font-weight: 700; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sg-shift-time { font-size: .64rem; color: var(--dim); font-variant-numeric: tabular-nums; }
  .sched-empty { padding: 40px; text-align: center; color: var(--dim); font-size: .84rem; }

  /* Modal */
  .sched-modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
  }
  .sched-modal {
    background: var(--s0); border: 1px solid var(--border2); border-radius: 16px;
    width: 100%; max-width: 420px; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.45);
  }
  .sched-modal-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border2);
    font-size: .9rem; font-weight: 700; color: var(--text1);
  }
  .sched-modal-close {
    background: none; border: none; color: var(--dim); cursor: pointer;
    font-size: 1.3rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
    -webkit-tap-highlight-color: transparent; transition: color var(--mt-fast);
  }
  .sched-modal-close:hover { color: var(--text1); }
  .sched-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .sched-modal-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-top: 1px solid var(--border2); gap: 10px;
  }
  .sched-field { display: flex; flex-direction: column; gap: 5px; }
  .sched-field-row { flex-direction: row; gap: 12px; }
  .sched-input {
    background: var(--card2); border: 1px solid var(--border2); border-radius: 8px;
    color: var(--text1); font-size: .84rem; padding: 9px 12px; outline: none;
    -webkit-tap-highlight-color: transparent; transition: border-color var(--mt-fast);
    width: 100%; box-sizing: border-box;
  }
  .sched-input:focus { border-color: var(--accent); }
  .sched-textarea { resize: vertical; min-height: 56px; font-family: inherit; }
  .sched-btn-save {
    min-height: 44px; padding: 0 20px; border-radius: 8px;
    background: var(--accent); border: none; color: #fafafa;
    font-size: .82rem; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: opacity var(--mt-fast);
  }
  .sched-btn-save:hover { opacity: .85; }
  .sched-btn-del {
    min-height: 36px; padding: 0 14px; border-radius: 8px;
    background: transparent; border: 1px solid rgba(179,64,244,.25); color: var(--dim);
    font-size: .76rem; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: border-color var(--mt-fast), color var(--mt-fast);
  }
  .sched-btn-del:hover { border-color: var(--accent); color: var(--accent); }

  /* Log */
  .sched-log-list { display: flex; flex-direction: column; gap: 0; }
  .sched-log-row {
    display: grid; grid-template-columns: 120px 1fr 1fr;
    gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border2);
    font-size: .74rem; align-items: center;
  }
  .sched-log-ts     { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sched-log-actor  { color: var(--text1); font-weight: 600; }
  .sched-log-action { color: var(--muted); }
  .sched-log-empty  { padding: 20px 4px; color: var(--dim); font-size: .8rem; }

  /* Toast */
  .sched-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
    background: var(--s0); border: 1px solid var(--border2); border-radius: 10px;
    padding: 12px 20px; font-size: .82rem; font-weight: 600; color: var(--text1);
    box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 9999;
    opacity: 0; transition: opacity var(--mt-default), transform var(--mt-default); pointer-events: none;
  }
  .sched-toast.in { opacity: 1; transform: translateX(-50%) translateY(0); }

  @media (max-width: 560px) {
    .sched-tabs { display: none; }
    .sched-log-row { grid-template-columns: 90px 1fr; }
    .sched-log-action { display: none; }
    .sched-modal { max-width: 100%; border-radius: 16px 16px 0 0; }
    .sched-modal-overlay { align-items: flex-end; padding: 0; }
  }

.cb { box-sizing:border-box; }
/* ── Layout ── */
.plx-wrap { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 96px); }
.plx-wrap.plx-sb-col { grid-template-columns:0 1fr; }
.plx-wrap.plx-sb-col .plx-sidebar { overflow:hidden; border-right:none; }
@media(max-width:768px){ .plx-wrap { grid-template-columns:1fr; min-height:calc(100vh - 62px); } .plx-sidebar { display:none !important; } }

/* ── Sidebar ── */
.plx-sidebar {
  border-right:1px solid var(--border2); padding:16px 0;
  display:flex; flex-direction:column; gap:0;
  background:color-mix(in srgb,var(--paper) 2%,var(--ink));
  overflow:hidden; transition:none; position:relative;
}
/* Re-open tab on main area - only shown when sidebar is collapsed */
.plx-reopen-tab {
  display:none; position:absolute; left:0; top:8px; z-index:11;
  width:28px; height:28px; align-items:center; justify-content:center;
  border:none; border-radius:0 7px 7px 0;
  background:color-mix(in srgb,var(--paper) 2%,var(--ink));
  border-right:1px solid var(--border2); border-top:1px solid var(--border2); border-bottom:1px solid var(--border2);
  cursor:pointer; color:var(--muted);
  transition:background var(--mt-fast), color var(--mt-fast); -webkit-tap-highlight-color:transparent;
}
.plx-reopen-tab:hover { color:var(--accent); }
.plx-wrap.plx-sb-col .plx-reopen-tab { display:flex; }
.plx-main { position:relative; }
.plx-sb-toprow {
  display:flex; align-items:center; padding:0 6px 0 0; flex-shrink:0;
}
.plx-sb-toprow .plx-ws-btn { flex:1; }
.plx-col-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0;
  border:none; border-radius:7px; background:transparent;
  cursor:pointer; color:var(--muted);
  transition:background var(--mt-fast), color var(--mt-fast);
  -webkit-tap-highlight-color:transparent;
}
.plx-col-btn:hover { background:rgba(237,232,255,.08); color:var(--text); }
.plx-sidebar-hd {
  padding:0 14px 12px; font-size:.6rem; font-weight:800;
  letter-spacing:.12em; color:var(--dim); text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between;
}
.plx-proj-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--mt-fast); border-left:2px solid transparent;
  font-size:.82rem; font-weight:600; color:var(--muted);
}
.plx-proj-item:hover { background:rgba(237,232,255,.04); color:var(--text); }
.plx-proj-item.active { background:rgba(179,64,244,.1); border-left-color:var(--accent); color:var(--text); }
.plx-proj-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--accent); }
.plx-proj-pct { font-size:.68rem; font-weight:700; color:var(--dim); }
.plx-proj-edit-btn { margin-left:auto; display:none; background:none; border:none; color:var(--dim); cursor:pointer; padding:2px 3px; border-radius:4px; line-height:0; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.plx-proj-item:hover .plx-proj-edit-btn,
.plx-proj-item.active .plx-proj-edit-btn { display:flex; align-items:center; }
.plx-proj-edit-btn:hover { color:var(--text); background:rgba(237,232,255,.1); }
.plx-new-proj {
  margin:12px 10px 0; padding:9px 12px; border-radius:8px;
  border:1px dashed rgba(179,64,244,.3); background:transparent;
  color:var(--accent); font-size:.78rem; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--mt-fast), border-color var(--mt-fast); display:flex; align-items:center; gap:6px;
  font-family:var(--sans); min-height:40px;
}
.plx-new-proj:hover { background:rgba(179,64,244,.08); border-color:var(--accent); }
.plx-sidebar-sep { height:1px; background:var(--border2); margin:12px 0; }
.plx-members-sec { padding:0 14px; }
.plx-member-row { display:flex; align-items:center; gap:8px; padding:5px 0; }
.plx-member-av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:800; flex-shrink:0; background:rgba(179,64,244,.25); color:var(--text); }
.plx-member-name { font-size:.78rem; color:var(--muted); flex:1; }
.plx-member-role { font-size:.62rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }

/* ── Main area ── */
.plx-main { display:flex; flex-direction:column; min-height:0; }
.plx-toolbar {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0; padding:0 16px;
  border-bottom:1px solid var(--border2);
  position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  min-height:52px;
}
.plx-toolbar .plx-proj-title {
  min-width:0; justify-self:start;
}
.plx-toolbar .plx-view-grp {
  justify-self:center;
}
.plx-toolbar-actions {
  display:flex; align-items:center; gap:2px; justify-self:end;
}
.plx-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:7px; border:none;
  background:transparent; color:var(--muted); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast), color var(--mt-fast); flex-shrink:0;
}
.plx-icon-btn:hover { background:rgba(237,232,255,.08); color:var(--text); }
/* Search: icon + hidden input, expands on focus */
#plxSearchWrap {
  display:flex; align-items:center; position:relative;
}
#plxSearchWrap .plx-search-inp {
  width:0; opacity:0; padding:0; border:none; background:transparent;
  transition:width var(--mt-default), opacity var(--mt-default), padding var(--mt-default);
  font-size:.8rem; color:var(--text); font-family:var(--sans); outline:none;
}
#plxSearchWrap:focus-within .plx-search-inp,
#plxSearchWrap .plx-search-inp:not(:placeholder-shown) {
  width:160px; opacity:1; padding:6px 10px 6px 4px;
  background:var(--s1); border-radius:6px; border:1px solid var(--border2);
}
.plx-proj-title { font-size:.92rem; font-weight:800; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plx-view-grp { display:flex; gap:1px; background:var(--s1); border:1px solid var(--border2); border-radius:8px; padding:2px; }
.plx-view-btn {
  padding:5px 11px; border-radius:6px; border:none; background:transparent;
  font-size:.73rem; font-weight:500; color:var(--muted); cursor:pointer;
  -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:all var(--mt-fast);
}
.plx-view-btn.active { background:rgba(179,64,244,.15); color:var(--accent); font-weight:700; }
.plx-sync-dot { width:7px; height:7px; border-radius:50%; background:var(--dim); transition:background var(--mt-slow); }
.plx-sync-dot.ok { background:rgba(179,64,244,.8); animation:plxPulse 2s ease infinite; }
.plx-sync-dot.busy { background:var(--accent); animation:plxSpin 1s linear infinite; }
@keyframes plxPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.plx-add-task-btn {
  background:var(--accent); color:#fafafa; border:none; border-radius:8px;
  padding:8px 14px; font-size:.78rem; font-weight:700; cursor:pointer;
  -webkit-tap-highlight-color:transparent; display:flex; align-items:center; gap:5px;
  font-family:var(--sans); min-height:36px; transition:opacity var(--mt-fast);
}
.plx-add-task-btn:active { opacity:.8; }
.plx-edit-proj-btn {
  padding:6px 10px; border-radius:7px; border:1px solid var(--border2);
  background:transparent; color:var(--dim); font-size:.75rem; cursor:pointer;
  -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:all var(--mt-fast);
}
.plx-edit-proj-btn:hover { color:var(--text); border-color:rgba(237,232,255,.15); }

/* ── KPI strip ── */
.plx-kpis { display:flex; gap:16px; padding:12px 20px; border-bottom:1px solid var(--border2); flex-wrap:wrap; }
.plx-kpi { display:flex; flex-direction:column; gap:2px; }
.plx-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.plx-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.plx-kpi-sep { width:1px; background:var(--border2); align-self:stretch; }
.plx-prog-wrap { flex:1; display:flex; align-items:center; gap:10px; min-width:120px; }
.plx-prog-track { flex:1; height:4px; background:var(--border2); border-radius:99px; overflow:hidden; }
.plx-prog-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .5s cubic-bezier(.22,1,.36,1); }

/* ── Board view ── */
.plx-board { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 20px 40px; align-items:start; }
@media(max-width:900px){ .plx-board { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .plx-board { grid-template-columns:1fr; } }
.plx-col { background:rgba(237,232,255,.02); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; border:1px solid rgba(237,232,255,.06); }
.plx-col-hd { display:flex; align-items:center; gap:7px; padding:4px 2px 8px; }
.plx-col-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.plx-col-lbl { font-size:.65rem; font-weight:700; letter-spacing:.09em; color:var(--muted); text-transform:uppercase; flex:1; }
.plx-col-count { font-size:.68rem; color:var(--dim); font-weight:600; }
.plx-col-dot--todo      { background:rgba(237,232,255,.25); }
.plx-col-dot--in_progress { background:var(--accent); }
.plx-col-dot--review    { background:rgba(179,64,244,.5); }
.plx-col-dot--done      { background:rgba(237,232,255,.5); }

/* ── Task card ── */
.plx-card {
  background:var(--s1); border:1px solid rgba(237,232,255,.08); border-radius:9px;
  padding:11px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color var(--mt-fast), box-shadow var(--mt-fast);
  display:flex; flex-direction:column; gap:6px;
}
.plx-card:hover { border-color:rgba(179,64,244,.25); box-shadow:0 3px 14px rgba(0,0,0,.14); }
.plx-card-title { font-size:.83rem; font-weight:600; color:var(--text); line-height:1.38; }
.plx-card-meta { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.plx-card-cat { font-size:.62rem; font-weight:600; letter-spacing:.04em; color:var(--dim); text-transform:uppercase; }
.plx-card-due { font-size:.68rem; color:var(--dim); display:flex; align-items:center; gap:3px; }
.plx-card-due.overdue { color:var(--text); font-weight:700; }
.plx-card-pri { font-size:.6rem; padding:1px 5px; border-radius:3px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.plx-card-pri--high   { background:rgba(179,64,244,.15); color:rgba(179,64,244,.9); }
.plx-card-pri--medium { display:none; }
.plx-card-pri--low    { display:none; }
.plx-card-assignee { margin-left:auto; width:22px; height:22px; border-radius:50%; background:rgba(179,64,244,.25); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; color:var(--text); flex-shrink:0; }
.plx-card-assignees { margin-left:auto; display:flex; flex-direction:row-reverse; flex-shrink:0; }
.plx-card-assignees .plx-card-assignee { margin-left:-7px; margin-right:0; border:2px solid var(--surface); }
/* Multi-assignee chip picker */
.plx-assign-wrap { }
.plx-assign-chips { display:flex; flex-wrap:wrap; gap:4px; min-height:36px; padding:5px 8px; background:var(--surface); border:1px solid rgba(237,232,255,.09); border-radius:6px; cursor:pointer; align-items:center; -webkit-tap-highlight-color:transparent; }
.plx-assign-chips:focus { outline:2px solid var(--accent); outline-offset:1px; }
.plx-assign-chip { display:flex; align-items:center; gap:4px; background:rgba(179,64,244,.18); border-radius:4px; padding:2px 6px 2px 4px; font-size:.72rem; font-weight:600; color:var(--text); }
.plx-assign-chip-rm { background:none; border:none; padding:0; cursor:pointer; color:var(--dim); font-size:.8rem; line-height:1; -webkit-tap-highlight-color:transparent; }
.plx-assign-chip-rm:hover { color:var(--accent); }
.plx-assign-placeholder { font-size:.8rem; color:var(--dim); }
.plx-assign-dropdown { background:var(--surface); border:1px solid rgba(237,232,255,.13); border-radius:8px; margin-top:4px; overflow:hidden; }
.plx-assign-opt { display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:.82rem; cursor:pointer; transition:background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.plx-assign-opt:hover { background:rgba(179,64,244,.1); }
.plx-assign-opt.selected { background:rgba(179,64,244,.15); }
.plx-assign-opt-avatar { width:22px; height:22px; border-radius:50%; background:rgba(179,64,244,.3); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; flex-shrink:0; }
.plx-assign-opt-check { margin-left:auto; color:var(--accent); font-size:.85rem; }
.plx-card-add { background:transparent; border:1px dashed rgba(237,232,255,.1); border-radius:7px; padding:8px; font-size:.75rem; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); width:100%; text-align:center; transition:all var(--mt-fast); min-height:36px; }
.plx-card-add:hover { color:var(--accent); border-color:rgba(179,64,244,.3); background:rgba(179,64,244,.05); }

/* ── Timeline view ── */
.plx-timeline-wrap { padding:16px 20px 40px; display:flex; flex-direction:column; gap:8px; }
.plx-tl-row {
  display:grid; grid-template-columns:180px 1fr auto;
  align-items:center; gap:10px; padding:9px 12px;
  background:var(--s0); border-radius:9px; border:1px solid var(--border2);
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast);
}
.plx-tl-row:hover { border-color:rgba(179,64,244,.25); }
.plx-tl-row.done { opacity:.55; }
.plx-tl-name { font-size:.82rem; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; }
.plx-tl-cat { font-size:.62rem; color:var(--dim); background:var(--s1); padding:1px 6px; border-radius:4px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.plx-tl-bar-wrap { position:relative; height:20px; }
.plx-tl-bar { position:absolute; height:100%; border-radius:99px; background:rgba(179,64,244,.25); border:1px solid rgba(179,64,244,.4); display:flex; align-items:center; padding:0 6px; min-width:4px; }
.plx-tl-bar.done-bar { background:rgba(237,232,255,.08); border-color:rgba(237,232,255,.15); }
.plx-tl-axis { display:flex; margin:0 20px 2px; }
.plx-tl-axis-mo { flex:1; font-size:.6rem; color:var(--dim); font-weight:600; letter-spacing:.04em; }
.plx-today-line { position:absolute; top:0; bottom:0; width:1px; background:var(--accent); opacity:.6; pointer-events:none; }
.plx-tl-meta { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--dim); white-space:nowrap; }

/* ── Gantt ── */
.plx-gantt-wrap { padding:16px 20px 40px; overflow-x:auto; }
.plx-gantt-inner { min-width:600px; }
.plx-gantt-hd { display:flex; margin-left:160px; border-bottom:1px solid var(--border2); margin-bottom:4px; }
.plx-gantt-mo { flex:1; font-size:.6rem; color:var(--dim); font-weight:700; letter-spacing:.06em; padding:0 0 6px 2px; text-transform:uppercase; }
.plx-gantt-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.plx-gantt-lbl { width:152px; flex-shrink:0; font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.plx-gantt-track { flex:1; position:relative; height:24px; }
.plx-gantt-bar { position:absolute; height:100%; border-radius:6px; background:rgba(179,64,244,.22); border:1px solid rgba(179,64,244,.45); display:flex; align-items:center; padding:0 8px; font-size:.65rem; font-weight:600; color:var(--muted); overflow:hidden; white-space:nowrap; cursor:pointer; transition:background var(--mt-fast); }
.plx-gantt-bar:hover { background:rgba(179,64,244,.35); }
.plx-gantt-sep { height:1px; background:var(--border2); margin:6px 0; margin-left:160px; }
.plx-gantt-proj-row { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.plx-gantt-proj-lbl { width:152px; flex-shrink:0; font-size:.7rem; color:var(--dim); font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.plx-gantt-proj-bar { position:absolute; height:8px; top:50%; transform:translateY(-50%); border-radius:99px; background:rgba(179,64,244,.18); border:1px solid rgba(179,64,244,.3); }

/* ── Activity feed ── */
.plx-activity { padding:12px 20px 40px; display:flex; flex-direction:column; gap:6px; }
.plx-act-row { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid var(--border2); }
.plx-act-row:last-child { border-bottom:none; }
.plx-act-av { width:24px; height:24px; border-radius:50%; background:rgba(179,64,244,.2); display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; color:var(--text); flex-shrink:0; margin-top:1px; }
.plx-act-body { flex:1; min-width:0; }
.plx-act-who { font-size:.75rem; font-weight:700; color:var(--text); }
.plx-act-what { font-size:.75rem; color:var(--muted); }
.plx-act-time { font-size:.65rem; color:var(--dim); margin-top:2px; }

/* ── Empty state ── */
.plx-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:80px 24px; color:var(--dim); text-align:center; }
.plx-empty-icon { opacity:.25; }
.plx-empty-title { font-size:.9rem; font-weight:700; color:var(--muted); }
.plx-empty-sub { font-size:.78rem; color:var(--dim); max-width:280px; line-height:1.6; }

/* ── Modal ── */
.plx-modal-bg {
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,10,19,.75); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.plx-modal {
  background:var(--s1); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:plxModalIn .18s cubic-bezier(.22,1,.36,1);
}
@keyframes plxModalIn { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:none} }
.plx-modal-hd { display:flex; align-items:center; gap:10px; padding:18px 20px 14px; border-bottom:1px solid var(--border2); }
.plx-modal-title { font-size:.92rem; font-weight:800; color:var(--text); flex:1; }
.plx-modal-close { background:none; border:none; color:var(--dim); font-size:1.1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; padding:4px; line-height:1; transition:color var(--mt-fast); }
.plx-modal-close:hover { color:var(--text); }
.plx-modal-body { padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.plx-field { display:flex; flex-direction:column; gap:5px; }
.plx-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.plx-lbl { font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--dim); text-transform:uppercase; }
.plx-inp {
  background:var(--s0); border:1px solid var(--border2); border-radius:8px;
  padding:9px 11px; font-size:.84rem; color:var(--text); outline:none;
  font-family:var(--sans); transition:border-color var(--mt-fast); -webkit-tap-highlight-color:transparent;
}
.plx-inp:focus { border-color:var(--accent); }
.plx-inp::placeholder { color:var(--dim); }
.plx-inp option { background:var(--ink); }
.plx-ta { min-height:72px; resize:vertical; }
.plx-modal-ft { display:flex; align-items:center; gap:8px; padding:14px 20px 18px; border-top:1px solid var(--border2); }
.plx-btn-save { background:var(--accent); color:#fafafa; border:none; border-radius:8px; padding:10px 20px; font-size:.84rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); min-height:40px; transition:opacity var(--mt-fast); }
.plx-btn-save:active { opacity:.8; }
.plx-btn-del { background:transparent; border:1px solid var(--border2); color:var(--dim); border-radius:8px; padding:10px 16px; font-size:.84rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); min-height:40px; transition:all var(--mt-fast); }
.plx-btn-del:hover { border-color:rgba(179,64,244,.4); color:var(--muted); }
.plx-btn-secondary { background:transparent; border:1px solid var(--border2); color:var(--muted); border-radius:8px; padding:10px 16px; font-size:.84rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); min-height:40px; transition:all var(--mt-fast); margin-left:auto; }
.plx-btn-secondary:hover { border-color:rgba(237,232,255,.2); color:var(--text); }
.plx-status-row { display:flex; gap:6px; flex-wrap:wrap; }
.plx-status-chip {
  padding:6px 13px; border-radius:99px; font-size:.75rem; font-weight:700;
  border:1px solid var(--border2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:transparent; color:var(--dim); font-family:var(--sans); transition:all var(--mt-fast);
}
.plx-status-chip.sel { background:rgba(179,64,244,.15); border-color:rgba(179,64,244,.4); color:var(--accent); }

/* ── Modal tabs ── */
.plx-tab-bar { display:flex; border-bottom:1px solid var(--border2); padding:0 20px; }
.plx-tab {
  padding:10px 14px; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:var(--dim); background:none; border:none; border-bottom:2px solid transparent;
  cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans);
  transition:color var(--mt-fast), border-color var(--mt-fast); margin-bottom:-1px;
}
.plx-tab:hover { color:var(--muted); }
.plx-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Checklist items ── */
.plx-cl-row { display:flex; align-items:flex-start; gap:8px; padding:5px 0; }
.plx-cl-cb { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin-top:2px; }
.plx-cl-lbl { font-size:.82rem; color:var(--text); flex:1; min-width:0; word-break:break-word; line-height:1.45; }
.plx-cl-lbl.done { text-decoration:line-through; color:var(--dim); }
.plx-cl-del { background:none; border:none; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:.85rem; padding:2px 5px; line-height:1; opacity:0; transition:opacity var(--mt-fast); }
.plx-cl-row:hover .plx-cl-del { opacity:1; }
.plx-cl-bar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.plx-cl-track { flex:1; height:3px; background:var(--border2); border-radius:99px; overflow:hidden; }
.plx-cl-fill { height:100%; background:var(--accent); border-radius:99px; transition:width var(--mt-slow); }
.plx-cl-pct { font-size:.68rem; font-weight:700; color:var(--muted); white-space:nowrap; }

/* ── Comments ── */
.plx-cmt-row { display:flex; gap:8px; }
.plx-cmt-av { width:24px; height:24px; border-radius:50%; background:rgba(179,64,244,.2); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; color:var(--text); flex-shrink:0; margin-top:1px; }
.plx-cmt-body { flex:1; min-width:0; }
.plx-cmt-who { font-size:.72rem; font-weight:700; color:var(--text); }
.plx-cmt-time { font-size:.65rem; color:var(--dim); margin-left:6px; }
.plx-cmt-text { font-size:.8rem; color:var(--muted); margin-top:3px; line-height:1.5; word-break:break-word; }
.plx-cmt-mention { color:var(--accent); font-weight:700; }
.plx-cmt-del { background:none; border:none; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:.72rem; padding:1px 4px; opacity:0; transition:opacity var(--mt-fast); }
.plx-cmt-row:hover .plx-cmt-del { opacity:1; }

/* ── Links ── */
.plx-link-row { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--border2); }
.plx-link-row:last-child { border-bottom:none; }
.plx-link-ico { color:var(--dim); flex-shrink:0; }
.plx-link-a { font-size:.8rem; color:var(--accent); text-decoration:none; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plx-link-a:hover { text-decoration:underline; }
.plx-link-del { background:none; border:none; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:.8rem; padding:2px 5px; opacity:0; transition:opacity var(--mt-fast); }
.plx-link-row:hover .plx-link-del { opacity:1; }

/* ── Filter bar ── */
.plx-filter-bar { display:flex; gap:4px; padding:8px 20px 0; flex-wrap:wrap; align-items:center; }
.plx-filter-chip {
  padding:4px 11px; border-radius:99px; font-size:.71rem; font-weight:600;
  border:1px solid var(--border2); background:transparent; color:var(--muted);
  cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:all var(--mt-fast);
}
.plx-filter-chip:hover { color:var(--text); background:rgba(237,232,255,.05); border-color:rgba(237,232,255,.15); }
.plx-filter-chip.active { background:rgba(179,64,244,.12); color:var(--accent); border-color:rgba(179,64,244,.3); }
.plx-filter-count { font-size:.65rem; background:rgba(179,64,244,.25); border-radius:99px; padding:1px 6px; margin-left:4px; font-weight:800; }

/* ── Search ── */
.plx-search-wrap { position:relative; }
.plx-search-inp {
  background:var(--s1); border:1px solid var(--border2); border-radius:8px;
  padding:7px 32px 7px 11px; font-size:.8rem; color:var(--text); outline:none;
  font-family:var(--sans); width:220px; transition:border-color var(--mt-fast), width var(--mt-default);
  -webkit-tap-highlight-color:transparent;
}
@media(max-width:600px){ .plx-search-inp{ width:140px; } }
.plx-search-inp:focus { border-color:var(--accent); }
.plx-search-inp::placeholder { color:var(--dim); }
.plx-search-ico { position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--dim); pointer-events:none; }
.plx-search-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:200;
  background:var(--s1); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.4); max-height:320px; overflow-y:auto;
  display:none;
}
.plx-search-results.open { display:block; }
.plx-sr-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent; border-bottom:1px solid var(--border2); transition:background var(--mt-fast); }
.plx-sr-item:last-child { border-bottom:none; }
.plx-sr-item:hover { background:rgba(179,64,244,.08); }
.plx-sr-dot { width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.plx-sr-dot--todo        { background:rgba(237,232,255,.25); }
.plx-sr-dot--in_progress { background:var(--accent); }
.plx-sr-dot--review      { background:rgba(179,64,244,.5); }
.plx-sr-dot--done        { background:rgba(237,232,255,.5); }
.plx-sr-title { font-size:.82rem; font-weight:600; color:var(--text); }
.plx-sr-sub   { font-size:.68rem; color:var(--dim); margin-top:2px; }
.plx-sr-mark  { background:rgba(179,64,244,.25); color:var(--text); border-radius:2px; padding:0 2px; }
.plx-sr-empty { padding:16px; text-align:center; font-size:.78rem; color:var(--dim); }

/* ── Bell / mention inbox ── */
.plx-bell-btn {
  position:relative; background:none; border:1px solid var(--border2); border-radius:8px;
  padding:7px 9px; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; justify-content:center; transition:all var(--mt-fast); min-height:36px;
}
.plx-bell-btn:hover { color:var(--text); border-color:rgba(237,232,255,.2); }
.plx-bell-badge {
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px;
  background:var(--accent); border-radius:99px; font-size:.6rem; font-weight:800;
  color:#fafafa; display:flex; align-items:center; justify-content:center;
  padding:0 4px; display:none;
}
.plx-inbox {
  position:fixed; top:0; right:0; bottom:0; width:320px; z-index:300;
  background:var(--s1); border-left:1px solid var(--border); box-shadow:-20px 0 60px rgba(0,0,0,.4);
  display:none; flex-direction:column;
  animation:plxSlideIn .2s cubic-bezier(.22,1,.36,1);
}
@keyframes plxSlideIn { from{transform:translateX(100%)} to{transform:none} }
.plx-inbox.open { display:flex; }
.plx-inbox-hd { display:flex; align-items:center; gap:8px; padding:18px 16px 14px; border-bottom:1px solid var(--border2); }
.plx-inbox-title { font-size:.88rem; font-weight:800; color:var(--text); flex:1; }
.plx-inbox-close { background:none; border:none; color:var(--dim); font-size:1.1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.plx-inbox-body { flex:1; overflow-y:auto; padding:8px 0; }
.plx-inbox-row { padding:12px 16px; border-bottom:1px solid var(--border2); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); }
.plx-inbox-row:hover { background:rgba(179,64,244,.07); }
.plx-inbox-row.unread { border-left:2px solid var(--accent); }
.plx-inbox-who { font-size:.75rem; font-weight:700; color:var(--text); }
.plx-inbox-what { font-size:.75rem; color:var(--muted); margin-top:2px; }
.plx-inbox-time { font-size:.65rem; color:var(--dim); margin-top:4px; }
.plx-inbox-overlay { position:fixed; inset:0; z-index:299; display:none; }
.plx-inbox-overlay.open { display:block; }

/* ── Identity chip ── */
.plx-identity-chip {
  display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--border2); background:transparent; color:var(--muted);
  font-size:.75rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-family:var(--sans); transition:all var(--mt-fast); min-height:36px;
}
.plx-identity-chip:hover { border-color:rgba(237,232,255,.2); color:var(--text); }
.plx-identity-av { width:20px; height:20px; border-radius:50%; background:rgba(179,64,244,.25); display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:800; color:var(--text); }
.plx-id-modal-bg { position:fixed; inset:0; z-index:400; background:rgba(10,10,19,.7); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; }
.plx-id-modal { background:var(--s1); border:1px solid var(--border); border-radius:14px; width:100%; max-width:340px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.plx-id-title { font-size:.92rem; font-weight:800; color:var(--text); margin-bottom:16px; }
.plx-id-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.plx-id-opt { padding:10px 12px; border-radius:8px; border:1px solid var(--border2); background:transparent; color:var(--muted); font-size:.8rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:all var(--mt-fast); display:flex; align-items:center; gap:8px; }
.plx-id-opt:hover { border-color:rgba(179,64,244,.3); color:var(--text); }
.plx-id-opt.sel { background:rgba(179,64,244,.15); border-color:rgba(179,64,244,.4); color:var(--accent); }
.plx-id-custom { display:flex; gap:8px; margin-top:4px; }

/* ── Bulk action bar ── */
.plx-bulk-bar {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:250;
  background:var(--s1); border:1px solid var(--border); border-radius:99px;
  padding:10px 16px; display:none; align-items:center; gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.5); min-width:320px; backdrop-filter:blur(12px);
  animation:plxBulkIn .2s cubic-bezier(.22,1,.36,1);
}
@keyframes plxBulkIn { from{opacity:0;transform:translateX(-50%) translateY(12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.plx-bulk-bar.show { display:flex; }
.plx-bulk-count { font-size:.78rem; font-weight:800; color:var(--text); white-space:nowrap; }
.plx-bulk-sep { width:1px; height:16px; background:var(--border2); }
.plx-bulk-btn {
  background:transparent; border:1px solid var(--border2); border-radius:99px;
  padding:5px 12px; font-size:.72rem; font-weight:700; color:var(--muted);
  cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:all var(--mt-fast);
}
.plx-bulk-btn:hover { color:var(--text); border-color:rgba(237,232,255,.2); }
.plx-bulk-btn.danger:hover { color:var(--text); border-color:rgba(179,64,244,.4); background:rgba(179,64,244,.1); }
.plx-bulk-btn.accent { background:rgba(179,64,244,.15); border-color:rgba(179,64,244,.3); color:var(--accent); }
.plx-bulk-clear { background:none; border:none; color:var(--dim); font-size:1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; margin-left:4px; }

/* ── Card checkbox ── */
.plx-card-cb { position:absolute; top:8px; right:8px; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; opacity:0; transition:opacity var(--mt-fast); z-index:2; }
.plx-card { position:relative; }
.plx-card:hover .plx-card-cb { opacity:1; }
.plx-card-cb:checked { opacity:1; }
.plx-card.selected { border-color:rgba(179,64,244,.5); background:rgba(179,64,244,.06); }

/* ── Template picker ── */
.plx-tpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:500px){ .plx-tpl-grid { grid-template-columns:1fr; } }
.plx-tpl-card {
  padding:14px; border-radius:10px; border:1px solid var(--border2); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); background:var(--s0);
}
.plx-tpl-card:hover { border-color:rgba(179,64,244,.35); background:rgba(179,64,244,.06); }
.plx-tpl-name { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.plx-tpl-count { font-size:.68rem; color:var(--dim); }

/* ── Workspace view ── */
.plx-ws-wrap { padding:20px; display:flex; flex-direction:column; gap:0; }
.plx-ws-greeting { font-size:1.3rem; font-weight:800; color:var(--text); margin-bottom:2px; letter-spacing:-.02em; }
.plx-ws-date { font-size:.75rem; color:var(--dim); margin-bottom:20px; }
.plx-ws-kpis { display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.plx-ws-kpi { background:var(--s0); border:1px solid var(--border2); border-radius:10px; padding:12px 16px; min-width:80px; }
.plx-ws-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.plx-ws-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:4px; }
.plx-ws-kpi.accent-kpi .plx-ws-kpi-val { color:var(--accent); }
.plx-ws-section { margin-bottom:20px; }
.plx-ws-section-hd { font-size:.62rem; font-weight:800; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.plx-ws-section-hd::after { content:''; flex:1; height:1px; background:var(--border2); }
.plx-ws-task { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--s0); border:1px solid var(--border2); border-radius:9px; margin-bottom:5px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), transform var(--mt-instant); }
.plx-ws-task:hover { border-color:rgba(179,64,244,.3); transform:translateX(2px); }
.plx-ws-task.overdue { border-left:2px solid var(--accent); }
.plx-ws-task-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.plx-ws-task-title { font-size:.82rem; font-weight:600; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plx-ws-task-proj { font-size:.65rem; color:var(--dim); white-space:nowrap; }
.plx-ws-task-due { font-size:.68rem; color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.plx-ws-task-due.overdue { color:var(--accent); font-weight:700; }
.plx-ws-empty { text-align:center; padding:48px 24px; color:var(--dim); font-size:.88rem; }
.plx-ws-catchup { font-size:1.1rem; font-weight:800; color:var(--muted); margin-bottom:8px; }

/* ── Milestones ── */
.plx-ms-strip { display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px 0; }
.plx-ms-chip { display:flex; align-items:center; gap:7px; background:var(--s0); border:1px solid var(--border2); border-radius:99px; padding:5px 12px 5px 8px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast); }
.plx-ms-chip:hover { border-color:rgba(179,64,244,.3); }
.plx-ms-diamond { width:10px; height:10px; background:var(--accent); transform:rotate(45deg); flex-shrink:0; }
.plx-ms-chip-title { font-size:.72rem; font-weight:700; color:var(--text); }
.plx-ms-chip-days { font-size:.65rem; color:var(--dim); }
.plx-ms-chip.overdue .plx-ms-diamond { background:rgba(179,64,244,.4); }
.plx-ms-chip.today .plx-ms-diamond { animation:plxMsDiamond 1.2s ease infinite; }
@keyframes plxMsDiamond { 0%,100%{box-shadow:0 0 0 0 rgba(179,64,244,.5)} 50%{box-shadow:0 0 0 6px rgba(179,64,244,0)} }
.plx-ms-add-btn { background:none; border:1px dashed rgba(179,64,244,.3); border-radius:99px; padding:5px 12px; font-size:.72rem; font-weight:600; color:var(--accent); cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:all var(--mt-fast); display:flex; align-items:center; gap:5px; }
.plx-ms-add-btn:hover { background:rgba(179,64,244,.08); border-color:var(--accent); }

/* ── Gantt milestone diamonds ── */
.plx-gantt-ms { position:absolute; top:50%; transform:translate(-50%,-50%) rotate(45deg); width:10px; height:10px; background:var(--accent); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform var(--mt-fast); }
.plx-gantt-ms:hover { transform:translate(-50%,-50%) rotate(45deg) scale(1.4); }
.plx-gantt-ms-label { position:absolute; top:-20px; transform:translateX(-50%); font-size:.58rem; color:var(--accent); font-weight:700; white-space:nowrap; pointer-events:none; }

/* ── Task aging ── */
.plx-card.aged { border-left:2px solid rgba(179,64,244,.3); }
.plx-card.aged::after { content:''; position:absolute; inset:0; border-radius:9px; background:rgba(179,64,244,.03); pointer-events:none; }
.plx-aged-dot { width:5px; height:5px; border-radius:50%; background:rgba(237,232,255,.2); flex-shrink:0; animation:plxAge 2.5s ease infinite; }
@keyframes plxAge { 0%,100%{opacity:.3} 50%{opacity:.9} }

/* ── Notification toast ── */
.plx-toast-wrap { position:fixed; top:20px; right:20px; z-index:9000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.plx-toast { background:var(--s1); border:1px solid var(--border); border-radius:12px; padding:12px 16px; min-width:260px; max-width:340px; box-shadow:0 8px 32px rgba(0,0,0,.4); pointer-events:all; display:flex; gap:10px; align-items:flex-start; animation:plxToastIn .25s cubic-bezier(.22,1,.36,1); }
@keyframes plxToastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
.plx-toast-ico { width:28px; height:28px; border-radius:50%; background:rgba(179,64,244,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.plx-toast-body { flex:1; min-width:0; }
.plx-toast-title { font-size:.78rem; font-weight:700; color:var(--text); }
.plx-toast-msg { font-size:.72rem; color:var(--muted); margin-top:2px; line-height:1.4; }
.plx-toast-close { background:none; border:none; color:var(--dim); cursor:pointer; font-size:.9rem; padding:2px; line-height:1; -webkit-tap-highlight-color:transparent; }

/* ── Keyboard shortcut overlay ── */
.plx-kb-overlay { position:fixed; inset:0; z-index:8000; background:rgba(10,10,19,.85); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; }
.plx-kb-overlay.open { display:flex; }
.plx-kb-panel { background:var(--s1); border:1px solid var(--border); border-radius:16px; padding:28px; width:100%; max-width:440px; max-height:85vh; overflow-y:auto; }
.plx-kb-title { font-size:.88rem; font-weight:800; color:var(--text); margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
.plx-kb-close { background:none; border:none; color:var(--dim); font-size:1.1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.plx-kb-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border2); }
.plx-kb-row:last-child { border-bottom:none; }
.plx-kb-keys { display:flex; gap:4px; flex-shrink:0; }
.plx-kb-key { background:var(--s0); border:1px solid var(--border2); border-radius:5px; padding:3px 8px; font-size:.7rem; font-weight:700; color:var(--muted); font-family:var(--mono); }
.plx-kb-desc { font-size:.78rem; color:var(--dim); flex:1; }

/* ── Reactions ── */
.plx-reactions { display:flex; gap:4px; flex-wrap:wrap; margin-top:5px; }
.plx-reaction-pill { display:flex; align-items:center; gap:3px; padding:2px 8px; border-radius:99px; border:1px solid var(--border2); background:transparent; font-size:.75rem; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); font-family:var(--sans); color:var(--muted); }
.plx-reaction-pill:hover { border-color:rgba(179,64,244,.3); background:rgba(179,64,244,.06); }
.plx-reaction-pill.mine { border-color:rgba(179,64,244,.4); background:rgba(179,64,244,.12); color:var(--accent); }
.plx-reaction-add { padding:2px 7px; border-radius:99px; border:1px dashed rgba(237,232,255,.15); background:transparent; font-size:.75rem; cursor:pointer; -webkit-tap-highlight-color:transparent; color:var(--dim); font-family:var(--sans); transition:all var(--mt-fast); }
.plx-reaction-add:hover { border-color:rgba(179,64,244,.3); color:var(--accent); }
.plx-reaction-picker { display:flex; gap:4px; flex-wrap:wrap; background:var(--s1); border:1px solid var(--border); border-radius:10px; padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); margin-top:6px; }
.plx-reaction-opt { font-size:1.1rem; padding:4px 6px; border-radius:6px; cursor:pointer; border:none; background:transparent; transition:background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.plx-reaction-opt:hover { background:rgba(179,64,244,.1); }
.plx-rx-bar { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; align-items:center; }
.plx-rx-pill { font-size:.72rem; padding:2px 8px; border-radius:99px; border:1px solid var(--border2); background:var(--s0); color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast),border-color var(--mt-fast); }
.plx-rx-pill.mine { border-color:var(--accent); color:var(--accent); background:rgba(179,64,244,.1); }
.plx-rx-pill:hover { background:rgba(179,64,244,.08); border-color:rgba(179,64,244,.3); }
.plx-rx-add { font-size:.78rem; padding:2px 8px; border-radius:99px; border:1px dashed var(--border2); background:transparent; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast),color var(--mt-fast); }
.plx-rx-add:hover { border-color:var(--accent); color:var(--accent); }

/* ── Share modal ── */
.plx-share-url { background:var(--s0); border:1px solid var(--border2); border-radius:8px; padding:10px 12px; font-size:.75rem; color:var(--muted); font-family:var(--mono); word-break:break-all; line-height:1.5; }
.plx-share-copied { font-size:.72rem; color:var(--accent); font-weight:700; opacity:0; transition:opacity var(--mt-slow); }
.plx-share-copied.show { opacity:1; }

/* ── Workspace sidebar btn ── */
.plx-ws-btn { display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); border-left:2px solid transparent; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:6px; }
.plx-ws-btn:hover { background:rgba(237,232,255,.04); color:var(--text); }
.plx-ws-btn.active { background:rgba(179,64,244,.1); border-left-color:var(--accent); color:var(--text); }

/* ── Export / toolbar extras ── */
.plx-toolbar-extras { display:flex; align-items:center; gap:6px; }
.plx-extra-btn {
  padding:6px 10px; border-radius:7px; border:1px solid var(--border2);
  background:transparent; color:var(--dim); font-size:.72rem; font-weight:600;
  cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans);
  display:flex; align-items:center; gap:5px; min-height:34px; transition:all var(--mt-fast);
}
.plx-extra-btn:hover { color:var(--text); border-color:rgba(237,232,255,.2); }
.plx-extra-menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:100;
  background:var(--s1); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.4); min-width:160px; display:none;
}
.plx-extra-menu.open { display:block; }
.plx-extra-menu-item { display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:.8rem; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); background:none; border:none; width:100%; text-align:left; font-family:var(--sans); }
.plx-extra-menu-item:hover { background:rgba(179,64,244,.08); color:var(--text); }

/* ── Due-soon banner ── */
/* ── Team Notes strip ── */
.plx-notes-bar { display:flex; align-items:center; gap:8px; padding:8px 20px; border-bottom:1px solid var(--border2); background:rgba(237,232,255,.03); min-height:38px; }
.plx-notes-ico { flex-shrink:0; color:var(--dim); }
.plx-notes-label { font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.plx-notes-preview { flex:1; font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; padding:2px 4px; border-radius:4px; -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast); }
.plx-notes-preview:hover { color:var(--text); }
.plx-notes-preview.has-content { color:var(--text); font-style:normal; }
.plx-notes-edit-btn { background:none; border:none; color:var(--dim); cursor:pointer; padding:4px 6px; border-radius:4px; -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast); flex-shrink:0; }
.plx-notes-edit-btn:hover { color:var(--accent); }
.plx-notes-editor { padding:0 20px 12px; }
.plx-notes-ta { width:100%; resize:none; box-sizing:border-box; font-size:.82rem; font-family:var(--sans); color:var(--text); background:var(--surface); border:1px solid rgba(179,64,244,.3); border-radius:8px; padding:10px 12px; outline:none; transition:border-color var(--mt-fast); }
.plx-notes-ta:focus { border-color:rgba(179,64,244,.6); }
.plx-notes-ft { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.plx-notes-hint { font-size:.7rem; color:var(--dim); }
.plx-notes-close-btn { background:rgba(179,64,244,.15); border:none; color:var(--accent); font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.plx-notes-close-btn:hover { background:rgba(179,64,244,.25); }

/* ── Comments tab improvements ── */
.plx-tab-badge { display:inline-flex; align-items:center; justify-content:center; background:rgba(179,64,244,.3); color:var(--text); font-size:.6rem; font-weight:800; border-radius:99px; min-width:16px; height:16px; padding:0 4px; margin-left:4px; vertical-align:middle; }

.plx-due-banner {
  margin:8px 20px 0; padding:7px 14px; border-radius:8px;
  background:rgba(179,64,244,.05); border:1px solid rgba(179,64,244,.12);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.plx-due-banner-hd { font-size:.63rem; font-weight:700; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.plx-due-chip {
  padding:3px 10px; border-radius:99px; font-size:.72rem; font-weight:600; color:var(--muted);
  background:var(--s1); border:1px solid var(--border2); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast);
}
.plx-due-chip:hover { border-color:rgba(179,64,244,.35); color:var(--text); }
.plx-due-chip.overdue { color:var(--text); font-weight:700; background:rgba(179,64,244,.12); border-color:rgba(179,64,244,.3); }

/* ── Focus (Today) view ── */
.plx-focus-wrap { padding:20px; display:flex; flex-direction:column; gap:0; }
.plx-focus-hd { font-size:1.1rem; font-weight:800; color:var(--text); margin-bottom:4px; letter-spacing:-.02em; }
.plx-focus-sub { font-size:.75rem; color:var(--dim); margin-bottom:20px; }
.plx-focus-section { margin-bottom:18px; }
.plx-focus-section-lbl { font-size:.6rem; font-weight:800; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.plx-focus-section-lbl::after { content:''; flex:1; height:1px; background:var(--border2); }
.plx-focus-task {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--s0); border:1px solid var(--border2); border-radius:9px; margin-bottom:5px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast);
}
.plx-focus-task:hover { border-color:rgba(179,64,244,.3); }
.plx-focus-task.overdue { border-left:2px solid var(--accent); }
.plx-focus-cb { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.plx-focus-title { flex:1; font-size:.84rem; font-weight:600; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plx-focus-proj { font-size:.65rem; color:var(--dim); white-space:nowrap; }
.plx-focus-due  { font-size:.68rem; color:var(--dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.plx-focus-due.overdue { color:var(--accent); font-weight:700; }
.plx-focus-est  { font-size:.65rem; color:var(--dim); background:var(--s1); border-radius:4px; padding:1px 5px; white-space:nowrap; }
.plx-focus-done-all { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:40px 0; color:var(--dim); text-align:center; }
.plx-focus-velocity { margin-top:4px; font-size:.72rem; color:var(--dim); background:var(--s0); border:1px solid var(--border2); border-radius:8px; padding:8px 12px; display:flex; align-items:center; gap:6px; }
.plx-focus-velocity strong { color:var(--text); }

/* ── Velocity in KPI strip ── */
.plx-kpi-velocity { font-size:.72rem; color:var(--dim); align-self:center; padding:0 4px; }
.plx-kpi-velocity strong { color:var(--muted); }

/* ── Blocked indicator on card ── */
.plx-card-blocked { display:flex; align-items:center; gap:3px; font-size:.62rem; color:var(--dim); font-weight:600; }
.plx-card-blocked svg { opacity:.6; }
.plx-card-cl { display:flex; align-items:center; gap:3px; font-size:.62rem; color:var(--dim); font-weight:600; }
.plx-card-cl svg { opacity:.5; }
.plx-card-cl--done { color:var(--accent); }
.plx-card-cl--done svg { opacity:1; }
.plx-card.is-blocked { opacity:.65; }
.plx-card.is-blocked .plx-card-title { text-decoration:line-through; text-decoration-color:rgba(237,232,255,.2); }

/* ── Recurrence badge on card ── */
.plx-card-recur { font-size:.6rem; color:var(--dim); display:flex; align-items:center; gap:2px; }

/* ── Quick-capture command bar ── */
.plx-qc-overlay { position:fixed; inset:0; z-index:9500; background:rgba(10,10,19,.6); backdrop-filter:blur(8px); display:none; align-items:flex-start; justify-content:center; padding-top:80px; }
.plx-qc-overlay.open { display:flex; }
.plx-qc-box {
  background:var(--s1); border:1px solid var(--border); border-radius:14px;
  width:100%; max-width:520px; box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:plxModalIn .16s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.plx-qc-inp-wrap { display:flex; align-items:center; gap:10px; padding:14px 16px; }
.plx-qc-inp {
  flex:1; background:transparent; border:none; outline:none;
  font-size:.95rem; font-weight:600; color:var(--text); font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
}
.plx-qc-inp::placeholder { color:var(--dim); font-weight:400; }
.plx-qc-row { display:flex; gap:8px; align-items:center; padding:0 16px 14px; flex-wrap:wrap; }
.plx-qc-sel { background:var(--s0); border:1px solid var(--border2); border-radius:7px; padding:6px 10px; font-size:.78rem; color:var(--muted); outline:none; font-family:var(--sans); -webkit-tap-highlight-color:transparent; }
.plx-qc-sel option { background:var(--ink); }
.plx-qc-hint { font-size:.7rem; color:var(--dim); margin-left:auto; white-space:nowrap; }
.plx-qc-btn { background:var(--accent); color:#fafafa; border:none; border-radius:7px; padding:7px 14px; font-size:.78rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--sans); transition:opacity var(--mt-fast); }
.plx-qc-btn:active { opacity:.8; }
.plx-qc-divider { height:1px; background:var(--border2); }

/* ══ LIGHT-MODE OVERRIDES: planner + krato ══
   All rgba(237,232,255,…) values are dark-mode-only paper-on-ink tints.
   In light mode they map to rgba(10,10,19,…) equivalents.
   Structural backgrounds that use color-mix the wrong way are also fixed.
   Explicit [data-theme="light"] selectors handle the toggle path.
   System prefers-color-scheme path is wrapped in the media query so it
   never fires when the OS is in dark mode.
*/

html[data-theme="light"] .plx-sidebar { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
html[data-theme="light"] .plx-toolbar { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }

/* hover backgrounds */
html[data-theme="light"] .plx-proj-item:hover,
html[data-theme="light"] .plx-ws-btn:hover { background: rgba(10,10,19,.04); }

/* hover borders */
html[data-theme="light"] .plx-edit-proj-btn:hover,
html[data-theme="light"] .plx-btn-secondary:hover,
html[data-theme="light"] .plx-filter-chip:hover,
html[data-theme="light"] .plx-bell-btn:hover,
html[data-theme="light"] .plx-identity-chip:hover,
html[data-theme="light"] .plx-bulk-btn:hover,
html[data-theme="light"] .plx-extra-btn:hover { border-color: rgba(10,10,19,.15); }

/* column / search status dots */
html[data-theme="light"] .plx-col-dot--todo,
html[data-theme="light"] .plx-sr-dot--todo { background: rgba(10,10,19,.22); }
html[data-theme="light"] .plx-col-dot--done,
html[data-theme="light"] .plx-sr-dot--done { background: rgba(10,10,19,.38); }

/* priority chips - medium/low hidden globally, light-mode high needs contrast */
html[data-theme="light"] .plx-card-pri--high { background:rgba(100,30,160,.08); color:rgba(100,30,160,.8); }

/* card add dashed button */
html[data-theme="light"] .plx-card-add { border-color: rgba(10,10,19,.14); }

/* timeline done bar */
html[data-theme="light"] .plx-tl-bar.done-bar { background: rgba(10,10,19,.06); border-color: rgba(10,10,19,.12); }

/* aged task dot */
html[data-theme="light"] .plx-aged-dot { background: rgba(10,10,19,.18); }

/* reaction add dashed border */
html[data-theme="light"] .plx-reaction-add { border-color: rgba(10,10,19,.13); }

/* blocked card strikethrough */
html[data-theme="light"] .plx-card.is-blocked .plx-card-title { text-decoration-color: rgba(10,10,19,.28); }

/* select dropdown options */
html[data-theme="light"] .plx-inp option,
html[data-theme="light"] .plx-qc-sel option { background: var(--paper); color: var(--ink); }

/* ── Non-planner krato: same rgba(237,232,255,…) tint fixes ── */
html[data-theme="light"] .bar-track { background: rgba(10,10,19,.07); }
html[data-theme="light"] .fbadge { background: rgba(10,10,19,.05); }
html[data-theme="light"] .kpi-hero { border-color: rgba(10,10,19,.14); }
html[data-theme="light"] .us-recents { border-bottom-color: rgba(10,10,19,.06); }
html[data-theme="light"] .us-cat-pill { background: rgba(10,10,19,.06); }
html[data-theme="light"] .crm-contact[data-status="done"] { border-left-color: rgba(10,10,19,.2); }
html[data-theme="light"] .crm-role { background: rgba(10,10,19,.06); border-color: rgba(10,10,19,.1); }
html[data-theme="light"] .crm-thread-count { background: rgba(10,10,19,.07); }

/* ── System prefers-color-scheme: light (no explicit theme set) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-sidebar { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-toolbar { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-proj-item:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-ws-btn:hover { background: rgba(10,10,19,.04); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-edit-proj-btn:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-btn-secondary:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-filter-chip:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-bell-btn:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-identity-chip:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-bulk-btn:hover,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-extra-btn:hover { border-color: rgba(10,10,19,.15); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-col-dot--todo,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-sr-dot--todo { background: rgba(10,10,19,.22); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-col-dot--done,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-sr-dot--done { background: rgba(10,10,19,.38); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-card-pri--high { background:rgba(100,30,160,.08); color:rgba(100,30,160,.8); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-card-add { border-color: rgba(10,10,19,.14); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-tl-bar.done-bar { background: rgba(10,10,19,.06); border-color: rgba(10,10,19,.12); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-aged-dot { background: rgba(10,10,19,.18); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-reaction-add { border-color: rgba(10,10,19,.13); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-card.is-blocked .plx-card-title { text-decoration-color: rgba(10,10,19,.28); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-inp option,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .plx-qc-sel option { background: var(--paper); color: var(--ink); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .bar-track { background: rgba(10,10,19,.07); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .fbadge { background: rgba(10,10,19,.05); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .kpi-hero { border-color: rgba(10,10,19,.14); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .us-recents { border-bottom-color: rgba(10,10,19,.06); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .us-cat-pill { background: rgba(10,10,19,.06); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-contact[data-status="done"] { border-left-color: rgba(10,10,19,.2); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-role { background: rgba(10,10,19,.06); border-color: rgba(10,10,19,.1); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-thread-count { background: rgba(10,10,19,.07); }
}

html[data-theme="light"] .crm-type-badge.contact,
html[data-theme="light"] .crm-type-badge.newsletter { background: rgba(10,10,19,.05); }

/* CRM tags */
html[data-theme="light"] .crm-tag[data-t="VIP"] { background: rgba(10,10,19,.07); border-color: rgba(10,10,19,.18); }
html[data-theme="light"] .crm-tag[data-t="Scholarship"],
html[data-theme="light"] .crm-tag[data-t="Volunteer"],
html[data-theme="light"] .crm-tag[data-t="Sponsor"] { background: rgba(10,10,19,.05); border-color: rgba(10,10,19,.12); }
html[data-theme="light"] .crm-tag[data-t="No-show"] { background: rgba(10,10,19,.04); border-color: rgba(10,10,19,.1); }

/* mnav hover */
html[data-theme="light"] .mnav-btn:hover { background: rgba(10,10,19,.04); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-type-badge.contact,
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-type-badge.newsletter { background: rgba(10,10,19,.05); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-tag[data-t="VIP"] { background: rgba(10,10,19,.07); border-color: rgba(10,10,19,.18); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-tag[data-t="Scholarship"],
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-tag[data-t="Volunteer"],
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-tag[data-t="Sponsor"] { background: rgba(10,10,19,.05); border-color: rgba(10,10,19,.12); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .crm-tag[data-t="No-show"] { background: rgba(10,10,19,.04); border-color: rgba(10,10,19,.1); }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .mnav-btn:hover { background: rgba(10,10,19,.04); }
}

/* ── Site Switcher ────────────────────────────────────────────────── */
.ksid-site-wrap { padding:6px 10px 2px; position:relative; }
.ksid-site-btn {
  width:100%; display:flex; align-items:center; gap:7px;
  padding:7px 10px; border-radius:8px; border:1px solid var(--border2);
  background:var(--s1); cursor:pointer; font-family:var(--sans);
  -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), background var(--mt-fast);
  text-align:left;
}
.ksid-site-btn:hover { border-color:rgba(179,64,244,.3); background:rgba(179,64,244,.06); }
.ksid-site-icon { flex-shrink:0; line-height:1; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.ksid-site-icon img { width:16px; height:16px; border-radius:3px; display:block; }
.ksid-site-icon-fb { font-size:.65rem; font-weight:700; color:var(--dim); }
.ksid-site-name { flex:1; font-size:.72rem; font-weight:700; color:var(--text); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ksid-site-chev { color:var(--dim); flex-shrink:0; transition:transform var(--mt-default); }
.ksid-site-btn[aria-expanded="true"] .ksid-site-chev { transform:rotate(180deg); }
.ksid-site-dropdown {
  position:absolute; top:calc(100% - 2px); left:10px; right:10px; z-index:300;
  background:var(--s1); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden;
  animation:siteDdIn .12s ease;
}
@keyframes siteDdIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.ksid-site-opt {
  width:100%; display:flex; align-items:center; gap:8px; padding:9px 12px;
  border:none; background:transparent; cursor:pointer; font-family:var(--sans);
  -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); text-align:left;
}
.ksid-site-opt:hover { background:rgba(179,64,244,.08); }
.ksid-site-opt.active { background:rgba(179,64,244,.12); }
.ksid-site-opt-icon { flex-shrink:0; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }
.ksid-site-opt-icon img { width:16px; height:16px; border-radius:3px; display:block; }
.ksid-site-opt-info { flex:1; min-width:0; }
.ksid-site-opt-name { font-size:.74rem; font-weight:700; color:var(--text); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ksid-site-opt-domain { font-size:.64rem; color:var(--dim); display:block; }
.ksid-site-opt-check { color:var(--accent); flex-shrink:0; opacity:0; }
.ksid-site-opt.active .ksid-site-opt-check { opacity:1; }

#tlPanelQR { box-sizing:border-box; }
.qrg-tabs { display:flex; gap:6px; margin-bottom:24px; }
.qrg-tab { flex:1; padding:9px 0; border-radius:10px; font-size:.82rem; font-weight:700; cursor:pointer; border:1px solid rgba(179,64,244,.2); background:rgba(237,232,255,.04); color:rgba(237,232,255,.45); font-family:inherit; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); }
.qrg-tab.qrg-tab-on { background:var(--accent); color:#fafafa; border-color:var(--accent); }
.qrg-wrap { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
@media(max-width:640px){ .qrg-wrap { grid-template-columns:1fr; } }
.qrg-form { display:flex; flex-direction:column; gap:14px; }
.qrg-lbl { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,232,255,.42); margin-bottom:4px; }
.qrg-inp { width:100%; box-sizing:border-box; background:rgba(237,232,255,.06); border:1px solid rgba(179,64,244,.18); border-radius:10px; color:var(--paper); font-size:.88rem; padding:10px 13px; outline:none; font-family:inherit; transition:border-color var(--mt-fast); -webkit-tap-highlight-color:transparent; resize:vertical; }
.qrg-inp:focus { border-color:rgba(179,64,244,.55); }
.qrg-row { display:flex; gap:10px; align-items:flex-end; }
.qrg-col { display:flex; flex-direction:column; flex:1; }
.qrg-color { width:42px; height:38px; border-radius:8px; border:1px solid rgba(179,64,244,.25); background:none; cursor:pointer; padding:2px; -webkit-tap-highlight-color:transparent; }
.qrg-select { flex:1; width:100%; box-sizing:border-box; background:rgba(237,232,255,.06); border:1px solid rgba(179,64,244,.18); border-radius:10px; color:var(--paper); font-size:.83rem; padding:10px 12px; outline:none; font-family:inherit; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; }
.qrg-logo-btn { display:flex; align-items:center; gap:8px; padding:9px 14px; background:rgba(237,232,255,.06); border:1px dashed rgba(179,64,244,.3); border-radius:10px; cursor:pointer; font-size:.82rem; color:rgba(237,232,255,.55); transition:border-color var(--mt-fast),color var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.qrg-logo-btn:hover { border-color:rgba(179,64,244,.6); color:var(--paper); }
.qrg-logo-name { font-size:.75rem; color:rgba(237,232,255,.45); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.qrg-logo-clear { background:none; border:none; color:rgba(237,232,255,.35); cursor:pointer; font-size:.9rem; padding:0 4px; -webkit-tap-highlight-color:transparent; }
.qrg-logo-clear:hover { color:var(--paper); }
.qrg-preview { display:flex; flex-direction:column; gap:16px; align-items:center; }
.qrg-canvas-wrap { background:transparent; border-radius:0; padding:0; box-shadow:none; display:flex; align-items:center; justify-content:center; }
#qrgCanvas { border-radius:0; display:block; }
.qrg-btn-row { display:flex; gap:10px; width:100%; }
.qrg-dl-btn { flex:1; padding:11px 0; border-radius:10px; font-size:.85rem; font-weight:700; cursor:pointer; border:none; -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-fast); }
.qrg-dl-btn:hover { opacity:.85; }
.qrg-dl-png { background:var(--accent); color:#fafafa; }
.qrg-dl-svg { background:rgba(179,64,244,.15); color:var(--accent); border:1px solid rgba(179,64,244,.35); }
.qrg-size-lbl { font-size:.72rem; color:rgba(237,232,255,.3); margin-top:2px; }
.qrg-empty { font-size:.82rem; color:rgba(237,232,255,.3); text-align:center; margin-top:8px; }
.qrg-range { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:99px; background:rgba(179,64,244,.25); outline:none; -webkit-tap-highlight-color:transparent; }
.qrg-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; }
.qrg-pills { display:flex; flex-wrap:wrap; gap:6px; }
.qrg-pill { padding:5px 13px; border-radius:99px; font-size:.75rem; font-weight:700; cursor:pointer; border:1px solid rgba(179,64,244,.2); background:rgba(237,232,255,.04); color:rgba(237,232,255,.45); font-family:inherit; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); }
.qrg-pill.qrg-pill-on { background:rgba(179,64,244,.22); color:var(--accent); border-color:rgba(179,64,244,.5); }
.qrg-scan-video-wrap { position:relative; width:260px; height:260px; border-radius:12px; overflow:hidden; background:#000; flex-shrink:0; }
#qrgScanVideo { width:100%; height:100%; object-fit:cover; display:block; }
#qrgScanFlash { position:absolute; inset:0; background:#fafafa; opacity:0; pointer-events:none; border-radius:12px; }
#qrgScanFlash.go { opacity:.7; transition:opacity .05s; }

/* ═══ Website Editor - Block Studio ═══ */
.we-panel-root { display:none; padding:0; }
.we-panel-root.we-visible { display:block; }
/* lock the overlay scroll when the WYSIWYG editor is open - iframe scrolls internally */
#toolsOverlay:has(.we-panel-root.we-visible) { overflow-y: hidden; }
.we-edit-root { display:none; }
.we-edit-root.we-active { display:block; }

/* ── Hero band ── */
.we-hero { padding:24px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.we-hero-left { min-width:0; }
.we-hero-eyebrow { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:.7; margin-bottom:4px; }
.we-hero-title { font-size:1.2rem; font-weight:800; color:var(--text); letter-spacing:-.025em; }
.we-hero-sub { font-size:.78rem; color:var(--dim); margin-top:4px; }
.we-hero-live { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color:var(--accent); text-decoration:none; height:44px; padding:0 16px; border:1.5px solid rgba(179,64,244,.35); border-radius:8px; transition:background var(--mt-fast), border-color var(--mt-fast); white-space:nowrap; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.we-hero-live:hover { background:rgba(179,64,244,.1); border-color:rgba(179,64,244,.6); }
.we-hero-live-dot { width:8px; height:8px; border-radius:50%; background:#3dd68c; animation:wePulse 2s ease-in-out infinite; }
@keyframes wePulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(.85);} }

/* ── Progress bar ── */
.we-progress-wrap { padding:16px 20px 0; }
.we-progress-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.we-progress-lbl { font-size:.74rem; color:var(--dim); }
.we-progress-frac { font-size:.74rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.we-progress-track { height:4px; background:var(--border2); border-radius:2px; overflow:hidden; }
.we-progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),#a855f7); border-radius:2px; transition:width .5s cubic-bezier(.4,0,.2,1); }

/* ── Section grid ── */
.we-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(256px,1fr)); gap:12px; padding:16px 20px 48px; }
.we-loading { grid-column:1/-1; color:var(--dim); font-size:.86rem; padding:48px 0; text-align:center; }

/* ── Cards ── */
.we-card { background:var(--s1); border:1.5px solid var(--border2); border-radius:16px; padding:0; cursor:pointer; transition:transform var(--mt-default) cubic-bezier(.4,0,.2,1), box-shadow var(--mt-default), border-color var(--mt-default); position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; opacity:0; animation:weCardIn var(--mt-slow) cubic-bezier(.4,0,.2,1) forwards; }
@keyframes weCardIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
.we-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.2); border-color:var(--we-color,var(--accent)); }
/* Per-group accent top stripe */
.we-card-stripe { height:3px; border-radius:16px 16px 0 0; background:var(--we-color,var(--accent)); opacity:.55; transition:opacity var(--mt-default); }
.we-card:hover .we-card-stripe { opacity:1; }
.we-card-inner { padding:16px 16px 16px; }
.we-card-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.we-card-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:color-mix(in srgb,var(--we-color,var(--accent)) 14%,transparent); color:var(--we-color,var(--accent)); transition:background var(--mt-default); }
.we-card:hover .we-card-icon { background:color-mix(in srgb,var(--we-color,var(--accent)) 22%,transparent); }
.we-card-meta { flex:1; min-width:0; padding-top:2px; }
.we-card-name { font-size:.9rem; font-weight:700; color:var(--text); }
.we-card-count { font-size:.72rem; color:var(--dim); margin-top:2px; }
.we-card-preview { font-size:.78rem; color:var(--dim); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; margin-bottom:16px; }
.we-card-foot { display:flex; align-items:center; gap:8px; }
.we-status-pip { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.we-status-pip.full    { background:#3dd68c; }
.we-status-pip.partial { background:#f5a524; }
.we-status-pip.empty   { background:var(--border2); }
.we-card-status-txt { font-size:.72rem; color:var(--dim); flex:1; }
.we-card-arrow { width:24px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--we-color,var(--accent)) 12%,transparent); display:flex; align-items:center; justify-content:center; color:var(--we-color,var(--accent)); opacity:0; transform:translateX(-4px); transition:opacity var(--mt-default), transform var(--mt-default); }
.we-card:hover .we-card-arrow { opacity:1; transform:none; }

/* ── Edit panel ── */
.we-edit { padding:0 20px 64px; animation:weSlide .24s cubic-bezier(.4,0,.2,1); }
@keyframes weSlide { from{opacity:0;transform:translateX(16px);} to{opacity:1;transform:none;} }
.we-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.8rem; color:var(--dim); background:none; border:none; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast); }
.we-back:hover { color:var(--text); }
.we-edit-hero { display:flex; align-items:center; gap:16px; margin-bottom:24px; padding:16px; border-radius:16px; background:color-mix(in srgb,var(--we-color,var(--accent)) 8%,transparent); border:1.5px solid color-mix(in srgb,var(--we-color,var(--accent)) 22%,transparent); }
.we-edit-hero-icon { width:48px; height:48px; border-radius:12px; background:color-mix(in srgb,var(--we-color,var(--accent)) 18%,transparent); display:flex; align-items:center; justify-content:center; color:var(--we-color,var(--accent)); flex-shrink:0; }
.we-edit-title { font-size:1rem; font-weight:800; color:var(--text); }
.we-edit-subtitle { font-size:.75rem; color:var(--dim); margin-top:3px; }
/* Field rows */
.we-field { margin-bottom:20px; }
.we-field-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.we-field-label { font-size:.82rem; font-weight:600; color:var(--text); }
.we-type-chip { font-size:.66rem; font-weight:700; letter-spacing:.05em; padding:3px 8px; border-radius:4px; background:rgba(179,64,244,.12); color:var(--accent); font-family:var(--mono); text-transform:uppercase; }
.we-field input[type="text"],
.we-field input[type="url"],
.we-field input[type="datetime-local"],
.we-field textarea {
  width:100%; background:var(--bg2); border:1.5px solid var(--border2); border-radius:8px; color:var(--text);
  font-size:.88rem; padding:12px; box-sizing:border-box; font-family:inherit; resize:vertical;
  transition:border-color var(--mt-fast), box-shadow var(--mt-fast); -webkit-appearance:none; min-height:44px;
}
.we-field input:focus, .we-field textarea:focus { outline:none; border-color:var(--we-color,var(--accent)); box-shadow:0 0 0 3px color-mix(in srgb,var(--we-color,var(--accent)) 15%,transparent); }
.we-field textarea { min-height:80px; }
.we-color-pair { display:flex; align-items:center; gap:8px; }
.we-color-pair input[type="color"] { width:44px; height:44px; border:1.5px solid var(--border2); border-radius:8px; padding:3px; background:var(--bg2); cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.we-color-pair input[type="text"] { flex:1; }
.we-field-hint { font-size:.72rem; color:var(--dim); margin-top:4px; }
/* Save bar - floating, appears only when dirty */
.we-save-bar { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); z-index:9500; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 20px; background:var(--s2,#1a1a2e); border:1.5px solid color-mix(in srgb,var(--we-color,var(--accent)) 35%,transparent); border-radius:40px; box-shadow:0 8px 32px rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:transform .28s cubic-bezier(.34,1.56,.64,1), opacity var(--mt-default) ease; white-space:nowrap; }
.we-save-bar.we-bar-visible { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
.we-save-bar-dot { width:8px; height:8px; border-radius:50%; background:var(--we-color,var(--accent)); flex-shrink:0; animation:wePulse 2s ease-in-out infinite; }
.we-save-bar-lbl { font-size:.8rem; color:var(--dim); flex:1; min-width:0; }
.we-save-bar-lbl.ok { color:#3dd68c; }
.we-save-btn { background:var(--we-color,var(--accent)); color:#fafafa; border:none; border-radius:24px; height:36px; padding:0 20px; font-size:.82rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-fast), transform var(--mt-instant); flex-shrink:0; }
.we-save-btn:active { transform:scale(.97); }
.we-save-btn:hover { opacity:.88; }
.we-save-btn:disabled { opacity:.45; cursor:default; }
/* legacy .we-save-row no longer used - kept for selector specificity safety */
.we-save-row { display:none; }
/* Advanced selector map */
.we-adv-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.8rem; color:var(--dim); cursor:pointer; background:none; border:none; padding:0; margin-top:4px; -webkit-tap-highlight-color:transparent; user-select:none; transition:color var(--mt-fast); }
.we-adv-toggle:hover { color:var(--text); }
.we-adv-toggle svg { transition:transform var(--mt-default); }
.we-map-section { margin-top:4px; animation:weSlide .2s; }
.we-map-hdr { display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; margin-bottom:8px; }
.we-map-hdr span { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); }
.we-map-row { display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; margin-bottom:8px; align-items:center; }
.we-map-row input { background:var(--bg2); border:1.5px solid var(--border2); border-radius:8px; color:var(--text); font-size:.76rem; padding:10px; font-family:var(--mono); width:100%; box-sizing:border-box; min-height:40px; }
.we-map-row input:focus { outline:none; border-color:var(--accent); }
.we-map-del { background:none; border:1.5px solid rgba(239,68,68,.35); border-radius:8px; color:#ef4444; min-width:40px; min-height:40px; cursor:pointer; font-size:.8rem; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; justify-content:center; transition:background var(--mt-fast); }
.we-map-del:hover { background:rgba(239,68,68,.08); }
.we-map-add { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--accent); background:rgba(179,64,244,.08); border:1.5px dashed rgba(179,64,244,.4); border-radius:8px; padding:12px 16px; cursor:pointer; width:100%; justify-content:center; margin-top:8px; -webkit-tap-highlight-color:transparent; box-sizing:border-box; transition:background var(--mt-fast); }
.we-map-add:hover { background:rgba(179,64,244,.14); }
@media (max-width:600px) {
  .we-grid { grid-template-columns:1fr; }
  .we-map-row, .we-map-hdr { grid-template-columns:1fr; }
  .we-map-hdr span:nth-child(n+2) { display:none; }
}
/* color-mix() fallback for older browsers */
@supports not (color:color-mix(in srgb, red 10%, blue)) {
  .we-card-icon { background:rgba(179,64,244,.14); color:var(--accent); }
  .we-edit-hero { background:rgba(179,64,244,.08); border-color:rgba(179,64,244,.22); }
  .we-edit-hero-icon { background:rgba(179,64,244,.18); color:var(--accent); }
}
/* ── Block Studio extended - site bar, types, repeatable, toggles ── */
.we-site-bar { padding:20px 20px 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.we-site-url-row { display:flex; align-items:center; gap:6px; background:var(--input-bg,rgba(0,0,0,.06)); border:1px solid var(--border); border-radius:7px; padding:5px 10px; flex:1; min-width:200px; max-width:360px; }
.we-site-url-row svg { opacity:.45; flex-shrink:0; }
.we-site-url-input { border:none; background:transparent; outline:none; font-size:.78rem; color:var(--text); width:100%; min-width:0; }
.we-site-url-input::placeholder { color:var(--dim); }
.we-site-name { font-size:.82rem; font-weight:700; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.we-site-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.we-scan-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:18px; background:none; border:1.5px solid var(--border2); color:var(--dim); font-size:.78rem; font-weight:600; cursor:pointer; transition:border-color var(--mt-fast), color var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.we-scan-btn:hover { border-color:var(--accent); color:var(--text); }
.we-scan-btn.scanning { animation:weSpinPulse 1s linear infinite; opacity:.6; cursor:default; pointer-events:none; }
@keyframes weSpinPulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }
.we-scan-notice { display:flex; align-items:center; gap:8px; padding:9px 16px; margin:4px 20px 0; background:color-mix(in srgb,#3dd68c 8%,transparent); border:1.5px solid color-mix(in srgb,#3dd68c 28%,transparent); border-radius:10px; font-size:.8rem; color:#3dd68c; animation:weSlide .25s; }
.we-add-block-wrap { padding:8px 20px 0; }
.we-add-block-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:44px; border-radius:12px; background:none; border:1.5px dashed var(--border2); color:var(--dim); font-size:.82rem; font-weight:600; cursor:pointer; transition:border-color var(--mt-fast), color var(--mt-fast), background var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.we-add-block-btn:hover { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); }
/* Block type badge */
.we-btype { display:inline-flex; align-items:center; gap:5px; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px 3px 6px; border-radius:20px; background:color-mix(in srgb,var(--we-color,var(--accent)) 14%,transparent); color:var(--we-color,var(--accent)); flex-shrink:0; line-height:1; }
/* Toggle switch */
.we-tog-wrap { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 2px; }
.we-tog-wrap .we-field-label { flex:1; cursor:pointer; }
.we-tog { position:relative; width:44px; height:26px; flex-shrink:0; }
.we-tog input { opacity:0; width:0; height:0; position:absolute; }
.we-tog-track { position:absolute; inset:0; background:var(--border2); border-radius:13px; cursor:pointer; transition:background var(--mt-default); }
.we-tog input:checked ~ .we-tog-track { background:var(--we-color,var(--accent)); }
.we-tog-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fafafa; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform var(--mt-default); pointer-events:none; }
.we-tog input:checked ~ .we-tog-track ~ .we-tog-thumb { transform:translateX(18px); }
/* Select */
.we-field select { width:100%; background:var(--bg2); border:1.5px solid var(--border2); border-radius:8px; color:var(--text); font-size:.88rem; padding:12px 36px 12px 12px; box-sizing:border-box; font-family:inherit; min-height:44px; -webkit-appearance:none; appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 12px) center; transition:border-color var(--mt-fast); }
.we-field select:focus { outline:none; border-color:var(--we-color,var(--accent)); box-shadow:0 0 0 3px color-mix(in srgb,var(--we-color,var(--accent)) 15%,transparent); }
/* Repeatable section */
.we-rep { margin-bottom:24px; }
.we-rep-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding-bottom:8px; border-bottom:1.5px solid var(--border2); }
.we-rep-title { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.we-rep-add { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:16px; background:color-mix(in srgb,var(--we-color,var(--accent)) 10%,transparent); border:1.5px dashed color-mix(in srgb,var(--we-color,var(--accent)) 40%,transparent); color:var(--we-color,var(--accent)); font-size:.74rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); }
.we-rep-add:hover { background:color-mix(in srgb,var(--we-color,var(--accent)) 18%,transparent); }
.we-rep-items { display:flex; flex-direction:column; gap:10px; }
.we-rep-item { background:var(--bg2); border:1.5px solid var(--border2); border-radius:12px; overflow:hidden; transition:border-color var(--mt-fast); }
.we-rep-item:focus-within { border-color:color-mix(in srgb,var(--we-color,var(--accent)) 50%,transparent); }
.we-rep-item-hd { display:flex; align-items:center; gap:8px; padding:8px 10px; background:color-mix(in srgb,var(--we-color,var(--accent)) 6%,transparent); border-bottom:1.5px solid var(--border2); }
.we-rep-item-num { font-size:.64rem; font-weight:800; letter-spacing:.06em; color:var(--we-color,var(--accent)); min-width:18px; }
.we-rep-item-prev { font-size:.76rem; color:var(--dim); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.we-rep-ctrls { display:flex; align-items:center; gap:1px; flex-shrink:0; }
.we-rep-btn { background:none; border:none; color:var(--dim); cursor:pointer; width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:.7rem; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast), color var(--mt-fast); }
.we-rep-btn:hover { background:var(--border2); color:var(--text); }
.we-rep-btn.del:hover { background:rgba(239,68,68,.12); color:#ef4444; }
.we-rep-item-body { padding:12px; display:flex; flex-direction:column; gap:10px; }
.we-rep-item-body .we-field { margin-bottom:0; }
.we-rep-empty { text-align:center; padding:20px; color:var(--dim); font-size:.8rem; border:1.5px dashed var(--border2); border-radius:12px; }
/* Image field with thumbnail */
.we-img-wrap { display:flex; gap:10px; align-items:center; }
.we-img-thumb { width:52px; height:38px; border-radius:8px; object-fit:cover; border:1.5px solid var(--border2); background:var(--bg2); flex-shrink:0; }
.we-img-wrap input { flex:1; }
/* Add block type chooser */
.we-add-panel { padding:16px 20px 48px; animation:weSlide .2s; }
.we-type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:8px; margin-top:12px; }
.we-type-tile { background:var(--s1); border:1.5px solid var(--border2); border-radius:12px; padding:14px 12px; cursor:pointer; transition:border-color var(--mt-fast), transform var(--mt-fast); display:flex; flex-direction:column; gap:10px; -webkit-tap-highlight-color:transparent; }
.we-type-tile:hover { border-color:var(--we-color,var(--accent)); transform:translateY(-2px); }
.we-type-tile-ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--we-color,var(--accent)) 14%,transparent); color:var(--we-color,var(--accent)); }
.we-type-tile-name { font-size:.8rem; font-weight:700; color:var(--text); }
.we-type-tile-desc { font-size:.66rem; color:var(--dim); line-height:1.4; }
/* Delete block footer */
.we-edit-danger { padding:16px 0 0; border-top:1.5px solid var(--border2); margin-top:8px; }
.we-del-block-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:8px; background:none; border:1.5px solid rgba(239,68,68,.3); color:#ef4444; font-size:.76rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast); }
.we-del-block-btn:hover { background:rgba(239,68,68,.08); }
/* Reorder / move block */
.we-card-order { position:absolute; top:8px; right:8px; display:flex; gap:3px; opacity:0; transition:opacity var(--mt-fast); }
.we-card:hover .we-card-order { opacity:1; }
.we-card-order-btn { background:var(--s2); border:1px solid var(--border2); border-radius:6px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:.7rem; transition:border-color var(--mt-fast), color var(--mt-fast); }
.we-card-order-btn:hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:600px) {
  .we-type-grid { grid-template-columns:1fr 1fr; }
}

/* ═══ WYSIWYG Website Editor ═══ */
@keyframes wyLoadPulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes wySlideDown { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }
@keyframes wyPop { from{opacity:0;transform:translateX(-50%) translateY(4px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }
@keyframes wyFadeIn { from{opacity:0;} to{opacity:1;} }

/* Top bar */
.wy-topbar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border2); flex-wrap:wrap; background:var(--bg); }
.wy-url-row { display:flex; align-items:center; gap:8px; flex:1; min-width:200px; max-width:480px; background:var(--bg2); border:1.5px solid var(--border2); border-radius:10px; padding:0 12px; height:40px; transition:border-color var(--mt-default), box-shadow var(--mt-default); }
.wy-url-row:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(179,64,244,.1); }
.wy-globe { opacity:.35; flex-shrink:0; }
.wy-url-input { border:none; background:transparent; outline:none; font-size:.82rem; color:var(--text); flex:1; min-width:0; font-family:var(--mono); }
.wy-url-input::placeholder { color:var(--dim); font-family:inherit; }
.wy-load-btn { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:10px; background:var(--accent); border:none; color:#fafafa; font-size:.78rem; font-weight:700; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-fast), transform var(--mt-instant); }
.wy-load-btn:hover { opacity:.85; }
.wy-load-btn:active { transform:scale(.96); }
.wy-load-btn.loading { pointer-events:none; animation:wyLoadPulse 1.2s ease-in-out infinite; }
.wy-top-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.wy-save-wrap { display:inline-flex; align-items:center; position:relative; }
.wy-changes-chip { position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-size:.59rem; font-weight:800; color:#f5a524; background:var(--bg); border:1.5px solid rgba(245,165,36,.45); border-radius:10px; padding:1px 7px; white-space:nowrap; animation:wyPop .18s cubic-bezier(.34,1.56,.64,1) forwards; line-height:1.5; pointer-events:none; z-index:1; letter-spacing:.02em; }
.wy-changes-chip.saved { color:#3dd68c; border-color:rgba(61,214,140,.45); }
.wy-changes-chip.error { color:#f87171; border-color:rgba(248,113,113,.35); background:rgba(248,113,113,.07); }
.wy-save-all-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:10px; background:linear-gradient(135deg,rgba(179,64,244,.16),rgba(139,92,246,.1)); border:1.5px solid rgba(179,64,244,.5); color:var(--accent); font-size:.78rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-default), border-color var(--mt-default), box-shadow var(--mt-default); flex-shrink:0; }
.wy-save-all-btn:hover { background:linear-gradient(135deg,rgba(179,64,244,.26),rgba(139,92,246,.18)); border-color:rgba(179,64,244,.9); box-shadow:0 0 12px rgba(179,64,244,.2); }
.wy-save-all-btn:active { transform:scale(.97); }
.wy-pause-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 13px; border-radius:10px; background:none; border:1.5px solid var(--border2); color:var(--muted); font-size:.78rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast), border-color var(--mt-default), color var(--mt-fast); flex-shrink:0; }
.wy-pause-btn:hover { border-color:rgba(179,64,244,.4); color:var(--text); background:var(--bg2); }
.wy-pause-btn.active { background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.5); color:#d97706; }
.wy-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:none; border:1.5px solid var(--border2); color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast), border-color var(--mt-default), color var(--mt-fast); flex-shrink:0; padding:0; }
.wy-icon-btn:hover { border-color:rgba(179,64,244,.4); color:var(--text); background:var(--bg2); }
.wy-icon-btn.active { background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.5); color:#d97706; }
.wy-icon-btn.danger:hover { border-color:rgba(239,68,68,.4); color:#ef4444; background:rgba(239,68,68,.06); }
.wy-icon-btn.danger.confirming { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.1); }

/* Element edit panel */
.wy-edit-panel { border-bottom:1px solid var(--border2); background:var(--bg); animation:wySlideDown .2s cubic-bezier(.4,0,.2,1); }
.wy-edit-head { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 0; gap:8px; }
.wy-edit-breadcrumb { display:flex; align-items:center; gap:7px; min-width:0; flex:1; overflow:hidden; }
.wy-edit-tag { font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:3px 7px; border-radius:5px; background:rgba(179,64,244,.12); color:var(--accent); flex-shrink:0; font-family:var(--mono); border:1px solid rgba(179,64,244,.2); }
.wy-edit-sel { font-size:.71rem; color:var(--dim); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wy-edit-close { background:none; border:none; color:var(--dim); cursor:pointer; min-width:36px; min-height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; transition:background var(--mt-fast), color var(--mt-fast); flex-shrink:0; }
.wy-edit-close:hover { background:rgba(239,68,68,.1); color:#ef4444; }
.wy-edit-tabs { display:flex; gap:0; padding:8px 12px 0; border-bottom:1px solid var(--border2); }
.wy-edit-tab { min-height:36px; padding:0 12px; border-radius:0; border:none; border-bottom:2px solid transparent; background:none; font-size:.76rem; font-weight:600; color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast), border-color var(--mt-fast); margin-bottom:-1px; }
.wy-edit-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.wy-edit-tab:hover:not(.active) { color:var(--text); }
.wy-edit-body { padding:12px 16px; animation:wyFadeIn .15s ease; }
@keyframes wyTabIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }
.wy-edit-body.tab-switching { animation:wyTabIn .18s cubic-bezier(.4,0,.2,1); }
.wy-edit-body textarea,
.wy-edit-body input[type="text"],
.wy-edit-body input[type="url"] { width:100%; background:var(--bg2); border:1.5px solid var(--border2); border-radius:10px; color:var(--text); font-size:.84rem; padding:10px 12px; box-sizing:border-box; font-family:var(--mono); resize:vertical; min-height:44px; transition:border-color var(--mt-default), box-shadow var(--mt-default); -webkit-appearance:none; }
.wy-edit-body textarea { min-height:88px; }
.wy-edit-body textarea.wy-html-area { font-size:.74rem; min-height:120px; }
.wy-edit-body input:focus, .wy-edit-body textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(179,64,244,.1); }
.wy-edit-body .wy-field-label { font-size:.7rem; font-weight:700; color:var(--dim); margin-bottom:5px; display:block; letter-spacing:.04em; text-transform:uppercase; }
.wy-edit-body .wy-img-preview { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.wy-edit-body .wy-img-thumb { width:64px; height:48px; object-fit:cover; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); flex-shrink:0; }
.wy-edit-foot { display:flex; align-items:center; gap:8px; padding:10px 16px 12px; }
.wy-icon-group { display:flex; align-items:center; gap:3px; margin-left:auto; }
.wy-apply-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 20px; border-radius:10px; background:var(--accent); border:none; color:#fafafa; font-size:.8rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity var(--mt-fast), transform var(--mt-instant), box-shadow var(--mt-default); }
.wy-apply-btn:hover { opacity:.9; box-shadow:0 4px 14px rgba(179,64,244,.35); }
.wy-apply-btn:active { transform:scale(.96); }
.wy-apply-btn.applied { background:#16a34a; box-shadow:0 4px 14px rgba(22,163,74,.35); }
.wy-apply-btn.applied::after { content:'✓ Applied'; }
.wy-apply-btn.applied > * { display:none; }
.wy-reset-btn { height:40px; padding:0 14px; border-radius:10px; background:none; border:1.5px solid var(--border2); color:var(--dim); font-size:.78rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), color var(--mt-fast); }
.wy-reset-btn:hover { border-color:var(--muted); color:var(--text); }
.wy-delete-btn { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; border-radius:10px; background:none; border:1.5px solid var(--border2); color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), color var(--mt-fast), background var(--mt-fast); flex-shrink:0; padding:0; }
.wy-delete-btn:hover { border-color:rgba(239,68,68,.5); color:#ef4444; background:rgba(239,68,68,.07); }
.wy-delete-btn.confirming { border-color:#ef4444; color:#fafafa; background:#ef4444; }
.wy-undo-btn { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; border-radius:10px; background:none; border:1.5px solid var(--border2); color:var(--dim); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), color var(--mt-fast), background var(--mt-fast); flex-shrink:0; padding:0; }
.wy-undo-btn:not([disabled]):hover { border-color:rgba(179,64,244,.5); color:var(--accent); background:rgba(179,64,244,.07); }
.wy-undo-btn[disabled] { opacity:.28; cursor:not-allowed; }
.wy-clone-btn { border-color:rgba(56,189,248,.35); color:#38bdf8; }
.wy-clone-btn:hover { border-color:rgba(56,189,248,.7); color:#38bdf8; background:rgba(56,189,248,.07); }
/* changes list */
.wy-changes-list { border-top:1px solid var(--border2); padding:10px 16px 14px; display:flex; flex-direction:column; gap:3px; }
#wyChangesList[hidden] { display:none !important; }
.wy-cl-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:.7rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.07em; }
.wy-cl-clear { font-size:.72rem; font-weight:600; color:var(--dim); background:none; border:none; cursor:pointer; min-height:28px; padding:0 8px; border-radius:6px; -webkit-tap-highlight-color:transparent; transition:color var(--mt-fast), background var(--mt-fast); }
.wy-cl-clear:hover { color:#ef4444; background:rgba(239,68,68,.07); }
.wy-cl-clear.confirming { color:#ef4444; font-weight:700; }
.wy-cl-item { display:flex; align-items:center; gap:8px; padding:7px 10px 7px 14px; border-radius:8px; background:var(--bg2); border:1px solid transparent; cursor:pointer; transition:border-color var(--mt-fast), background var(--mt-fast), transform var(--mt-fast), box-shadow var(--mt-fast); min-height:40px; position:relative; overflow:hidden; }
.wy-cl-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--_acc,var(--border2)); border-radius:3px 0 0 3px; }
.wy-cl-item:hover { border-color:var(--border2); background:var(--s1); transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.wy-cl-badge { font-size:.63rem; font-weight:800; padding:2px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.wy-cl-badge.html    { background:rgba(99,102,241,.14); color:#818cf8; }
.wy-cl-badge.text    { background:rgba(34,197,94,.11); color:#4ade80; }
.wy-cl-badge.src     { background:rgba(251,146,60,.14); color:#fb923c; }
.wy-cl-badge.href    { background:rgba(56,189,248,.11); color:#38bdf8; }
.wy-cl-badge.style   { background:rgba(232,121,249,.12); color:#e879f9; }
.wy-cl-badge.classes { background:rgba(251,191,36,.11); color:#fbbf24; }
.wy-cl-badge.del     { background:rgba(239,68,68,.11); color:#f87171; }
.wy-cl-badge.move    { background:rgba(251,191,36,.11); color:#fbbf24; }
.wy-cl-badge.clone   { background:rgba(56,189,248,.11); color:#38bdf8; }
/* breakpoint bar */
.wy-bp-bar { display:flex; align-items:center; gap:3px; }
.wy-bp-btn { min-height:30px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border2); background:none; color:var(--dim); font-size:.72rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-fast), color var(--mt-fast), background var(--mt-fast); }
.wy-bp-btn.active { border-color:rgba(179,64,244,.5); color:var(--accent); background:rgba(179,64,244,.08); }
.wy-bp-btn:hover:not(.active) { border-color:var(--muted); color:var(--text); }
/* find & replace */
.wy-fnr { border-top:1px solid var(--border2); padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.wy-fnr[hidden], .wy-bulk[hidden] { display:none !important; }
.wy-fnr-row { display:flex; gap:8px; }
.wy-fnr input { flex:1; min-width:0; height:36px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; -webkit-tap-highlight-color:transparent; transition:border-color var(--mt-default); }
.wy-fnr input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(179,64,244,.1); }
.wy-fnr-btn { height:36px; padding:0 14px; border-radius:8px; border:none; background:var(--accent); color:#fafafa; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.wy-fnr-status { font-size:.74rem; color:var(--dim); min-height:16px; }
/* bulk selector panel */
.wy-bulk { border-top:1px solid var(--border2); padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.wy-bulk-row { display:flex; gap:8px; align-items:flex-start; }
.wy-bulk-row select { height:36px; padding:0 8px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.wy-bulk-row select:focus { outline:none; border-color:var(--accent); }
.wy-bulk-row input { flex:1; min-width:0; height:36px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; -webkit-tap-highlight-color:transparent; }
.wy-bulk-row input:focus { outline:none; border-color:var(--accent); }
.wy-bulk-btn { height:36px; padding:0 14px; border-radius:8px; border:none; background:var(--accent); color:#fafafa; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.wy-bulk-status { font-size:.74rem; color:var(--dim); min-height:16px; }
/* style tab */
.wy-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
.wy-style-field { display:flex; flex-direction:column; gap:4px; }
.wy-style-field label { font-size:.7rem; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; }
.wy-style-color-row { display:flex; align-items:center; gap:8px; }
.wy-style-color-row input[type="color"] { width:36px; height:36px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); cursor:pointer; padding:2px; flex-shrink:0; -webkit-appearance:none; }
.wy-style-color-row input[type="text"] { flex:1; height:36px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; font-family:var(--mono); transition:border-color var(--mt-default); }
.wy-style-color-row input[type="text"]:focus { outline:none; border-color:var(--accent); }
.wy-style-number { width:100%; height:36px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; -webkit-appearance:none; transition:border-color var(--mt-default); }
.wy-style-number:focus { outline:none; border-color:var(--accent); }
.wy-style-select { width:100%; height:36px; padding:0 10px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; cursor:pointer; -webkit-appearance:none; }
.wy-style-select:focus { outline:none; border-color:var(--accent); }
.wy-style-4col { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.wy-style-4col input { text-align:center; height:36px; padding:0 4px; border-radius:8px; border:1.5px solid var(--border2); background:var(--bg2); color:var(--text); font-size:.8rem; -webkit-appearance:none; transition:border-color var(--mt-default); }
.wy-style-4col input:focus { outline:none; border-color:var(--accent); }
/* kbd hint strip */
.wy-kbd-hint { font-size:.69rem; color:var(--dim); display:flex; gap:14px; flex-wrap:wrap; padding:0 16px 10px; }
.wy-kbd-hint kbd { display:inline-flex; align-items:center; padding:1px 6px; border-radius:5px; border:1px solid var(--border2); background:var(--bg2); font-size:.69rem; font-family:var(--mono); color:var(--muted); box-shadow:0 1px 0 var(--border2); }
.wy-cl-sel { font-size:.72rem; color:var(--muted); font-family:monospace; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wy-cl-name { font-size:.76rem; color:var(--text); font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wy-cl-rm { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; border-radius:6px; background:none; border:none; color:var(--dim); cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; font-size:13px; line-height:1; transition:color var(--mt-fast), background var(--mt-fast); }
.wy-cl-rm:hover { color:#ef4444; background:rgba(239,68,68,.08); }

/* iframe area */
.wy-frame-wrap { position:relative; flex:1; display:flex; flex-direction:column; min-height:0; height:calc(100vh - 180px); }
.wy-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--dim); padding:48px 24px; gap:16px; flex:1; height:100%; }
.wy-empty-state svg { opacity:.22; color:var(--dim); }
.wy-empty-state p { font-size:.9rem; line-height:1.6; color:var(--dim); margin:0; }
.wy-empty-state p strong { color:var(--text); }
.wy-empty-hint { font-size:.78rem !important; opacity:.7; }
.wy-frame { width:100%; flex:1; border:none; background:#fafafa; display:none; min-height:0; }
.wy-frame.loaded { display:block; }
/* ancestry / breadcrumb trail */
.wy-ancestry-bar { display:flex; align-items:center; gap:0; padding:0 12px; height:32px; border-top:1px solid var(--border2); background:var(--bg); flex-shrink:0; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.wy-ancestry-bar::-webkit-scrollbar { display:none; }
.wy-anc-seg { font-size:.72rem; font-family:var(--mono); color:var(--dim); padding:3px 6px; border-radius:5px; cursor:pointer; transition:background var(--mt-fast), color var(--mt-fast); flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.wy-anc-seg:hover { background:rgba(179,64,244,.1); color:var(--accent); }
.wy-anc-seg.active { color:var(--accent); font-weight:700; }
.wy-anc-sep { color:var(--border2); font-size:.7rem; flex-shrink:0; padding:0 1px; user-select:none; }
/* hover bounding box overlay - injected into iframe, but styled here for reference */
@keyframes wyFlash { 0%{box-shadow:0 0 0 0 rgba(61,214,140,.6),inset 0 0 0 1px rgba(61,214,140,.4)} 60%{box-shadow:0 0 0 6px rgba(61,214,140,0),inset 0 0 0 1px rgba(61,214,140,.15)} 100%{box-shadow:none} }
/* diff peek in changes list */
.wy-cl-diff { font-size:.69rem; color:var(--dim); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }
.wy-cl-diff-val { color:var(--muted); }
.wy-cl-diff-new { color:#4ade80; }

.pm-tier, .pm-type { transition: background var(--mt-fast), border-color var(--mt-fast), color var(--mt-fast), box-shadow var(--mt-fast); }
#tlPanelPass .pm-grid, #tlPanelAccess .pm-grid { display:grid; grid-template-columns:360px 1fr; gap:20px; align-items:start; }
@media (max-width:820px) { #tlPanelPass .pm-grid, #tlPanelAccess .pm-grid { grid-template-columns:1fr; } }

/* ── DONATIONS ── */
.don-wrap { padding:20px 16px 40px; }
.don-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.don-kpi { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:4px; }
.don-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.don-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.don-goal-wrap { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; margin-bottom:16px; }
.don-goal-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.don-goal-lbl { font-size:.82rem; font-weight:700; color:var(--text); }
.don-goal-edit { font-size:.75rem; color:var(--accent); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.don-thermo-track { height:10px; background:var(--border2); border-radius:99px; overflow:hidden; }
.don-thermo-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .5s cubic-bezier(.22,1,.36,1); }
.don-goal-sub { font-size:.78rem; color:var(--muted); margin-top:6px; }
.don-filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.don-filter { background:transparent; border:1px solid var(--border2); border-radius:99px; padding:6px 14px; font-size:.78rem; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); min-height:36px; }
.don-filter.active { background:var(--accent); border-color:var(--accent); color:#fafafa; }
.don-charts-row { display:grid; grid-template-columns:200px 1fr 1fr; gap:12px; margin-bottom:16px; align-items:start; }
.don-chart-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; }
.don-chart-card--bars { min-height:160px; }
.don-chart-title { font-size:.78rem; font-weight:700; color:var(--text); display:block; margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em; }
canvas#donTierCanvas { display:block; margin:0 auto; }
.don-tier-legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:.7rem; color:var(--muted); align-items:center; }
.don-leg-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:2px; }
.don-bar-row { display:grid; grid-template-columns:80px 1fr 52px; gap:6px; align-items:center; margin-bottom:6px; }
.don-bar-lbl { font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.don-bar-track { height:6px; background:var(--border2); border-radius:99px; overflow:hidden; }
.don-bar-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }
.don-bar-val { font-size:.72rem; color:var(--text); text-align:right; }
.don-table-wrap { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; }
.don-table-hd { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:12px; }
.don-table-sub { font-size:.72rem; color:var(--muted); font-weight:400; }
.don-row { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border2); font-size:.8rem; }
.don-row:last-child { border-bottom:none; }
.don-row-name { font-weight:600; color:var(--text); flex:1; }
.don-row-meta { color:var(--muted); font-size:.72rem; }
.don-row-amt { font-weight:700; color:var(--text); margin-left:auto; }
.don-tier-pill { padding:2px 8px; border-radius:99px; font-size:.68rem; font-weight:700; }
.don-tier-bronze  { background:rgba(179,64,244,.55)20; color:rgba(179,64,244,.55); }
.don-tier-silver  { background:rgba(237,232,255,.07); color:var(--muted); }
.don-tier-gold    { background:rgba(237,232,255,.09); color:var(--text); }
.don-tier-platinum{ background:rgba(179,64,244,.1); color:var(--muted); }
.don-empty { text-align:center; color:var(--muted); padding:48px; font-size:.9rem; }
@media(max-width:700px){
  .don-kpi-row { grid-template-columns:repeat(2,1fr); }
  .don-charts-row { grid-template-columns:1fr; }
}

/* ── ARTISTS ── */
.art-wrap { padding:20px 16px 40px; }
.art-kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.art-kpi { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:4px; }
.art-kpi-val { font-size:1.45rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--text); }
.art-kpi-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.art-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.art-filters { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.art-filter { background:transparent; border:1px solid var(--border2); border-radius:99px; padding:6px 14px; font-size:.78rem; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); min-height:36px; }
.art-filter.active { background:var(--accent); border-color:var(--accent); color:#fafafa; }
.art-add-btn { background:var(--accent); color:#fafafa; border:none; border-radius:99px; padding:9px 18px; font-size:.82rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; gap:6px; min-height:40px; white-space:nowrap; transition:opacity var(--mt-fast); }
.art-add-btn:active { opacity:.8; }
.art-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.art-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:14px; padding:16px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:box-shadow var(--mt-fast), border-color var(--mt-fast); width:100%; text-align:left; font-family:var(--sans); color:var(--text); }
.art-card:hover { border-color:var(--accent); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.art-card-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.art-avatar { width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fafafa; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.92rem; flex-shrink:0; }
.art-card-info { flex:1; min-width:0; }
.art-card-name { font-weight:700; color:var(--text); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.art-card-role { font-size:.75rem; color:var(--muted); }
.art-contract-pill { font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:99px; border:1px solid; white-space:nowrap; flex-shrink:0; }
.art-card-meta { display:flex; gap:10px; font-size:.72rem; color:var(--muted); flex-wrap:wrap; margin-bottom:10px; }
.art-progress-row { display:flex; gap:6px; flex-wrap:wrap; }
.art-chk-dot { font-size:.68rem; padding:2px 8px; border-radius:99px; background:var(--border2); color:var(--muted); }
.art-chk-ok { background:rgba(237,232,255,.08); color:var(--text); }
.art-modal-bg { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center; }
@media(min-width:640px){ .art-modal-bg { align-items:center; } }
.art-modal { background:var(--bg); border-radius:20px 20px 0 0; width:100%; max-width:560px; max-height:90dvh; overflow-y:auto; padding:0; }
@media(min-width:640px){ .art-modal { border-radius:16px; } }
.art-modal-hd { display:flex; justify-content:space-between; align-items:center; padding:18px 20px 14px; border-bottom:1px solid var(--border2); font-weight:800; font-size:.95rem; color:var(--text); position:sticky; top:0; background:var(--bg); z-index:1; }
.art-modal-close { background:none; border:none; font-size:1.2rem; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; min-width:36px; min-height:36px; display:flex; align-items:center; justify-content:center; }
.art-modal-body { padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.art-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.art-field { display:flex; flex-direction:column; gap:4px; }
.art-lbl { font-size:.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.art-inp { background:var(--bg2,var(--bg)); border:1px solid var(--border2); border-radius:8px; padding:9px 12px; font-size:.85rem; color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.art-inp:focus { border-color:var(--accent); }
.art-ta { resize:vertical; min-height:60px; }
.art-checklist-hd { font-size:.78rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.art-checklist-row { display:flex; gap:16px; flex-wrap:wrap; }
.art-check { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.art-modal-ft { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--border2); position:sticky; bottom:0; background:var(--bg); }
.art-modal-save { background:var(--accent); color:#fafafa; border:none; border-radius:99px; padding:10px 24px; font-size:.85rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; min-height:44px; }
.art-modal-del  { background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:99px; padding:10px 18px; font-size:.85rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; min-height:44px; }
.art-empty { text-align:center; color:var(--muted); padding:48px; font-size:.9rem; }
@media(max-width:480px){ .art-field-row { grid-template-columns:1fr; } }

/* ── NPS ── */
.nps-wrap { padding:20px 16px 40px; display:flex; flex-direction:column; gap:16px; }
.nps-hero-row { display:grid; grid-template-columns:180px 1fr; gap:16px; align-items:center; }
.nps-score-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:16px; padding:24px 16px; text-align:center; }
.nps-score-lbl { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
.nps-score-val { font-size:3.5rem; font-weight:900; letter-spacing:-.04em; line-height:1; }
.nps-green { color:var(--text); }
.nps-amber { color:var(--muted); }
.nps-red   { color:var(--dim); }
.nps-score-sub { font-size:.75rem; color:var(--muted); margin-top:6px; }
.nps-seg-row { display:flex; flex-direction:column; gap:10px; }
.nps-seg { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.nps-seg-pct { font-size:1.3rem; font-weight:800; color:var(--text); min-width:52px; }
.nps-seg--pro .nps-seg-pct { color:var(--text); }
.nps-seg--det .nps-seg-pct { color:var(--dim); }
.nps-seg-lbl { font-size:.78rem; color:var(--muted); }
.nps-dist-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; }
.nps-dist-title { font-size:.78rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.nps-dist-bars { display:grid; grid-template-columns:repeat(11,1fr); gap:4px; height:80px; align-items:flex-end; }
.nps-dist-col { display:flex; flex-direction:column; align-items:center; gap:2px; height:100%; justify-content:flex-end; }
.nps-dist-bar { width:100%; border-radius:4px 4px 0 0; min-height:4px; transition:height .4s ease; }
.nps-pro-bar  { background:var(--accent); }
.nps-pass-bar { background:var(--accent); }
.nps-det-bar  { background:var(--accent); }
.nps-dist-val { font-size:.6rem; color:var(--muted); }
.nps-dist-xaxis { display:grid; grid-template-columns:repeat(11,1fr); gap:4px; margin-top:4px; }
.nps-dist-xaxis span { font-size:.65rem; color:var(--muted); text-align:center; }
.nps-quotes-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; }
.nps-quotes-title { font-size:.78rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.nps-quote { font-size:.85rem; color:var(--text); padding:14px 0; border-bottom:1px solid var(--border2); }
.nps-quote:last-child { border-bottom:none; }
.nps-quote-by { font-size:.72rem; color:var(--muted); display:inline; }
.nps-add-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.nps-add-title { font-size:.82rem; font-weight:700; color:var(--text); }
.nps-score-btns { display:flex; gap:6px; flex-wrap:wrap; }
.nps-score-btn { min-width:36px; min-height:36px; border:1px solid var(--border2); border-radius:8px; background:transparent; color:var(--text); font-size:.85rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all var(--mt-fast); }
.nps-score-btn.active { background:var(--accent); border-color:var(--accent); color:#fafafa; }
.nps-add-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nps-inp { background:var(--bg2,var(--bg)); border:1px solid var(--border2); border-radius:8px; padding:9px 12px; font-size:.85rem; color:var(--text); font-family:var(--sans); outline:none; transition:border-color var(--mt-fast); -webkit-tap-highlight-color:transparent; }
.nps-inp:focus { border-color:var(--accent); }
.nps-ta { resize:vertical; min-height:60px; width:100%; box-sizing:border-box; }
.nps-submit-btn { background:var(--accent); color:#fafafa; border:none; border-radius:99px; padding:10px 24px; font-size:.85rem; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; min-height:44px; align-self:flex-start; }
.nps-table-card { background:var(--card,var(--bg2)); border:1px solid var(--border2); border-radius:12px; padding:16px; }
.nps-table-hd { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:12px; }
.nps-table-sub { font-size:.72rem; color:var(--muted); font-weight:400; }
.nps-row { display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--border2); font-size:.8rem; }
.nps-row:last-child { border-bottom:none; }
.nps-row-score { min-width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0; }
.nps-pro  { background:rgba(237,232,255,.08); color:var(--text); }
.nps-pass { background:rgba(237,232,255,.06); color:var(--muted); }
.nps-det  { background:rgba(237,232,255,.05); color:var(--dim); }
.nps-row-name { font-weight:600; color:var(--text); min-width:80px; }
.nps-row-edition { color:var(--muted); font-size:.72rem; }
.nps-row-comment { color:var(--text); flex:1; font-size:.78rem; }
.nps-row-del { background:none; border:none; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; font-size:.85rem; min-width:28px; min-height:28px; }
@media(max-width:580px){ .nps-hero-row { grid-template-columns:1fr; } .nps-add-row { grid-template-columns:1fr; } }

/* Portal standalone page utility classes */
.ptl-hint-sm { font-size:.7rem; color:var(--dim); margin-bottom:12px; }
.ptl-val-xs { font-size:.75rem; }
.ptl-warn-sm { font-size:.82rem; color:var(--warn); }
.ptl-dim-sm { font-size:.82rem; color:var(--dim); }
.ptl-dim-mb { font-size:.8rem; color:var(--dim); margin-bottom:10px; }
.ptl-mb0 { margin-bottom:0; }
.ptl-err-sm { font-size:.82rem; color:var(--err); margin-bottom:12px; }
.ptl-dim-xs { font-size:.68rem; color:var(--dim); }
.ptl-dim-xs-mt { font-size:.72rem; color:var(--dim); margin-top:2px; }
.ptl-footer-note { text-align:center; font-size:.72rem; color:var(--dim); margin-top:24px; }

/* Auto-extracted JS inline styles - round 2 */
.kr-u324 { margin-top:4px; }
.kr-u325 { display:flex;gap:8px;align-items:center; }
.kr-u326 { display:flex;gap:6px;margin-left:auto;flex-shrink:0;align-items:center;flex-wrap:wrap;justify-content:flex-end; }
.kr-u327 { display:flex;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r-pill);padding:2px;gap:0; }
.kr-u328 { padding:5px 12px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);white-space:nowrap;transition:all var(--mt-fast);-webkit-tap-highlight-color:transparent; }
.kr-u329 { padding:5px 12px;background:transparent;color:var(--muted);border:none;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);white-space:nowrap;transition:all var(--mt-fast);-webkit-tap-highlight-color:transparent; }
.kr-u330 { padding:6px 14px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);white-space:nowrap;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:5px; }
.kr-u331 { padding:12px;text-align:center;border-top:1px solid var(--border2); }
.kr-u332 { background:var(--s1);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 22px;font-size:.82rem;color:var(--muted);cursor:pointer;font-family:var(--sans); }
.kr-u333 { opacity:.55; }
.kr-u334 { font-size:.72rem;color:var(--dim);flex:1; }
.kr-u335 { display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.84rem;color:var(--muted); }
.kr-u336 { accent-color:var(--accent);width:15px;height:15px;cursor:pointer; }
.kr-u337 { color:var(--muted);font-weight:400; }
.kr-u338 { display:block;width:1px;height:1px;border:0;outline:0; }
.kr-u339 { background-color:#fafafa; }
.kr-u340 { max-width:520px;margin:0 auto;background-color:#fafafa;padding:0 0 64px; }
.kr-u341 { padding:40px 28px 36px;text-align:center; }
.kr-u342 { font-size:13px;color:#0a0a13;letter-spacing:5px;text-transform:uppercase;font-weight:600; }
.kr-u343 { padding:0 28px 36px; }
.kr-u344 { text-align:center;font-size:13px;color:#888888;line-height:2;margin-top:52px;padding:0 28px; }
.kr-u345 { text-align:center;margin-top:20px;padding:0 28px 24px; }
.kr-u346 { -webkit-tap-highlight-color:transparent; }
.kr-u347 { padding:40px 0;text-align:center;color:var(--muted);font-size:.84rem; }
.kr-u348 { color:var(--text);font-size:.78rem; }
.kr-u349 { margin-left:auto;color:var(--muted);font-weight:400;font-size:.72rem; }
.kr-u350 { padding:4px 10px;min-height:28px;font-size:.72rem; }
.kr-u351 { padding:20px;color:var(--muted);font-size:.84rem; }
.kr-u352 { padding:20px;color:var(--red,var(--accent));font-size:.84rem; }
.kr-u353 { display:flex;align-items:center;gap:10px;padding:14px 0 4px; }
.kr-u354 { font-weight:700;font-size:.92rem;color:var(--text); }
.kr-u355 { margin-left:auto;padding:7px 14px;background:var(--s1);border:1px solid var(--border2);border-radius:var(--r-pill);font-size:.78rem;font-weight:600;cursor:pointer;color:var(--text);font-family:var(--sans); }
.kr-u356 { padding:7px 16px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);font-size:.8rem;font-weight:700;cursor:pointer;font-family:var(--sans); }
.kr-u357 { padding:4px 10px;font-size:.72rem;background:var(--s0);border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;color:var(--text);font-family:var(--sans); }
.kr-u358 { padding:4px 10px;font-size:.72rem;background:transparent;border:1px solid var(--red,var(--accent));border-radius:var(--r-pill);cursor:pointer;color:var(--red,var(--accent));font-family:var(--sans); }
.kr-u359 { padding:6px 14px;background:transparent;border:1px solid var(--border2);border-radius:var(--r-pill);font-size:.8rem;cursor:pointer;color:var(--muted);font-family:var(--sans); }
.kr-u360 { font-weight:800;font-size:.95rem;color:var(--text); }
.kr-u361 { font-size:.75rem;color:var(--muted); }
.kr-u362 { margin-left:auto;padding:7px 16px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;gap:6px; }
.kr-u363 { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.kr-u364 { font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px; }
.kr-u365 { border:1px solid var(--border2);border-radius:var(--r);background:var(--s0);max-height:360px;overflow-y:auto; }
.kr-u366 { padding:3px 8px;font-size:.7rem;background:transparent;border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;color:var(--muted);font-family:var(--sans);flex-shrink:0; }
.kr-u367 { width:100%;padding:8px 12px;border:1px solid var(--border2);border-radius:var(--r-pill);background:var(--s1);color:var(--text);font-size:.82rem;font-family:var(--sans);outline:none;box-sizing:border-box;margin-bottom:8px; }
.kr-u368 { border:1px solid var(--border2);border-radius:var(--r);background:var(--s0);max-height:320px;overflow-y:auto; }
.kr-u369 { padding:3px 8px;font-size:.7rem;background:var(--accent);border:none;border-radius:var(--r-pill);cursor:pointer;color:#fafafa;font-family:var(--sans);flex-shrink:0; }
.kr-u370 { background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:28px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.4); }
.kr-u371 { font-weight:800;font-size:1rem;color:var(--text);margin-bottom:16px; }
.kr-u372 { width:100%;padding:10px 14px;border:1px solid var(--border2);border-radius:var(--r);background:var(--s1);color:var(--text);font-size:.9rem;font-family:var(--sans);outline:none;box-sizing:border-box;margin-bottom:16px; }
.kr-u373 { color:var(--red,var(--accent));font-size:.78rem;margin-bottom:10px;display:none; }
.kr-u374 { display:flex;gap:10px;justify-content:flex-end; }
.kr-u375 { padding:9px 18px;background:transparent;border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;color:var(--muted);font-family:var(--sans); }
.kr-u376 { padding:9px 18px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill);cursor:pointer;font-weight:700;font-family:var(--sans); }
.kr-u377 { display:flex;align-items:center;gap:8px;font-size:.83rem;padding:5px 8px;background:var(--s0);border-radius:6px;border:1px solid var(--border2); }
.kr-u378 { color:var(--muted);min-width:18px; }
.kr-u379 { font-size:.7rem;color:var(--muted); }
.kr-u380 { border:none;background:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:2px 4px; }
.kr-u381 { display:flex;flex-direction:column;align-items:flex-end;line-height:1.2; }
.kr-u382 { font-size:.68rem;color:var(--text);font-weight:700; }
.kr-u383 { margin-bottom:10px; }
.kr-u384 { display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-bottom:4px; }
.kr-u385 { font-size:.68rem;gap:8px;display:flex; }
.kr-u386 { color:var(--text);font-weight:600; }
.kr-u387 { height:7px;border-radius:999px;background:rgba(237,232,255,.06);overflow:hidden;display:flex;gap:1px; }
.kr-u388 { align-items:center; }
.kr-u389 { display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;min-width:60px; }
.kr-u390 { color:var(--muted);font-size:.78rem;margin-left:4px; }
.kr-u391 { color:var(--muted);font-size:.7rem;margin-left:5px; }
.kr-u392 { color:var(--muted);font-size:.85rem; }
.kr-u393 { display:flex;flex-direction:column;gap:4px;margin-bottom:14px; }
.kr-u394 { display:flex;justify-content:space-between;font-size:.85rem; }
.kr-u395 { min-width:160px; }
.kr-u396 { font-size:.68rem;color:var(--muted); }
.kr-u397 { min-width:80px; }
.kr-u398 { width:100%;font-size:.72rem;color:var(--muted);padding-left:2px; }
.kr-u399 { display:flex;justify-content:space-between;font-size:.84rem;padding:6px 0;border-bottom:1px solid var(--border); }
.kr-u400 { color:var(--text);font-weight:700; }
.kr-u401 { color:var(--muted);white-space:nowrap;font-size:.78rem; }
.kr-u402 { display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background var(--mt-fast); }
.kr-u403 { background:var(--s0);border:1px solid var(--border2);border-radius:14px;padding:20px 22px;min-width:260px;max-width:320px;width:90%;font-family:var(--sans);box-shadow:0 16px 48px rgba(0,0,0,.3); }
.kr-u404 { font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:14px; }
.kr-u405 { display:flex;flex-direction:column;gap:2px;margin-bottom:8px; }
.kr-u406 { font-size:.8rem;color:var(--muted); }
.kr-u407 { font-size:.76rem;font-weight:600;color:var(--muted);letter-spacing:.04em; }
.kr-u408 { display:flex;gap:7px;align-items:center; }
.kr-u409 { flex:1;padding:6px 9px;border-radius:8px;border:1px solid var(--border2);background:var(--s0);color:var(--text);font-size:.82rem;font-family:var(--sans); }
.kr-u410 { width:30px;height:30px;border-radius:6px;border:1px solid var(--border2);background:transparent;cursor:pointer;padding:2px;flex-shrink:0; }
.kr-u411 { display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);border:1px dashed var(--border2);background:transparent;cursor:pointer;font-size:.78rem;color:var(--accent);font-family:var(--sans);margin-bottom:12px;-webkit-tap-highlight-color:transparent; }
.kr-u412 { display:flex;gap:8px;justify-content:flex-end; }
.kr-u413 { padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--border2);background:transparent;cursor:pointer;font-size:.8rem;color:var(--muted);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u414 { padding:7px 14px;border-radius:var(--r-pill);border:none;background:var(--accent);color:#fafafa;cursor:pointer;font-size:.8rem;font-weight:700;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u415 { display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border2); }
.kr-u416 { flex:1;font-size:.83rem;color:var(--text); }
.kr-u417 { font-size:.73rem;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--border2);background:transparent;cursor:pointer;color:var(--muted);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u418 { font-size:.73rem;padding:3px 9px;border-radius:var(--r-pill);border:1px solid rgba(179,64,244,.3);background:transparent;cursor:pointer;color:var(--accent);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u419 { margin-top:12px;padding-top:12px;border-top:1px solid var(--border2); }
.kr-u420 { font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:8px; }
.kr-u421 { flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--s1);color:var(--text);font-size:.82rem;font-family:var(--sans); }
.kr-u422 { width:32px;height:32px;border-radius:6px;border:1px solid var(--border2);background:transparent;cursor:pointer;padding:2px; }
.kr-u423 { padding:7px 14px;border-radius:var(--r-pill);border:none;background:var(--accent);color:#fafafa;font-size:.8rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u424 { background:var(--s0);border:1px solid var(--border2);border-radius:14px;padding:20px 22px;min-width:300px;max-width:380px;width:92%;font-family:var(--sans);box-shadow:0 16px 48px rgba(0,0,0,.3);max-height:80vh;overflow-y:auto; }
.kr-u425 { margin-top:16px;display:flex;justify-content:flex-end; }
.kr-u426 { display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border2); }
.kr-u427 { flex:1;padding:6px 9px;border-radius:8px;border:1px solid var(--border2);background:var(--s1);color:var(--text);font-size:.82rem;font-family:var(--sans); }
.kr-u428 { width:30px;height:30px;border-radius:6px;border:1px solid var(--border2);background:transparent;cursor:pointer;padding:2px; }
.kr-u429 { padding:5px 11px;border-radius:var(--r-pill);border:none;background:var(--accent);color:#fafafa;font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u430 { padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--border2);background:transparent;font-size:.78rem;cursor:pointer;color:var(--muted);font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u431 { padding:0 0 8px 0;display:flex;flex-wrap:wrap;gap:6px; }
.kr-u432 { margin-top:6px;font-size:.75rem;color:var(--muted); }
.kr-u433 { font-weight:700;color:var(--text); }
.kr-u434 { opacity:.6; }
.kr-u435 { margin-top:10px;padding-top:10px;border-top:1px solid var(--border2); }
.kr-u436 { font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:6px; }
.kr-u437 { font-weight:400;opacity:.55; }
.kr-u438 { border-bottom:1px solid var(--border2); }
.kr-u439 { color:var(--muted);white-space:nowrap; }
.kr-u440 { max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text); }
.kr-u441 { display:inline-flex;align-items:center;gap:5px; }
.kr-u442 { max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted); }
.kr-u443 { padding:3px 9px;font-size:.72rem; }
.kr-u444 { padding:6px 10px;color:var(--muted);font-size:.73rem; }
.kr-u445 { border-top:1px solid var(--border2); }
.kr-u446 { padding:16px 20px 10px;display:flex;align-items:center;gap:10px; }
.kr-u447 { font-size:.78rem;padding:4px 12px;background:transparent;border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;color:var(--muted);font-family:var(--sans); }
.kr-u448 { font-size:.82rem;font-weight:600;color:var(--text); }
.kr-u449 { font-size:.78rem;color:var(--muted);min-width:80px; }
.kr-u450 { font-size:.75rem;padding:4px 12px;background:transparent;border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;color:var(--text);font-family:var(--sans); }
.kr-u451 { font-size:.75rem;padding:4px 12px;background:transparent;border:1px solid var(--accent)33;border-radius:var(--r-pill);cursor:pointer;color:var(--accent);font-family:var(--sans); }
.kr-u452 { width:100%;border-collapse:collapse;font-size:.82rem; }
.kr-u453 { border-bottom:1px solid var(--border2);text-align:left; }
.kr-u454 { padding:10px 12px 10px 16px;width:32px; }
.kr-u455 { cursor:pointer;accent-color:var(--accent); }
.kr-u456 { padding:10px 8px 10px 0;color:var(--muted);font-weight:600; }
.kr-u457 { padding:10px 12px;color:var(--muted);font-weight:600; }
.kr-u458 { padding:10px 12px;color:var(--muted);font-weight:600;text-align:right; }
.kr-u459 { padding:10px 12px; }
.kr-u460 { padding:10px 12px 10px 16px; }
.kr-u461 { padding:12px 8px 12px 0; }
.kr-u462 { font-weight:600;color:var(--text);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u463 { font-size:.73rem;color:var(--muted); }
.kr-u464 { padding:12px;color:var(--muted);white-space:nowrap;font-size:.78rem; }
.kr-u465 { padding:12px;text-align:right;color:var(--muted); }
.kr-u466 { padding:12px;display:flex;gap:6px;align-items:center; }
.kr-u467 { font-size:.75rem;padding:4px 10px;background:transparent;border:1px solid var(--border2);border-radius:var(--r-pill);cursor:pointer;color:var(--text);font-family:var(--sans); }
.kr-u468 { font-size:.75rem;padding:4px 10px;background:transparent;border:1px solid var(--accent)33;border-radius:var(--r-pill);cursor:pointer;color:var(--accent);font-family:var(--sans); }
.kr-u469 { font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px; }
.kr-u470 { display:flex;justify-content:space-between;font-size:.83rem;padding:5px 0;border-bottom:1px solid var(--border); }
.kr-u471 { float:right;opacity:.5; }
.kr-u472 { gap:6px;align-items:center;flex-wrap:wrap; }
.kr-u473 { max-width:160px;overflow:hidden;text-overflow:ellipsis; }
.kr-u474 { font-weight:700; }
.kr-u475 { display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04); }
.kr-u476 { width:18px;text-align:right;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums; }
.kr-u477 { font-size:1.1rem;line-height:1;width:22px;text-align:center; }
.kr-u478 { flex:1;font-size:.82rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kr-u479 { width:60px;height:3px;background:rgba(179,64,244,.15);border-radius:2px;overflow:hidden; }
.kr-u480 { font-size:.82rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;min-width:36px;text-align:right; }
.kr-u481 { font-size:.72rem;color:var(--muted);min-width:28px; }
.kr-u482 { color:var(--muted);font-size:.78rem; }
.kr-u483 { margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;gap:20px;flex-wrap:wrap; }
.kr-u484 { display:flex;flex-direction:column;gap:2px; }
.kr-u485 { font-size:1.4rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums; }
.kr-u486 { color:var(--muted);font-size:.78rem;margin-left:auto;white-space:nowrap; }
.kr-u487 { display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--border2);font-size:.72rem;font-weight:600;color:var(--muted); }
.kr-u488 { display:flex;flex-wrap:wrap;gap:6px;padding-top:8px; }
.kr-u489 { display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.kr-u490 { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--violet); }
.kr-u491 { font-size:.82rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap; }
.kr-u492 { font-size:.88rem;font-weight:600;color:var(--text);line-height:1.45; }
.kr-u493 { font-size:.8rem;color:var(--muted);line-height:1.55;border-top:1px solid var(--border2);padding-top:8px; }
.kr-u494 { padding:20px 16px;text-align:center;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--s1));border:1px solid rgba(179,64,244,.3); }
.kr-u495 { font-size:1.25rem;font-weight:900;color:var(--text);margin-bottom:4px; }
.kr-u496 { font-size:.82rem;color:var(--muted); }
.kr-u497 { font-size:.82rem;font-weight:700;color:var(--text); }
.kr-u498 { display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px; }
.kr-u499 { height:72px;border-radius:12px;background:var(--s0);border:1px solid var(--border2);animation:pulse 1.4s ease-in-out infinite;opacity:.5; }
.kr-u500 { font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px; }
.kr-u501 { display:flex;align-items:center;gap:4px; }
.kr-u502 { font-size:.7rem;color:var(--muted);margin-top:4px; }
.kr-u503 { font-size:.75rem;font-weight:700; }
.kr-u504 { padding:16px;border-radius:12px;background:var(--s0);border:1px solid var(--border2);font-size:.85rem;color:var(--muted); }
.kr-u505 { background:var(--s0);border-radius:12px;padding:12px 16px;border:1px solid var(--border2); }
.kr-u506 { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap; }
.kr-u507 { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); }
.kr-u508 { display:flex;gap:8px;flex-wrap:wrap; }
.kr-u509 { padding:8px 16px;min-height:44px;background:transparent;border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:.78rem;font-weight:700;cursor:pointer;transition:opacity var(--mt-fast);-webkit-tap-highlight-color:transparent; }
.kr-u510 { display:inline-flex;align-items:center;padding:8px 16px;min-height:44px;background:var(--violet);border:none;border-radius:8px;color:var(--ink);font-size:.78rem;font-weight:700;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent; }
.kr-u511 { padding:8px 16px;min-height:44px;background:var(--violet);border:none;border-radius:8px;color:var(--ink);font-size:.78rem;font-weight:700;cursor:pointer;transition:opacity var(--mt-fast);-webkit-tap-highlight-color:transparent; }
.kr-u512 { width:100%;box-sizing:border-box;background:var(--s1);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;font-size:.85rem;color:var(--text);line-height:1.65;font-family:var(--sans);resize:vertical;outline:none; }
.kr-u513 { padding:4px 12px;background:var(--accent);color:#fafafa;border:none;border-radius:var(--r-pill,20px);cursor:pointer;font-size:.78rem;font-weight:700;font-family:var(--sans); }
.kr-u514 { border-radius:0; }
.kr-u515 { font-size:.68rem;color:var(--muted);opacity:.85;margin-right:2px;display:inline-flex;align-items:center;gap:3px; }
.kr-u516 { font-family:var(--mono);font-size:.72rem; }
.kr-u517 { vertical-align:middle;margin-right:2px; }
.kr-u518 { font-size:.68rem;color:var(--muted);opacity:.85;display:inline-flex;align-items:center;gap:3px; }
.kr-u519 { border-radius:12px;display:block;margin:0 auto; }
.kr-u520 { font-size:.7rem;color:var(--muted);margin-top:6px; }
.kr-u521 { font-size:.75rem; }
.kr-u522 { padding:3px 8px;font-size:.72rem; }
.kr-u523 { width:100%;display:block;box-sizing:border-box;margin-bottom:8px;padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:.9rem;background:#f9f9f9;color:#666; }
.kr-u524 { display:block;font-weight:600;font-size:.8rem;color:#555;margin:12px 0 4px; }
.kr-u525 { width:100%;display:block;border-radius:6px;box-sizing:border-box;padding:9px 12px;margin:0 0 1px;font-size:.95rem;border:1px solid #ddd; }
.kr-u526 { max-width:360px;font-family:system-ui,sans-serif; }
.kr-u527 { margin:0 0 14px;font-size:1.1rem; }
.kr-u528 { font-weight:600;width:100%;border:none;pointer;display:block;color:#fafafa;border-radius:6px;background:#007aff;font-size:.95rem;padding:11px 24px;margin:16px 0 0; }
.kr-u529 { text-decoration:none; }
.kr-u530 { font-size:.9rem;font-weight:800;margin-bottom:3px;letter-spacing:.2px; }
.kr-u531 { font-size:.78rem;opacity:.9;line-height:1.4; }
.kr-u532 { position:absolute;top:8px;right:8px;background:rgba(255,255,255,.15);border:none;color:#fafafa;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:var(--sans);-webkit-tap-highlight-color:transparent; }
.kr-u533 { flex-shrink:0;opacity:.4; }
.kr-u534 { font-size:.7rem;font-weight:700;color:var(--muted); }
.kr-u535 { display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text);cursor:pointer;padding:5px 8px;border-radius:7px;background:var(--s1);border:1px solid var(--border2);user-select:none; }
.kr-u536 { accent-color:var(--accent);width:14px;height:14px; }
.kr-u537 { display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--s1);border:1px solid var(--border2);border-radius:10px; }
.kr-u538 { font-size:.82rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px; }
.kr-u539 { font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:' + _roleColor + ';background:rgba(255,255,255,.05);border-radius:5px;padding:1px 6px; }
.kr-u540 { font-size:.7rem;color:var(--dim);margin-top:2px; }
.kr-u541 { background:none;border:1px solid var(--border2);border-radius:7px;padding:4px 9px;font-size:.72rem;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent; }
.kr-u542 { background:none;border:1px solid rgba(255,80,80,.3);border-radius:7px;padding:4px 9px;font-size:.72rem;color:rgba(255,80,80,.8);cursor:pointer;-webkit-tap-highlight-color:transparent; }
.kr-u543 { font-weight:400;color:var(--dim); }
.kr-u544 { margin-left:auto; }
.kr-u545 { margin-bottom:8px; }
.kr-u546 { flex:1;line-height:1.3; }
.kr-u547 { transition:stroke-dashoffset .5s ease; }
.kr-u548 { display:flex;align-items:center;gap:6px;font-size:.72rem; }
.kr-u549 { flex:1;color:var(--text); }
.kr-u550 { font-weight:700;color:var(--muted); }
.kr-u551 { color:var(--muted);min-width:28px;text-align:right; }
.kr-u552 { width:80px; }
.kr-u553 { font-size:.72rem;color:var(--dim); }
.kr-u554 { margin:0 0 16px;font-size:16px;color:#555555;line-height:1.75; }
.kr-u555 { color:#b340f4;text-decoration:none; }
.kr-u556 { margin:0 0 24px;font-size:16px;color:#555555;line-height:1.75; }
.kr-u557 { margin:0 0 4px;font-size:16px;font-weight:700;color:#000000;line-height:1.4; }
.kr-u558 { margin:0 0 20px;font-size:13px;color:#888888;letter-spacing:1px; }
.kr-u559 { margin:0 0 16px;font-size:12px;color:#888888;line-height:1.6;font-style:italic; }
.kr-u560 { margin:0;text-align:center; }
.kr-u561 { display:inline-block;border:0;opacity:.75; }
.kr-u562 { font-size:14px;font-weight:600;color:#b340f4;line-height:1.3;letter-spacing:.3px;margin-top:8px; }
.kr-u563 { margin-bottom:24px; }
.kr-u564 { vertical-align:middle;padding-right:20px; }
.kr-u565 { vertical-align:middle; }
.kr-u566 { font-size:26px;font-weight:900;color:#000000;line-height:1.05;letter-spacing:-1px; }
.kr-u567 { font-size:14px;font-weight:600;color:#b340f4;line-height:1.3;letter-spacing:.3px;margin-bottom:24px; }
.kr-u568 { vertical-align:middle;text-align:right;padding-left:12px; }
.kr-u569 { display:inline-block;text-decoration:none;margin-bottom:14px; }
.kr-u570 { display:block;width:68px;height:68px;border:0; }
.kr-u571 { font-size:13px;font-weight:700;color:#b340f4;text-decoration:none;letter-spacing:3px;text-transform:uppercase;display:block;margin-bottom:14px; }
.kr-u572 { font-size:13px;color:#0a0a13;letter-spacing:3px;text-transform:uppercase;font-weight:600; }
.kr-u573 { margin:0 28px;border-radius:20px;overflow:hidden; }
.kr-u574 { display:block;border-radius:6px;margin:0 auto;max-width:100%;height:auto; }
.kr-u575 { vertical-align:middle;padding-left:24px; }
.kr-u576 { text-align:center;font-size:13px;color:#888888;line-height:2;margin-top:32px;padding:0 28px; }
.kr-u577 { color:' + _esc(c.color) + '; }
.kr-u578 { display:flex;justify-content:space-between;align-items:center; }
.kr-u579 { font-size:.72rem;color:var(--muted); }
.kr-u580 { color:' + color + '; }
.kr-u581 { font-weight:' + (i===0?'600':'400') + '; }
.kr-u582 { width:' + pct + '%;background:' + barColor + '; }
.kr-u583 { font-size:.65rem;color:var(--muted); }
.kr-u584 { grid-template-columns:28px repeat(24,1fr); }
.kr-u585 { background:rgba(179,64,244,' + alpha + '); }
.kr-u586 { display:flex;align-items:center;gap:5px;margin-top:6px;font-size:.68rem;color:var(--muted); }
.kr-u587 { width:10px;height:10px;border-radius:2px;background:rgba(179,64,244,' + (a/5*0.9).toFixed(2) + '); }
.kr-u588 { background:' + dot + '; }
.kr-u589 { width:' + barPct + '%;background:' + barColor + '; }
.kr-u590 { width:' + pct + '%;background:var(--accent); }
.kr-u591 { font-size:.65rem;color:#34C759; }
.kr-u592 { height:' + h + 'px;opacity:' + (d[1] ? 1 : 0.15) + '; }
.kr-u593 { color:var(--text); }
.kr-u594 { width:' + pct + '%;background:' + bc + '; }
.kr-u595 { font-size:.74rem;color:var(--muted);margin-top:6px; }
.kr-u596 { color:#FF9F0A; }
.kr-u597 { width:' + r.ms_pct + '%;background:var(--accent); }
.kr-u598 { font-size:.65rem;color:var(--muted);white-space:nowrap; }
.kr-u599 { color:var(--muted);font-size:.72rem; }
.kr-u600 { ' + dStyle + '; }
.kr-u601 { height:' + h + 'px;background:' + bg + '; }
.kr-u602 { color:var(--accent); }
.kr-u603 { margin-top:8px; }
.kr-u604 { font-size:.72rem;color:var(--muted);margin-top:4px; }
.kr-u605 { width:' + lc.pct + '%;background:' + color + ';height:6px;border-radius:3px;margin-top:8px; }
.kr-u606 { font-size:.74rem;color:var(--muted);margin-top:4px; }
.kr-u607 { height:' + hA + 'px; }
.kr-u608 { height:' + hB + 'px; }
.kr-u609 { display:flex;gap:12px;margin-top:6px;font-size:.72rem; }
.kr-u610 { width:' + pctS + '%;background:#FF9F0A; }
.kr-u611 { width:' + pctM + '%;background:rgba(52,199,89,.7); }
.kr-u612 { background:#FF9F0A; }
.kr-u613 { background:rgba(52,199,89,.7); }
.kr-u614 { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u615 { font-size:.72rem;color:var(--dim);padding:6px 0; }
.kr-u616 { display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent; }
.kr-u617 { accent-color:var(--accent);width:14px;height:14px;flex-shrink:0; }
.kr-u618 { font-size:.62rem;color:var(--dim);margin-left:2px; }
.kr-u619 { padding-left:192px;margin-bottom:4px; }
.kr-u620 { min-width:180px; }
.kr-u621 { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u622 { flex:1;position:relative; }
.kr-u623 { font-size:.6rem; }
.kr-u624 { padding:40px;text-align:center; }
.kr-u625 { margin-bottom:2px; }
.kr-u626 { flex:1;position:relative;height:6px; }
.kr-u627 { opacity:.3; }
.kr-u628 { font-size:.9rem;font-weight:700;color:var(--muted); }
.kr-u629 { font-size:.78rem;color:var(--dim); }
.kr-u630 { color:var(--accent);font-weight:800; }
.kr-u631 { max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u632 { opacity:.55;font-size:.75rem; }
.kr-u633 { cursor:default;opacity:.5; }
.kr-u634 { display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border2); }
.kr-u635 { font-size:.82rem;color:var(--text);font-weight:600; }
.kr-u636 { font-size:.68rem;color:var(--dim); }
.kr-u637 { font-size:.75rem;color:var(--dim);padding:8px 0; }
.kr-u638 { font-size:.68rem;font-weight:800;background:rgba(179,64,244,.2);color:var(--accent);border-radius:99px;padding:1px 7px; }
.kr-u639 { font-size:.8rem;color:var(--dim);margin-top:4px; }
.kr-u640 { pointer-events:all; }
.kr-u641 { display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border2); }
.kr-u642 { flex:1;font-size:.82rem;color:var(--text); }
.kr-u643 { background:none;border:none;color:var(--dim);cursor:pointer;font-size:.85rem;padding:2px 6px;-webkit-tap-highlight-color:transparent; }
.kr-u644 { cursor:pointer; }
.kr-u645 { height:'+ht+'px; }
.kr-u646 { height:'+height+'px;background:'+col+'; }
.kr-u647 { padding:6px 14px;font-size:.78rem; }
.kr-u648 { background:'+(_URG_DOTS[t.urgency]||'#999')+'; }
.kr-u649 { background:'+col.bg+'; }
.kr-u650 { background:'+c+'22;color:'+c+';border:1px solid '+c+'44; }
.kr-u651 { text-align:center;margin-top:10px; }
.kr-u652 { width:'+pct+'%; }
.kr-u653 { padding:7px 14px;font-size:.78rem; }
.kr-u654 { flex:1; }
.kr-u655 { padding:3px 10px;font-size:.72rem;border-radius:12px;width:auto; }
.kr-u656 { margin-top:20px; }
.kr-u657 { background:rgba(255,159,10,.15);color:#FF9F0A;border-color:rgba(255,159,10,.3); }
.kr-u658 { background:'+sc+'22;color:'+sc+';border-color:'+sc+'44; }
.kr-u659 { padding:5px 10px;font-size:.73rem;color:#34C759;border-color:rgba(52,199,89,.3); }
.kr-u660 { padding:5px 10px;font-size:.73rem;color:#FF3B30;border-color:rgba(255,59,48,.3); }
.kr-u661 { margin-bottom:14px; }
.kr-u662 { margin-top:14px;padding:10px 20px; }
.kr-u663 { visibility:hidden; }
.kr-u664 { display:flex;gap:4px;flex-wrap:wrap;margin-top:2px; }
.kr-u665 { background:'+uc+'22;color:'+uc+';border-color:'+uc+'44; }
.kr-u666 { '+(curLinkType?'':'display:none')+'; }
.kr-u667 { max-width:960px;margin:0 auto; }
.kr-u668 { font-weight:600;color:var(--text); }
.kr-u669 { --_acc:' + acc + '; }
.kr-u670 { font-size:.72rem;color:var(--dim);margin:4px 0 0; }
.kr-u671 { margin-top:8px;display:block; }
.kr-u672 { margin:28px auto;border-collapse:separate; }
.kr-u673 { background-color:#7b1fa2 !important;border-radius:100px; }
.kr-u674 { display:inline-block;padding:15px 36px;font-size:15px;font-weight:800;color:#fafafa !important;text-decoration:none;letter-spacing:.4px;line-height:1;font-family:-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; }
.kr-u675 { display:block;width:100%;max-width:464px;height:auto;margin:16px auto;border-radius:8px; }
.kr-u676 { color:#b340f4;text-decoration:underline; }
.kr-u677 { margin:28px auto;border-collapse:separate;mso-table-lspace:0pt;mso-table-rspace:0pt; }
.kr-u678 { background-color:#7b1fa2 !important;border-radius:100px;mso-padding-alt:0; }
.kr-u679 { display:inline-block;padding:15px 36px;font-size:15px;font-weight:800;color:#fafafa !important;text-decoration:none;letter-spacing:.4px;line-height:1;font-family:-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;mso-line-height-rule:exactly;-webkit-text-size-adjust:none; }
.kr-u680 { pointer-events:none; }
.kr-u681 { font-size:.73rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u682 { font-size:.72rem;color:var(--muted);margin-bottom:6px; }
.kr-u683 { display:flex;flex-wrap:wrap;gap:6px; }
.kr-u684 { display:inline-flex;align-items:center;gap:6px;padding:5px 4px 5px 12px;background:rgba(179,64,244,.12);border:1px solid rgba(179,64,244,.35);border-radius:100px;font-size:.75rem;color:var(--text); }
.kr-u685 { background:none;border:none;color:var(--accent);cursor:pointer;padding:2px 6px;font-size:.9rem;line-height:1;-webkit-tap-highlight-color:transparent; }
.kr-u686 { font-size:.85rem;color:var(--muted);padding:4px 0; }
.kr-u687 { padding:8px 10px;border-bottom:1px solid var(--border2); }
.kr-u688 { padding:8px 10px;border-bottom:1px solid var(--border2);color:var(--text);font-weight:700;font-variant-numeric:tabular-nums; }
.kr-u689 { padding:8px 10px;border-bottom:1px solid var(--border2);color:var(--muted); }
.kr-u690 { padding:8px 10px;border-bottom:1px solid var(--border2);color:var(--muted);font-variant-numeric:tabular-nums; }
.kr-u691 { text-align:center;color:var(--muted);padding:18px; }
.kr-u692 { font-size:.68rem;padding:1px 6px;border-radius:999px;background:rgba(237,232,255,.07);color:var(--muted);border:1px solid rgba(237,232,255,.14);vertical-align:middle; }
.kr-u693 { color:var(--muted);font-variant-numeric:tabular-nums; }
.kr-u694 { background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:2px 6px;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center; }
.kr-u695 { padding:0 12px 4px; }
.kr-u696 { font-size:.68rem;font-weight:700;color:var(--muted);border-bottom:2px solid var(--border2); }
.kr-u697 { text-align:right;color:var(--muted); }
.kr-u698 { padding:20px;color:var(--muted);font-size:.83rem;text-align:center; }
.kr-u699 { flex:0 0 auto; }
.kr-u700 { gap:8px; }
.kr-u701 { gap:6px; }
.kr-u702 { flex:2; }
.kr-u703 { margin-bottom:20px; }
.kr-u704 { color:var(--muted);font-size:.87rem;margin-bottom:16px; }
.kr-u705 { margin-top:12px; }
.kr-u706 { margin-top:6px; }
.kr-u707 { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px; }
.kr-u708 { margin-bottom:0; }
.kr-u709 { font-size:.76rem;color:var(--muted);margin-left:auto; }
.kr-u710 { font:600 13px/1 var(--sans);color:var(--text); }
.kr-u711 { border-color:rgba(179,64,244,.4);color:var(--accent); }
.kr-u712 { border-color:rgba(179,64,244,.5);color:#b340f4;font-family:monospace;letter-spacing:.1em; }
.kr-u713 { background:rgba(179,64,244,.13);color:#b340f4; }
.kr-u714 { background:rgba(237,232,255,.05);color:var(--muted); }
.kr-u715 { color:var(--dim);white-space:nowrap; }
.kr-u716 { font-weight:600; }
.kr-u717 { font-size:.75rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u718 { font-family:var(--mono);font-size:.73rem;color:var(--dim); }
.kr-u719 { color:var(--accent);text-decoration:none; }
.kr-u720 { font-family:var(--mono);font-size:.75rem; }
.kr-u721 { min-height:36px;padding:6px 12px;font-size:.75rem; }
.kr-u722 { margin-top:6px;font-size:.72rem; }
.kr-u723 { max-width:740px;margin:0 auto; }
.kr-u724 { display:flex;gap:8px; }
.kr-u725 { background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-family:system-ui,sans-serif;font-size:var(--font-xs);padding:8px 20px;cursor:pointer;opacity:var(--opacity-rest);transition:border-color var(--transition),color var(--transition),opacity var(--transition);margin-bottom:var(--space-1);width:100%; }
.kr-u726 { color:rgba(0,0,0,.3);font-size:.82rem; }
.kr-u727 { color:rgba(200,0,0,.8);font-size:.78rem; }
.kr-u728 { background:rgba(179,64,244,.1);border:1px solid rgba(179,64,244,.3);border-radius:10px;padding:12px 14px; }
.kr-u729 { font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,232,255,.35);margin-bottom:6px; }
.kr-u730 { font-size:.88rem;color:var(--paper);word-break:break-all; }
.kr-u731 { font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,232,255,.25);margin:12px 0 6px; }
.kr-u732 { font-size:.78rem;padding:6px 0;border-bottom:1px solid rgba(237,232,255,.05);display:flex;gap:8px;align-items:center; }
.kr-u733 { color:rgba(237,232,255,.28);flex-shrink:0; }
.kr-u734 { color:rgba(237,232,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u735 { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.kr-u736 { font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,232,255,.3); }
.kr-u737 { font-size:.68rem;background:none;border:none;color:rgba(237,232,255,.25);cursor:pointer;padding:2px 6px;border-radius:6px;-webkit-tap-highlight-color:transparent; }
.kr-u738 { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(237,232,255,.05);font-size:.78rem; }
.kr-u739 { flex:1;min-width:0; }
.kr-u740 { color:rgba(237,232,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kr-u741 { color:rgba(237,232,255,.28);font-size:.68rem;margin-top:2px; }
.kr-u742 { display:flex;align-items:center;gap:4px;flex-shrink:0; }
.kr-u743 { font-size:.6rem;padding:2px 6px;border-radius:99px;background:rgba(179,64,244,.15);color:var(--accent); }
.kr-u744 { font-size:.6rem;padding:2px 6px;border-radius:99px;background:rgba(179,64,244,.1);color:rgba(179,64,244,.7); }
.kr-u745 { background:none;border:none;color:rgba(237,232,255,.2);cursor:pointer;font-size:.8rem;padding:2px 5px;-webkit-tap-highlight-color:transparent; }
.kr-u746 { padding:24px;text-align:center; }
.kr-u747 { padding:8px 20px;background:var(--surface2);border-bottom:1px solid var(--border2);align-items:center;gap:10px; }

/* ── Event Page Publish Panel ──────────────────────────────── */
.ep-panel-overlay{position:fixed;inset:0;z-index:9700;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.ep-panel-overlay[hidden]{display:none!important;}
@media(min-width:600px){.ep-panel-overlay{align-items:center;}}
.ep-panel{background:var(--bg2,#111316);border:1px solid var(--border2);border-radius:16px 16px 0 0;width:100%;max-width:500px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;}
@media(min-width:600px){.ep-panel{border-radius:16px;}}
.ep-panel-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
.ep-panel-title{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--text);}
.ep-panel-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;width:28px;height:28px;}
.ep-panel-close:hover{color:var(--text);}
.ep-panel-section{padding:16px 20px 0;}
.ep-panel-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,rgba(200,200,200,.35));margin-bottom:10px;}
.ep-inp{display:block;width:100%;background:var(--surface,rgba(255,255,255,.04));border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.84rem;padding:9px 12px;outline:none;transition:border-color var(--mt-fast);margin-bottom:8px;-webkit-tap-highlight-color:transparent;}
.ep-inp:hover{border-color:var(--border2);}
.ep-inp:focus{border-color:var(--accent);}
.ep-inp-sm{width:calc(50% - 4px);}
.ep-url-row{display:flex;gap:6px;align-items:center;margin-bottom:12px;}
.ep-url-inp{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:.78rem;padding:8px 10px;outline:none;cursor:pointer;}
.ep-url-btn{flex-shrink:0;background:var(--accent);border:none;border-radius:8px;color:#fafafa;font-size:.78rem;font-weight:600;padding:8px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;}
.ep-url-btn:hover{opacity:.85;}
.ep-url-btn-preview{display:flex;align-items:center;justify-content:center;padding:0;width:34px;height:34px;background:var(--surface);border:1px solid var(--border);color:var(--text2);}
.ep-url-btn-preview:hover{border-color:var(--accent);color:var(--accent);}
.ep-url-revoke{flex-shrink:0;background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.ep-url-revoke:hover{border-color:#f87171;color:#f87171;}
.ep-url-loading{font-size:.78rem;color:var(--muted);margin-bottom:12px;}
.ep-sched-list{margin-bottom:12px;}
.ep-sched-empty{font-size:.8rem;color:var(--muted);padding:8px 0 12px;}
.ep-sched-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.ep-sched-row:first-child{border-top:1px solid var(--border);}
.ep-sched-row-main{flex:1;min-width:0;}
.ep-sched-time{font-size:.75rem;color:var(--accent);font-weight:600;display:block;margin-bottom:2px;}
.ep-sched-title{font-size:.84rem;color:var(--text);display:block;}
.ep-sched-meta{font-size:.75rem;color:var(--muted);display:block;margin-top:2px;}
.ep-sched-del{flex-shrink:0;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;-webkit-tap-highlight-color:transparent;}
.ep-sched-del:hover{color:#f87171;}
.ep-sched-add{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;}
.ep-sched-add-row{display:flex;gap:8px;}
.ep-sched-add-btn{width:100%;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:.82rem;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;-webkit-tap-highlight-color:transparent;margin-top:4px;}
.ep-sched-add-btn:hover{border-color:var(--accent);color:var(--accent);}
.ep-panel-note{font-size:.75rem;color:var(--muted);padding:12px 20px 20px;line-height:1.5;}
/* Vlepo Events panel */
.vev-list-spacer{margin-bottom:8px;}
.vev-form-wrap{margin-top:10px;}
.vev-color-inp{width:48px;padding:2px;}
.vev-num-inp{width:60px;}
.vev-action-row{gap:6px;}
.vev-btn-del{color:#e55;}
.vev-btn-xs{padding:2px 7px;}
.vev-list-name{flex:1;font-size:.8rem;}
.vev-inactive{opacity:.45;}
.vev-list-id{opacity:.55;}


/* ════ MAM Dashboard · PPP #56 Mavromatis Asymmetric Momentum ════════════ */
.mam-dash {
  margin: 0 0 0;
  padding: 0 20px;
  animation: mam-in var(--mt-default) both;
}
@keyframes mam-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mam-inner {
  position: relative;
  background: color-mix(in srgb, var(--violet) 6%, var(--s0));
  border: 1px solid color-mix(in srgb, var(--violet) 18%, transparent);
  border-radius: var(--r);
  padding: 16px 20px 16px;
  margin-top: 12px;
}
.mam-dismiss {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: none;
  color: var(--dim); cursor: pointer;
  padding: 6px; border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast);
}
.mam-dismiss:hover { color: var(--text); }
.mam-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.mam-greet {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.mam-gap {
  font-size: .75rem;
  color: var(--muted);
}
.mam-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mam-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mam-stat-n {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mam-stat-n.mam-accent { color: var(--accent); }
.mam-stat-l {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.mam-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border2);
}
.mam-action-lbl {
  font-size: .8rem;
  color: var(--muted);
  flex: 1;
}
.mam-action-btn {
  background: var(--accent);
  color: #fafafa;
  border: none;
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--mt-fast);
  white-space: nowrap;
}
.mam-action-btn:hover { opacity: .82; }
@media (max-width: 600px) {
  .mam-stats { gap: 16px; }
  .mam-inner { padding: 14px 14px 14px; }
}


/* ════ FEATURE: Unified Toast System ════════════════════════════════════ */
#kr-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.kr-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--sans);
  color: #fafafa;
  max-width: 320px;
  min-width: 180px;
  pointer-events: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
  animation: kr-toast-in var(--mt-default) both;
  will-change: transform, opacity;
}
.kr-toast.kr-toast-out {
  animation: kr-toast-out var(--mt-default) both;
}
.kr-toast-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,.6);
}
.kr-toast-msg { flex: 1; line-height: 1.3; }
.kr-toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  font-size: .9rem;
  padding: 0 0 0 4px;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-instant);
  flex-shrink: 0;
}
.kr-toast-close:hover { color: #fafafa; }
.kr-toast[data-type="ok"]    { background: color-mix(in srgb, var(--status-ok) 85%, #0a0a13); border: 1px solid color-mix(in srgb, var(--status-ok) 40%, transparent); }
.kr-toast[data-type="warn"]  { background: color-mix(in srgb, var(--status-warn) 80%, #0a0a13); border: 1px solid color-mix(in srgb, var(--status-warn) 40%, transparent); }
.kr-toast[data-type="error"] { background: color-mix(in srgb, var(--status-danger) 85%, #0a0a13); border: 1px solid color-mix(in srgb, var(--status-danger) 40%, transparent); }
.kr-toast[data-type="info"]  { background: color-mix(in srgb, var(--accent) 80%, #0a0a13); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
@keyframes kr-toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kr-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(.95); }
}
@media (max-width: 600px) {
  #kr-toast-container { top: auto; bottom: 80px; right: 12px; left: 12px; }
  .kr-toast { max-width: 100%; }
}


/* ════ FEATURE: 5-stat KPI Home ════════════════════════════════════════ */
.kkh-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 20px 16px;
  position: relative;
}
.kkh-tile {
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: default;
  transition: border-color var(--mt-fast);
}
.kkh-tile:hover { border-color: var(--border); }
.kkh-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.kkh-val {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kkh-val.kkh-accent { color: var(--accent); }
.kkh-sub {
  font-size: .67rem;
  color: var(--dim);
  line-height: 1;
  margin-bottom: 6px;
}
.kkh-spark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: auto;
  opacity: .7;
}
@media (max-width: 900px) {
  .kkh-grid { grid-template-columns: repeat(3, 1fr); }
  .kkh-tile:nth-child(4),
  .kkh-tile:nth-child(5) { display: none; }
}
@media (max-width: 600px) {
  .kkh-grid { grid-template-columns: repeat(2, 1fr); padding: 0 12px 12px; }
  .kkh-tile:nth-child(4),
  .kkh-tile:nth-child(5) { display: none; }
  .kkh-val { font-size: 1.4rem; }
}


/* ════ FEATURE: Anomaly Surface ════════════════════════════════════════ */
.kab-wrap {
  margin: 0 20px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: .73rem;
  font-weight: 700;
  cursor: default;
  animation: kab-in var(--mt-default) both;
}
.kab-chip[data-dir="up"]   { background: color-mix(in srgb, var(--status-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--status-ok) 25%, transparent); color: var(--status-ok); }
.kab-chip[data-dir="down"] { background: color-mix(in srgb, var(--status-warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--status-warn) 25%, transparent); color: var(--status-warn); }
.kab-chip-arrow { font-size: .8rem; }
@keyframes kab-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 600px) { .kab-wrap { margin: 0 12px 8px; } }


/* ════ FEATURE: Keyboard Shortcut Hint Overlay ═══════════════════════ */
#krKbdOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,19,.82);
  backdrop-filter: blur(8px);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mt-default);
}
#krKbdOverlay.open {
  opacity: 1;
  pointer-events: auto;
}
.kr-kbd-box {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px 28px;
  max-width: 480px;
  width: 90vw;
}
.kr-kbd-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.kr-kbd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.kr-kbd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.kr-kbd-desc { font-size: .8rem; color: var(--text); }
.kr-kbd-keys { display: flex; gap: 4px; flex-shrink: 0; }
.kr-kbd-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: .68rem;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}


/* ════ FEATURE: Sidebar Attention Discipline ════════════════════════════
   Linear principle: "don't compete for attention you haven't earned"
   Group icons are dimmed at rest; only the active/expanded group draws color.
═══════════════════════════════════════════════════════════════════════════ */
.ksid-grp-hdr .ksid-ic {
  opacity: .38;
  transition: opacity var(--mt-fast), color var(--mt-fast);
}
.ksid-grp-hdr:hover .ksid-ic { opacity: .65; }
.ksid-grp-hdr[aria-expanded="true"] .ksid-ic { opacity: 1; }
.ksid-btn[data-grp].ks-active .ksid-ic { opacity: 1; }


/* ════ FEATURE: Keyboard Discoverability ────────────────────────────────
   Layer 1 ambient signal: persistent ? button in sidebar footer.
   Subtle at rest, legible on hover. Opens shortcuts overlay.
═══════════════════════════════════════════════════════════════════════════ */
.ksid-kbd-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--dim);
  font-family: var(--sans);
  font-size: .8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mt-fast), background var(--mt-fast);
  min-height: 44px;
}
.ksid-kbd-btn:hover { color: var(--text); background: var(--s1); }
.ksid-kbd-btn .ksid-ic { opacity: .38; transition: opacity var(--mt-fast); }
.ksid-kbd-btn:hover .ksid-ic { opacity: .7; }
.ksid-kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  opacity: .5;
}
.ksid-kbd-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-size: .6rem;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--muted);
}
body.ks-col .ksid-kbd-hint { opacity: 0; width: 0; overflow: hidden; }


/* ════ FEATURE: Spatial Command Palette Sub-pages ════════════════════════
   ARCHO group cards in empty state. Push/pop spatial stack.
═══════════════════════════════════════════════════════════════════════════ */
.us-page-enter { animation: us-page-in var(--mt-default) both; }
.us-page-back  { animation: us-page-out var(--mt-default) both; }
@keyframes us-page-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes us-page-out {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
.us-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 8px;
  font-size: .73rem;
  color: var(--muted);
}
.us-bc-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .73rem;
  font-family: var(--sans);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
}
.us-bc-back:hover { opacity: .8; }
.us-bc-sep { opacity: .4; }
.us-grp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px 10px 8px;
}
.us-grp-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--s1);
  transition: border-color var(--mt-fast), background var(--mt-fast);
  text-align: left;
}
.us-grp-card:hover { border-color: var(--border); background: var(--s2); }
.us-grp-card.kb-active { border-color: var(--accent); background: rgba(179,64,244,.08); }
.us-grp-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.us-grp-verb {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .55;
}
.us-grp-count {
  font-size: .68rem;
  color: var(--dim);
  margin-top: 4px;
}
/* Per-group accent on card name */
.us-grp-card[data-grp="gnorizo"] .us-grp-name { color: #BF5AF2; }
.us-grp-card[data-grp="fero"]    .us-grp-name { color: #007AFF; }
.us-grp-card[data-grp="trecho"]  .us-grp-name { color: #00C88C; }
.us-grp-card[data-grp="fanero"]  .us-grp-name { color: #FFD60A; }
.us-grp-card[data-grp="pliro"]   .us-grp-name { color: #FF9F0A; }
.us-grp-card[data-grp="echo"]    .us-grp-name { color: #818CF8; }


/* ════ Search category SVG icons ════════════════════════════════════════ */
.us-cat-ic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.us-row-icon svg { vertical-align: middle; }


/* ════ FEATURE: Monospace Number System (Stripe domain-literacy signal) ═══
   All numeric values: tabular-nums + mono font for scannable alignment.
   Apply .kr-num to any element that displays a number.
═══════════════════════════════════════════════════════════════════════════ */
.kr-num,
.kkh-val,
.mam-stat-n,
.kr-kpi-fig,
.kr-rev-num,
.crm-tab-ct,
.kab-delta {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Table numeric columns right-aligned */
.crm-col-num,
.tbl-num,
td.num,
th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}


/* ════ FEATURE: Smart Empty States ════════════════════════════════════════
   PPP #31 Reciprocity: give value before asking.
   PPP #8  Zeigarnik: show the path to completion.
═══════════════════════════════════════════════════════════════════════════ */
.kr-smart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px 32px;
  text-align: center;
}
.kr-se-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--s2);
  color: var(--dim);
  flex-shrink: 0;
}
.kr-se-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.kr-se-body {
  font-size: .78rem;
  color: var(--dim);
  max-width: 280px;
  line-height: 1.5;
}
.kr-se-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.kr-se-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r);
  border: none;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--mt-fast), background var(--mt-fast);
  min-height: 44px;
}
.kr-se-btn.primary {
  background: var(--accent);
  color: #fafafa;
}
.kr-se-btn.primary:hover { opacity: .88; }
.kr-se-btn.ghost {
  background: var(--s2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.kr-se-btn.ghost:hover { background: var(--s3, var(--border2)); }
.kr-se-code {
  width: 100%;
  max-width: 340px;
  padding: 10px 14px;
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--dim);
  text-align: left;
  white-space: pre;
  overflow-x: auto;
}


/* ════ FEATURE: Optimistic UI ════════════════════════════════════════════
   Sub-400ms visual resolution before server confirms (PPP #20 Doherty).
═══════════════════════════════════════════════════════════════════════════ */
.kr-opt-pending {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--mt-instant);
}
.kr-opt-done {
  animation: kr-opt-flash var(--mt-slow) both;
}
@keyframes kr-opt-flash {
  0%   { box-shadow: 0 0 0 2px var(--status-ok); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.kr-opt-err {
  animation: kr-opt-shake var(--mt-default) both;
}
@keyframes kr-opt-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(2px); }
}


/* ════ FEATURE: Variable Reward Milestones ════════════════════════════════
   PPP #47: unpredictable positive moments build stronger engagement loops.
═══════════════════════════════════════════════════════════════════════════ */
#krMilestoneOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 80px;
}
.kr-milestone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 28px;
  background: var(--bg2, var(--s2));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  text-align: center;
  pointer-events: all;
  animation: kr-ms-in var(--mt-spring) var(--mt-slow) both;
  max-width: 320px;
}
@keyframes kr-ms-in {
  from { opacity: 0; transform: translateY(24px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kr-ms-emoji {
  font-size: 2rem;
  line-height: 1;
}
.kr-ms-title {
  font-size: .9rem;
  font-weight: 800;
  color: var(--text);
}
.kr-ms-body {
  font-size: .75rem;
  color: var(--dim);
  line-height: 1.4;
}
.kr-ms-dismiss {
  margin-top: 8px;
  padding: 6px 20px;
  border: none;
  border-radius: var(--r);
  background: var(--accent);
  color: #fafafa;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  min-width: 80px;
}


/* ════ FEATURE: Optimistic UI states ════════════════════════════════════ */
.kr-opt-pending { opacity: .55; pointer-events: none; transition: opacity var(--mt-fast); }
.kr-opt-done    { outline: 2px solid var(--status-ok); outline-offset: 2px; transition: outline var(--mt-fast); }
.kr-opt-err     { outline: 2px solid var(--status-danger); outline-offset: 2px; }

/* Inline stage picker on contact-row */
.contact-stage.kr-ie-trigger { cursor: pointer; }
.contact-stage.kr-ie-trigger:hover { opacity: .75; }
.kr-inline-stage-menu {
  position: absolute;
  z-index: 900;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
  animation: kr-pop-in var(--mt-fast) both;
}
@keyframes kr-pop-in {
  from { opacity: 0; transform: scale(.94) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kr-inline-stage-menu button {
  padding: 7px 12px;
  background: none;
  border: none;
  border-radius: calc(var(--r) - 2px);
  color: var(--text);
  font-size: .78rem;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-instant);
}
.kr-inline-stage-menu button:hover { background: var(--s1); }
.kr-inline-stage-menu button.active { color: var(--accent); font-weight: 700; }


/* ════ FEATURE: Intelligence reasoning cards ══════════════════════════════
   Extends anomaly chips with causal context ribbons.
═══════════════════════════════════════════════════════════════════════════ */
.kab-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 4px;
  background: rgba(191,90,242,.07);
  border: 1px solid rgba(191,90,242,.18);
  border-radius: var(--r);
  font-size: .74rem;
  color: var(--dim);
  line-height: 1.45;
}
.kab-reason-ic { opacity: .6; flex-shrink: 0; margin-top: 1px; }
.kab-reason strong { color: var(--text); font-weight: 600; }


/* ════ FEATURE: KPI home org-type config ═════════════════════════════════ */
.kkh-config-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: .66rem;
  font-family: var(--sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity var(--mt-fast);
}
#kratoKpiHome:hover .kkh-config-btn { opacity: 1; }
.kkh-config-sheet {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
}
.kkh-config-sheet.open { display: flex; }
.kkh-config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  cursor: grab;
  background: var(--s1);
}
.kkh-config-row select {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: .76rem;
  padding: 4px 8px;
  font-family: var(--sans);
}
.kkh-config-row label { font-size: .72rem; color: var(--muted); min-width: 60px; }


/* ════ FEATURE: Monospace Financials (Stripe principle) ════════════════
   All currency values, revenue figures, transaction amounts, and
   donation totals render in monospace tabular nums. Signals the product
   understands money. Applies globally to semantic money elements.
═══════════════════════════════════════════════════════════════════════════ */
.kpi-val,
.kpi-val-lg,
.kpi-val-xl,
.kkh-val,
.cp-kpi-val,
.kr-money,
.rev-total,
.don-total,
[data-money],
.kpi-hero .kpi-val {
  font-family: var(--mono), ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}


/* ════ FEATURE: Anomaly Explainability ════════════════════════════════════
   Each chip now carries a reasoning line below the metric signal.
   The explanation is generated by the JS rules engine.
═══════════════════════════════════════════════════════════════════════════ */
.kab-chip {
  cursor: default;
  position: relative;
}
.kab-chip-reason {
  display: block;
  font-size: .64rem;
  font-weight: 400;
  opacity: .65;
  margin-top: 2px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.kab-chip[data-dir="up"]   { border-color: rgba(52,199,89,.35); }
.kab-chip[data-dir="down"] { border-color: rgba(255,59,48,.35); }


/* ════ FEATURE: Pre-copy button (Loom signature) ═════════════════════════
   "Copy" button that fires before any confirm, inside QR and links panels.
═══════════════════════════════════════════════════════════════════════════ */
.kr-precopy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  background: var(--s1);
  color: var(--text);
  font-size: .78rem;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--mt-fast), border-color var(--mt-fast), color var(--mt-fast);
  min-height: 36px;
}
.kr-precopy-btn:hover { background: var(--s2); border-color: var(--border); }
.kr-precopy-btn.copied {
  color: var(--status-ok);
  border-color: rgba(52,199,89,.4);
  background: rgba(52,199,89,.08);
}
.kr-precopy-btn svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   FEATURE: FAVICON STATUS SYSTEM
   4 states: idle · active · warn · critical
   Canvas-drawn SVG favicon — no external files
══════════════════════════════════════════════════════════ */
/* No CSS needed — purely JS canvas-driven */

/* ══════════════════════════════════════════════════════════
   FEATURE: ANOMALY SIDEBAR BADGE
   Dot on ARCHO group header when spike/threshold crossed
══════════════════════════════════════════════════════════ */
.ksid-grp-hdr { position: relative; }
.ksid-anomaly-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-warn, #ff9f0a);
  opacity: 0;
  transition: opacity var(--mt-fast, 150ms);
  pointer-events: none;
}
.ksid-anomaly-dot.visible { opacity: 1; }
.ksid-anomaly-dot.critical { background: var(--status-danger, #ff3b30); }
.ksid-anomaly-dot.pulse {
  animation: anomalyDotPulse 1.8s ease-in-out infinite;
}
@keyframes anomalyDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.4); }
}

/* ══════════════════════════════════════════════════════════
   FEATURE: NUMBER-KEY PERIOD SWITCHER
   Visual feedback toast — no extra chrome
══════════════════════════════════════════════════════════ */
.kr-period-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface-2, #1c1c1e);
  color: var(--text-1, #fafafa);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  opacity: 0;
  transition: opacity 160ms, transform 160ms;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}
.kr-period-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Custom Fields: settings panel ── */
.ks-cf-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ks-cf-empty { font-size: .8rem; color: var(--muted); padding: 4px 0; }
.ks-cf-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-2,rgba(255,255,255,.04)); border-radius: var(--r-sm,6px); }
.ks-cf-item-name { flex: 1; font-size: .85rem; }
.ks-cf-item-type { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ks-cf-remove { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px; border-radius: 3px; display: flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.ks-cf-remove:hover { color: var(--status-danger,#ff453a); }
.ks-cf-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ks-cf-inp-name { flex: 1; min-width: 140px; }
.ks-cf-sel-type { width: 100px; }

/* ── Custom Fields: contact panel ── */
.cp-cf-wrap { margin-top: 12px; }
.cp-cf-title { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cp-cf-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.cp-cf-lbl { font-size: .75rem; color: var(--muted); }
.cp-cf-inp { background: var(--surface-2,rgba(255,255,255,.04)); border: 1px solid var(--border,rgba(255,255,255,.08)); border-radius: var(--r-sm,6px); color: var(--text); font-family: var(--sans); font-size: .85rem; padding: 6px 10px; width: 100%; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.cp-cf-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
textarea.cp-cf-inp { resize: vertical; min-height: 56px; }

/* ── Pipeline Stages: settings panel ── */
.ks-ps-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ks-ps-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface-2,rgba(255,255,255,.04)); border-radius: var(--r-sm,6px); }
.ks-ps-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.12); }
.ks-ps-lbl { flex: 1; font-size: .85rem; }
.ks-ps-key { font-size: .72rem; color: var(--muted); }
.ks-ps-actions { display: flex; align-items: center; gap: 4px; }
.ks-ps-mv { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .8rem; padding: 2px 4px; border-radius: 3px; -webkit-tap-highlight-color: transparent; line-height: 1; }
.ks-ps-mv:hover { color: var(--text); background: var(--surface-3,rgba(255,255,255,.08)); }
.ks-ps-mv-gap { display: inline-block; width: 20px; }

/* ════ RECORDS & OBJECT BUILDER ════ */
/* Overlay */
#recordsOverlay{display:none;position:fixed;inset:0;z-index:9540;background:var(--bg);overflow-y:auto;transform:translateY(40px);opacity:0;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .2s ease}
#recordsOverlay.rec-ov-open{transform:translateY(0);opacity:1}
@media(min-width:769px){#recordsOverlay{left:220px}body.ks-col #recordsOverlay{left:64px}}
.rec-ov-body{height:calc(100vh - 56px);display:flex;flex-direction:column;overflow:hidden}

/* Layout */
.rec-layout{display:flex;height:100%;overflow:hidden}
.rec-sidebar{width:200px;min-width:160px;border-right:1px solid var(--border1);padding:16px 0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex-shrink:0}
.rec-sidebar-head{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 16px 8px}
.rec-content{flex:1;overflow:hidden;display:flex;flex-direction:column}
@media(max-width:600px){.rec-sidebar{width:140px}}

/* Type list */
.rec-type-item{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-tap-highlight-color:transparent}
.rec-type-item:hover{background:var(--surface-2,rgba(255,255,255,.06))}
.rec-type-item--active{background:var(--surface-3,rgba(255,255,255,.1))}
.rec-type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rec-type-name{font-size:.82rem;color:var(--text)}
.rec-type-add{width:100%;background:none;border:none;padding:8px 16px;text-align:left;font-size:.78rem;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rec-type-add:hover{opacity:.8}

/* Toolbar */
.rec-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border1);gap:12px;flex-shrink:0;flex-wrap:wrap}
.rec-toolbar-left,.rec-toolbar-right{display:flex;align-items:center;gap:10px}
.rec-type-heading{font-size:.9rem;font-weight:600;color:var(--text)}
.rec-view-tabs{display:flex;gap:2px;background:var(--surface-2,rgba(255,255,255,.06));border-radius:6px;padding:2px}
.rec-view-tab{background:none;border:none;padding:4px 10px;border-radius:4px;font-size:.76rem;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s}
.rec-view-tab--active{background:var(--surface-3,rgba(255,255,255,.12));color:var(--text)}
.rec-search{background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--border1);border-radius:6px;padding:6px 10px;font-size:.8rem;color:var(--text);outline:none;width:180px;transition:border-color .12s}
.rec-search:focus{border-color:var(--accent)}
.rec-add-btn{background:var(--accent);color:#fafafa;border:none;border-radius:6px;padding:6px 14px;font-size:.8rem;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rec-add-btn:hover{opacity:.88}

/* Kanban */
.rec-kanban-wrap{flex:1;overflow-x:auto;overflow-y:hidden;padding:16px 20px}
.rec-kanban{display:flex;gap:12px;height:100%;align-items:flex-start}
.rec-col{width:240px;min-width:220px;background:var(--surface-2,rgba(255,255,255,.04));border-radius:10px;display:flex;flex-direction:column;max-height:calc(100vh - 160px);flex-shrink:0}
.rec-col-head{padding:10px 12px;display:flex;align-items:center;gap:8px;border-bottom:2px solid transparent;border-radius:10px 10px 0 0}
.rec-col-label{font-size:.78rem;font-weight:600;color:var(--text);flex:1}
.rec-col-count{font-size:.72rem;color:var(--muted);background:var(--surface-3,rgba(255,255,255,.08));border-radius:10px;padding:1px 6px}
.rec-col-add{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:0 4px;-webkit-tap-highlight-color:transparent;line-height:1}
.rec-col-add:hover{color:var(--text)}
.rec-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}

/* Cards */
.rec-card{background:var(--surface-3,rgba(255,255,255,.07));border:1px solid var(--border1);border-radius:8px;padding:10px 12px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,transform .12s}
.rec-card:hover{background:var(--surface-2,rgba(255,255,255,.1));transform:translateY(-1px)}
.rec-card-title{font-size:.82rem;font-weight:500;color:var(--text);margin-bottom:4px}
.rec-card-fields{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.rec-card-field{font-size:.72rem;color:var(--muted)}
.rec-card-flabel{color:var(--muted);margin-right:4px}
.rec-card-assign{font-size:.7rem;color:var(--accent)}

/* List view */
.rec-list-wrap{flex:1;overflow-y:auto;padding:16px 20px}
.rec-table{width:100%;border-collapse:collapse;font-size:.8rem}
.rec-table th{text-align:left;padding:6px 10px;font-size:.72rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border1)}
.rec-table-row{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .1s}
.rec-table-row:hover td{background:var(--surface-2,rgba(255,255,255,.05))}
.rec-table td{padding:8px 10px;border-bottom:1px solid var(--border1);vertical-align:top}
.rec-table-title{font-weight:500;color:var(--text)}
.rec-table-date{color:var(--muted);font-size:.72rem}

/* Detail panel */
.rec-panel{position:fixed;right:-420px;top:0;bottom:0;width:380px;max-width:100vw;background:var(--surface-1,var(--bg));border-left:1px solid var(--border1);z-index:9600;display:flex;flex-direction:column;transition:right .26s cubic-bezier(.22,1,.36,1);overflow:hidden}
.rec-panel--open{right:0}
.rec-panel-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--border1);flex-shrink:0}
.rec-panel-close{background:none;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer;padding:4px 8px;-webkit-tap-highlight-color:transparent;line-height:1}
.rec-panel-close:hover{color:var(--text)}
.rec-panel-title-input{flex:1;background:none;border:none;font-size:.95rem;font-weight:600;color:var(--text);outline:none;border-bottom:1px solid transparent;transition:border-color .12s}
.rec-panel-title-input:focus{border-bottom-color:var(--accent)}
.rec-panel-new-label{font-size:.9rem;font-weight:600;color:var(--text)}
.rec-panel-body{flex:1;overflow-y:auto;padding:16px}
.rec-panel-section{margin-bottom:16px}
.rec-panel-fields{display:grid;gap:12px}
.rec-panel-field{display:flex;flex-direction:column;gap:4px}
.rec-panel-label,.rec-panel-flabel{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec-panel-finput,.rec-panel-stage-sel{width:100%;background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--border1);border-radius:6px;padding:7px 10px;font-size:.82rem;color:var(--text);outline:none;transition:border-color .12s;box-sizing:border-box;resize:vertical}
.rec-panel-finput:focus,.rec-panel-stage-sel:focus{border-color:var(--accent)}
.rec-panel-footer{padding:12px 16px;border-top:1px solid var(--border1);display:flex;justify-content:flex-end;flex-shrink:0}
.rec-panel-footer--form{justify-content:flex-end}
.rec-panel-save-btn{background:var(--accent);color:#fafafa;border:none;border-radius:6px;padding:8px 18px;font-size:.82rem;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rec-panel-save-btn:hover{opacity:.88}
.rec-panel-del-btn{background:none;border:1px solid rgba(255,69,58,.4);color:rgba(255,69,58,.8);border-radius:6px;padding:6px 14px;font-size:.78rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rec-panel-del-btn:hover{background:rgba(255,69,58,.1)}

/* Empty states */
.rec-empty{padding:32px 20px;color:var(--muted);font-size:.84rem;text-align:center}
.rec-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;padding:40px 20px;text-align:center}
.rec-empty-icon{color:var(--muted);opacity:.5}
.rec-empty-title{font-size:1rem;font-weight:600;color:var(--text)}
.rec-empty-sub{font-size:.82rem;color:var(--muted);max-width:280px}

/* Object Builder settings */
.ks-ob-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ks-ob-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface-2,rgba(255,255,255,.05));border-radius:6px}
.ks-ob-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ks-ob-info{flex:1;min-width:0}
.ks-ob-name{font-size:.82rem;font-weight:500;color:var(--text)}
.ks-ob-meta{font-size:.72rem;color:var(--muted);display:block}
.ks-ob-actions{display:flex;gap:4px}
.ks-ob-btn{background:none;border:1px solid var(--border1);border-radius:4px;padding:3px 8px;font-size:.72rem;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ks-ob-btn:hover{color:var(--text);border-color:var(--border2)}
.ks-ob-btn--danger:hover{color:rgba(255,69,58,.8);border-color:rgba(255,69,58,.4)}
.ks-ob-add-btn{background:none;border:1px dashed var(--border2);border-radius:6px;padding:8px 12px;font-size:.78rem;color:var(--muted);cursor:pointer;width:100%;text-align:center;-webkit-tap-highlight-color:transparent}
.ks-ob-add-btn:hover{color:var(--text);border-color:var(--accent)}
.ks-ob-empty{font-size:.8rem;color:var(--muted);padding:8px 0}

/* Type create/edit modal */
.rec-modal-backdrop[hidden]{display:none!important}
.rec-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9700;display:flex;align-items:center;justify-content:center;padding:20px}
.rec-modal{background:var(--bg);border:1px solid var(--border1);border-radius:12px;width:360px;max-width:100%;overflow:hidden}
.rec-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border1);font-size:.9rem;font-weight:600;color:var(--text)}
.rec-modal-close{background:none;border:none;font-size:1.2rem;color:var(--muted);cursor:pointer;padding:2px 6px;-webkit-tap-highlight-color:transparent}
.rec-modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.rec-modal-field{display:flex;flex-direction:column;gap:6px}
.rec-modal-label{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec-color-inp{width:48px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0}
.rec-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.rec-modal-cancel{background:none;border:1px solid var(--border1);border-radius:6px;padding:7px 14px;font-size:.8rem;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rec-modal-cancel:hover{color:var(--text)}

/* ════════════════════════════════════════════════════════
   BILLING MODULE
   ════════════════════════════════════════════════════════ */
/* Layout */
#billingContent{padding:0}
.bl-tabs{display:flex;gap:2px;padding:16px 20px 0;border-bottom:1px solid var(--border1);overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-tab{background:none;border:none;padding:9px 16px;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .15s,border-color .15s}
.bl-tab-active{color:var(--accent);border-bottom-color:var(--accent)}
.bl-tab-content{padding:20px}

/* Section header */
.bl-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.bl-section-title{font-size:.95rem;font-weight:700}

/* Stat row */
.bl-stat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.bl-stat-chip{background:var(--bg2);border:1px solid var(--border1);border-radius:10px;padding:10px 14px;min-width:80px}
.bl-stat-val{font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.bl-stat-lbl{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:2px}

/* Metric cards (revenue) */
.bl-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.bl-metric-card{background:var(--bg2);border:1px solid var(--border1);border-radius:12px;padding:16px}
.bl-metric-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.bl-metric-value{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.bl-metric-hint{font-size:.72rem;color:var(--muted);margin-top:4px}

/* Plans grid */
.bl-plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:4px}
.bl-plan-card{background:var(--bg2);border:1px solid var(--border1);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.bl-plan-head{display:flex;flex-direction:column;gap:4px}
.bl-plan-name{font-size:.9rem;font-weight:700}
.bl-plan-price{font-size:.82rem;font-variant-numeric:tabular-nums}
.bl-plan-interval{color:var(--muted);font-size:.78rem}
.bl-plan-desc{font-size:.78rem;color:var(--muted);line-height:1.5}
.bl-plan-meta{font-size:.68rem;color:var(--muted)}
.bl-plan-stripe{color:#4ade80}
.bl-plan-local{color:var(--muted)}
.bl-plan-actions{display:flex;gap:6px;margin-top:4px}

/* Subscribers table */
.bl-filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.bl-search-inp{flex:1;min-width:180px;background:var(--bg2);border:1px solid var(--border1);border-radius:8px;padding:8px 12px;color:var(--text);font-size:.85rem;outline:none}
.bl-search-inp:focus{border-color:var(--accent)}
.bl-select{background:var(--bg2);border:1px solid var(--border1);border-radius:8px;padding:8px 12px;color:var(--text);font-size:.85rem;outline:none;cursor:pointer}
.bl-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-table{width:100%;border-collapse:collapse;font-size:.83rem}
.bl-th{text-align:left;padding:0 10px 8px 0;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border1);white-space:nowrap}
.bl-td{padding:10px 10px 10px 0;border-bottom:1px solid var(--border1);vertical-align:middle}
.bl-td-actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.bl-sub-email{font-size:.85rem;font-weight:600}
.bl-sub-name{font-size:.75rem;color:var(--muted);margin-top:2px}

/* Status badges */
.bl-badge{display:inline-block;padding:2px 8px;border-radius:100px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.bl-badge-active{background:rgba(74,222,128,.14);color:#4ade80}
.bl-badge-warn{background:rgba(251,191,36,.14);color:#fbbf24}
.bl-badge-cancel{background:rgba(248,113,113,.14);color:#f87171}
.bl-badge-trial{background:rgba(96,165,250,.14);color:#60a5fa}

/* Buttons */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s;white-space:nowrap;text-decoration:none}
.bl-btn-primary{background:var(--accent);color:#fafafa;padding:9px 16px;min-height:36px}
.bl-btn-ghost{background:transparent;border:1px solid var(--border1);color:var(--text);padding:7px 14px;min-height:36px}
.bl-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.bl-btn-danger{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.2);padding:7px 14px;min-height:36px}
.bl-btn-danger:hover{background:rgba(248,113,113,.2)}
.bl-btn-sm{padding:6px 12px;font-size:.78rem;min-height:32px}
.bl-btn-xs{padding:4px 10px;font-size:.72rem;min-height:28px}
.bl-btn:disabled{opacity:.45;cursor:default}

/* Empty state */
.bl-empty{color:var(--muted);font-size:.85rem;padding:24px 0;line-height:1.6}

/* Connect tab */
.bl-connect-card{background:var(--bg2);border:1px solid var(--border1);border-radius:12px;padding:20px;margin-bottom:8px}
.bl-connect-active{border-color:rgba(74,222,128,.3)}
.bl-connect-status-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;margin-bottom:10px}
.bl-connect-name{font-size:.93rem;font-weight:700;margin-bottom:4px}
.bl-connect-meta{font-size:.78rem;color:var(--muted)}
.bl-connect-info{flex:1;min-width:0}
.bl-connect-active{display:flex;align-items:flex-start;gap:12px}
.bl-connect-not-connected{display:flex;flex-direction:column;gap:12px}
.bl-connect-title{font-size:.9rem;font-weight:700}
.bl-connect-hint{font-size:.82rem;color:var(--muted);line-height:1.5}
.bl-webhook-label{font-size:.78rem;font-weight:600;margin-bottom:8px}
.bl-webhook-url-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.bl-webhook-url{background:var(--bg);border:1px solid var(--border1);border-radius:6px;padding:6px 10px;font-size:.75rem;font-family:monospace;word-break:break-all;flex:1;min-width:0}
.bl-webhook-events{font-size:.72rem;color:var(--muted);line-height:1.7;margin-bottom:8px}
.bl-webhook-hint{font-size:.72rem;color:var(--muted)}
.bl-webhook-hint code{background:var(--bg);border:1px solid var(--border1);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:.75rem}

/* Modal */
.bl-modal-backdrop[hidden]{display:none!important}
.bl-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9700;display:flex;align-items:center;justify-content:center;padding:20px}
.bl-modal{background:var(--bg);border:1px solid var(--border1);border-radius:14px;width:400px;max-width:100%;max-height:90vh;overflow-y:auto}
.bl-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 16px;border-bottom:1px solid var(--border1)}
.bl-modal-title{font-size:.93rem;font-weight:700}
.bl-modal-close{background:none;border:none;font-size:1.1rem;color:var(--muted);cursor:pointer;padding:4px 6px;-webkit-tap-highlight-color:transparent}
.bl-modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.bl-modal-hint{font-size:.82rem;color:var(--muted);line-height:1.55}
.bl-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.bl-field{display:flex;flex-direction:column;gap:6px}
.bl-field-row{display:flex;gap:10px;flex-wrap:wrap}
.bl-field-row .bl-field{flex:1;min-width:100px}
.bl-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.bl-inp{background:var(--bg2);border:1px solid var(--border1);border-radius:8px;padding:9px 12px;color:var(--text);font-size:.88rem;outline:none;width:100%;-webkit-tap-highlight-color:transparent}
.bl-inp:focus{border-color:var(--accent)}
.bl-radio-group{display:flex;flex-direction:column;gap:10px}
.bl-radio-label{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer}

@media(max-width:480px){
  .bl-metrics{grid-template-columns:1fr 1fr}
  .bl-plans-grid{grid-template-columns:1fr}
  .bl-field-row{flex-direction:column}
  .bl-modal{width:100%;border-bottom-left-radius:0;border-bottom-right-radius:0;position:fixed;bottom:0;top:auto;max-height:85vh}
  .bl-modal-backdrop{align-items:flex-end}
}

/* ══════════════════════════════════════════════════
   AFFILIATE + REFERRAL ENGINE
   ══════════════════════════════════════════════════ */
/* tabs */
.aff-tabs{display:flex;gap:2px;padding:16px 20px 0;border-bottom:1px solid var(--border1);overflow-x:auto;-webkit-overflow-scrolling:touch}
.aff-tab{background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;font:.8rem/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap;margin-bottom:-1px;-webkit-tap-highlight-color:transparent;transition:color var(--mt-fast),border-color var(--mt-fast);min-height:36px}
.aff-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.aff-tab:hover{color:var(--ink)}

/* layout */
.aff-section{padding:20px;display:flex;flex-direction:column;gap:16px}
.aff-section-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aff-section-label{font:.78rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* metrics row */
.aff-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.aff-metric-card{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px}
.aff-metric-val{font:700 1.5rem/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.aff-metric-val.warn{color:var(--warn,#f59e0b)}
.aff-metric-lbl{font:.72rem/1 var(--sans);color:var(--muted)}
.aff-metric-sub{font:.7rem/1 var(--sans);color:var(--muted)}

/* programs grid */
.aff-programs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.aff-prog-card{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.aff-prog-card.inactive{opacity:.55}
.aff-prog-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.aff-prog-name{font:.85rem/1 var(--sans);font-weight:600;color:var(--ink)}
.aff-prog-meta{display:flex;flex-direction:column;gap:4px;font:.75rem/1.4 var(--sans);color:var(--muted)}
.aff-prog-actions{display:flex;gap:6px;flex-wrap:wrap}

/* table */
.aff-table{display:flex;flex-direction:column;border:1px solid var(--border2);border-radius:10px;overflow:hidden;font-size:.78rem}
.aff-row{display:grid;grid-template-columns:1fr 1fr 56px 56px 56px 80px 80px;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border2);align-items:center}
.aff-row:last-child{border-bottom:none}
.aff-head{background:var(--card2);font:.7rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.aff-email{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aff-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

/* top-referrers table (5 cols) */
.aff-table .aff-row:has(.aff-email:first-child){grid-template-columns:1fr 56px 80px 80px 96px}

/* filter bar */
.aff-filter-bar{display:flex;gap:8px;align-items:center}
.aff-search{flex:1;background:var(--card2);border:1px solid var(--border2);border-radius:8px;padding:7px 12px;font:.8rem var(--sans);color:var(--ink);outline:none;-webkit-tap-highlight-color:transparent}
.aff-search:focus{border-color:var(--accent)}
.aff-filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.aff-chip{background:none;border:1px solid var(--border2);border-radius:20px;padding:4px 12px;font:.75rem/1 var(--sans);color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--mt-fast),color var(--mt-fast);min-height:28px}
.aff-chip.active{border-color:var(--accent);color:var(--accent);font-weight:600}

/* badges */
.aff-badge{font:.68rem/1 var(--sans);font-weight:600;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--muted)}
.aff-badge.green{background:rgba(52,211,153,.12);color:#34d399}
.aff-badge.cyan{background:rgba(90,200,250,.12);color:#5ac8fa}
.aff-badge.warn{background:rgba(245,158,11,.12);color:#f59e0b}

/* buttons */
.aff-btn-primary{background:var(--accent);color:#fafafa;border:none;border-radius:8px;padding:0 16px;font:.78rem/1 var(--sans);font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:opacity var(--mt-fast)}
.aff-btn-primary:hover{opacity:.88}
.aff-btn-ghost{background:none;border:1px solid var(--border2);border-radius:8px;padding:0 12px;font:.78rem/1 var(--sans);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:border-color var(--mt-fast)}
.aff-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.aff-btn-del{background:none;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:0 12px;font:.78rem/1 var(--sans);color:#ef4444;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px}
.aff-btn-sm{min-height:28px;padding:0 10px;font-size:.72rem}

/* modal */
.aff-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
.aff-modal{background:var(--card1,#111318);border:1px solid var(--border2);border-radius:16px;width:100%;max-width:440px;padding:24px;display:flex;flex-direction:column;gap:14px;max-height:90vh;overflow-y:auto}
.aff-modal-hdr{display:flex;align-items:center;justify-content:space-between;font:.85rem/1 var(--sans);font-weight:700;color:var(--ink)}
.aff-modal-close{background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:4px;-webkit-tap-highlight-color:transparent}
.aff-modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.aff-field{display:flex;flex-direction:column;gap:6px}
.aff-label{font:.72rem/1 var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.aff-inp{background:var(--card2);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;font:.8rem var(--sans);color:var(--ink);outline:none;width:100%;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.aff-inp:focus{border-color:var(--accent)}

/* gen result */
.aff-gen-result{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--card2);border:1px solid var(--border2);border-radius:8px}
.aff-snippet{font:12px/1.5 'Courier New',monospace;color:var(--ink);word-break:break-all}
.aff-note{font:.72rem/1.4 var(--sans);color:var(--muted)}

/* empty */
.aff-empty{text-align:center;padding:48px 0;color:var(--muted);font:.82rem/1.5 var(--sans)}

@media(max-width:600px){
  .aff-metrics{grid-template-columns:1fr 1fr}
  .aff-programs-grid{grid-template-columns:1fr}
  .aff-row{grid-template-columns:1fr 48px 48px 60px}
  .aff-row span:nth-child(3),.aff-row span:nth-child(4),.aff-row span:nth-child(5){display:none}
}

/* ═══════════════════════════════════════════════
   AUDIT LOG + COMPLIANCE  (#9)
   ═══════════════════════════════════════════════ */
.adt-panel{padding:24px 28px 32px;display:flex;flex-direction:column;gap:0;max-width:1100px;margin:0 auto}

.adt-tab-bar{display:flex;gap:4px;padding:0 0 0;margin-bottom:20px;border-bottom:1px solid var(--border2)}
.adt-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 16px;font:.8rem/1 var(--sans);font-weight:500;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--mt-fast),border-color var(--mt-fast)}
.adt-tab:hover{color:var(--ink)}
.adt-tab.active{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.adt-loading{padding:64px 0;text-align:center;color:var(--muted);font:.85rem/1 var(--sans)}

/* Stats row */
.adt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.adt-stat{background:var(--card2);border:1px solid var(--border2);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.adt-stat-n{font:1.6rem/1 var(--sans);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.adt-stat-l{font:.68rem/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* Filter bar */
.adt-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center;padding:12px 14px;background:var(--card2);border:1px solid var(--border2);border-radius:10px}
.adt-inp{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:7px 11px;font:.78rem var(--sans);color:var(--ink);outline:none;-webkit-tap-highlight-color:transparent;transition:border-color var(--mt-fast)}
.adt-inp:focus{border-color:var(--accent)}
.adt-inp-sm{width:130px}
.adt-inp-days{width:80px}
.adt-sel{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:7px 11px;font:.78rem var(--sans);color:var(--ink);outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color var(--mt-fast)}
.adt-sel:focus{border-color:var(--accent)}
.adt-filter-search{flex:1;min-width:160px}

/* Table */
.adt-table-wrap{overflow-x:auto;border:1px solid var(--border2);border-radius:10px;margin-bottom:16px}
.adt-table-hdr{display:grid;grid-template-columns:130px 1fr 1fr 2fr 100px 110px;padding:8px 12px;background:var(--card2);border-bottom:1px solid var(--border2);font:.66rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);min-width:680px}
.adt-table{min-width:680px}
.adt-row{display:grid;grid-template-columns:130px 1fr 1fr 2fr 100px 110px;padding:9px 12px;border-bottom:1px solid var(--border2);font:.75rem/1.4 var(--sans);color:var(--ink);align-items:start;transition:background var(--mt-fast)}
.adt-row:last-child{border-bottom:none}
.adt-row:hover{background:rgba(255,255,255,.03)}
.adt-cell{word-break:break-word;padding-right:8px}
.adt-cell-ts{color:var(--muted);font:.7rem var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.adt-cell-action{font-weight:600;color:var(--ink)}
.adt-cell-entity{color:var(--muted);font:.72rem var(--sans)}
.adt-cell-details{color:var(--ink)}
.adt-cell-actor{color:var(--muted);font:.72rem var(--sans)}
.adt-cell-ip{font:.68rem 'Courier New',monospace;color:var(--muted)}
.adt-id{font:.65rem 'Courier New',monospace;opacity:.55;margin-left:4px}
.adt-empty{text-align:center;padding:48px 0;color:var(--muted);font:.82rem/1.5 var(--sans)}

/* Pager */
.adt-pager{display:flex;align-items:center;gap:12px;justify-content:center;padding:4px 0 8px}
.adt-pager-info{font:.75rem/1 var(--sans);color:var(--muted)}

/* Buttons */
.adt-btn-primary{background:var(--accent);color:#fafafa;border:none;border-radius:8px;padding:0 16px;font:.78rem/1 var(--sans);font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:opacity var(--mt-fast)}
.adt-btn-primary:hover{opacity:.85}
.adt-btn-ghost{background:none;border:1px solid var(--border2);border-radius:8px;padding:0 14px;font:.78rem/1 var(--sans);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:border-color var(--mt-fast),color var(--mt-fast)}
.adt-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.adt-btn-ghost:disabled{opacity:.35;cursor:not-allowed}
.adt-btn-sm{min-height:30px;padding:0 10px;font-size:.72rem}
.adt-btn-del{background:none;border:1px solid rgba(239,68,68,.35);border-radius:8px;padding:0 14px;font:.78rem/1 var(--sans);color:#ef4444;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:border-color var(--mt-fast)}
.adt-btn-del:hover{border-color:#ef4444;background:rgba(239,68,68,.06)}

/* Section headers */
.adt-section-hdr{font:.72rem/1 var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.adt-section-hdr-gap{margin-top:28px}
.adt-muted{font:.8rem/1.6 var(--sans);color:var(--muted);margin:0 0 16px}
.adt-label{font:.72rem/1 var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* GDPR view */
.adt-gdpr{display:flex;flex-direction:column;max-width:640px}
.adt-gdpr-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.adt-gdpr-result{padding:12px 16px;background:var(--card2);border:1px solid var(--border2);border-radius:10px;font:.78rem/1.5 var(--sans);color:var(--ink);margin-top:8px}

/* Retention view */
.adt-retention{display:flex;flex-direction:column;max-width:640px}
.adt-retention-form{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.adt-retention-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media(max-width:640px){
  .adt-panel{padding:16px 16px 24px}
  .adt-stats{grid-template-columns:1fr 1fr;gap:8px}
  .adt-stat{padding:12px 14px}
  .adt-stat-n{font-size:1.3rem}
  .adt-table-hdr,.adt-row{grid-template-columns:100px 1fr 1fr;min-width:400px}
  .adt-cell-details,.adt-cell-actor,.adt-cell-ip{display:none}
  .adt-filter-bar{flex-direction:column;align-items:stretch;gap:6px}
  .adt-inp,.adt-sel,.adt-inp-sm,.adt-filter-search{width:100%;box-sizing:border-box}
}

/* ═══════════════════════════════════════════════
   DATA IMPORT + MIGRATION ENGINE  (#10)
   ═══════════════════════════════════════════════ */
.imp-tab-bar{display:flex;gap:4px;flex-wrap:wrap;padding:0 0 16px;border-bottom:1px solid var(--border2);margin-bottom:16px}
.imp-tab{background:none;border:none;padding:5px 12px;font:.75rem/1 var(--sans);font-weight:500;color:var(--muted);cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent;transition:background var(--mt-fast),color var(--mt-fast);white-space:nowrap}
.imp-tab.active{background:var(--card2);color:var(--ink);font-weight:700}

/* step bar */
.imp-steps{display:flex;align-items:center;gap:0;margin-bottom:24px;overflow-x:auto}
.imp-step{display:flex;align-items:center;gap:6px;flex-shrink:0}
.imp-step-n{width:22px;height:22px;border-radius:50%;background:var(--card2);border:1px solid var(--border2);font:.7rem/1 var(--sans);font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.imp-step.active .imp-step-n{background:var(--accent);border-color:var(--accent);color:#fafafa}
.imp-step.done .imp-step-n{background:rgba(52,211,153,.15);border-color:#34d399;color:#34d399}
.imp-step-l{font:.72rem/1 var(--sans);color:var(--muted)}
.imp-step.active .imp-step-l{color:var(--ink);font-weight:600}
.imp-step-line{flex:1;min-width:16px;max-width:32px;height:1px;background:var(--border2);margin:0 4px}

/* drop zone */
.imp-drop-zone{border:2px dashed var(--border2);border-radius:14px;padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color var(--mt-fast),background var(--mt-fast);margin-bottom:16px}
.imp-drop-zone.drag-over{border-color:var(--accent);background:rgba(88,122,206,.06)}
.imp-drop-ic{color:var(--muted);opacity:.6}
.imp-drop-label{font:.9rem/1 var(--sans);font-weight:600;color:var(--ink)}
.imp-drop-hint{font:.75rem/1 var(--sans);color:var(--muted)}
.imp-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.imp-drop-tips{display:flex;flex-direction:column;gap:6px}
.imp-tip-row{display:flex;align-items:center;gap:8px;font:.75rem/1 var(--sans);color:var(--muted)}
.imp-tip-ic{color:#34d399;font-size:.8rem}

/* platform form */
.imp-platform-form{display:flex;flex-direction:column;gap:14px;max-width:480px}
.imp-field{display:flex;flex-direction:column;gap:6px}
.imp-label{font:.72rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.imp-inp{background:var(--card2);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;font:.8rem var(--sans);color:var(--ink);outline:none;-webkit-tap-highlight-color:transparent}
.imp-inp:focus{border-color:var(--accent)}
.imp-hint{font:.7rem/1.5 var(--sans);color:var(--muted)}
.imp-spinner{font:.8rem var(--sans);color:var(--muted);padding:8px 0}

/* mapping */
.imp-map-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.imp-badge-info{background:var(--card2);border:1px solid var(--border2);border-radius:20px;padding:3px 10px;font:.7rem/1 var(--sans);color:var(--ink)}
.imp-muted{font:.75rem/1 var(--sans);color:var(--muted)}
.imp-map-hdr{display:grid;grid-template-columns:1fr 24px 1fr 1fr;gap:8px;padding:6px 0;font:.68rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.imp-map-table{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.imp-map-row{display:grid;grid-template-columns:1fr 24px 1fr 1fr;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border2)}
.imp-map-src{font:.78rem/1 var(--sans);font-weight:600;color:var(--ink);word-break:break-word}
.imp-map-arrow{color:var(--muted);flex-shrink:0}
.imp-map-sel{background:var(--card2);border:1px solid var(--border2);border-radius:8px;padding:5px 8px;font:.75rem var(--sans);color:var(--ink);outline:none;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%}
.imp-map-sel:focus{border-color:var(--accent)}
.imp-map-sample{font:.68rem/1.4 var(--sans);color:var(--muted);word-break:break-word}
.imp-map-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:12px}

/* preview */
.imp-prev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.imp-stat-card{background:var(--card2);border:1px solid var(--border2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.imp-stat-card.green{border-color:rgba(52,211,153,.3)}
.imp-stat-card.blue{border-color:rgba(88,122,206,.3)}
.imp-stat-card.warn{border-color:rgba(245,158,11,.2)}
.imp-stat-n{font:1.3rem/1 var(--sans);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.imp-stat-l{font:.68rem/1 var(--sans);color:var(--muted)}
.imp-dupe-rule{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.imp-dupe-btns{display:flex;gap:6px}
.imp-dupe-btn{background:none;border:1px solid var(--border2);border-radius:20px;padding:4px 12px;font:.72rem/1 var(--sans);color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all var(--mt-fast);min-height:28px}
.imp-dupe-btn.active{border-color:var(--accent);color:var(--accent);font-weight:600}
.imp-prev-label{font:.72rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.imp-prev-hdr{display:grid;grid-template-columns:1fr 1fr 80px;gap:8px;padding:5px 8px;font:.68rem/1 var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.imp-prev-table{border:1px solid var(--border2);border-radius:8px;overflow:hidden;margin-bottom:16px}
.imp-prev-row{display:grid;grid-template-columns:1fr 1fr 80px;gap:8px;padding:7px 8px;border-bottom:1px solid var(--border2);font:.75rem/1.3 var(--sans)}
.imp-prev-row:last-child{border-bottom:none}
.imp-cell-email{color:var(--ink);word-break:break-all}
.imp-cell-name{color:var(--muted)}
.imp-cell-action{font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.imp-action-insert{color:#34d399}
.imp-action-update{color:#587ace}
.imp-action-skip{color:var(--muted)}

/* done */
.imp-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 0;text-align:center}
.imp-done-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:rgba(52,211,153,.1);border-radius:50%}
.imp-done-title{font:1.1rem/1 var(--sans);font-weight:700;color:var(--ink)}
.imp-done-stats{display:flex;gap:24px}
.imp-done-stat{display:flex;flex-direction:column;gap:4px;align-items:center}
.imp-done-n{font:1.4rem/1 var(--sans);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.imp-done-l{font:.68rem/1 var(--sans);color:var(--muted)}
.imp-done-batch{font:.7rem/1 var(--sans);color:var(--muted)}
.imp-done-batch code{font:.7rem 'Courier New',monospace;background:var(--card2);padding:2px 6px;border-radius:4px}
.imp-done-actions{display:flex;gap:8px}

/* history */
.imp-hist{display:flex;flex-direction:column;gap:4px}
.imp-hist-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border2)}
.imp-hist-row:last-child{border-bottom:none}
.imp-hist-grey{opacity:.5}
.imp-hist-main{flex:1;display:flex;flex-direction:column;gap:3px}
.imp-hist-label{font:.8rem/1 var(--sans);font-weight:600;color:var(--ink)}
.imp-hist-meta{font:.7rem/1 var(--sans);color:var(--muted)}
.imp-hist-rb{font:.65rem/1 var(--sans);color:#ef4444;font-weight:600;text-transform:uppercase}
.imp-hist-stats{display:flex;gap:8px;flex-shrink:0}
.imp-hist-s{font:.72rem/1 var(--sans);font-weight:600}
.imp-hist-s.green{color:#34d399}
.imp-hist-s.blue{color:#587ace}
.imp-hist-s.grey{color:var(--muted)}

/* buttons */
.imp-btn-primary{background:var(--accent);color:#fafafa;border:none;border-radius:8px;padding:0 16px;font:.78rem/1 var(--sans);font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:opacity var(--mt-fast)}
.imp-btn-primary:hover{opacity:.88}
.imp-btn-ghost{background:none;border:1px solid var(--border2);border-radius:8px;padding:0 12px;font:.78rem/1 var(--sans);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:36px;transition:border-color var(--mt-fast)}
.imp-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.imp-btn-sm{min-height:28px;padding:0 10px;font-size:.72rem}

/* error */
.imp-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:8px 12px;font:.78rem/1.4 var(--sans);color:#ef4444;margin-bottom:12px}

/* empty */
.imp-empty{text-align:center;padding:48px 0;color:var(--muted);font:.82rem/1.5 var(--sans)}

@media(max-width:640px){
  .imp-prev-stats{grid-template-columns:1fr 1fr}
  .imp-map-hdr,.imp-map-row{grid-template-columns:1fr 20px 1fr}
  .imp-map-sample{display:none}
  .imp-prev-hdr,.imp-prev-row{grid-template-columns:1fr 80px}
  .imp-cell-name{display:none}
  .imp-done-stats{gap:16px}
}