/* ============================================================================
   ATLAS — "Observatory Atlas" design system
   A telescope pointed at people: a hushed indigo planet in a parallaxed
   starfield, where the only warm breathing lights are human faces haloed by
   the colour of their work.
   ========================================================================== */

/* ----- Fonts (vendored, offline-safe) ------------------------------------ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/fraunces-500.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url('../assets/fonts/fraunces-400i.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:500; font-display:swap; src:url('../assets/fonts/fraunces-500i.woff2') format('woff2'); }

/* ----- Tokens ------------------------------------------------------------ */
:root{
  --bg-deep:#05060B; --bg-base:#0A0C14; --ocean:#0E1320;
  --land:#161C2B; --land-hi:#1F2738; --border:#2A3346; --graticule:#1A2030;
  --text:#EDF0F7; --muted:#9AA4BC; --faint:#5A647E;
  --accent:#C9A24B; --accent-bright:#E7C77B; --glow:#FFD9A0;

  --interp:#36E07F; --evals:#4DA3FF; --governance:#B488FF;
  --alignment:#FF6FB0; --control:#FF9D45; --security:#21CFD6;

  --b-hiring:#FFC24B; --b-open:#FFD9A0; --b-collab:#9AB6FF; --b-funding:#9FB0C9;

  --glass:rgba(14,19,32,.62);
  --glass-line:rgba(255,255,255,.08);
  --glass-hi:rgba(255,255,255,.06);
  --shadow:0 8px 40px rgba(0,0,0,.55);
  --blur:saturate(120%) blur(20px);

  --ease-settle:cubic-bezier(.22,1,.36,1);
  --ease-trace:cubic-bezier(.65,0,.35,1);
  --ease-fade:cubic-bezier(.4,0,.2,1);

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none;
}
button{ font-family:inherit; color:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }

/* ----- Cosmic background ------------------------------------------------- */
#bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 72% 8%, rgba(40,28,66,.55) 0%, rgba(26,21,48,0) 46%),
    radial-gradient(90% 80% at 12% 96%, rgba(18,32,52,.5) 0%, rgba(10,12,20,0) 50%),
    radial-gradient(140% 120% at 50% 42%, #0A0C16 0%, #070811 55%, var(--bg-deep) 100%);
}
#stars{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* ----- Map stage -------------------------------------------------------- */
#atlas{ position:fixed; inset:0; z-index:2; overflow:hidden; }
#map{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#map .graticule{ fill:none; stroke:var(--graticule); stroke-width:.5; stroke-opacity:.55; }
#map .sphere-stroke{ fill:none; stroke:#243049; stroke-width:1.1; stroke-opacity:.6; }
#map .land{ stroke:none; }
#map .borders{ fill:none; stroke:#33415f; stroke-width:.5; stroke-opacity:.55; }
#map .coast{ fill:none; stroke:#46577f; stroke-width:.7; stroke-opacity:.8; }

/* find-mode map dim veil */
#veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--bg-deep); opacity:0;
  transition:opacity .5s var(--ease-fade);
}
#veil.on{ opacity:.5; }

/* telescope vignette (always-on, subtle, sits under faces) */
#vignette{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(125% 110% at 50% 46%, rgba(5,6,11,0) 52%, rgba(5,6,11,.55) 84%, rgba(5,6,11,.9) 100%);
}

/* city/country labels (fade in on zoom) */
#labels{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.glabel{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:500; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
  opacity:0; transition:opacity .25s var(--ease-fade);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.glabel.show{ opacity:.9; }

/* arcs / comets overlay */
#fx{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:visible; }

/* ----- Face pins -------------------------------------------------------- */
#pins{ position:absolute; inset:0; z-index:7; pointer-events:none; }
.pin{
  position:absolute; left:0; top:0; width:0; height:0;
  --fc:var(--interp);
  --size:48px;
  will-change:transform;
  transition:opacity .45s var(--ease-fade), filter .45s var(--ease-fade);
}
.pin .halo{
  position:absolute; left:50%; top:50%;
  width:calc(var(--size) * 1.85); height:calc(var(--size) * 1.85);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,217,160,.32) 0%, rgba(255,217,160,.10) 42%, rgba(255,217,160,0) 70%);
  opacity:.7; pointer-events:none;
  animation:breathe var(--breath,6s) var(--ease-fade) infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.97); }
  50%{ opacity:.82; transform:translate(-50%,-50%) scale(1.05); }
}
.pin .face{
  position:absolute; left:50%; top:50%;
  width:var(--size); height:var(--size);
  transform:translate(-50%,-50%);
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 34%, #353A52 0%, #20243A 58%, #161A2C 100%);
  box-shadow:0 2px 10px rgba(0,0,0,.55);
  cursor:pointer;
}
.pin .face img{ width:100%; height:100%; object-fit:cover; display:block; }
.pin .ringsvg{
  position:absolute; left:50%; top:50%;
  width:calc(var(--size) + 8px); height:calc(var(--size) + 8px);
  transform:translate(-50%,-50%);
  pointer-events:none; overflow:visible;
}
.pin .ringsvg circle{
  fill:none; stroke:var(--fc); stroke-width:2.4;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--fc) 70%, transparent));
}
.pin .tick{ stroke:var(--fc); stroke-width:2.4; stroke-linecap:round; }

