:root {
  --bg: #0a0d12;
  --bg2: #0e131a;
  --panel: rgba(22, 28, 37, 0.7);
  --panel-solid: #141a22;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #eaf0f7;
  --muted: #8695a8;
  --faint: #5b6779;
  --accent: #ff6a1f;
  --accent2: #ff9420;
  --good: #ffb267;   /* positive — light orange */
  --warn: #ff7a1f;   /* attention — mid orange */
  --bad: #7d8494;    /* negative — neutral grey */
  --glow: 0 0 24px rgba(255, 106, 31, 0.38);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(255, 148, 32, 0.12), transparent 60%),
    radial-gradient(1000px 500px at 10% 8%, rgba(255, 106, 31, 0.12), transparent 55%),
    var(--bg);
  overflow: hidden;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #232b36; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

.app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; height: 100dvh; }

/* ===== Sidebar ===== */
.sidebar {
  display: flex; flex-direction: column;
  overflow-y: auto; min-height: 0;  /* never clip footer/Sync on short viewports */
  background: linear-gradient(180deg, rgba(16,21,29,.95), rgba(10,13,18,.95));
  border-right: 1px solid var(--line);
  padding: 20px 14px; gap: 6px;
}
.logo { padding: 6px 10px 18px; }
.brand-logo { width: 100%; max-width: 168px; height: auto; display: block; fill: #fff; }
.logo-sub { color: var(--accent); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-top: 8px; font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--muted);
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; text-align: left; transition: all .15s;
}
.nav-item .ni { width: 16px; text-align: center; opacity: .8; }
.nav-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.nav-item.active {
  color: #fff; background: linear-gradient(90deg, rgba(255,106,31,.20), rgba(255,148,32,.10));
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-divider {
  color: var(--muted); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  padding: 16px 12px 6px;
}
.side-foot { display: flex; flex-direction: column; gap: 8px; }
.sync-info { font-size: 11px; line-height: 1.4; padding: 2px 2px 6px; }
.sync-src { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; display: inline-block; }
.sync-when { color: var(--faint); margin-top: 2px; }

/* ===== Buttons / inputs ===== */
.btn {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  border: none; color: #fff; font-weight: 600; padding: 9px 14px;
  border-radius: 10px; cursor: pointer; text-decoration: none; font-size: 13px;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--glow); }
.btn.block { width: 100%; text-align: center; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line-strong); }
.btn.ghost:hover { box-shadow: none; border-color: var(--accent); }
.search, .select {
  background: var(--panel-solid); border: 1px solid var(--line-strong); color: var(--text);
  padding: 9px 13px; border-radius: 10px; min-width: 220px; font-size: 13px; outline: none;
}
.search:focus, .select:focus { border-color: var(--accent); box-shadow: var(--glow); }
.search.sm { min-width: 180px; padding: 7px 11px; }

