/* ============================================================
   BEAUTY SIGNAL OS — design tokens
   Palette:
     --bg-0  #0E0B10  (base canvas, near-black plum)
     --bg-1  #171219  (panel)
     --bg-2  #201A24  (raised panel / hover)
     --line  #322A38  (hairline)
     --ink-0 #F4EEF4  (primary text)
     --ink-1 #B9AEC0  (secondary text)
     --ink-2 #7C7186  (tertiary / muted)
     --accent #C24A86  (signal pink — action, focus)
     --accent-2 #E8A33D (amber — attention / medium risk)
     --accent-3 #4EC0A6 (teal — positive / low risk)
     --accent-4 #E1543D (red — high risk)
   Type:
     Display: "Fraunces" (editorial serif w/ personality, used sparingly for hero numbers & wordmark)
     UI/body: "Inter"
     Data/mono: "IBM Plex Mono" (scores, ids, timestamps — gives it an instrumentation feel)
   Signature element: the "signal pulse" — a thin animated dashed ring around avatars/nodes that
   are actively emitting signal (creators posting, trends accelerating). Quiet, not decorative.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg-0:#0E0B10;
  --bg-1:#171219;
  --bg-2:#201A24;
  --bg-3:#291F2E;
  --line:#322A38;
  --ink-0:#F4EEF4;
  --ink-1:#B9AEC0;
  --ink-2:#7C7186;
  --accent:#C24A86;
  --accent-soft:rgba(194,74,134,0.16);
  --accent-2:#E8A33D;
  --accent-2-soft:rgba(232,163,61,0.16);
  --accent-3:#4EC0A6;
  --accent-3-soft:rgba(78,192,166,0.16);
  --accent-4:#E1543D;
  --accent-4-soft:rgba(225,84,61,0.16);
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:16px;
  --font-display:'Fraunces', serif;
  --font-ui:'Inter', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --sidebar-w:76px;
  --evidence-w:360px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--accent);color:#fff}

/* focus rings everywhere, always visible */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .card:focus-visible, .node:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- layout shell ---------- */
#app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:56px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  height:100vh;
}

/* ---------- topbar ---------- */
#topbar{
  grid-area:topbar;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:var(--bg-1);
  border-bottom:1px solid var(--line);
  z-index:20;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  width:26px;height:26px;border-radius:7px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  color:#160D14;
  flex-shrink:0;
}
.brand-word{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  letter-spacing:.2px;
}
.brand-word small{
  display:block;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:1px;
}
.topbar-right{display:flex;align-items:center;gap:14px}
.role-select{
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--ink-0);
  padding:7px 10px;
  border-radius:var(--radius-s);
  font-size:12.5px;
  font-family:var(--font-mono);
}
.help-btn{
  background:transparent;border:1px solid var(--line);color:var(--ink-1);
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px;
}
.help-btn:hover{color:var(--ink-0);border-color:var(--accent)}
.avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--ink-0);
  border:1px solid var(--line);
  flex-shrink:0;
}

/* ---------- sidebar ---------- */
#sidebar{
  grid-area:sidebar;
  background:var(--bg-1);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 0;
  gap:4px;
}
.nav-item{
  width:52px;height:52px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  border-radius:var(--radius-m);
  color:var(--ink-2);
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  font-family:var(--font-ui);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.02em;
  transition:background .12s,color .12s;
}
.nav-item svg{width:19px;height:19px}
.nav-item:hover{background:var(--bg-2);color:var(--ink-0)}
.nav-item.active{background:var(--accent-soft);color:var(--accent)}
.nav-item.active svg{filter:drop-shadow(0 0 6px var(--accent-soft))}

/* ---------- main ---------- */
#main{
  grid-area:main;
  overflow-y:auto;
  padding:22px 26px 60px;
}
.screen{max-width:1500px;margin:0 auto}
.screen-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:10px;
}
.screen-title{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
}
.screen-sub{color:var(--ink-2);font-size:12.5px;margin-top:2px}
.eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:4px;
}

/* ---------- generic bits ---------- */
.card{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:16px;
}
.grid{display:grid;gap:14px}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:600;font-family:var(--font-mono);
  white-space:nowrap;
}
.pill-conf-high{background:var(--accent-3-soft);color:var(--accent-3)}
.pill-conf-med{background:var(--accent-2-soft);color:var(--accent-2)}
.pill-conf-low{background:var(--accent-4-soft);color:var(--accent-4)}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:var(--radius-s);
  font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;display:inline-block}
.badge-high{background:var(--accent-4-soft);color:var(--accent-4)}
.badge-high::before{background:var(--accent-4)}
.badge-med{background:var(--accent-2-soft);color:var(--accent-2)}
.badge-med::before{background:var(--accent-2)}
.badge-low{background:var(--accent-3-soft);color:var(--accent-3)}
.badge-low::before{background:var(--accent-3)}

.btn{
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--ink-0);
  padding:7px 12px;
  border-radius:var(--radius-s);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .12s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#a83b71;color:#fff;filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-1)}