/* badge cluster */
.pin .badges{
  position:absolute; left:50%; top:50%;
  transform:translate(2px, 8px);
  display:flex; gap:2px; pointer-events:none;
}
.pin .badge{
  width:15px; height:15px; border-radius:50%;
  display:grid; place-items:center;
  background:#0C1018; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.pin .badge svg{ width:9px; height:9px; display:block; }
.pin .badge.b-hiring{ background:radial-gradient(circle at 50% 35%, #2a210d, #0C1018); }

/* hover / selected / state */
.pin .hit{
  position:absolute; left:50%; top:50%;
  width:calc(var(--size) + 14px); height:calc(var(--size) + 14px);
  transform:translate(-50%,-50%); border-radius:50%; cursor:pointer;
}
.pin .name{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, calc(var(--size) * .5 + 12px));
  font-size:11px; font-weight:500; color:var(--text);
  background:rgba(8,10,16,.82); padding:3px 8px; border-radius:7px;
  border:1px solid var(--glass-line);
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .18s var(--ease-fade);
  backdrop-filter:var(--blur);
}
.pin:hover{ z-index:30; }
.pin:hover .name{ opacity:1; }
.pin:hover .face{ box-shadow:0 4px 18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.10); }
.pin:hover .halo{ animation-duration:2.6s; }

.pin.selected{ z-index:35; }
.pin.selected .halo{
  background:radial-gradient(circle, color-mix(in srgb, var(--fc) 50%, #FFD9A0) 0%, rgba(255,217,160,.12) 48%, transparent 72%);
  opacity:1; animation:none; transform:translate(-50%,-50%) scale(1.12);
}
.pin.selected .face{ box-shadow:0 6px 22px rgba(0,0,0,.65), 0 0 0 2px color-mix(in srgb, var(--fc) 75%, white 0%); }

.pin.dim{ opacity:.16; filter:grayscale(.85) brightness(.7); }
.pin.dim .halo{ opacity:.12; }
.pin.dim .name{ display:none; }

.pin.match{ z-index:25; }
.pin.match.pop .face{ animation:pop .42s var(--ease-settle); }
.pin.match .halo{
  background:radial-gradient(circle, color-mix(in srgb, var(--fc) 55%, #FFD9A0) 0%, rgba(255,217,160,.14) 46%, transparent 72%);
  opacity:1;
}
@keyframes pop{ 0%{ transform:translate(-50%,-50%) scale(1);} 45%{ transform:translate(-50%,-50%) scale(1.2);} 100%{ transform:translate(-50%,-50%) scale(1);} }

.pin.source .halo{
  background:radial-gradient(circle, rgba(255,217,160,.5) 0%, rgba(255,217,160,.16) 50%, transparent 74%);
  opacity:1; animation:sourceBreath 3.4s var(--ease-fade) infinite;
}
@keyframes sourceBreath{ 0%,100%{ transform:translate(-50%,-50%) scale(1.04);} 50%{ transform:translate(-50%,-50%) scale(1.22);} }
.pin.ghost{ opacity:.22; filter:grayscale(.6); }
.pin.ghost .halo{ opacity:.1; }

/* ----- Travelling tokens (gather) --------------------------------------- */
.token{
  position:absolute; left:0; top:0; width:38px; height:38px; z-index:60;
  border-radius:50%; overflow:visible; pointer-events:none; will-change:transform;
}
.token .disc{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 34%, #353A52, #161A2C);
  box-shadow:0 4px 16px rgba(0,0,0,.6);
}
.token .disc img{ width:100%; height:100%; object-fit:cover; }
.token .ring{
  position:absolute; inset:-3px; border-radius:50%;
  border:2.2px solid var(--fc);
  box-shadow:0 0 8px -1px var(--fc);
}

/* ============================================================================
   CHROME (floats on glass)
   ========================================================================== */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);
  border-radius:16px;
}

/* ----- Wordmark --------------------------------------------------------- */
#brand{ position:fixed; left:26px; top:22px; z-index:20; pointer-events:none; }
#brand .row{ display:flex; align-items:center; gap:11px; }
#brand .mark{ width:26px; height:26px; flex:none; }
#brand .mark .orbit{ transform-origin:13px 13px; animation:orbit 32s linear infinite; }
@keyframes orbit{ to{ transform:rotate(360deg); } }
#brand h1{
  margin:0; font-family:var(--font-display); font-weight:500; font-size:26px;
  letter-spacing:.20em; color:var(--text);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
#brand .stat{
  margin:6px 0 0 37px; font-size:11.5px; color:var(--muted);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:7px;
}
#brand .stat .live{ width:6px; height:6px; border-radius:50%; background:var(--interp);
  box-shadow:0 0 8px var(--interp); animation:pulse 2.4s var(--ease-fade) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* ----- Search ----------------------------------------------------------- */
#search{ position:fixed; right:26px; top:22px; z-index:20; }
#search .box{
  display:flex; align-items:center; gap:9px;
  width:236px; height:42px; padding:0 14px; border-radius:21px;
  transition:width .35s var(--ease-settle), border-color .3s var(--ease-fade);
}
#search.focused .box{ width:330px; border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
#search svg{ width:16px; height:16px; color:var(--faint); flex:none; }
#search input{
  flex:1; background:none; border:none; outline:none;
  color:var(--text); font-size:13.5px; letter-spacing:.01em;
}
#search input::placeholder{ color:var(--faint); font-style:italic; }
#search .underline{
  position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform .4s var(--ease-trace), opacity .3s;
}
#search.focused .underline{ transform:scaleX(1); opacity:.8; }
#results{
  margin-top:8px; max-height:50vh; overflow:auto; padding:6px;
  display:none; flex-direction:column; gap:2px;
}
#results.show{ display:flex; }
.res{
  display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:11px;
  cursor:pointer; transition:background .15s;
}
.res:hover{ background:rgba(255,255,255,.05); }
.res .av{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none;
  background:#1a1e30; border:1.5px solid var(--fc); }
.res .av img{ width:100%; height:100%; object-fit:cover; }
.res .t{ min-width:0; }
.res .t .n{ font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res .t .o{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#results .empty{ padding:14px; text-align:center; color:var(--faint); font-size:12.5px; }

/* ----- Legend / filter rail --------------------------------------------- */
#rail{
  position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:20;
  width:212px; padding:16px 16px 14px; max-height:84vh; overflow:auto;
}
#rail .grp + .grp{ margin-top:18px; }
#rail .gl{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-weight:600; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
  margin-bottom:9px;
}
#rail .clear{
  font-family:var(--font-body); font-weight:500; font-size:10px; letter-spacing:.06em;
  color:var(--accent); opacity:0; pointer-events:none; transition:opacity .2s;
}
#rail.filtered .clear{ opacity:1; pointer-events:auto; }
.lrow{
  display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px;
  cursor:pointer; position:relative; transition:background .15s;
}
.lrow:hover{ background:rgba(255,255,255,.045); }
.lrow .swatch{
  width:14px; height:14px; border-radius:50%; flex:none;
  border:2px solid var(--c); box-shadow:0 0 7px -1px var(--c);
}
.lrow .bdg{ width:15px; height:15px; flex:none; display:grid; place-items:center; color:var(--c); }
.lrow .bdg svg{ width:13px; height:13px; }
.lrow .lab{ flex:1; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow .cnt{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.lrow.active{ background:rgba(255,255,255,.05); }
.lrow.active .lab{ color:var(--text); font-weight:500; }
.lrow.active::before{
  content:''; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
.lrow.off{ opacity:.4; }

/* ----- Hero Find for me ------------------------------------------------- */
#hero{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:21;
  display:flex; align-items:center; gap:10px;
  padding:13px 24px 13px 20px; border-radius:30px;
  background:linear-gradient(180deg, rgba(231,199,123,.16), rgba(201,162,75,.10));
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.12), 0 0 30px -6px rgba(201,162,75,.4);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  color:var(--text); font-size:14.5px; font-weight:500; letter-spacing:.01em;
  transition:transform .3s var(--ease-settle), opacity .3s, box-shadow .3s;
}
#hero:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.14), 0 0 42px -4px rgba(201,162,75,.6); }
#hero .spark{ width:18px; height:18px; color:var(--accent-bright); }
#hero .sub{ color:var(--muted); font-weight:400; font-size:12.5px; }
#hero.hidden{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(14px); }
@media (max-width:560px){ #hero .sub{ display:none; } }

/* ----- Find status bar -------------------------------------------------- */
#findbar{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:22;
  display:none; align-items:center; gap:14px; padding:10px 12px 10px 18px; border-radius:26px;
}
#findbar.show{ display:flex; }
#findbar .who{ display:flex; align-items:center; gap:10px; }
#findbar .who .av{ width:30px; height:30px; border-radius:50%; overflow:hidden; border:2px solid var(--fc); box-shadow:0 0 8px -1px var(--fc); }
#findbar .who .av img{ width:100%; height:100%; object-fit:cover; }
#findbar .txt{ font-size:13.5px; }
#findbar .txt b{ font-weight:600; color:var(--text); }
#findbar .txt .m{ color:var(--muted); }
#findbar .txt .cn{ color:var(--accent-bright); font-weight:600; font-variant-numeric:tabular-nums; }
#findbar .reset{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:18px; font-size:12.5px; font-weight:500;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-line); color:var(--muted);
  transition:background .15s, color .15s;
}
#findbar .reset:hover{ background:rgba(255,255,255,.1); color:var(--text); }

/* ----- Shortlist tray (gather) ------------------------------------------ */
#tray{
  position:fixed; right:26px; bottom:96px; z-index:21; width:300px;
  padding:14px; display:none; flex-direction:column;
  opacity:0; transition:opacity .35s var(--ease-fade);
}
#tray.show{ display:flex; opacity:1; }
#tray .th{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
#tray .th .t{ font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--text); }
#tray .th .c{ font-size:11px; color:var(--accent-bright); letter-spacing:.08em; text-transform:uppercase; }
#tray .sub{ font-size:11.5px; color:var(--muted); margin-bottom:10px; }
#tray .rows{ display:flex; flex-direction:column; gap:5px; }
.trow{
  display:flex; align-items:center; gap:11px; padding:8px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  opacity:0; transform:translateX(10px);
}
.trow.in{ opacity:1; transform:none; transition:opacity .4s var(--ease-settle), transform .4s var(--ease-settle); }
.trow .slot{ width:38px; height:38px; flex:none; position:relative; }
.trow .slot .ph{ position:absolute; inset:0; border-radius:50%; border:2px dashed color-mix(in srgb, var(--fc) 50%, transparent); }
.trow .meta{ min-width:0; flex:1; }
.trow .meta .n{ font-size:13px; font-weight:500; color:var(--text); }
.trow .meta .o{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow .meta .why{ font-size:10.5px; color:var(--faint); margin-top:1px; }
.trow .score{ font-size:11px; color:var(--accent); font-variant-numeric:tabular-nums; }

/* ============================================================================
   PROFILE CARD
   ========================================================================== */
#card{
  position:fixed; right:22px; top:22px; bottom:22px; z-index:40; width:368px;
  padding:0; overflow:hidden; border-radius:20px;
  transform:translateX(28px); opacity:0; pointer-events:none;
  transition:transform .3s var(--ease-settle), opacity .26s var(--ease-fade);
  display:flex; flex-direction:column;
}
#card.open{ transform:none; opacity:1; pointer-events:auto; }
#card::before{ /* brass left-edge focus glow */
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity:.8;
}
#card .scroll{ overflow:auto; padding:26px 24px 22px; height:100%; }
#card .x{
  position:absolute; right:14px; top:14px; z-index:2; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line);
  transition:background .15s, color .15s;
}
#card .x:hover{ background:rgba(255,255,255,.1); color:var(--text); }
#card .hero{ display:flex; flex-direction:column; align-items:flex-start; }
#card .bigav{ position:relative; width:96px; height:96px; margin-bottom:14px; }
#card .bigav .disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 34%, #353A52, #161A2C); box-shadow:0 6px 24px rgba(0,0,0,.55); }
#card .bigav .disc img{ width:100%; height:100%; object-fit:cover; }
#card .bigav .ring{ position:absolute; inset:-5px; border-radius:50%; border:2.6px solid var(--fc);
  box-shadow:0 0 16px -3px var(--fc); }