/* ===== Main / topbar ===== */
.main { overflow: hidden; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px 16px; border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .2px; }
.sub { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.topbar-tools { display: flex; gap: 10px; align-items: center; }

.view { display: none; padding: 22px 28px 32px; overflow: auto; flex: 1; }
.view.active { display: block; }
#view-network.active, #view-map.active { display: flex; padding: 0; }

/* ===== Overview ===== */
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.hstat {
  position: relative; overflow: hidden;
  background: var(--panel); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.hstat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: var(--_c, var(--accent)); opacity: .16; filter: blur(14px);
}
.hstat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.5px; }
.hstat small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.hstat .delta { color: var(--_c, var(--accent)); font-size: 12px; font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.panel {
  background: var(--panel); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.panel-h { font-weight: 700; font-size: 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.hint { color: var(--faint); font-size: 11px; font-weight: 400; }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 42px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .bl { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.bar-track { height: 9px; background: rgba(255,255,255,.05); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar-row .bv { text-align: right; color: var(--text); font-weight: 600; }

.funnel { display: flex; flex-direction: column; gap: 10px; }
.fstep { display: flex; align-items: center; gap: 12px; }
.fbar { height: 34px; border-radius: 10px; display: flex; align-items: center; padding: 0 12px; color: #05121f; font-weight: 700; font-size: 13px; min-width: 46px; transition: width .6s; }
.fstep span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.demo-note { color: var(--faint); font-size: 12px; line-height: 1.5; margin: 16px 2px 0; max-width: 900px; }
.sport-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.schip {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  padding: 9px 13px; border-radius: 12px; font-size: 13px; transition: all .15s;
}
.schip:hover { transform: translateY(-2px); border-color: var(--_c); box-shadow: 0 0 16px -4px var(--_c); }
.schip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--_c); box-shadow: 0 0 8px var(--_c); }
.schip b { font-weight: 700; }
.schip small { color: var(--muted); }

/* ===== Network graph ===== */
.graph-wrap, .map-wrap { position: relative; flex: 1; width: 100%; height: 100%; }
#graph, #map, #igraph { width: 100%; height: 100%; display: block; cursor: grab; }
.icl-label { fill: #ffd9b0; font-size: 13px; font-weight: 700; paint-order: stroke;
  stroke: #0a0d12; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
#graph:active { cursor: grabbing; }
.node-label { font-size: 10px; fill: #d6dee8; pointer-events: none; paint-order: stroke; stroke: #0a0d12; stroke-width: 3.5px; font-weight: 500; }
.graph-legend {
  position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 6px 12px;
  max-width: 60%; background: rgba(10,13,18,.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.leg { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.leg .dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.leg.off { opacity: .3; }
.heatleg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.heatbar { display: inline-block; width: 96px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #ffe8c9, #ffc48f, #ff9c4d, #e0560d, #a3360a); }
.heatleg .dot { width: 9px; height: 9px; border-radius: 50%; }
.heat-prospect { background: #9aa7b8; }
.graph-tools, .map-controls {
  position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; align-items: center;
}
.net-filters {
  position: absolute; top: 60px; right: 16px; z-index: 4; display: flex; gap: 6px; align-items: center;
  background: rgba(10,13,18,.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px;
}
.net-filters .nf-label { color: var(--muted); font-size: 11.5px; margin: 0 3px 0 2px; }
.net-filters .chip-btn { padding: 5px 10px; font-size: 12px; }
/* filter toggles: hide a connection type when its chip is off (beats inline display from isolate/search) */
#graph.hide-teammate  line.cat-teammate,
#graph.hide-college   line.cat-college,
#graph.hide-hometown  line.cat-hometown,
#graph.hide-mighty    line.cat-mighty,
#graph.hide-event     line.cat-event,
#graph.hide-community line.cat-community,
#graph.hide-interest  line.cat-interest { display: none !important; }

/* ===== Creators tab ===== */
.creators-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.creators-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.creators-filters .chip-n { opacity: .6; font-weight: 600; margin-left: 2px; }
.creators-count { color: var(--muted); font-size: 13px; }
.creators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.cr-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_c) 7%, var(--panel-solid)), var(--panel-solid));
  border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 13px; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cr-card:hover { border-color: color-mix(in srgb, var(--_c) 55%, transparent); transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--_c) 20%, transparent); }
.cr-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--_c); opacity: .9; }
.cr-head { display: flex; align-items: center; gap: 13px; }
.cr-ava {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: #12100c; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--_c), color-mix(in srgb, var(--_c) 60%, #ffffff));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--_c) 40%, transparent);
}
.cr-id { min-width: 0; }
.cr-name { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.15; }
.cr-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cr-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: color-mix(in srgb, var(--_c) 70%, #ffffff);
  background: color-mix(in srgb, var(--_c) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--_c) 35%, transparent); padding: 3px 9px; border-radius: 999px;
}
.cr-sport { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cr-blurb { font-size: 13px; line-height: 1.55; color: var(--muted); flex: 1; }
.cr-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.clink {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--_c) 55%, transparent); background: color-mix(in srgb, var(--_c) 16%, transparent);
  padding: 5px 11px; border-radius: 9px; transition: background .15s, transform .1s;
}
.clink .cl-i { font-size: 12px; line-height: 1; }
.clink:hover { background: color-mix(in srgb, var(--_c) 34%, transparent); transform: translateY(-1px); }
.cr-nolink { font-size: 12px; color: var(--muted); font-style: italic; }
.cr-empty { color: var(--muted); padding: 40px; text-align: center; grid-column: 1 / -1; }
.chip-btn {
  background: rgba(10,13,18,.6); backdrop-filter: blur(8px); border: 1px solid var(--line-strong);
  color: var(--muted); padding: 7px 12px; border-radius: 10px; cursor: pointer; font-size: 12.5px;
}
.chip-btn:hover { color: var(--text); border-color: var(--accent); }
.chip-btn.active { color: #fff; background: linear-gradient(120deg, rgba(255,106,31,.32), rgba(255,148,32,.25)); border-color: transparent; }
.tip {
  position: absolute; pointer-events: none; z-index: 5; max-width: 240px;
  background: rgba(12,16,22,.95); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 11px 13px; font-size: 12.5px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.tip h4 { margin: 0 0 4px; font-size: 13.5px; }
.tip .row { color: var(--muted); display: flex; justify-content: space-between; gap: 14px; }
.tip .row b { color: var(--text); }
.tip .tag { display: inline-block; margin-top: 6px; font-size: 11px; padding: 1px 8px; border-radius: 999px; }
.lt-names { font-weight: 700; color: var(--text); font-size: 13px; line-height: 1.35; }
.lt-names .lt-x { color: var(--accent); margin: 0 3px; }
.lt-rel { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Connections panel (click a person → list of who + how they're connected) */
.conn-panel {
  position: absolute; top: 16px; left: 16px; z-index: 8; width: min(340px, 82vw);
  max-height: calc(100% - 32px); display: flex; flex-direction: column;
  background: rgba(12,16,22,.96); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55); overflow: hidden;
}
.conn-panel.hidden { display: none; }
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 8px; }
.cp-title { font-weight: 700; font-size: 15px; color: var(--text); }
.cp-close { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; line-height: 1; }
.cp-close:hover, .cp-close:focus-visible { color: var(--text); background: rgba(255,255,255,.08); outline: none; }
.cp-sub { padding: 0 14px 8px; color: var(--muted); font-size: 11.5px; border-bottom: 1px solid var(--line); }
.cp-list { overflow-y: auto; padding: 6px; }
.cp-row { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 9px; padding: 8px 9px; cursor: pointer; color: var(--text); }
.cp-row:hover, .cp-row:focus-visible { background: rgba(255,106,31,.14); outline: none; }
.cp-name { font-size: 13px; font-weight: 600; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-tag { font-size: 10.5px; color: var(--muted); background: rgba(255,255,255,.06);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; }
.cp-empty { color: var(--muted); font-size: 12px; padding: 12px; }

/* ===== Map ===== */
.map-note { position: absolute; bottom: 14px; left: 16px; color: var(--faint); font-size: 11px; }
.map-countbar {
  position: absolute; bottom: 14px; right: 16px; z-index: 6;
  display: flex; align-items: baseline; gap: 7px;
  background: rgba(10,13,18,.72); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 7px 13px;
}
.map-countbar[hidden] { display: none; }
/* ---- Global Map controls on a phone -------------------------------------
   Every overlay was positioned for a wide canvas: search top-left, tier toggle
   top-RIGHT, time bar bottom-centre at 70% width, country count bottom-RIGHT.
   Below ~860px those corners are effectively the same place, so the controls
   sat on top of each other. Laid out as full-width rows instead, and scoped to
   #view-map so the Network Web and the club maps (which have their own
   overrides) are untouched. */
@media (max-width: 860px) {
  #view-map .map-search-wrap { top: 12px; left: 12px; right: 12px; }
  #view-map .map-search-wrap .map-search { flex: 1; width: auto; min-width: 0; }
  /* below the search rather than beside it, and wrapping: the two tier labels
     do not fit on one phone-width line */
  #view-map .map-controls {
    top: 60px; left: 12px; right: 12px;
    justify-content: flex-start; flex-wrap: wrap;
  }
  /* the note is a full sentence with nowhere to go once the bar is full-width */
  #view-map .map-note { display: none; }
  #view-map .time-bar {
    left: 12px; right: 12px; width: auto; transform: none; bottom: 60px;
  }
  #view-map .map-countbar { bottom: 16px; right: 12px; }
}
.map-countbar b { color: var(--text); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.map-countbar small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* On the Global Map the placement caption shares the bottom edge with the
   centered time scrubber (which has an opaque background on top), so lift the
   caption above the scrubber instead of letting it hide behind it. */
#view-map .map-note { bottom: 78px; max-width: min(420px, 46%); line-height: 1.4; }

/* ...and the country badge needs the same treatment against the same scrubber.
   The scrubber is centred and up to 620px wide; the badge is pinned
   bottom-right. Nothing relates the two, so on a mid-width canvas the
   scrubber's right edge runs underneath the badge. Measured overlap: from
   861px — just above where the phone rules below start stacking them — through
   ~1195px, i.e. an embedded iframe column, a half-width browser window and
   most tablets. Lift the badge onto its own row above the scrubber there. */
@media (min-width: 861px) and (max-width: 1220px) {
  #view-map .map-countbar { bottom: 74px; }
}

/* Network time slider */
.time-bar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 6;
  background: rgba(10,13,18,.72); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 16px;
  width: min(620px, 70%);
}
.time-bar input[type=range] { flex: 1; appearance: none; height: 5px; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), #ffd9b0); outline: none; cursor: pointer; }
.time-bar input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px var(--accent); cursor: pointer; }
.time-bar input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }
.time-readout { display: flex; flex-direction: column; align-items: flex-end; min-width: 150px; line-height: 1.25; }
.time-readout > span:first-child { color: var(--text); font-weight: 600; font-size: 12.5px; }
.time-readout > span:last-child { color: var(--faint); font-size: 11px; }
#timePlay { min-width: 34px; }
.map-search-wrap { position: absolute; top: 14px; left: 14px; z-index: 6; display: flex; gap: 8px; align-items: center; }
.map-search {
  width: min(340px, 42vw); padding: 9px 14px; font-size: 13px; color: var(--text);
  background: rgba(10,13,18,.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.map-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,31,.15); }
.map-search::placeholder { color: var(--muted); }
.map-search.nomatch { border-color: #b4442a; }
.map-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; width: min(340px, 42vw);
  max-height: 320px; overflow-y: auto; z-index: 12;
  background: rgba(10,13,18,.96); backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.map-suggest[hidden] { display: none; }
.sug {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  cursor: pointer; color: var(--text); font-size: 13px; line-height: 1.2;
}
.sug:hover, .sug.active { background: rgba(255,106,31,.16); }
.sug-ico { flex: none; width: 20px; text-align: center; font-size: 15px; }
.sug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sug-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-name b { color: var(--accent); font-weight: 700; }
.sug-sub { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; }
.land { fill: #1d1409; stroke: none; cursor: pointer; transition: fill .15s; }
.land:hover { fill: #2a1c0d; }
/* fill:none normally means only the stroke line receives clicks — pointer-events:all
   makes the whole polygon interior a click target too, so "click a state" doesn't
   require hitting its outline pixel-perfectly. */
.state { fill: none; stroke: rgba(255,138,61,.28); stroke-width: .4; vector-effect: non-scaling-stroke; transition: opacity .3s; pointer-events: all; cursor: pointer; }
.state:hover { fill: rgba(255,106,31,.08); }
.state.state-hi { stroke: rgba(255,150,74,.95); stroke-width: 1.6; fill: rgba(255,106,31,.10); }
.state.state-dim { opacity: .18; }
.country-border { fill: none; stroke: rgba(255,150,74,.75); stroke-width: .9; vector-effect: non-scaling-stroke; }
.coastline { fill: none; stroke: rgba(255,150,74,.5); stroke-width: .7; vector-effect: non-scaling-stroke; }
.sphere { fill: url(#ocean); stroke: var(--line); }
.graticule { fill: none; stroke: rgba(255,255,255,.03); stroke-width: .5; }
.hub-target { fill: none; stroke: #9aa7b8; stroke-dasharray: 3 3; opacity: .7; }
.pulse { transform-origin: center; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { r: var(--r); opacity: .55; } 100% { r: calc(var(--r) * 2.6); opacity: 0; } }

/* ===== Sports grid ===== */
.sports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.scard {
  position: relative; overflow: hidden; border-radius: 18px; padding: 18px;
  background: var(--panel-solid); border: 1px solid var(--line);
  transition: transform .18s, box-shadow .18s;
}
.scard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -16px var(--_c); border-color: var(--_c); }
.scard::before {
  content: ""; position: absolute; inset: 0; opacity: .1;
  background: radial-gradient(120px 120px at 85% -10%, var(--_c), transparent 70%);
}
.scard-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; }
.scard-ico { font-size: 30px; filter: drop-shadow(0 0 10px var(--_c)); }
.scard-top h3 { margin: 0; font-size: 17px; }
.scard-top .st-sub { color: var(--muted); font-size: 12px; }
.scard-nums { display: flex; gap: 18px; margin-bottom: 14px; position: relative; }
.scard-nums div b { font-size: 22px; font-weight: 800; display: block; }
.scard-nums div small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.tierbar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; margin-bottom: 10px; background: rgba(255,255,255,.05); }
.tierbar span { height: 100%; }
.scard-leagues { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.lpill { font-size: 11px; background: rgba(255,255,255,.06); color: var(--muted); padding: 2px 9px; border-radius: 999px; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--faint); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255,106,31,.07); cursor: pointer; }
.badge { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.badge.qualifies { background: rgba(255,178,103,.14); color: var(--good); }
.badge.needs_review { background: rgba(255,122,31,.14); color: var(--warn); }
.badge.disqualified { background: rgba(125,132,148,.16); color: var(--bad); }
.score { font-weight: 700; color: var(--accent); }

/* ===== Caps / misc ===== */
.caps { display: flex; gap: 6px; flex-wrap: wrap; }
.cap { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--faint); }
.cap.on { color: var(--accent); border-color: rgba(255,106,31,.45); }
.hidden { display: none !important; }
.empty { color: var(--muted); padding: 60px; text-align: center; }

/* ===== Drawer ===== */
.drawer {
  position: fixed; top: 0; right: 0; width: min(560px, 92vw); height: 100vh; height: 100dvh; overflow: auto;
  background: var(--panel-solid); border-left: 1px solid var(--line-strong); padding: 30px; z-index: 60;
  box-shadow: -30px 0 80px rgba(0,0,0,.6); animation: slideIn .25s ease;
}
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--muted); font-size: 28px; cursor: pointer; }
.close:hover { color: var(--text); }
.briefing { white-space: pre-wrap; font-size: 14px; }
.briefing h1 { font-size: 20px; margin-top: 0; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 50; }

/* ===== Mentor Match (internal ids/classes still say "advisor-"/"adv-") ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.advisor-search { padding-bottom: 14px; }
.advisor-box-wrap { position: relative; }
.advisor-box {
  width: 100%; padding: 16px 44px 16px 18px; font-size: 16px; color: var(--text);
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.advisor-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,31,.15); }
.advisor-box::placeholder { color: var(--faint); }
/* browsers add their own clear "x" for type=search; we suppress it in favor
   of our own accessible, consistently-styled button */
.advisor-box::-webkit-search-cancel-button { display: none; }
.advisor-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--faint); background: transparent; border: none; border-radius: 6px;
  cursor: pointer; font-size: 14px; transition: color .12s, background .12s;
}
.advisor-clear:hover { color: var(--text); background: rgba(255,255,255,.06); }
.advisor-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.advisor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adv-chip {
  padding: 6px 13px; font-size: 12.5px; color: var(--muted); cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 999px;
  transition: all .12s;
}
.adv-chip:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,106,31,.08); }
.adv-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.advisor-results { display: flex; flex-direction: column; gap: 12px; }
.adv-hint {
  color: var(--muted); font-size: 14px; line-height: 1.6; padding: 28px 24px;
  background: var(--panel); border: 1px dashed var(--line-strong); border-radius: 12px;
}
.adv-sec {
  color: var(--faint); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; margin: 10px 0 2px;
}