.btn-ghost:hover{color:var(--ink-0);background:var(--bg-2)}
.btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line);color:var(--ink-2)}
.btn-sm{padding:4px 9px;font-size:11px}

.chip{
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:3px 9px;
  border-radius:99px;
  font-size:11px;
  color:var(--ink-1);
}

select, input[type=text], input[type=search], input[type=date], textarea{
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--ink-0);
  padding:7px 9px;
  border-radius:var(--radius-s);
  font-size:12.5px;
  font-family:var(--font-ui);
}
label{font-size:11.5px;color:var(--ink-2);display:block;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

.filters-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filter-field{display:flex;flex-direction:column;gap:0}

/* ============ SCREEN 1: Command center ============ */
.alert-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:20px;
}
.alert-card{
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.alert-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
}
.alert-card.type-trend::before{background:var(--accent)}
.alert-card.type-creator::before{background:var(--accent-3)}
.alert-card.type-risk::before{background:var(--accent-4)}
.alert-card.type-content::before{background:var(--accent-2)}
.alert-card.type-innovation::before{background:#8B7FD6}
.alert-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.alert-card.actioned{opacity:.55}
.alert-card.snoozed{opacity:.4}
.alert-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:8px}
.alert-signal{font-weight:700;font-size:13.5px;line-height:1.3}
.alert-why{color:var(--ink-1);font-size:12px;margin:6px 0}
.alert-impact{font-family:var(--font-mono);color:var(--accent-2);font-weight:600;font-size:13px}
.alert-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:6px}
.alert-owner{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.alert-owner .avatar{width:20px;height:20px;font-size:9px}
.due-chip{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2)}
.alert-evidence{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--ink-1);display:none;
}
.alert-card.expanded .alert-evidence{display:block}

.kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px}
.kpi-box{padding:14px}
.kpi-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:700}
.kpi-value{font-family:var(--font-display);font-size:24px;margin-top:4px}
.kpi-delta{font-family:var(--font-mono);font-size:11px;margin-top:3px}
.kpi-delta.up{color:var(--accent-3)}
.kpi-delta.down{color:var(--accent-4)}