#card .bigav .haze{ position:absolute; inset:-18px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,217,160,.3), transparent 66%); }
#card .bigav .bdgs{ position:absolute; right:-2px; bottom:-2px; display:flex; gap:3px; }
#card .bigav .bdgs .badge{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:#0C1018; border:1px solid rgba(255,255,255,.16); box-shadow:0 2px 8px rgba(0,0,0,.6); }
#card .bigav .bdgs .badge svg{ width:13px; height:13px; }
#card h2{ margin:0; font-family:var(--font-display); font-weight:600; font-size:25px; line-height:1.1; color:var(--text); }
#card .fieldbar{ height:3px; width:54px; border-radius:2px; margin:9px 0 8px; background:var(--fc); box-shadow:0 0 10px -1px var(--fc); }
#card .role{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:15px; color:var(--muted); margin:0 0 14px; }
#card .meta{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
#card .meta .mi{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
#card .meta .mi svg{ width:14px; height:14px; color:var(--faint); flex:none; }
#card .meta .mi .co{ color:var(--faint); font-variant-numeric:tabular-nums; font-size:11.5px; margin-left:auto; }
#card .sec{ font-family:var(--font-body); font-weight:600; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:16px 0 9px; }
#card .field-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:20px;
  background:color-mix(in srgb, var(--fc) 13%, transparent); border:1px solid color-mix(in srgb, var(--fc) 40%, transparent);
  font-size:12px; color:var(--text); }
#card .field-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--fc); box-shadow:0 0 6px var(--fc); }
#card .chips{ display:flex; flex-wrap:wrap; gap:6px; }
#card .chip{ padding:5px 10px; border-radius:16px; background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line); font-size:11.5px; color:var(--muted); }
#card .looks{ display:flex; flex-direction:column; gap:7px; }
#card .look{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text); }
#card .look .ic{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb, var(--bc) 16%, #0C1018); color:var(--bc); border:1px solid color-mix(in srgb, var(--bc) 40%, transparent); }
#card .look .ic svg{ width:13px; height:13px; }
#card .bio{ font-size:14px; line-height:1.55; color:var(--muted); font-family:var(--font-display); font-weight:400; }
#card .links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
#card .links a{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line); font-size:12px; color:var(--muted);
  transition:background .15s, color .15s; }
#card .links a:hover{ background:rgba(255,255,255,.1); color:var(--text); }
#card .links a svg{ width:13px; height:13px; }
#card .cta{ display:flex; gap:10px; margin-top:22px; }
#card .cta button{ flex:1; height:44px; border-radius:13px; font-size:13.5px; font-weight:600; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s var(--ease-settle), box-shadow .2s, background .15s; }
#card .cta .find{ background:linear-gradient(180deg, var(--accent-bright), var(--accent)); color:#16110A;
  box-shadow:0 4px 16px -4px rgba(201,162,75,.6); }
#card .cta .find:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -4px rgba(201,162,75,.7); }
#card .cta .find svg{ width:16px; height:16px; }
#card .cta .ghost{ flex:0 0 44px; background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:var(--muted); }
#card .cta .ghost:hover{ background:rgba(255,255,255,.1); color:var(--text); }
#card .cta .ghost svg{ width:17px; height:17px; }

/* ----- Intro hint ------------------------------------------------------- */
#hint{
  position:fixed; left:50%; top:84px; transform:translateX(-50%); z-index:19;
  padding:8px 16px; border-radius:18px; font-size:12.5px; color:var(--muted);
  display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .6s var(--ease-fade);
  pointer-events:none;
}
#hint.show{ opacity:1; }
#hint .k{ color:var(--accent-bright); font-weight:500; }

/* ----- Zoom controls ---------------------------------------------------- */
#zoom{ position:fixed; right:26px; bottom:30px; z-index:20; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
#zoom button{ width:38px; height:38px; display:grid; place-items:center; color:var(--muted);
  background:transparent; transition:background .15s, color .15s; }
#zoom button:first-child{ border-bottom:1px solid var(--glass-line); }
#zoom button:hover{ background:rgba(255,255,255,.07); color:var(--text); }
#zoom svg{ width:16px; height:16px; }

/* scrollbars */
#card .scroll::-webkit-scrollbar, #rail::-webkit-scrollbar, #results::-webkit-scrollbar{ width:7px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:4px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
}

/* small screens: rail collapses */
@media (max-width:860px){
  #rail{ width:188px; padding:13px; }
  #card{ width:min(368px, 92vw); }
}

/* ============================================================================
   V2 — multi-surface shell + new surfaces
   ========================================================================== */

/* ----- view system ----- */
#views{ position:fixed; inset:0; z-index:2; }
.view{ position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s var(--ease-fade), visibility 0s linear .45s; }
.view.active{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s var(--ease-fade), visibility 0s; }

/* ----- nav (segmented, top-center) ----- */
#nav{ position:fixed; left:50%; top:18px; transform:translateX(-50%); z-index:30; display:flex; gap:2px;
  padding:5px; border-radius:16px; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi); }
#nav .tab{ display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:12px; color:var(--muted);
  font-size:13px; font-weight:500; letter-spacing:.01em; transition:color .2s, background .2s; white-space:nowrap; }
#nav .tab svg{ width:16px; height:16px; opacity:.85; }
#nav .tab:hover{ color:var(--text); background:rgba(255,255,255,.04); }
#nav .tab.on{ color:var(--bg-deep); background:linear-gradient(180deg, var(--accent-bright), var(--accent)); box-shadow:0 3px 14px -4px rgba(201,162,75,.6); }
#nav .tab.on svg{ opacity:1; }
@media (max-width:760px){ #nav .tab span{ display:none; } #nav .tab{ padding:9px 11px; } }

/* ----- global live pill (top-right) ----- */
#livePill{ position:fixed; right:26px; top:20px; z-index:30; display:flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:20px; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--glass-line)); box-shadow:var(--shadow);
  font-size:12.5px; color:var(--text); transition:transform .25s var(--ease-settle), opacity .25s; }
#livePill:hover{ transform:translateY(-1px); }
#livePill.hidden{ opacity:0; pointer-events:none; }
#livePill .dot{ width:8px; height:8px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 8px #FF5C5C; animation:pulse 1.6s var(--ease-fade) infinite; }
#livePill .lab{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#FF8A8A; font-weight:600; }
#livePill .ttl{ color:var(--muted); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-view="conferences"] #livePill{ display:none; }

/* the map canvas (people, clusters) sits above geography, below veil */
#mapcanvas{ position:absolute; inset:0; z-index:2; }
#map{ z-index:1; }
#markers{ position:absolute; inset:0; z-index:7; pointer-events:none; }

/* ----- cluster micro-label + people hover label (map) ----- */
#mapLabel{ position:fixed; z-index:32; padding:8px 11px; border-radius:11px; pointer-events:none;
  background:rgba(8,10,16,.86); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--shadow); opacity:0; transform:translateY(4px);
  transition:opacity .15s, transform .15s; max-width:240px; }
#mapLabel.show{ opacity:1; transform:none; }
#mapLabel .nm{ font-family:var(--font-display); font-weight:500; font-size:14px; color:var(--text); }
#mapLabel .big{ font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--accent-bright); }
#mapLabel .sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
#mapLabel .comp{ display:flex; gap:8px; margin-top:5px; font-size:11px; color:var(--muted); }
#mapLabel .comp i{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:middle; }