.adv-card {
  display: flex; gap: 16px; padding: 20px; animation: slideIn .25s;
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: 14px; border-left: 3px solid var(--accent);
}
.adv-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #0a0d12;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.adv-avatar.sm { width: 38px; height: 38px; font-size: 13px; }
.adv-body { flex: 1; min-width: 0; }
.adv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adv-top h3 { margin: 0; font-size: 18px; }
.adv-badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px; color: var(--accent);
  padding: 3px 9px; border: 1px solid var(--accent); border-radius: 999px;
  background: rgba(255,106,31,.08);
}
.adv-role { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.adv-role b { color: var(--text); }
.adv-blurb { color: var(--text); font-size: 13.5px; line-height: 1.55; margin: 10px 0; }
.adv-acc { margin: 8px 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.adv-acc li::marker { color: var(--accent); }
.adv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.adv-tag {
  font-size: 11.5px; color: var(--muted); padding: 3px 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px;
}
.adv-why { color: var(--accent2); font-size: 13px; margin-top: 12px; font-weight: 500; }
.adv-li {
  display: inline-block; margin-top: 14px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  color: #0a0d12; background: var(--accent); border-radius: 8px; text-decoration: none;
}
.adv-li:hover { background: var(--accent2); }
.adv-li:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.adv-li.sm { margin: 0; padding: 5px 11px; font-size: 12px; flex: none; }

.adv-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.adv-mcard {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.adv-mbody { flex: 1; min-width: 0; }
.adv-mname { font-weight: 600; font-size: 14px; }
.adv-mtier { font-size: 10.5px; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.adv-mmeta { color: var(--faint); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mobile nav (hidden on desktop) */
.nav-toggle, .nav-scrim { display: none; }

.sync-fab {
  display: none; align-items: center; gap: 6px;
  position: fixed; top: 12px; right: 12px; z-index: 80;
  height: 42px; padding: 0 15px;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  color: #fff; font-weight: 700; font-size: 13px; line-height: 1;
  border: none; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.sync-fab:active { transform: translateY(1px); }
/* phones (off-canvas drawer) */
@media (max-width: 860px) { .sync-fab { display: inline-flex; } .topbar { padding-right: 104px; } }
/* touch tablets incl. iPad landscape — sidebar Sync can be off-screen there */
@media (min-width: 861px) and (max-width: 1366px) and (pointer: coarse) { .sync-fab { display: inline-flex; } .topbar { padding-right: 104px; } }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .view { padding: 16px 14px 26px; }
  .search, .search.sm { min-width: 0; width: 100%; }
  .sidebar {
    display: flex; position: fixed; top: 0; left: 0; z-index: 70;
    width: 250px; max-width: 82vw; height: 100vh; height: 100dvh; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open { transform: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 12px; left: 12px; z-index: 80;
    width: 42px; height: 42px; font-size: 20px; color: var(--text);
    background: rgba(16,21,29,.92); backdrop-filter: blur(8px);
    border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer;
  }
  .nav-scrim.open { display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
  .topbar { padding-left: 62px; }   /* leave room for the hamburger */
  .grid-2 { grid-template-columns: 1fr; }
}
.hub-switch { color: var(--accent); text-decoration: underline dotted; cursor: pointer; }