.cc-lower{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.decision-feed{max-height:420px;overflow-y:auto}
.feed-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.feed-text{font-size:12.5px}
.feed-meta{font-size:11px;color:var(--ink-2);margin-top:2px;font-family:var(--font-mono)}
.status-tag{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-left:6px}

/* ============ SCREEN 2: Trend radar ============ */
.lifecycle{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.phase-col{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-m);padding:10px;min-height:140px}
.phase-col.drag-over{border-color:var(--accent);background:var(--accent-soft)}
.phase-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.phase-name{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.phase-count{font-family:var(--font-mono);color:var(--ink-2);font-size:11px}
.trend-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:10px;margin-bottom:8px;cursor:grab;
}
.trend-card:hover{border-color:var(--accent)}
.trend-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.trend-name{font-weight:700;font-size:12.5px}
.trend-growth{font-family:var(--font-mono);color:var(--accent-3);font-size:11.5px;margin-top:2px}
.time-bar{height:3px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.time-bar-fill{height:100%;background:var(--accent-2)}
.avatar-stack{display:flex;margin-top:6px}
.avatar-stack .avatar{width:18px;height:18px;font-size:8px;margin-left:-6px;border:2px solid var(--bg-2)}
.avatar-stack .avatar:first-child{margin-left:0}

.trend-detail{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.trend-detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.meta-item .k{font-size:10.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.meta-item .v{font-size:13px;font-weight:600;margin-top:2px}

/* ============ SCREEN 3: Creator map ============ */
.creator-layout{display:grid;grid-template-columns:220px 1fr;gap:16px}
.creator-filters .filter-group{margin-bottom:14px}
.creator-filters .filter-group-title{font-size:10.5px;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:6px;letter-spacing:.05em}
.checkline{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-1);margin-bottom:5px;cursor:pointer}
.quadrant-wrap{position:relative;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.quadrant-wrap svg{display:block;width:100%;height:560px;cursor:grab}
.quadrant-wrap svg.panning{cursor:grabbing}
.quad-label{font-family:var(--font-mono);font-size:11px;fill:var(--ink-2);letter-spacing:.05em}
.node{cursor:pointer}
.node circle.ring{fill:none;stroke-width:2}
.node.selected circle.body{stroke:#fff;stroke-width:2}
.node-pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{
  0%{stroke-dasharray:2 4;stroke-dashoffset:0}
  100%{stroke-dasharray:2 4;stroke-dashoffset:-24}
}
.zoom-controls{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:4px}
.zoom-controls button{width:28px;height:28px;border-radius:6px}

.drawer{
  position:fixed;top:56px;right:0;bottom:0;width:380px;
  background:var(--bg-1);border-left:1px solid var(--line);
  box-shadow:-8px 0 24px rgba(0,0,0,.35);
  z-index:40;transform:translateX(100%);transition:transform .18s ease;
  overflow-y:auto;padding:18px;
}
.drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;top:14px;right:14px}
.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.thumb{aspect-ratio:9/16;border-radius:6px;background:var(--bg-3);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:10px}

/* ============ SCREEN 4: Feedback lab ============ */
.pfl-layout{display:grid;grid-template-columns:1fr var(--evidence-w);gap:16px;align-items:start}
.pfl-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.cmap-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cmap-table th{text-align:left;color:var(--ink-2);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--line)}
.cmap-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmap-table tr:hover td{background:var(--bg-2)}
.spark{display:flex;align-items:end;gap:1.5px;height:22px}
.spark i{display:block;width:3px;background:var(--accent);border-radius:1px;opacity:.75}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 14px;overflow-x:auto}
.tab-btn{padding:8px 12px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab-btn:hover{color:var(--ink-0)}
.tab-btn.active{color:var(--accent);border-color:var(--accent)}
.tab-pane{display:none}
.tab-pane.active{display:block}

.polaroid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.polaroid{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:6px}
.polaroid .ph{aspect-ratio:1;background:var(--bg-3);border-radius:4px;margin-bottom:5px}
.polaroid .cap{font-size:9.5px;color:var(--ink-2)}

.heatmap{display:grid;gap:2px}
.heat-cell{aspect-ratio:1.6;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:600;color:#0E0B10}
.heat-row-label,.heat-col-label{font-size:10px;color:var(--ink-2);display:flex;align-items:center}

.gap-row{display:grid;grid-template-columns:1fr 60px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.gap-score{font-family:var(--font-mono);text-align:center;font-weight:700}

.evidence-panel{position:sticky;top:0;max-height:calc(100vh - 100px)}
.evidence-search{width:100%;margin-bottom:10px}
.evidence-list{max-height:600px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.ev-item{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px;font-size:12px}
.ev-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ev-lang{font-family:var(--font-mono);font-size:10px;color:var(--ink-2)}
.ev-text{color:var(--ink-0);margin-bottom:6px}
.ev-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.ev-tag{font-size:10px;background:var(--bg-3);padding:2px 6px;border-radius:4px;color:var(--ink-1)}
.ev-actions{display:flex;gap:6px;flex-wrap:wrap}

.hold-banner{
  background:var(--accent-4-soft);border:1px solid var(--accent-4);color:var(--accent-4);
  padding:9px 14px;border-radius:var(--radius-s);font-size:12.5px;font-weight:600;margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center;
}

/* ============ SCREEN 5: Experiments ============ */
.exp-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.exp-row{display:grid;grid-template-columns:1fr 100px 120px 90px;gap:12px;align-items:center;padding:12px 14px;cursor:pointer}
.exp-row:hover{border-color:var(--accent)}
.exp-name{font-weight:700;font-size:13px}
.exp-hyp{color:var(--ink-2);font-size:11.5px;margin-top:2px}
.status-chip{padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700;text-align:center;text-transform:uppercase}
.status-Draft{background:var(--bg-3);color:var(--ink-1)}
.status-Running{background:var(--accent-soft);color:var(--accent)}
.status-Concluded{background:var(--accent-3-soft);color:var(--accent-3)}
.status-Blocked{background:var(--accent-4-soft);color:var(--accent-4)}

.exp-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.results-table{width:100%;border-collapse:collapse;font-size:12.5px}
.results-table th,.results-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.results-table th{color:var(--ink-2);font-size:10.5px;text-transform:uppercase}
.sig-flag{color:var(--accent-3);font-weight:700;font-family:var(--font-mono)}

/* ---------- modal / toast / overlay ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(6,4,8,.6);z-index:50;
  display:none;align-items:center;justify-content:center;
}
.overlay.open{display:flex}
.modal{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:22px;width:480px;max-width:92vw;max-height:88vh;overflow-y:auto;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.modal-title{font-family:var(--font-display);font-size:19px;font-weight:600}
.field-row{margin-bottom:12px}
.field-row .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

#toast-host{position:fixed;bottom:20px;right:20px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--bg-2);border:1px solid var(--accent);color:var(--ink-0);
  padding:11px 16px;border-radius:var(--radius-s);font-size:12.5px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  animation:toast-in .18s ease;
  max-width:320px;
}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.help-body h3{font-family:var(--font-display);font-weight:600;margin-top:18px;margin-bottom:6px}
.help-body ol,.help-body ul{padding-left:18px}
.help-body li{margin-bottom:5px}

.table-scroll{overflow-x:auto}
.muted{color:var(--ink-2)}
.readonly-note{font-size:11px;color:var(--ink-2);font-style:italic}

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:99px;border:2px solid var(--bg-0)}
::-webkit-scrollbar-thumb:hover{background:var(--line)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .alert-row{grid-template-columns:repeat(3,1fr)}
  .kpi-strip{grid-template-columns:repeat(3,1fr)}
  .cc-lower{grid-template-columns:1fr}
  .pfl-layout{grid-template-columns:1fr}
  .creator-layout{grid-template-columns:1fr}
  .pfl-kpi{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  :root{--sidebar-w:60px}
  .alert-row{grid-template-columns:repeat(2,1fr)}
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .lifecycle{grid-template-columns:1fr}
  .drawer{width:92vw}
  .nav-item span{display:none}
}