/* ----- org / project / live markers (DOM) ----- */
.omk{ position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; }
.omk .hit{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:40px; height:40px; pointer-events:auto; cursor:pointer; }
.omk.dim{ opacity:.28; filter:grayscale(.5); transition:opacity .4s, filter .4s; }

/* organisation = rounded hexagon */
.org .hex{ position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1.5px solid var(--oc); box-shadow:0 0 10px -3px var(--oc), inset 0 0 8px -4px var(--oc);
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%); display:grid; place-items:center; }
.org .hex svg{ width:15px; height:15px; color:var(--accent); }
.org .lbl{ position:absolute; left:50%; top:50%; transform:translate(-50%, 22px); font-size:10px; color:var(--muted);
  white-space:nowrap; opacity:0; transition:opacity .18s; text-shadow:0 1px 4px #000; pointer-events:none;
  font-family:var(--font-display); letter-spacing:.04em; }
.org:hover .lbl, .org.show-lbl .lbl{ opacity:1; }
.org:hover .hex{ transform:translate(-50%,-50%) scale(1.1); border-color:var(--accent-bright); }

/* project = gem treasure */
.gem .g{ position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg, #FFE9C2, #C9A24B 55%, #8a6a2a);
  border:1px solid rgba(255,233,194,.7); box-shadow:0 0 14px -2px var(--glow), 0 0 4px rgba(0,0,0,.5);
  border-radius:4px; }
.gem .g::after{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  border-radius:4px; animation:sweep 3.2s var(--ease-fade) infinite; }
@keyframes sweep{ 0%,100%{ transform:translate(-30%,-30%); opacity:0; } 50%{ transform:translate(30%,30%); opacity:.9; } }
.gem .beacon{ position:absolute; left:50%; top:50%; width:2px; height:26px; transform:translate(-50%,-100%);
  background:linear-gradient(0deg, var(--glow), transparent); opacity:0; animation:beacon 6s var(--ease-fade) infinite; }
@keyframes beacon{ 0%,70%,100%{ opacity:0; transform:translate(-50%,-90%); } 35%{ opacity:.7; transform:translate(-50%,-150%); } }
.gem.unlit .g{ background:none; border-color:rgba(201,162,75,.45); box-shadow:none; opacity:.55; }
.gem.unlit .g::after, .gem.unlit .beacon{ display:none; }

/* live = sonar rings */
.liv .ring{ position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px solid var(--lc); }
.liv .sonar, .liv .sonar2{ position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%);
  border-radius:50%; border:1.5px solid var(--lc); animation:sonar 1.9s var(--ease-fade) infinite; }
.liv .sonar2{ animation-delay:.95s; }
@keyframes sonar{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:.65; } 100%{ transform:translate(-50%,-50%) scale(2.6); opacity:0; } }
.liv .tag{ position:absolute; left:50%; top:50%; transform:translate(10px,-16px); font-size:8px; font-weight:700; letter-spacing:.1em;
  color:#FF8A8A; background:rgba(8,10,16,.8); padding:1px 4px; border-radius:4px; }
.liv .dot{ position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%;
  background:var(--lc); box-shadow:0 0 8px var(--lc); }

/* ----- layers control (bottom-left) ----- */
#layers{ position:fixed; left:26px; bottom:26px; z-index:20; display:flex; gap:3px; padding:5px; }
#layers .ly{ display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:11px; color:var(--muted);
  font-size:12px; transition:background .15s, color .15s; cursor:pointer; }
#layers .ly svg{ width:14px; height:14px; }
#layers .ly:hover{ background:rgba(255,255,255,.05); color:var(--text); }
#layers .ly.on{ color:var(--text); background:rgba(255,255,255,.05); }
#layers .ly.on::after{ content:''; }
#layers .ly .badge{ font-size:9px; background:var(--accent); color:var(--bg-deep); border-radius:6px; padding:0 4px; font-weight:700; }
#layers .ly.off{ opacity:.45; }

/* ============================================================================
   GALAXY (match space)
   ========================================================================== */
#galaxy{ position:absolute; inset:0; z-index:2; cursor:grab; }
#galaxy:active{ cursor:grabbing; }
#galaxyVignette{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(125% 110% at 50% 50%, rgba(5,6,11,0) 50%, rgba(5,6,11,.55) 84%, rgba(5,6,11,.92) 100%); }
#matchList{ position:fixed; left:26px; top:84px; z-index:20; width:286px; padding:16px; max-height:74vh; display:flex; flex-direction:column; }
#matchList .mh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
#matchList .mh .t{ font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--text); }
#matchList .mh .anchor-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
#matchList .who{ display:flex; align-items:center; gap:10px; padding:8px 0 10px; border-bottom:1px solid var(--glass-line); margin-bottom:8px; }
#matchList .who .av{ width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid var(--fc); box-shadow:0 0 10px -2px var(--fc); }
#matchList .who .av img{ width:100%; height:100%; object-fit:cover; }
#matchList .who .nm{ font-weight:600; font-size:14px; }
#matchList .who .ro{ font-size:11.5px; color:var(--muted); }
#matchList .rows{ overflow:auto; display:flex; flex-direction:column; gap:2px; }
.mrow{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:11px; cursor:pointer; transition:background .15s; }
.mrow:hover, .mrow.hot{ background:rgba(255,255,255,.06); }
.mrow .av{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; border:1.5px solid var(--fc); }
.mrow .av img{ width:100%; height:100%; object-fit:cover; }
.mrow .av.ph{ display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,#2b3046,#171b2c); font-size:10px; color:var(--muted); font-weight:600; }
.mrow .t{ flex:1; min-width:0; }
.mrow .t .n{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow .t .f{ font-size:11px; color:var(--fc); }
.mrow .pct{ font-size:12.5px; font-weight:600; color:var(--accent-bright); font-variant-numeric:tabular-nums; }
#matchList .more{ margin-top:6px; text-align:center; font-size:11.5px; color:var(--accent); cursor:pointer; padding:6px; }
#galaxyStatus{ position:fixed; left:26px; bottom:26px; z-index:20; font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--muted); }
#galaxyZoom{ position:fixed; right:26px; bottom:26px; z-index:20; display:flex; flex-direction:column; }
#galaxyZoom button{ width:38px; height:38px; display:grid; place-items:center; color:var(--muted); transition:background .15s,color .15s; }
#galaxyZoom button:not(:last-child){ border-bottom:1px solid var(--glass-line); }
#galaxyZoom button:hover{ background:rgba(255,255,255,.07); color:var(--text); }
#galaxyZoom svg{ width:16px; height:16px; }
#galaxyTip{ position:fixed; z-index:33; padding:10px 12px; border-radius:11px; pointer-events:none; opacity:0; max-width:230px;
  transition:opacity .15s; }
#galaxyTip.show{ opacity:1; }
#galaxyTip .nm{ font-family:var(--font-display); font-weight:500; font-size:14px; }
#galaxyTip .ro{ font-size:11.5px; color:var(--muted); margin-top:1px; }
#galaxyTip .ne{ font-size:11px; color:var(--faint); margin-top:6px; padding-top:6px; border-top:1px solid var(--glass-line); }

/* ============================================================================
   DIRECTORY
   ========================================================================== */
[data-view="directory"]{ overflow:auto; }
#dirHeader{ position:sticky; top:0; z-index:5; max-width:1120px; margin:0 auto; padding:74px 24px 14px;
  background:linear-gradient(180deg, rgba(7,8,14,.9) 60%, rgba(7,8,14,0)); }
#dirSearch{ display:flex; align-items:center; gap:10px; padding:0 16px; height:46px; border-radius:23px; max-width:520px; margin:0 auto 16px; }
#dirSearch svg{ width:17px; height:17px; color:var(--faint); }
#dirSearch input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14px; }
#dirSearch input::placeholder{ color:var(--faint); font-style:italic; }
#dirTabs{ display:flex; gap:4px; justify-content:center; position:relative; margin-bottom:14px; }
#dirTabs .dtab{ display:flex; align-items:baseline; gap:7px; padding:9px 16px; border-radius:12px; color:var(--muted);
  font-size:14px; cursor:pointer; transition:color .2s, background .2s; }
#dirTabs .dtab:hover{ color:var(--text); }
#dirTabs .dtab.on{ color:var(--text); }
#dirTabs .dtab .c{ font-size:11.5px; color:var(--accent); font-variant-numeric:tabular-nums; }
#dirTabs .dtab.on{ background:rgba(255,255,255,.05); }
#dirFilters{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.dchip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:16px; font-size:11.5px; color:var(--muted);
  border:1px solid var(--glass-line); cursor:pointer; transition:all .15s; }
