/* =========================================================================
   UI ELEMENTS — reference gallery styling. Token-driven so it follows
   whatever theme structure.css is currently applying.
   ========================================================================= */
.uie-panel{ gap:0; }
.uie-crumb{
  font-size:var(--fs-small); color:var(--faint);
  text-transform:uppercase; letter-spacing:1px; font-weight:600;
}
.uie-scroll{ display:flex; flex-direction:column; gap:var(--s-6); overflow-y:auto; padding-top:var(--s-2); }

.uie-view{ display:none; }
.uie-view.visible{ display:block; }

.uie-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-4);
}
.uie-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-3);
}
.uie-card.wide{ grid-column:1 / -1; }
.uie-card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2);
  font-size:var(--fs-content); font-weight:600; color:var(--text);
}
.uie-card-head em{
  font-style:normal; font-weight:500; font-size:var(--fs-caption);
  color:var(--faint); text-transform:uppercase; letter-spacing:.6px;
}
.uie-demo{ display:flex; align-items:flex-end; min-height:90px; }
.uie-demo.center{ align-items:center; justify-content:center; }

/* ---- Stat cards ---- */
.uie-stat{ display:flex; flex-direction:column; gap:6px; width:100%; }
.uie-stat-label{ font-size:var(--fs-label); text-transform:uppercase; letter-spacing:1px; color:var(--faint); font-weight:700; }
.uie-stat-value{ font-size:24px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.uie-stat-delta{ font-size:var(--fs-small); font-weight:600; color:var(--good); }
.uie-stat-delta span{ color:var(--faint); font-weight:500; margin-left:4px; }
.uie-stat-delta.down{ color:var(--warn); }
.uie-stat-delta.important{ color:var(--important); }
.uie-stat.mono .uie-stat-value{ color:var(--accent); }

.uie-spark{ display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:4px; }
.uie-spark span{ flex:1; background:var(--accent); opacity:.55; border-radius:1px; min-height:2px; }
.uie-spark.sm{ height:18px; }
.uie-spark.sm span{ background:var(--good); }

.uie-bar{ height:6px; border-radius:3px; background:var(--line-soft); overflow:hidden; margin-top:4px; }
.uie-bar.sm{ height:4px; margin-top:6px; }
.uie-bar-fill{ height:100%; background:var(--accent); border-radius:3px; }

/* ---- Charts ---- */
.uie-linechart{ width:100%; height:120px; }
.uie-donut-row{ display:flex; align-items:center; gap:var(--s-4); width:100%; }
.uie-donut{
  width:96px; height:96px; border-radius:50% !important; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.uie-donut-center{
  width:60%; height:60%; border-radius:50% !important; background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.uie-donut-center strong{ font-size:11px; color:var(--text); }
.uie-donut-center span{ font-size:9px; color:var(--faint); }
.uie-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:var(--fs-small); color:var(--muted); flex:1; }
.uie-legend li{ display:flex; align-items:center; gap:8px; }
.uie-legend i{ width:8px; height:8px; border-radius:50% !important; flex:0 0 auto; }
.uie-legend b{ margin-left:auto; color:var(--text); font-weight:600; }

.uie-bars{ display:flex; align-items:flex-end; gap:6px; height:90px; width:100%; }
.uie-bars span{ flex:1; background:linear-gradient(180deg,var(--accent),var(--accent2)); border-radius:3px 3px 0 0; min-height:4px; }

/* ---- Gauges & rings ---- */
.uie-ring{
  --pct:50; --ring-color:var(--accent); --ring-track:var(--line-soft);
  width:120px; height:120px; border-radius:50% !important; flex:0 0 auto;
  background:conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ring-track) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.uie-ring::before{
  content:''; position:absolute; inset:10px; border-radius:50% !important; background:var(--card);
}
.uie-ring strong, .uie-ring span{ position:relative; z-index:1; }
.uie-ring{ display:flex; flex-direction:column; }
.uie-ring strong{ font-size:18px; font-weight:700; color:var(--text); }
.uie-ring span{ font-size:9.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px; }
.uie-ring.small{ width:88px; height:88px; }
.uie-ring.small strong{ font-size:14px; }
.uie-ring.danger{ --ring-track:rgba(var(--important-rgb),.18); }
.uie-ring.on-image strong, .uie-ring.on-image span{ color:#fff; }
.uie-ring.on-image::before{ background:rgba(0,0,0,.35); }

/* ---- Tables & lists ---- */
.uie-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); }
.uie-table th{ text-align:left; color:var(--faint); font-weight:600; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.6px; padding:6px 8px; border-bottom:1px solid var(--line); }
.uie-table td{ padding:8px; border-bottom:1px solid var(--line-soft); color:var(--text); }
.uie-table td.up{ color:var(--good); font-weight:600; }

.uie-feed, .uie-alerts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; width:100%; }
.uie-feed li{ display:flex; align-items:center; gap:10px; font-size:var(--fs-small); }
.uie-feed-time{ color:var(--faint); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.uie-feed-text{ flex:1; color:var(--text); }
.uie-badge{ font-size:var(--fs-caption); font-weight:700; letter-spacing:.4px; padding:3px 8px; border-radius:var(--r-sm); flex:0 0 auto; }
.uie-badge.good{ background:rgba(var(--good-rgb),.16); color:var(--good); }
.uie-badge.warn{ background:rgba(var(--warn-rgb),.16); color:var(--warn); }

.uie-alerts li{ display:flex; align-items:flex-start; gap:10px; }
.uie-alerts svg{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
.uie-alerts li.warn svg{ color:var(--warn); }
.uie-alerts li.good svg{ color:var(--good); }
.uie-alerts div{ display:flex; flex-direction:column; gap:2px; flex:1; }
.uie-alerts strong{ font-size:var(--fs-small); color:var(--text); }
.uie-alerts span{ font-size:var(--fs-caption); color:var(--faint); }
.uie-alerts time{ font-size:var(--fs-caption); color:var(--faint); flex:0 0 auto; }

/* ---- Image panels (placeholders — swap backgrounds for real art later) ---- */
.uie-hero{
  width:100%; min-height:140px; border-radius:var(--r-md); position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}
.uie-hero.round{ width:140px; height:140px; border-radius:50% !important; align-items:center; justify-content:center; margin:0 auto; }
.uie-hero-overlay{ padding:var(--s-3); background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)); width:100%; }
.uie-hero-overlay h4{ margin:0 0 4px; font-size:var(--fs-content); color:#fff; }
.uie-hero-overlay p{ margin:0; font-size:var(--fs-small); color:rgba(255,255,255,.78); }
.uie-hero-meta{ margin-top:8px; font-size:var(--fs-caption); color:rgba(255,255,255,.55); }

.uie-roster{ display:flex; flex-direction:column; gap:var(--s-3); width:100%; }
.uie-roster-item{ display:flex; align-items:center; gap:10px; }
.uie-avatar{
  width:40px; height:40px; border-radius:50% !important; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; letter-spacing:.5px;
}
.uie-roster-info{ display:flex; flex-direction:column; gap:4px; flex:1; }
.uie-roster-info strong{ font-size:var(--fs-small); color:var(--text); }
.uie-roster-info span{ font-size:var(--fs-caption); color:var(--faint); }

/* ---- Pinboard demo (Auto-Suggestion photo pins) + code reference ---- */
.uie-pinboard-demo{ position:relative; width:100%; min-height:150px; }
.uie-code-label{
  font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.8px;
  color:var(--faint); font-weight:700; margin-top:2px;
}
.uie-code-note{ font-size:var(--fs-small); color:var(--muted); line-height:1.6; margin:0; }
.uie-code-note code{ background:var(--card-subtle); border-radius:4px; padding:1px 5px; color:var(--text); }
.uie-code{
  background:var(--card-subtle); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; margin:0; max-height:260px; overflow:auto;
  font-family:Consolas,"SF Mono","Cascadia Code",ui-monospace,monospace;
  font-size:11.5px; line-height:1.6; color:var(--muted); white-space:pre;
}

/* ---- Nav & headers ---- */
.uie-header{
  display:flex; align-items:center; gap:var(--s-4); width:100%;
  padding:var(--s-2) var(--s-3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--card-2);
}
.uie-header-brand{ display:flex; align-items:center; gap:8px; font-size:var(--fs-small); font-weight:700; color:var(--text); letter-spacing:.5px; }
.uie-header-mark{ width:18px; height:18px; border-radius:50% !important; background:radial-gradient(circle,var(--accent),var(--accent2)); flex:0 0 auto; }
.uie-header-title{ flex:1; text-align:center; font-size:var(--fs-caption); letter-spacing:1.5px; color:var(--faint); text-transform:uppercase; }
.uie-header-meta{ display:flex; align-items:center; gap:10px; font-size:var(--fs-caption); color:var(--faint); }
.uie-status-pill{ color:var(--good); font-weight:600; }

.uie-icon-rail{ display:flex; flex-direction:column; gap:8px; }
.uie-icon-rail span{
  width:36px; height:36px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  background:var(--card-2); border:1px solid var(--line); color:var(--faint);
}
.uie-icon-rail span svg{ width:16px; height:16px; }
.uie-icon-rail span.active{ background:rgba(var(--accent-rgb),.14); color:var(--accent); border-color:var(--accent); }

.uie-tabstrip{ display:flex; gap:var(--s-4); border-bottom:1px solid var(--line); width:100%; }
.uie-tabstrip span{
  padding:8px 2px; font-size:var(--fs-small); color:var(--faint); cursor:default;
  border-bottom:2px solid transparent;
}
.uie-tabstrip span.active{ color:var(--text); font-weight:600; border-bottom-color:var(--accent); }

/* =========================================================================
   PER-SOURCE THEMES — these intentionally break from the app's own palette.
   This gallery exists to show what each reference dashboard actually looks
   like, not to reskin it into the app's monochrome system.
   ========================================================================= */
.uie-card{ position:relative; overflow:hidden; }

/* ---- Nexus Analytics / Financial Overview: dark cyan sci-fi HUD ---- */
.uie-card.t-nexus{
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(30,90,130,.45), transparent 55%),
    linear-gradient(165deg,#0b151e,#040810);
  border:1px solid rgba(86,212,255,.32);
  box-shadow:0 0 0 1px rgba(86,212,255,.06) inset, 0 0 30px -8px rgba(56,182,255,.4);
}
.uie-card.t-nexus::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(120,220,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,220,255,.05) 1px, transparent 1px);
  background-size:18px 18px;
}
.uie-hud-corner{ position:absolute; width:13px; height:13px; border:2px solid rgba(120,224,255,.6); z-index:2; pointer-events:none; }
.uie-hud-corner.tl{ top:6px; left:6px; border-right:none; border-bottom:none; }
.uie-hud-corner.tr{ top:6px; right:6px; border-left:none; border-bottom:none; }
.uie-hud-corner.bl{ bottom:6px; left:6px; border-right:none; border-top:none; }
.uie-hud-corner.br{ bottom:6px; right:6px; border-left:none; border-top:none; }
.uie-card.t-nexus .uie-card-head{ position:relative; z-index:1; color:#bdeeff; text-transform:uppercase; letter-spacing:1.1px; font-size:11.5px; font-weight:700; }
.uie-card.t-nexus .uie-card-head em{ color:#4f93b8; text-transform:uppercase; letter-spacing:.6px; font-size:9.5px; }
.uie-card.t-nexus .uie-demo{ position:relative; z-index:1; }
.uie-card.t-nexus .uie-stat-label{ color:#6fb9d6; }
.uie-card.t-nexus .uie-stat-value{ color:#eafcff; font-family:Consolas,"SFMono-Regular",monospace; letter-spacing:.5px; text-shadow:0 0 16px rgba(86,212,255,.55),0 0 2px rgba(255,255,255,.3); }
.uie-card.t-nexus .uie-stat-delta.up{ color:var(--accent); text-shadow:0 0 8px rgba(var(--accent-rgb),.45); }
.uie-card.t-nexus .uie-stat-delta span{ color:#4f93b8; }
.uie-card.t-nexus .uie-spark span{ background:linear-gradient(180deg,var(--accent),#1aa6d9); opacity:.95; box-shadow:0 0 6px rgba(86,212,255,.5); }
.uie-card.t-nexus .uie-bar{ background:rgba(86,212,255,.12); }
.uie-card.t-nexus .uie-bar-fill{ background:linear-gradient(90deg,#1aa6d9,var(--accent)); box-shadow:0 0 8px rgba(86,212,255,.6); }
.uie-card.t-nexus .uie-bars span{ background:linear-gradient(180deg,var(--accent),#155e8a); box-shadow:0 0 6px rgba(86,212,255,.4); }
.uie-card.t-nexus .uie-legend{ color:#9fcfe6; }
.uie-card.t-nexus .uie-legend b{ color:#eafcff; }
.uie-card.t-nexus .uie-donut-center{ background:#04111c; box-shadow:0 0 0 1px rgba(86,212,255,.18) inset; }
.uie-card.t-nexus .uie-donut-center strong{ color:#eafcff; }
.uie-card.t-nexus .uie-donut-center span{ color:#6fb9d6; }
.uie-card.t-nexus .uie-ring{ --ring-track:rgba(86,212,255,.12); }
.uie-card.t-nexus .uie-ring::before{ background:#04111c; box-shadow:0 0 0 1px rgba(86,212,255,.18) inset; }
.uie-card.t-nexus .uie-ring strong{ color:#eafcff; text-shadow:0 0 14px rgba(86,212,255,.6); }
.uie-card.t-nexus .uie-ring span{ color:#6fb9d6; }
.uie-card.t-nexus .uie-table th{ color:#6fb9d6; border-color:rgba(86,212,255,.2); }
.uie-card.t-nexus .uie-table td{ color:#dff7ff; border-color:rgba(86,212,255,.12); }
.uie-card.t-nexus .uie-table td.up{ color:var(--accent); }
.uie-card.t-nexus .uie-feed-text{ color:#dff7ff; }
.uie-card.t-nexus .uie-feed-time{ color:#5e8ca3; }
.uie-card.t-nexus .uie-badge.good{ background:rgba(var(--accent-rgb),.15); color:var(--accent); }
.uie-card.t-nexus .uie-badge.warn{ background:rgba(255,196,77,.15); color:#ffc44d; }
.uie-card.t-nexus .uie-header{ background:linear-gradient(160deg,#0c1822,#050a10); border:1px solid rgba(86,212,255,.3); }
.uie-card.t-nexus .uie-header-brand{ color:#bdeeff; }
.uie-card.t-nexus .uie-header-mark{ background:radial-gradient(circle,var(--accent),#1469a8); box-shadow:0 0 10px rgba(86,212,255,.7); }
.uie-card.t-nexus .uie-header-title{ color:#6fb9d6; }
.uie-card.t-nexus .uie-header-meta{ color:#4f93b8; }
.uie-card.t-nexus .uie-status-pill{ color:var(--accent); text-shadow:0 0 8px rgba(var(--accent-rgb),.5); }

/* ---- Recon & Strategic Ops: gritty dark olive/brown + threat red ---- */
.uie-card.t-tactical{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px),
    linear-gradient(165deg,#1b1712,#0e0c09);
  border:1px solid #4a4030;
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}
.uie-card.t-tactical .uie-card-head{ color:#d8c9a0; font-weight:700; letter-spacing:.6px; text-transform:uppercase; font-size:11.5px; }
.uie-card.t-tactical .uie-card-head em{ color:#8a7a5a; font-size:9.5px; text-transform:uppercase; }
.uie-card.t-tactical .uie-stat-label{ color:#a89572; }
.uie-card.t-tactical .uie-stat-value{ color:#f1e6c8; }
.uie-card.t-tactical .uie-stat-delta.important{ color:#e5484d; text-shadow:0 0 10px rgba(229,72,77,.5); }
.uie-card.t-tactical .uie-ring{ --ring-track:rgba(229,72,77,.14); }
.uie-card.t-tactical .uie-ring::before{ background:#15110c; box-shadow:0 0 0 1px rgba(229,72,77,.25) inset; }
.uie-card.t-tactical .uie-ring strong{ color:#f3d9d9; }
.uie-card.t-tactical .uie-ring span{ color:#b08a7a; }
.uie-card.t-tactical .uie-alerts strong{ color:#f1e6c8; }
.uie-card.t-tactical .uie-alerts span{ color:#a89572; }
.uie-card.t-tactical .uie-alerts time{ color:#8a7a5a; }
.uie-card.t-tactical .uie-alerts li.warn svg{ color:#e5484d; }
.uie-card.t-tactical .uie-alerts li.good svg{ color:#9ec77e; }
.uie-card.t-tactical .uie-icon-rail span{ background:#1c1812; border:1px solid #4a4030; color:#a89572; }
.uie-card.t-tactical .uie-icon-rail span.active{ background:rgba(229,72,77,.18); border-color:#e5484d; color:#ffb4b6; }

/* ---- Yu No Ka: warm illustrated journal, soft gold & lantern light ---- */
.uie-card.t-journal{
  background:
    radial-gradient(120% 140% at 75% 0%, rgba(255,205,140,.10), transparent 60%),
    linear-gradient(165deg,#16302c,#0a1c19);
  border:1px solid rgba(212,175,110,.4);
  border-radius:10px !important;
  box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(212,175,110,.12) inset;
}
.uie-card.t-journal .uie-card-head{ color:#e7d3a1; font-weight:600; }
.uie-card.t-journal .uie-card-head em{ color:#9c8454; font-style:italic; font-weight:400; }
.uie-card.t-journal .uie-hero{ border-radius:10px !important; border:1px solid rgba(212,175,110,.45); box-shadow:0 0 0 1px rgba(212,175,110,.12) inset, 0 10px 24px rgba(0,0,0,.4); }
.uie-card.t-journal .uie-hero-overlay h4{ color:#fbe9c6; font-weight:600; }
.uie-card.t-journal .uie-hero-overlay p{ color:rgba(251,233,198,.78); }
.uie-card.t-journal .uie-hero-meta{ color:rgba(251,233,198,.5); }

/* ---- Naruto training: parchment/scroll, orange & blue accents ---- */
.uie-card.t-anime{
  background:linear-gradient(165deg,#2a2013,#15100a);
  border:2px solid #6b4a26;
  border-radius:8px !important;
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.uie-card.t-anime .uie-card-head{ color:#f0c987; font-weight:700; }
.uie-card.t-anime .uie-card-head em{ color:#9c7a4a; font-weight:500; }
.uie-card.t-anime .uie-avatar{ box-shadow:0 0 0 2px #1c1410, 0 0 0 4px #e08a3c; }
.uie-card.t-anime .uie-roster-info strong{ color:#f0c987; }
.uie-card.t-anime .uie-roster-info span{ color:#9c7a4a; }
.uie-card.t-anime .uie-bar{ background:#1c1410; }
.uie-card.t-anime .uie-bar-fill{ background:linear-gradient(90deg,#e08a3c,#f3c878); }
.uie-card.t-anime .uie-ring.on-image{ box-shadow:0 0 22px rgba(255,180,84,.45); }
.uie-card.t-anime .uie-hero.round{ border:3px solid #6b4a26; box-shadow:0 10px 24px rgba(0,0,0,.5); }

/* ---- Notion-style tab strip: clean light surface, distinct from the rest ---- */
.uie-card.t-notion{
  background:#fbfbfa; border:1px solid #e7e6e3; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.uie-card.t-notion .uie-card-head{ color:#1f1f1f; }
.uie-card.t-notion .uie-card-head em{ color:#9b9a97; }
.uie-card.t-notion .uie-tabstrip{ border-color:#e7e6e3; }
.uie-card.t-notion .uie-tabstrip span{ color:#9b9a97; }
.uie-card.t-notion .uie-tabstrip span.active{ color:#1f1f1f; border-bottom-color:#2383e2; }

/* ---- Empirium Call Coach: dark console glass, mint-signal + wire-blue accents ---- */
.uie-card.t-empirium{
  background:
    radial-gradient(120% 160% at 6% -10%, rgba(var(--accent-rgb),.10), transparent 32%),
    radial-gradient(120% 160% at 94% 0%, rgba(var(--accent-rgb),.08), transparent 32%),
    linear-gradient(165deg,#0a0f18,#04070d);
  border:1px solid rgba(170,199,255,.16);
}
.uie-card.t-empirium .uie-card-head{ color:#e9effc; font-weight:700; }
.uie-card.t-empirium .uie-card-head em{ color:#65748d; text-transform:uppercase; letter-spacing:.6px; font-size:9.5px; }

.uie-emp-scope{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  border:1px solid rgba(255,255,255,.07); color:#65748d; background:rgba(255,255,255,.03);
}
.uie-emp-scope.range{ color:#b7e4ff; border-color:rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.07); }
.uie-emp-scope.gym{ color:#d9c9ff; border-color:rgba(184,156,255,.3); background:rgba(184,156,255,.09); }

/* Pace tracker: value vs self-relative median, not a hard target */
.uie-emp-pace{ width:100%; }
.uie-emp-pace-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.uie-emp-pace-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:#9aa8c0; font-weight:700; }
.uie-emp-pace-top b{ font-size:23px; font-weight:800; letter-spacing:-.04em; color:#fff; font-variant-numeric:tabular-nums; }
.uie-emp-pace-top b small{ font-size:12px; color:#9aa8c0; font-weight:600; margin-left:2px; }
.uie-emp-pace-track{ height:8px; border-radius:99px; background:rgba(255,255,255,.05); overflow:hidden; margin-top:9px; position:relative; }
.uie-emp-pace-track i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent)); }
.uie-emp-pace-track .median{ position:absolute; top:-2px; bottom:-2px; width:2px; background:#9aa8c0; border-radius:2px; }
.uie-emp-pace-foot{ display:flex; justify-content:space-between; gap:8px; margin-top:7px; font-size:10.5px; color:#65748d; }
.uie-emp-pace-foot .amber{ color:#e9c07a; font-weight:700; }

/* Team pulse: coverage-gated tile grid */
.uie-emp-pulse{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; }
.uie-emp-pulse-tile{ border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); border-radius:11px; padding:10px 11px; min-height:82px; display:flex; flex-direction:column; }
.uie-emp-pulse-tile .lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#9aa8c0; font-weight:700; }
.uie-emp-pulse-tile .val{ font-size:21px; font-weight:800; letter-spacing:-.04em; margin-top:auto; padding-top:7px; color:#fff; font-variant-numeric:tabular-nums; }
.uie-emp-pulse-tile .val small{ font-size:11px; color:#9aa8c0; font-weight:600; margin-left:2px; }
.uie-emp-pulse-tile .foot{ font-size:9.5px; color:#65748d; margin-top:4px; line-height:1.4; }
.uie-emp-cov-track{ height:5px; border-radius:99px; background:rgba(255,255,255,.06); margin-top:6px; overflow:hidden; }
.uie-emp-cov-track i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent)); }

/* Stage / funnel rail: kept vs lost at every boundary */
.uie-emp-rail{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; }
.uie-emp-rail-stage{ border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); border-radius:11px; padding:9px; display:flex; flex-direction:column; gap:6px; min-height:112px; }
.uie-emp-rail-stage.leak{ border-color:rgba(255,107,122,.4); background:rgba(255,107,122,.05); }
.uie-emp-rail-name{ font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#9aa8c0; font-weight:700; }
.uie-emp-rail-barwrap{ flex:1; display:flex; align-items:flex-end; min-height:34px; }
.uie-emp-rail-bar{ width:100%; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,rgba(var(--accent-rgb),.75),rgba(var(--accent-rgb),.28)); min-height:5px; }
.uie-emp-rail-stage.leak .uie-emp-rail-bar{ background:linear-gradient(180deg,rgba(255,107,122,.75),rgba(255,107,122,.25)); }
.uie-emp-rail-count{ font-size:16px; font-weight:800; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; }
.uie-emp-rail-lost{ font-size:9px; font-weight:700; color:#65748d; font-variant-numeric:tabular-nums; }
.uie-emp-rail-lost.bad{ color:#ffb3bd; }

/* Trend tile: mini bar sparkline with an honest low-sample state */
.uie-emp-trend{ border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); border-radius:11px; padding:10px 11px; min-height:104px; display:flex; flex-direction:column; gap:6px; width:100%; }
.uie-emp-trend .tl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#9aa8c0; font-weight:700; }
.uie-emp-trend-delta{ font-size:15px; font-weight:800; letter-spacing:-.02em; color:#e9effc; font-variant-numeric:tabular-nums; }
.uie-emp-trend-delta .arrow{ font-weight:800; }
.uie-emp-trend.up .arrow{ color:#8affb2; } .uie-emp-trend.down .arrow{ color:#ff6b7a; }
.uie-emp-trend .tf{ font-size:9.5px; color:#65748d; line-height:1.4; }
.uie-emp-mini{ display:grid; grid-template-columns:repeat(8,1fr); gap:3px; height:24px; align-items:end; margin-top:auto; }
.uie-emp-mini span{ background:rgba(var(--accent-rgb),.55); border-radius:2px 2px 0 0; min-height:3px; }
.uie-emp-mini span:last-child{ background:var(--accent); }
.uie-emp-trend.lowsample{ border-style:dashed; }
.uie-emp-trend.lowsample .empty{ margin-top:auto; font-size:9.5px; color:#65748d; line-height:1.5; border-left:2px solid rgba(255,255,255,.08); padding-left:8px; }

/* Objection chip cloud: severity dot + count, never colour-alone */
.uie-emp-chips{ display:flex; gap:6px; flex-wrap:wrap; width:100%; }
.uie-emp-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); font-size:11px; color:#9aa8c0; font-weight:600; }
.uie-emp-chip b{ color:#e9effc; font-weight:750; font-variant-numeric:tabular-nums; }
.uie-emp-chip i{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.uie-emp-chip i.weak{ background:#ff6b7a; } .uie-emp-chip i.mixed{ background:#e9c07a; } .uie-emp-chip i.ok{ background:#8affb2; } .uie-emp-chip i.unscored{ background:#65748d; }

/* Coaching accordion: phrase + evidence + written response + drill */
.uie-emp-accordion{ border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); border-radius:11px; overflow:hidden; width:100%; }
.uie-emp-accordion[open]{ border-color:rgba(var(--accent-rgb),.32); }
.uie-emp-accordion > summary{ list-style:none; cursor:pointer; padding:11px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.uie-emp-accordion > summary::-webkit-details-marker{ display:none; }
.uie-emp-acc-stage{ font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:#65748d; font-weight:800; }
.uie-emp-acc-phrase{ font-size:13.5px; font-weight:800; color:#fff; letter-spacing:-.01em; margin-top:3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.uie-emp-acc-evidence{ font-size:10.5px; color:#65748d; margin-top:4px; }
.uie-emp-acc-evidence b{ color:#9aa8c0; font-weight:700; font-variant-numeric:tabular-nums; }
.uie-emp-acc-count{ font-size:17px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; text-align:right; flex:0 0 auto; }
.uie-emp-acc-count small{ display:block; font-size:9px; color:#65748d; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.uie-emp-acc-body{ margin:0 12px; padding:10px 0 12px; display:grid; gap:8px; border-top:1px solid rgba(255,255,255,.07); }
.uie-emp-acc-response{ border-left:2px solid var(--accent); background:rgba(var(--accent-rgb),.06); border-radius:0 10px 10px 0; padding:9px 12px; font-size:12px; color:#d7fff2; line-height:1.6; margin:0; }
.uie-emp-acc-drill{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px dashed rgba(255,255,255,.07); padding-top:9px; flex-wrap:wrap; font-size:11px; color:#9aa8c0; }
.uie-emp-acc-drill b{ color:#e9effc; }

/* Priority coaching queue row: impact-ranked, evidence attached */
.uie-emp-queue{ display:grid; gap:9px; width:100%; }
.uie-emp-queue-row{ display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:start; padding:11px; border:1px solid rgba(255,255,255,.07); border-radius:11px; background:rgba(255,255,255,.03); }
.uie-emp-queue-row.p-high{ border-left:3px solid #ff6b7a; }
.uie-emp-queue-row.p-med{ border-left:3px solid #e9c07a; }
.uie-emp-q-rank{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); color:#9aa8c0; }
.uie-emp-q-name{ font-size:13px; font-weight:750; color:#fff; letter-spacing:-.01em; }
.uie-emp-q-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.uie-emp-q-tag{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-size:9.5px; font-weight:800; border:1px solid transparent; }
.uie-emp-q-tag i{ width:6px; height:6px; border-radius:50%; }
.uie-emp-q-tag.red{ color:#ffc2c9; background:rgba(255,107,122,.09); border-color:rgba(255,107,122,.26); } .uie-emp-q-tag.red i{ background:#ff6b7a; }
.uie-emp-q-tag.blue{ color:#c9ecff; background:rgba(var(--accent-rgb),.09); border-color:rgba(var(--accent-rgb),.26); } .uie-emp-q-tag.blue i{ background:var(--accent); }
.uie-emp-q-block{ font-size:11px; color:#9aa8c0; line-height:1.5; }
.uie-emp-q-block strong{ color:#e9effc; font-weight:700; }
.uie-emp-q-btn{ font-size:10.5px; font-weight:700; color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent)); border:none; border-radius:8px; padding:6px 11px; white-space:nowrap; cursor:default; }

/* Locked feature strip: honest "coming, not broken" */
.uie-emp-lock{ border:1px dashed rgba(217,181,109,.35); background:rgba(217,181,109,.03); border-radius:11px; padding:10px 13px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; }
.uie-emp-lock .lk{ font-size:13px; flex:0 0 auto; }
.uie-emp-lock .items{ display:flex; gap:16px; flex-wrap:wrap; flex:1; }
.uie-emp-lock .li{ display:flex; flex-direction:column; gap:2px; }
.uie-emp-lock .li b{ font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:#65748d; font-weight:700; }
.uie-emp-lock .li span{ font-size:12.5px; color:#65748d; font-weight:700; }
.uie-emp-lock-note{ flex-basis:100%; font-size:9.5px; color:#65748d; line-height:1.45; margin:0; }

/* Trust chip row: dot + word, source/scope honesty at a glance */
.uie-emp-trust{ display:flex; gap:7px; flex-wrap:wrap; width:100%; }
.uie-emp-trust-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:10.5px; font-weight:750; white-space:nowrap; border:1px solid rgba(255,255,255,.07); color:#9aa8c0; background:rgba(255,255,255,.045); }
.uie-emp-trust-chip .dot{ width:6px; height:6px; border-radius:50%; background:#65748d; flex:0 0 auto; }
.uie-emp-trust-chip.live{ color:#c8ffdd; border-color:rgba(138,255,178,.32); } .uie-emp-trust-chip.live .dot{ background:#8affb2; box-shadow:0 0 7px rgba(138,255,178,.55); }
.uie-emp-trust-chip.range{ color:#c9ecff; border-color:rgba(var(--accent-rgb),.34); } .uie-emp-trust-chip.range .dot{ background:var(--accent); }
.uie-emp-trust-chip.gym{ color:#e3d4ff; border-color:rgba(184,156,255,.34); } .uie-emp-trust-chip.gym .dot{ background:#b89cff; }
.uie-emp-trust-chip.warn{ color:#f5e2b8; border-color:rgba(217,181,109,.38); } .uie-emp-trust-chip.warn .dot{ background:#d9b56d; }

/* Range toggle: segmented pill group */
.uie-emp-range{ display:inline-flex; border:1px solid rgba(170,199,255,.15); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.045); }
.uie-emp-range span{ padding:8px 13px; font-size:11.5px; font-weight:750; color:#9aa8c0; border-right:1px solid rgba(255,255,255,.07); white-space:nowrap; }
.uie-emp-range span:last-child{ border-right:0; }
.uie-emp-range span.active{ color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent)); }

/* =========================================================================
   Empirium Rep Performance Board: warm charcoal canvas, single brass-gold
   accent, win/miss green-red semantics only. Deliberately not navy/cyan —
   this is a distinct source theme, same gallery pattern as t-empirium.
   ========================================================================= */
.uie-card.t-embergold{
  background:#1c1f24; border:1px solid rgba(255,255,255,.08);
}
.uie-card.t-embergold .uie-card-head{ color:#f4f1ea; font-weight:700; }
.uie-card.t-embergold .uie-card-head em{ color:#74766c; text-transform:uppercase; letter-spacing:.6px; font-size:9.5px; }

/* W-L record header stat */
.uie-eg-record{ text-align:right; width:100%; }
.uie-eg-record-label{ display:block; color:#74766c; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.uie-eg-record-value{ margin-top:6px; font-size:38px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.uie-eg-record-value .win{ color:#35c275; }
.uie-eg-record-value .dash{ margin:0 4px; color:#4c4e48; }
.uie-eg-record-value .rest{ color:#a6a79d; }
.uie-eg-record-sub{ display:block; margin-top:6px; color:#74766c; font-size:11.5px; font-weight:500; }

/* Hero KPI: one focal number */
.uie-eg-hero{ display:flex; align-items:center; gap:18px; width:100%; padding:14px 16px; background:#131519; border:1px solid rgba(255,255,255,.16); border-radius:10px; }
.uie-eg-hero-figure{ font-size:46px; font-weight:700; line-height:1; color:#e7a93e; font-variant-numeric:tabular-nums; flex:0 0 auto; }
.uie-eg-hero-label{ color:#74766c; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.uie-eg-hero-sub{ margin-top:5px; color:#a6a79d; font-size:12.5px; font-weight:500; }
.uie-eg-hero-sub .up{ color:#35c275; }

/* Call-pace tick strip: bar height = length, colour = outcome */
.uie-eg-pace{ width:100%; }
.uie-eg-pace-strip{ display:flex; align-items:flex-end; gap:4px; height:38px; }
.uie-eg-pace-strip i{ flex:1 1 0; max-width:18px; border-radius:3px 3px 1px 1px; display:block; }
.uie-eg-pace-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.05); font-size:11.5px; color:#74766c; font-weight:500; }
.uie-eg-pace-legend span{ display:flex; align-items:center; gap:6px; }
.uie-eg-pace-legend i{ width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.uie-eg-pace-streak{ margin-left:auto; color:#e7a93e; font-weight:700; }

/* Segmented distribution bar + legend rows */
.uie-eg-seg{ display:flex; height:14px; border-radius:999px; overflow:hidden; background:#131519; border:1px solid rgba(255,255,255,.05); width:100%; }
.uie-eg-seg span{ display:block; height:100%; }
.uie-eg-legend{ display:grid; gap:8px; margin-top:11px; width:100%; }
.uie-eg-legend-row{ display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:10px; align-items:center; }
.uie-eg-legend-row i{ width:10px; height:10px; border-radius:3px; }
.uie-eg-legend-row .nm{ color:#a6a79d; font-size:12px; font-weight:600; }
.uie-eg-legend-row .ct{ font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.uie-eg-legend-row .sh{ color:#74766c; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }

/* Funnel with inline conversion-carried-forward annotations */
.uie-eg-funnel{ display:grid; gap:4px; width:100%; }
.uie-eg-funnel-row{ display:grid; grid-template-columns:96px minmax(0,1fr) 56px; gap:10px; align-items:center; }
.uie-eg-funnel-stage{ color:#a6a79d; font-size:12px; font-weight:600; }
.uie-eg-funnel-track{ height:22px; border-radius:6px; background:#131519; border:1px solid rgba(255,255,255,.05); overflow:hidden; }
.uie-eg-funnel-bar{ height:100%; border-radius:5px; background:#363c46; border-right:2px solid rgba(255,255,255,.16); }
.uie-eg-funnel-bar.booked{ background:#e7a93e; border-right:none; }
.uie-eg-funnel-count{ text-align:right; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.uie-eg-funnel-step{ grid-column:2; color:#74766c; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; padding:2px 0 2px 2px; }
.uie-eg-funnel-step b{ color:#a6a79d; font-weight:700; }

/* Target row: progress fill + Hit / On pace / Behind chip */
.uie-eg-target{ width:100%; }
.uie-eg-target-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.uie-eg-target-name{ color:#a6a79d; font-size:12px; font-weight:600; }
.uie-eg-target-figs{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.uie-eg-target-figs .of{ color:#74766c; font-weight:500; }
.uie-eg-target-track{ height:8px; margin-top:8px; border-radius:999px; background:#131519; border:1px solid rgba(255,255,255,.05); overflow:hidden; }
.uie-eg-target-fill{ height:100%; border-radius:999px; }
.uie-eg-target-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:7px; }
.uie-eg-target-pct{ color:#74766c; font-size:11px; font-weight:600; }
.uie-eg-chip{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.uie-eg-chip.win{ color:#35c275; background:rgba(53,194,117,.14); }
.uie-eg-chip.warn{ color:#e7a93e; background:rgba(231,169,62,.14); }
.uie-eg-chip.bad{ color:#e5566a; background:rgba(229,86,106,.14); }
.uie-eg-chip.neutral{ color:#a6a79d; background:#2b2f36; }

/* Box-score metric bars */
.uie-eg-metrics{ display:grid; gap:11px; width:100%; }
.uie-eg-metric-row{ display:grid; grid-template-columns:90px minmax(0,1fr) 36px; gap:10px; align-items:center; }
.uie-eg-metric-row .lbl{ color:#a6a79d; font-size:12px; font-weight:600; }
.uie-eg-metric-track{ height:20px; border-radius:6px; overflow:hidden; background:#131519; border:1px solid rgba(255,255,255,.08); }
.uie-eg-metric-bar{ height:100%; border-radius:5px; background:#4c4e48; }
.uie-eg-metric-row .num{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

/* To-do checklist table */
.uie-eg-todo{ display:flex; align-items:center; gap:9px; }
.uie-eg-todo input{ width:15px; height:15px; flex:0 0 auto; accent-color:#e7a93e; }
.uie-eg-todo strong{ color:#f4f1ea; font-weight:700; }

/* Coach's read: chip + title + note rows */
.uie-eg-read{ display:grid; width:100%; }
.uie-eg-read-row{ display:grid; grid-template-columns:82px minmax(0,1fr); gap:12px; align-items:start; padding:10px 2px; border-bottom:1px solid rgba(255,255,255,.05); }
.uie-eg-read-row:last-child{ border-bottom:0; }
.uie-eg-read-title{ font-size:12.5px; font-weight:700; color:#f4f1ea; }
.uie-eg-read-note{ margin-top:3px; color:#74766c; font-size:11.5px; font-weight:500; line-height:1.5; }

/* =========================================================================
   TIMELINES — ported from React/framer-motion references to token-driven
   vanilla. Beam fill + node positions are set from js/ui-timelines.js.
   ========================================================================= */

/* ---- Scroll-linked timeline ---- */
.uie-tl{ position:relative; width:100%; padding:var(--s-3) 0 var(--s-4); }
.uie-tl-row{ display:flex; justify-content:flex-start; gap:var(--s-5); padding-top:var(--s-6); }
.uie-tl-row:first-child{ padding-top:var(--s-2); }
.uie-tl-side{
  position:sticky; top:var(--s-2); align-self:flex-start; z-index:2;
  display:flex; align-items:center; gap:var(--s-3);
  flex:0 0 auto; width:190px;
}
.uie-tl-dot{
  width:38px; height:38px; border-radius:50% !important; flex:0 0 auto;
  background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.uie-tl-dot i{
  width:13px; height:13px; border-radius:50% !important;
  background:var(--line-soft); border:1px solid var(--line);
}
.uie-tl-side.on .uie-tl-dot i{ background:var(--accent); border-color:var(--accent); box-shadow:var(--glow-accent); }
.uie-tl-heading{ font-size:var(--fs-content); font-weight:700; color:var(--faint); letter-spacing:.3px; }
.uie-tl-side.on .uie-tl-heading{ color:var(--text); }
.uie-tl-content{ flex:1; min-width:0; padding-bottom:var(--s-2); }
.uie-tl-content h4{ margin:0 0 6px; font-size:var(--fs-content); font-weight:600; color:var(--text); }
.uie-tl-content p{ margin:0; font-size:var(--fs-small); color:var(--muted); line-height:1.55; }
.uie-tl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.uie-tl-chips span{
  font-size:var(--fs-caption); font-weight:600; color:var(--faint);
  background:var(--line-soft); border-radius:var(--r-sm); padding:3px 8px;
}
/* The beam sits on the dot centreline (19px into the 190px side column). */
.uie-tl-beam{
  position:absolute; top:0; left:19px; width:2px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
  background:linear-gradient(to bottom,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.uie-tl-beam-fill{
  position:absolute; inset-inline:0; top:0; width:2px; height:0; border-radius:2px;
  background:linear-gradient(to top,var(--accent),var(--accent-2) 60%,transparent);
}

/* ---- Radial orbital timeline ---- */
.uie-orbital{
  position:relative; width:100%; height:460px; border-radius:var(--r-lg);
  overflow:hidden; background:radial-gradient(circle at 50% 45%,#0c1016,#050608 70%);
  display:flex; align-items:center; justify-content:center;
}
.uie-orbital-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.uie-orbital-hub{
  position:absolute; width:60px; height:60px; border-radius:50% !important; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));
  animation:uie-orb-pulse 3s ease-in-out infinite;
}
.uie-orbital-hub::before, .uie-orbital-hub::after{
  content:''; position:absolute; border-radius:50% !important; border:1px solid rgba(255,255,255,.18);
}
.uie-orbital-hub::before{ inset:-8px; animation:uie-orb-ping 2.4s ease-out infinite; }
.uie-orbital-hub::after{ inset:-16px; border-color:rgba(255,255,255,.09); animation:uie-orb-ping 2.4s ease-out .6s infinite; }
.uie-orbital-hub i{ width:24px; height:24px; border-radius:50% !important; background:rgba(255,255,255,.85); }
.uie-orbital-ring{
  position:absolute; width:400px; height:400px; border-radius:50% !important;
  border:1px solid rgba(255,255,255,.08);
}
.uie-orbital-node{
  position:absolute; top:50%; left:50%; margin:-20px 0 0 -20px;
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; transition:opacity .3s ease;
}
.uie-orbital-node .glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-radius:50% !important; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 70%);
}
.uie-orbital-node .marker{
  width:40px; height:40px; border-radius:50% !important; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:#04070c; color:#fff; border:2px solid rgba(255,255,255,.4);
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.uie-orbital-node .marker svg{ width:16px; height:16px; }
.uie-orbital-node .label{
  position:absolute; top:44px; white-space:nowrap; z-index:2;
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.8px;
  color:rgba(255,255,255,.7); transition:transform .3s ease, color .3s ease;
}
.uie-orbital-node.related .marker{ background:rgba(255,255,255,.5); color:#04070c; border-color:#fff; animation:uie-orb-pulse 1.4s ease-in-out infinite; }
.uie-orbital-node.expanded{ z-index:60; }
.uie-orbital-node.expanded .marker{ transform:scale(1.4); background:#fff; color:#04070c; border-color:#fff; box-shadow:0 0 22px rgba(255,255,255,.35); }
.uie-orbital-node.expanded .label{ transform:scale(1.15); color:#fff; }

.uie-orbital-card{
  position:absolute; top:66px; left:50%; transform:translateX(-50%);
  width:230px; z-index:70; text-align:left;
  background:rgba(4,7,12,.92); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-md);
  box-shadow:0 12px 34px rgba(0,0,0,.5); padding:12px 13px;
}
.uie-orbital-card .oc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.uie-orbital-card .oc-status{
  font-size:9.5px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:var(--r-sm);
  text-transform:uppercase; border:1px solid;
}
.uie-orbital-card .oc-status.completed{ color:#04070c; background:#fff; border-color:#fff; }
.uie-orbital-card .oc-status.in-progress{ color:#fff; background:transparent; border-color:rgba(255,255,255,.6); }
.uie-orbital-card .oc-status.pending{ color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }
.uie-orbital-card .oc-date{ font-size:10px; font-family:var(--font-mono,ui-monospace,monospace); color:rgba(255,255,255,.5); }
.uie-orbital-card .oc-title{ font-size:13px; font-weight:700; color:#fff; margin-bottom:6px; }
.uie-orbital-card .oc-body{ font-size:11.5px; line-height:1.5; color:rgba(255,255,255,.8); }
.uie-orbital-card .oc-section{ margin-top:11px; padding-top:9px; border-top:1px solid rgba(255,255,255,.12); }
.uie-orbital-card .oc-energy-top{ display:flex; align-items:center; justify-content:space-between; font-size:10.5px; color:rgba(255,255,255,.75); margin-bottom:5px; }
.uie-orbital-card .oc-energy-track{ height:4px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.uie-orbital-card .oc-energy-fill{ height:100%; background:linear-gradient(to right,var(--accent),var(--accent-2)); }
.uie-orbital-card .oc-links-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.7px; color:rgba(255,255,255,.55); font-weight:700; margin-bottom:6px; }
.uie-orbital-card .oc-links{ display:flex; flex-wrap:wrap; gap:6px; }
.uie-orbital-card .oc-link{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  font-size:10.5px; color:rgba(255,255,255,.8); font-weight:600;
  border:1px solid rgba(255,255,255,.2); background:transparent; padding:2px 7px; border-radius:var(--r-sm);
  transition:background .2s ease, color .2s ease;
}
.uie-orbital-card .oc-link:hover{ background:rgba(255,255,255,.12); color:#fff; }

@keyframes uie-orb-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@keyframes uie-orb-ping{ 0%{ transform:scale(.7); opacity:.7; } 80%,100%{ transform:scale(1.5); opacity:0; } }

/* =========================================================================
   TRACKERS — two source mockups: a habit-status display (dark navy HUD,
   "Empirium Ops" family) and a money-goal counter (light Industry
   blueprint). Cards below are static snapshots of a mid-progress state —
   this gallery doesn't wire up real data, same as everywhere else here.
   ========================================================================= */

/* ---- Habit status: dark navy console, mono labels, green = done ---- */
.uie-card.t-habitnav{
  background:linear-gradient(165deg,#0d1740,#050a1c);
  border:1px solid rgba(120,170,240,.22);
}
.uie-card.t-habitnav .uie-card-head{ color:#cfe2f7; font-weight:600; }
.uie-card.t-habitnav .uie-card-head em{ color:#6f93bd; text-transform:uppercase; letter-spacing:.6px; font-size:9.5px; }
.uie-hn-shell{ width:100%; background:#0a1443; border:1px solid rgba(120,170,240,.16); border-radius:10px; overflow:hidden; font-family:system-ui,sans-serif; color:#cfe2f7; }
.uie-hn-mono{ font-family:Consolas,"SF Mono","Cascadia Code",ui-monospace,monospace; }

/* ---- Money counter: light "Industry" blueprint paper, hairline frames ---- */
.uie-card.t-blueprint{ background:#f2f2f3; border:1px solid rgba(29,31,32,.16); }
.uie-card.t-blueprint .uie-card-head{ color:#1d1f20; font-weight:600; }
.uie-card.t-blueprint .uie-card-head em{ color:#6b6d6e; text-transform:uppercase; letter-spacing:.6px; font-size:9.5px; }
.uie-bp-shell{ position:relative; width:100%; padding:20px; border:1px solid rgba(29,31,32,.16); background:#f2f2f3; color:#1d1f20; font-family:system-ui,sans-serif; box-sizing:border-box; }
.uie-bp-mono{ font-family:Consolas,"SF Mono","Cascadia Code",ui-monospace,monospace; }
.uie-bp-corner{ position:absolute; width:11px; height:11px; background:linear-gradient(#7d7e7f,#7d7e7f) center/1px 100% no-repeat,linear-gradient(#7d7e7f,#7d7e7f) center/100% 1px no-repeat; }
.uie-bp-corner.tl{ top:-5px; left:-5px; } .uie-bp-corner.tr{ top:-5px; right:-5px; }
.uie-bp-corner.bl{ bottom:-5px; left:-5px; } .uie-bp-corner.br{ bottom:-5px; right:-5px; }

/* ---- Blueprint dark variant (Instrument panel family — reversed on steel) ---- */
.uie-bp-shell.dark{ background:#1d2d3d; color:#e9e9ea; border-color:rgba(233,233,234,.18); }
.uie-bp-shell.dark .uie-bp-corner{
  background:linear-gradient(#9fb0c4,#9fb0c4) center/1px 100% no-repeat,linear-gradient(#9fb0c4,#9fb0c4) center/100% 1px no-repeat;
}

/* ---- Data Display Catalog: family group headers + inline-bar table ---- */
.uie-family-head{ display:flex; align-items:center; gap:14px; margin:8px 0 2px; }
.uie-family-head span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:700; white-space:nowrap; }
.uie-family-head i{ flex:1; height:1px; background:var(--line); }
.uie-cat-table{ border-collapse:collapse; width:100%; }
.uie-cat-table th{ text-align:left; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#6c6e70; font-weight:600; padding:4px 8px 6px 0; border-bottom:1px solid rgba(29,31,32,.16); }
.uie-cat-table td{ padding:7px 8px 7px 0; font-size:12px; color:#1d1f20; border-bottom:1px solid rgba(29,31,32,.08); }