.dchip .dot{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.dchip.on{ color:var(--text); border-color:color-mix(in srgb, var(--c) 60%, transparent); background:color-mix(in srgb, var(--c) 14%, transparent); }
#dirGrid{ max-width:1120px; margin:0 auto; padding:8px 24px 60px; display:grid; grid-template-columns:repeat(auto-fill, minmax(248px,1fr)); gap:14px; }
.dcard{ position:relative; padding:18px; border-radius:16px; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--shadow); cursor:pointer; transition:transform .2s var(--ease-settle), border-color .2s;
  opacity:0; transform:translateY(8px); }
.dcard.in{ opacity:1; transform:none; }
.dcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.dcard .av{ width:54px; height:54px; border-radius:50%; overflow:hidden; border:2.4px solid var(--fc); box-shadow:0 0 12px -3px var(--fc); margin-bottom:12px; }
.dcard .av img{ width:100%; height:100%; object-fit:cover; }
.dcard .av.ph{ display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,#2b3046,#171b2c); font-weight:600; color:var(--muted); }
.dcard .mono{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:12px;
  background:color-mix(in srgb, var(--fc) 18%, #111626); border:1px solid color-mix(in srgb, var(--fc) 40%, transparent);
  font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--text); }
.dcard .nm{ font-family:var(--font-display); font-weight:500; font-size:16px; color:var(--text); line-height:1.2; }
.dcard .sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.dcard .foot{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.dcard .ftag{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.dcard .ftag .dot{ width:7px; height:7px; border-radius:50%; background:var(--fc); }
.dcard .bdgs{ display:flex; gap:3px; margin-left:auto; }
.dcard .bdgs span{ width:17px; height:17px; border-radius:50%; display:grid; place-items:center; background:#0c1018; border:1px solid rgba(255,255,255,.12); }
.dcard .bdgs svg{ width:10px; height:10px; }
.dcard .mem{ display:flex; margin-top:12px; }
.dcard .mem img, .dcard .mem .ph{ width:24px; height:24px; border-radius:50%; margin-left:-6px; border:1.5px solid #0c1018; object-fit:cover; }
.dcard .mem .ph{ display:grid; place-items:center; background:#222740; font-size:9px; color:var(--muted); }
.dcard .pct{ position:absolute; right:14px; top:14px; font-size:12px; font-weight:600; color:var(--accent-bright); }
#dirEmpty{ grid-column:1/-1; text-align:center; padding:60px; font-family:var(--font-display); font-style:italic; color:var(--muted); }

/* ============================================================================
   COMMUNITY
   ========================================================================== */
[data-view="community"]{ overflow:hidden; }
#sky{ position:absolute; inset:0; z-index:2; }
#skyLayer{ position:absolute; inset:0; z-index:3; }
.constel{ position:absolute; transform:translate(-50%,-50%); cursor:pointer; text-align:center; transition:opacity .4s; }
.constel .star{ width:14px; height:14px; border-radius:50%; margin:0 auto; background:var(--fc);
  box-shadow:0 0 16px var(--fc), 0 0 6px #fff; animation:breathe 5s var(--ease-fade) infinite; }
.constel .nm{ margin-top:34px; font-family:var(--font-display); font-size:15px; color:var(--text); letter-spacing:.04em; }
.constel .ct{ font-size:11px; color:var(--muted); margin-top:2px; }
.constel:hover .nm{ color:var(--accent-bright); }
.constel.faded{ opacity:.18; }
#room{ position:absolute; inset:0; z-index:6; display:none; }
#room.show{ display:block; }
#warp{ position:absolute; inset:0; z-index:7; pointer-events:none; }

/* room interior */
.room-wrap{ position:absolute; inset:max(70px,6vh) max(40px,5vw) max(28px,4vh); display:grid;
  grid-template-rows:auto 1fr auto; grid-template-columns:1fr 248px; gap:0;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.room-head{ grid-column:1/3; display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--glass-line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--fc) 10%, transparent), transparent); }
.room-head .glyph{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--fc);
  background:color-mix(in srgb, var(--fc) 16%, #0c1018); border:1px solid color-mix(in srgb, var(--fc) 40%, transparent); }
.room-head .glyph svg{ width:16px; height:16px; }
.room-head .ti{ font-family:var(--font-display); font-weight:500; font-size:18px; }
.room-head .sub{ font-size:11.5px; color:var(--muted); }
.room-head .live{ display:flex; align-items:center; gap:5px; font-size:10px; letter-spacing:.1em; color:#FF8A8A; text-transform:uppercase; }
.room-head .live i{ width:7px; height:7px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 7px #FF5C5C; animation:pulse 1.5s infinite; }
.room-head .surface{ margin-left:auto; display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:11px;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:var(--muted); font-size:12.5px; cursor:pointer; }
.room-head .surface:hover{ background:rgba(255,255,255,.1); color:var(--text); }
.room-stream{ overflow:auto; padding:20px 22px; display:flex; flex-direction:column; gap:16px; }
.msg{ display:flex; gap:11px; max-width:78%; opacity:0; transform:translateY(10px); animation:msgin .4s var(--ease-settle) forwards; }
@keyframes msgin{ to{ opacity:1; transform:none; } }
.msg .av{ width:34px; height:34px; border-radius:50%; flex:none; overflow:hidden; border:1.5px solid var(--mc); align-self:flex-start; }
.msg .av img{ width:100%; height:100%; object-fit:cover; }
.msg .av.ph{ display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,#2b3046,#171b2c); font-size:11px; color:var(--muted); }
.msg .bub{ background:rgba(17,19,31,.6); border:1px solid var(--glass-line); border-radius:14px; padding:9px 14px; }
.msg .who{ font-size:11.5px; font-weight:600; color:var(--accent-bright); margin-bottom:3px; }
.msg .bd{ font-size:13.5px; color:var(--text); line-height:1.5; }
.msg.me{ flex-direction:row-reverse; margin-left:auto; }
.msg.me .bub{ background:rgba(201,162,75,.10); }
.room-roster{ grid-row:2/3; grid-column:2/3; border-left:1px solid var(--glass-line); padding:16px 14px; overflow:auto; }
.room-roster .rh{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.rmember{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.rmember .av{ width:28px; height:28px; border-radius:50%; overflow:hidden; border:1.5px solid var(--mc); position:relative; }
.rmember .av img{ width:100%; height:100%; object-fit:cover; }
.rmember .av.ph{ display:grid; place-items:center; background:#222740; font-size:9px; color:var(--muted); }
.rmember .nm{ font-size:12.5px; color:var(--muted); }
.rmember.you .nm{ color:var(--accent-bright); }
.rmember.you .av{ border-color:var(--accent); box-shadow:0 0 8px -2px var(--accent); }
.room-composer{ grid-column:1/3; display:flex; align-items:center; gap:10px; padding:13px 18px; border-top:1px solid var(--glass-line); }
.room-composer input{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:13px; padding:11px 14px;
  color:var(--text); font-size:13.5px; outline:none; transition:border-color .2s; }
.room-composer input:focus{ border-color:var(--accent); }
.room-composer .send{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent)); color:var(--bg-deep); }
.room-composer .send svg{ width:18px; height:18px; }

/* ============================================================================
   CONFERENCES
   ========================================================================== */
[data-view="conferences"]{ overflow:auto; }
#marquee{ max-width:760px; margin:0 auto; padding:96px 24px 60px; display:flex; flex-direction:column; gap:16px; }
#marquee .mqh{ text-align:center; margin-bottom:8px; }
#marquee .mqh .t{ font-family:var(--font-display); font-size:26px; color:var(--text); }
#marquee .mqh .s{ font-size:13px; color:var(--muted); margin-top:4px; }
.ecard{ display:flex; align-items:center; gap:18px; padding:18px 20px; border-radius:18px; cursor:pointer;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-line); box-shadow:var(--shadow); transition:transform .22s var(--ease-settle), border-color .2s; position:relative; overflow:hidden; }
.ecard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
.ecard.live{ border-left:2px solid var(--fc); }
.ecard.live::before{ content:''; position:absolute; inset:0 0 auto 0; height:40px; background:linear-gradient(180deg, color-mix(in srgb,var(--fc) 16%,transparent), transparent); pointer-events:none; }
.ecard .med{ width:62px; height:62px; flex:none; border-radius:14px; border:1px solid var(--glass-line); display:grid; place-items:center; text-align:center; }
.ecard .med .d{ font-family:var(--font-display); font-size:22px; color:var(--text); line-height:1; }
.ecard .med .m{ font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.ecard .mid{ flex:1; min-width:0; }
.ecard .mid .t{ font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--text); }
.ecard .mid .s{ font-size:12px; color:var(--muted); margin-top:2px; }
.ecard .spk{ display:flex; margin-top:9px; }
.ecard .spk img, .ecard .spk .ph{ width:28px; height:28px; border-radius:50%; margin-left:-7px; border:1.5px solid #0c1018; object-fit:cover; }
.ecard .spk .ph{ display:grid; place-items:center; background:#222740; font-size:9px; color:var(--muted); }
.ecard .spk .more{ margin-left:2px; font-size:11px; color:var(--muted); align-self:center; }
.ecard .st{ flex:none; }
.ecard .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:14px; font-size:11.5px; }
.ecard .chip.livec{ background:rgba(255,92,92,.14); color:#FF8A8A; font-weight:600; }
.ecard .chip.livec i{ width:7px; height:7px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 7px #FF5C5C; animation:pulse 1.5s infinite; }
.ecard .chip.soon{ color:var(--muted); border:1px solid var(--glass-line); }

/* auditorium */
#hall{ position:fixed; inset:0; z-index:8; display:none; background:radial-gradient(120% 95% at 50% 6%, #19203f, #090b16 55%, #05060B 100%); }
#hall.show{ display:block; }
#hallStage{ position:absolute; left:50%; top:8%; transform:translateX(-50%); width:min(620px,80vw); text-align:center; z-index:3; }
#hallStage .pool{ position:absolute; left:50%; top:-30px; width:420px; height:300px; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(255,217,160,.22), transparent 60%); pointer-events:none; }
#hallStage .spk{ width:96px; height:96px; border-radius:50%; margin:0 auto 14px; overflow:hidden; border:2.6px solid var(--accent);
  box-shadow:0 0 30px -6px var(--glow); position:relative; }
#hallStage .spk img{ width:100%; height:100%; object-fit:cover; }
#hallStage .spk .halo{ position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle, rgba(255,217,160,.35), transparent 65%); animation:breathe 4.2s infinite; }
#hallStage .tt{ font-family:var(--font-display); font-weight:500; font-size:24px; color:var(--text); max-width:560px; margin:0 auto; line-height:1.2; }
#hallStage .by{ font-size:13px; color:var(--muted); margin-top:8px; display:flex; gap:8px; justify-content:center; align-items:center; }
#hallStage .by .fchip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:12px; background:color-mix(in srgb,var(--fc) 16%,transparent); color:var(--fc); font-size:11px; }
#hallSeats{ position:absolute; left:0; right:280px; top:42%; bottom:0; z-index:2; perspective:600px; }
#hallSchedule{ position:fixed; right:26px; top:84px; bottom:26px; width:248px; z-index:4; padding:16px; overflow:auto; }
#hallSchedule .sh{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.stalk{ position:relative; padding:10px 12px 12px 18px; border-radius:11px; margin-bottom:8px; }
.stalk::before{ content:''; position:absolute; left:5px; top:14px; width:7px; height:7px; border-radius:50%; background:var(--faint); }
.stalk.now{ background:rgba(255,255,255,.05); }
.stalk.now::before{ background:var(--accent); box-shadow:0 0 8px var(--accent); }
.stalk.now .nowtag{ display:inline-flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.1em; color:var(--accent-bright); text-transform:uppercase; margin-bottom:4px; }
.stalk .tt{ font-family:var(--font-display); font-size:13.5px; color:var(--text); line-height:1.25; }
.stalk .by{ font-size:11px; color:var(--muted); margin-top:3px; }
.stalk .tm{ font-size:10.5px; color:var(--faint); margin-top:2px; font-variant-numeric:tabular-nums; }
.stalk.past{ opacity:.5; }
#hallBack{ position:fixed; left:26px; top:84px; z-index:5; display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); color:var(--muted); font-size:13px; cursor:pointer; }
#hallBack:hover{ color:var(--text); }
#hallBack svg{ width:16px; height:16px; }
.seat{ position:absolute; border-radius:50%; overflow:hidden; transform:translate(-50%,-50%); }
.seat img{ width:100%; height:100%; object-fit:cover; }
.seat.ph{ background:radial-gradient(circle at 50% 35%,#2a2f44,#14182a); }
.seat.you{ border:2.5px solid var(--accent); box-shadow:0 0 16px -2px var(--glow); z-index:5; }
.seat.you .tag{ position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); font-size:9px; color:var(--accent-bright); }


/* ============================================================================
   V2.1 — chrome relocation + Live room + conf details + galaxy filters
   ========================================================================== */

/* relocate Find-for-me to top-left (out of the layers' way), compact */
#hero{ left:26px; top:62px; bottom:auto; transform:none; padding:10px 17px; font-size:13.5px; gap:8px; }
#hero .spark{ width:16px; height:16px; }
#hero.hidden{ opacity:0; pointer-events:none; transform:translateY(-8px); }

/* Filters button + rail-as-popover */
#filtersBtn{ position:fixed; left:26px; top:112px; z-index:21; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; color:var(--muted); font-size:13px; }
#filtersBtn svg{ width:16px; height:16px; }
#filtersBtn:hover, #filtersBtn.on{ color:var(--text); }
#rail{ left:26px; top:158px; transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease-fade), transform .2s var(--ease-settle), visibility 0s linear .2s; }
#rail.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .2s, transform .2s; }

/* top-right live icon */
#topRight{ position:fixed; right:200px; top:22px; z-index:30; }
#liveBtn{ display:flex; align-items:center; gap:7px; height:42px; padding:0 14px; border-radius:21px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid color-mix(in srgb, #FF5C5C 30%, var(--glass-line)); color:var(--text); font-size:12.5px; }
#liveBtn:hover{ border-color:#FF5C5C; }
#liveBtn .dot{ width:8px; height:8px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 8px #FF5C5C; animation:pulse 1.5s infinite; }
#liveBtn .n{ font-weight:600; }
#livePanel{ position:fixed; right:26px; top:74px; z-index:31; width:320px; padding:12px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .2s var(--ease-settle), visibility 0s linear .2s; }
#livePanel.show{ opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .2s; }
#livePanel .lp-h{ display:flex; align-items:baseline; justify-content:space-between; padding:4px 6px 10px; }
#livePanel .lp-h .t{ font-family:var(--font-display); font-size:15px; }
#livePanel .lp-h .c{ font-size:11px; color:#FF8A8A; }
.lrow2{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; cursor:pointer; transition:background .15s; }
.lrow2:hover{ background:rgba(255,255,255,.05); }
.lrow2 .av{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--fc); position:relative; }
.lrow2 .av img{ width:100%; height:100%; object-fit:cover; }
.lrow2 .av .lr-dot{ position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:#FF5C5C; border:2px solid #0b0e16; }
.lrow2 .m{ flex:1; min-width:0; }
.lrow2 .m .t{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow2 .m .s{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow2 .join{ font-size:11.5px; color:var(--accent-bright); font-weight:600; }
.you-tile{ width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle,#3a3550,#1a1d2e); color:var(--accent-bright); font-size:9px; font-weight:700; }
.lp-start{ width:100%; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px dashed var(--glass-line); color:var(--muted); font-size:13px; }
.lp-start:hover{ color:var(--text); border-color:var(--accent); }
.lp-start svg{ width:13px; height:13px; color:#FF5C5C; }
.lp-startform{ display:none; flex-direction:column; gap:8px; margin-top:8px; padding:10px; border-radius:12px; background:rgba(255,255,255,.03); }
.lp-startform.show{ display:flex; }
.lp-startform input{ background:rgba(255,255,255,.05); border:1px solid var(--glass-line); border-radius:9px; padding:9px 11px; color:var(--text); font-size:13px; outline:none; }
.lp-fields{ display:flex; gap:6px; }
.lpf{ width:22px; height:22px; border-radius:50%; border:1px solid var(--glass-line); display:grid; place-items:center; }
.lpf span{ width:11px; height:11px; border-radius:50%; background:var(--c); }
.lpf.on{ border-color:var(--c); box-shadow:0 0 8px -2px var(--c); }
.lp-go{ padding:9px; border-radius:9px; background:linear-gradient(180deg,var(--accent-bright),var(--accent)); color:var(--bg-deep); font-weight:600; font-size:13px; }

/* ----- LIVE ROOM ----- */
#liveroom{ position:fixed; inset:0; z-index:42; display:none; background:radial-gradient(120% 95% at 50% 0%, #141a33, #090b16 60%, #05060B 100%); padding:64px 22px 22px; }
#liveroom.show{ display:flex; flex-direction:column; }
#card{ z-index:60; }
.live-top{ display:flex; align-items:center; gap:14px; padding:0 4px 14px; }
.live-top .lbadge{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em; color:#FF8A8A; }
.live-top .lbadge i{ width:8px; height:8px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 8px #FF5C5C; animation:pulse 1.4s infinite; }
.live-top .lt .ti{ font-family:var(--font-display); font-weight:500; font-size:19px; }
.live-top .lt .sub{ font-size:12px; color:var(--muted); }
.live-top .lchip{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:13px; font-size:11.5px; color:var(--fc); background:color-mix(in srgb,var(--fc) 14%,transparent); }
.live-top .lchip .d{ width:7px; height:7px; border-radius:50%; background:var(--fc); }
.live-top .lparts{ display:flex; align-items:center; margin-left:auto; }
.live-top .pface{ width:30px; height:30px; border-radius:50%; overflow:hidden; margin-left:-7px; border:2px solid #0c1018; cursor:pointer; transition:transform .15s; }
.live-top .pface:hover{ transform:translateY(-3px); z-index:2; }
.live-top .pface img{ width:100%; height:100%; object-fit:cover; }
.live-top .pmore{ margin-left:6px; font-size:11.5px; color:var(--muted); }
.live-top .leave{ display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:11px; background:rgba(255,92,92,.12); border:1px solid rgba(255,92,92,.3); color:#FF8A8A; font-size:13px; }
.live-top .leave svg{ width:14px; height:14px; }
.live-main{ flex:1; display:grid; grid-template-columns:1fr 320px; gap:16px; min-height:0; }
.live-board{ position:relative; border-radius:18px; overflow:hidden; background:#0c0f1a; border:1px solid var(--glass-line); box-shadow:inset 0 0 80px rgba(0,0,0,.5); }
.board-grid{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:24px 24px; }
.board-title{ position:absolute; left:34px; top:30px; font-family:var(--font-display); font-size:26px; color:var(--text); max-width:60%; line-height:1.15; }
.note{ position:absolute; padding:11px 14px; border-radius:10px; font-size:12.5px; color:#0c0f1a; max-width:210px; box-shadow:0 6px 18px rgba(0,0,0,.4); transform:rotate(-2deg); }
.note.n1{ right:40px; top:90px; background:#ffe9a8; }
.note.n2{ right:90px; top:200px; background:#ffd0c4; transform:rotate(2deg); }
.note.n3{ right:54px; top:300px; background:#cfe8c4; transform:rotate(-1deg); font-weight:500; }
.board-sketch{ position:absolute; left:30px; bottom:70px; width:300px; height:188px; opacity:.9; }
.presence-cursor{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:4px; font-size:10px; color:#9AB6FF; pointer-events:none; }
.presence-cursor span{ width:0; height:0; border-left:7px solid #9AB6FF; border-bottom:9px solid transparent; transform:rotate(-30deg); }
.host-cam{ position:absolute; left:30px; bottom:20px; display:flex; align-items:center; gap:9px; }
.host-cam .cam{ width:60px; height:44px; border-radius:9px; overflow:hidden; position:relative; border:1.5px solid var(--fc); }
.host-cam .cam img{ width:100%; height:100%; object-fit:cover; }
.host-cam .cam .rec{ position:absolute; right:5px; top:5px; width:7px; height:7px; border-radius:50%; background:#FF5C5C; box-shadow:0 0 6px #FF5C5C; }
.host-cam .cname{ font-size:12px; color:var(--muted); }
.live-side{ display:flex; flex-direction:column; border-radius:18px; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); overflow:hidden; }
.ls-h{ padding:14px 16px; border-bottom:1px solid var(--glass-line); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.ls-stream{ flex:1; overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.lmsg{ display:flex; gap:9px; opacity:0; transform:translateY(8px); animation:msgin .4s var(--ease-settle) forwards; cursor:default; }
.lmsg[data-id]{ cursor:pointer; }
.lmsg .av{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex:none; border:1.5px solid var(--mc); }
.lmsg .av img{ width:100%; height:100%; object-fit:cover; }
.lmsg .av.you{ display:grid; place-items:center; background:radial-gradient(circle,#3a3550,#1a1d2e); color:var(--accent-bright); font-size:8px; font-weight:700; border-color:var(--accent); }
.lmsg .lb{ font-size:13px; color:var(--text); line-height:1.45; }
.lmsg .lb b{ color:var(--accent-bright); font-weight:600; margin-right:3px; }
.lmsg.me{ flex-direction:row-reverse; }
.lmsg.me .lb{ text-align:right; }
.ls-composer{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--glass-line); }
.ls-composer input{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:11px; padding:10px 12px; color:var(--text); font-size:13px; outline:none; }
.ls-composer input:focus{ border-color:var(--accent); }
.ls-composer .send{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(180deg,var(--accent-bright),var(--accent)); color:var(--bg-deep); }
.ls-composer .send svg{ width:17px; height:17px; }
.live-controls{ display:flex; gap:10px; justify-content:center; padding-top:14px; }
.live-controls .lc{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 16px; border-radius:13px; background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:var(--muted); font-size:10.5px; }
.live-controls .lc svg{ width:18px; height:18px; }
.live-controls .lc:hover{ color:var(--text); background:rgba(255,255,255,.09); }
.live-controls .lc.on{ color:var(--accent-bright); border-color:var(--accent); }
.live-controls .leave2{ background:rgba(255,92,92,.12); border-color:rgba(255,92,92,.3); color:#FF8A8A; }
.live-controls .leave2 svg{ width:16px; height:16px; }
@media (max-width:880px){ .live-main{ grid-template-columns:1fr; } .live-side{ display:none; } }

/* ----- CONFERENCE DETAILS ----- */
#confDetails{ position:absolute; inset:0; z-index:6; display:none; overflow:auto; background:radial-gradient(120% 90% at 50% 0%, #141a33, #07080f 60%); }
#confDetails.show{ display:block; }
.cd-back{ position:fixed; left:26px; top:64px; z-index:7; display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-line); color:var(--muted); font-size:13px; }
.cd-back:hover{ color:var(--text); }
.cd-back svg{ width:16px; height:16px; }
.cd-wrap{ max-width:900px; margin:0 auto; padding:120px 24px 60px; }
.cd-hero h1{ font-family:var(--font-display); font-weight:600; font-size:34px; margin:10px 0 12px; line-height:1.1; }
.cd-date{ font-size:13px; color:var(--accent-bright); letter-spacing:.04em; }
.cd-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.cd-meta svg{ width:15px; height:15px; vertical-align:-2px; }
.cd-fchip{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:12px; background:color-mix(in srgb,var(--fc) 14%,transparent); color:var(--fc); }
.cd-fchip .d{ width:7px; height:7px; border-radius:50%; background:var(--fc); }
.cd-blurb{ font-family:var(--font-display); font-size:16px; color:var(--muted); line-height:1.6; max-width:680px; margin:16px 0 22px; }
.cd-actions{ display:flex; gap:10px; }
.cd-join{ display:flex; align-items:center; gap:8px; padding:13px 22px; border-radius:13px; background:linear-gradient(180deg,#ff7a7a,#e23d3d); color:#fff; font-weight:600; font-size:14px; box-shadow:0 6px 20px -6px rgba(226,61,61,.6); }
.cd-join svg{ width:16px; height:16px; }
.cd-reg{ display:flex; align-items:center; gap:8px; padding:13px 22px; border-radius:13px; background:rgba(255,255,255,.06); border:1px solid var(--glass-line); color:var(--text); font-size:14px; }
.cd-reg svg{ width:16px; height:16px; }
.cd-cols{ display:grid; grid-template-columns:1fr 320px; gap:36px; margin-top:36px; }
.cd-h{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.cd-sgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:14px; }
.cd-spk{ text-align:center; cursor:pointer; }
.cd-spk img{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); box-shadow:0 0 14px -4px var(--glow); transition:transform .2s; }
.cd-spk:hover img{ transform:translateY(-3px); }
.cd-spk .nm{ font-size:12.5px; font-weight:500; margin-top:8px; }
.cd-spk .ro{ font-size:11px; color:var(--muted); }
.cd-talk{ position:relative; padding:12px 12px 12px 18px; border-radius:11px; margin-bottom:8px; }
.cd-talk::before{ content:''; position:absolute; left:5px; top:16px; width:7px; height:7px; border-radius:50%; background:var(--faint); }
.cd-talk.now{ background:rgba(255,255,255,.05); }
.cd-talk.now::before{ background:#FF5C5C; box-shadow:0 0 8px #FF5C5C; }
.cd-talk .nowtag{ display:flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#FF8A8A; margin-bottom:5px; }
.cd-talk .nowtag i{ width:6px; height:6px; border-radius:50%; background:#FF5C5C; }
.cd-talk .tt{ font-family:var(--font-display); font-size:14px; line-height:1.25; }
.cd-talk .by{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-top:5px; cursor:pointer; }
.cd-talk .by img{ width:18px; height:18px; border-radius:50%; }
.cd-talk .by:hover{ color:var(--text); }
.cd-talk .tm{ font-size:10.5px; color:var(--faint); margin-top:4px; }
@media (max-width:820px){ .cd-cols{ grid-template-columns:1fr; gap:24px; } }

/* ----- GALAXY FILTERS ----- */
#galaxyFilters{ position:fixed; left:50%; top:74px; transform:translateX(-50%); z-index:20; display:flex; gap:20px; padding:10px 16px; align-items:center; flex-wrap:wrap; max-width:84vw; }
#galaxyFilters .gf-row{ display:flex; align-items:center; gap:9px; }
#galaxyFilters .gf-lab{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.gf-chips{ display:flex; gap:5px; }
.gfc{ width:20px; height:20px; border-radius:50%; border:1px solid var(--glass-line); display:grid; place-items:center; }
.gfc span{ width:11px; height:11px; border-radius:50%; background:var(--c); opacity:.5; }
.gfc.on span{ opacity:1; }
.gfc.on{ border-color:var(--c); box-shadow:0 0 8px -2px var(--c); }
.gf-projs{ display:flex; gap:5px; max-width:46vw; overflow-x:auto; padding-bottom:2px; }
.gfp{ white-space:nowrap; font-size:11px; padding:5px 11px; border-radius:13px; border:1px solid var(--glass-line); color:var(--muted); }
.gfp:hover{ color:var(--text); }
.gfp.on{ color:var(--text); border-color:color-mix(in srgb,var(--c) 60%,transparent); background:color-mix(in srgb,var(--c) 14%,transparent); }

/* ----- community back-to-map ----- */
#commBack{ position:fixed; left:26px; top:64px; z-index:8; display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:12px; color:var(--muted); font-size:13px; }
#commBack:hover{ color:var(--text); }
#commBack svg{ width:16px; height:16px; }

/* ----- Find a speaker button + wizard ----- */
.find-speaker{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:10px 18px; border-radius:22px;
  background:linear-gradient(180deg, rgba(231,199,123,.16), rgba(201,162,75,.10)); border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  color:var(--text); font-size:13.5px; font-weight:500; }
.find-speaker:hover{ border-color:var(--accent-bright); }
.find-speaker svg{ width:15px; height:15px; color:var(--accent-bright); }

#speakerModal{ position:fixed; inset:0; z-index:62; display:none; align-items:center; justify-content:center; }
#speakerModal.show{ display:flex; }
#speakerModal .sm-back{ position:absolute; inset:0; background:rgba(4,5,11,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.sm-wrap{ position:relative; width:min(560px,92vw); max-height:88vh; overflow:auto; padding:26px; border-radius:22px;
  animation:smin .4s var(--ease-settle); }
@keyframes smin{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
.sm-x{ position:absolute; right:16px; top:16px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--glass-line); }
.sm-x:hover{ color:var(--text); }
.sm-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.sm-spark{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:var(--accent-bright);
  background:linear-gradient(135deg, rgba(231,199,123,.2), rgba(201,162,75,.08)); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); }
.sm-spark svg{ width:22px; height:22px; }
.sm-t{ font-family:var(--font-display); font-weight:600; font-size:21px; }
.sm-s{ font-size:13px; color:var(--muted); margin-top:2px; }
.sm-lab{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:11px; }
.sm-step{ margin-bottom:20px; }
.sm-fields{ display:flex; flex-wrap:wrap; gap:8px; }
.sm-f{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:14px; border:1px solid var(--glass-line); color:var(--muted); font-size:13px; }
.sm-f .d{ width:9px; height:9px; border-radius:50%; background:var(--c); }
.sm-f:hover{ color:var(--text); }
.sm-f.on{ color:var(--text); border-color:color-mix(in srgb,var(--c) 60%,transparent); background:color-mix(in srgb,var(--c) 14%,transparent); }
.sm-topics-wrap{ display:none; }
.sm-topics-wrap.show{ display:block; animation:smin .35s var(--ease-settle); }
.sm-topics{ display:flex; flex-wrap:wrap; gap:7px; }
.sm-tp{ padding:7px 12px; border-radius:13px; border:1px solid var(--glass-line); color:var(--muted); font-size:12px; }
.sm-tp:hover{ color:var(--text); }
.sm-tp.on{ color:var(--bg-deep); background:linear-gradient(180deg,var(--accent-bright),var(--accent)); border-color:transparent; font-weight:500; }
.sm-go{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border-radius:13px;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent)); color:var(--bg-deep); font-weight:600; font-size:14px; transition:opacity .2s; }
.sm-go:disabled{ opacity:.4; cursor:not-allowed; }
.sm-go svg{ width:16px; height:16px; }
.sm-results{ display:none; margin-top:22px; }
.sm-results.show{ display:block; }
.sm-scan{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px; color:var(--muted); font-size:13px; }
.sm-scanline{ width:80%; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--accent-bright), transparent); animation:scan 1s var(--ease-fade) infinite; }
@keyframes scan{ 0%{ transform:translateX(-40%); opacity:.4; } 50%{ opacity:1; } 100%{ transform:translateX(40%); opacity:.4; } }
.sm-rlab{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.sm-cards{ display:flex; flex-direction:column; gap:9px; }
.sm-card{ display:flex; align-items:center; gap:13px; padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line);
  cursor:pointer; opacity:0; transform:translateY(10px); animation:cardin .5s var(--ease-settle) forwards; transition:border-color .2s, transform .2s; }
.sm-card:hover{ border-color:color-mix(in srgb,var(--fc) 50%,transparent); transform:translateY(-2px); }
@keyframes cardin{ to{ opacity:1; transform:none; } }
.sm-card .av{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none; border:2px solid var(--fc); box-shadow:0 0 12px -3px var(--fc); }
.sm-card .av img{ width:100%; height:100%; object-fit:cover; }
.sm-card .m{ flex:1; min-width:0; }
.sm-card .m .nm{ font-family:var(--font-display); font-weight:500; font-size:15px; }
.sm-card .m .ro{ font-size:12px; color:var(--muted); }
.sm-card .pct{ font-size:14px; font-weight:600; color:var(--accent-bright); }
.sm-card .invite{ padding:7px 13px; border-radius:11px; background:rgba(255,255,255,.06); border:1px solid var(--glass-line); color:var(--text); font-size:12px; }
.sm-card .invite:hover{ background:var(--accent); color:var(--bg-deep); }
.sm-card .invite.done{ background:color-mix(in srgb,var(--interp) 25%,transparent); color:var(--interp); }

/* v2.1 fix: keep match list clear of the galaxy filter bar */
#matchList{ top:132px; max-height:66vh; }
#galaxyFilters{ max-width:64vw; }

/* v2.1 fix#2: anchor galaxy filter bar to the RIGHT of the match list — never overlap */
#galaxyFilters{ left:330px; transform:none; top:72px; max-width:calc(100vw - 360px); justify-content:flex-start; }
#matchList{ top:84px; max-height:74vh; }
@media (max-width:900px){
  #galaxyFilters{ left:50%; transform:translateX(-50%); top:120px; max-width:92vw; }
  #matchList{ top:168px; }
}