:root{
  --bg:#010109;
  --glass:rgba(14,18,32,0.66);
  --glass-2:rgba(20,26,44,0.82);
  --border:rgba(120,160,230,0.16);
  --border-bright:rgba(140,200,255,0.34);
  --txt:#e8ecf5;
  --txt-dim:#8a94ad;
  --txt-faint:#5a6480;
  --accent:#7fd6ff;
  --accent-2:#b48cff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --tnum:font-variant-numeric:tabular-nums;
}
*{box-sizing:border-box}
.hidden{display:none !important}
.tnum{font-variant-numeric:tabular-nums}

.chrome{
  position:fixed;z-index:20;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--border);
  color:var(--txt);
}
.panel{border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.55)}

/* TOP BAR */
#topbar{
  top:0;left:0;right:0;height:52px;
  display:flex;align-items:center;gap:18px;padding:0 16px;
  border-left:none;border-right:none;border-top:none;border-radius:0;
}
.brand{font-weight:700;letter-spacing:.18em;font-size:13px;color:var(--accent);white-space:nowrap}
.logo{color:var(--accent-2);margin-right:4px}
.repo-switch{display:flex;gap:6px;flex-wrap:nowrap}
.repo-pill{
  font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border);color:var(--txt-dim);
  background:rgba(255,255,255,0.02);white-space:nowrap;transition:.15s;
}
.repo-pill:hover{color:var(--txt);border-color:var(--border-bright)}
.repo-pill.active{color:#04111c;font-weight:700;border-color:transparent}
.breadcrumbs{display:flex;gap:4px;align-items:center;margin-left:auto;overflow:hidden;max-width:40vw}
.crumb{font-size:11px;color:var(--txt-dim);cursor:pointer;padding:3px 7px;border-radius:6px;
  background:rgba(255,255,255,0.03);white-space:nowrap;font-family:var(--mono)}
.crumb:hover{color:var(--accent);background:rgba(127,214,255,.08)}
.crumb-sep{color:var(--txt-faint);font-size:10px}

/* LEFT RAIL */
#leftRail{
  left:14px;top:66px;width:288px;max-height:calc(100vh - 80px);
  display:flex;flex-direction:column;padding:14px;overflow:hidden;
}
.rail-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:10px}
.search-wrap{position:relative}
#search{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:rgba(0,0,0,.35);color:var(--txt);font-size:13px;outline:none;
}
#search:focus{border-color:var(--border-bright);box-shadow:0 0 0 3px rgba(127,214,255,.08)}
.search-results{margin-top:8px;overflow-y:auto;max-height:38vh}
.sr-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12px}
.sr-row:hover,.sr-row.sel{background:rgba(127,214,255,.09)}
.sr-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.sr-name{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-path{color:var(--txt-faint);font-family:var(--mono);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.sr-ib{color:var(--accent);font-family:var(--mono);font-size:10px;flex:0 0 auto}
.filters{margin-top:12px;overflow-y:auto}
.filter-group{margin-bottom:14px}
.filter-title{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:7px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--border);
  color:var(--txt-dim);cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none}
.chip.on{color:var(--txt);border-color:var(--border-bright);background:rgba(127,214,255,.07)}
.chip.off{opacity:.4}
.chip .cdot{width:8px;height:8px;border-radius:50%}
#recSlider{width:100%;accent-color:var(--accent)}

/* RIGHT SIDE PANEL */
#sidePanel{
  right:14px;top:66px;width:340px;max-height:calc(100vh - 80px);
  padding:18px;overflow-y:auto;
  transform:translateX(0);
}
.close-btn{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--txt-dim);
  font-size:22px;cursor:pointer;line-height:1}
.close-btn:hover{color:var(--txt)}
.p-repo{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--txt-dim);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.p-repo .cdot{width:9px;height:9px;border-radius:50%}
.p-name{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--txt);word-break:break-all}
.p-path{font-family:var(--mono);font-size:11px;color:var(--txt-faint);margin:4px 0 12px;word-break:break-all}
.p-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.p-badge{font-size:11px;padding:3px 9px;border-radius:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--border);color:var(--txt-dim);font-family:var(--mono)}
.p-badge b{color:var(--txt)}
.p-section{margin-top:14px}
.p-sec-title{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:8px;
  display:flex;justify-content:space-between}
.p-sec-title .ct{color:var(--accent)}
.heatbar{height:6px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:4px}
.heatbar > i{display:block;height:100%;border-radius:4px}
.chip-list{display:flex;flex-wrap:wrap;gap:6px}
.ex-chip{font-size:11px;font-family:var(--mono);padding:3px 8px;border-radius:6px;
  background:rgba(180,140,255,.10);border:1px solid rgba(180,140,255,.22);color:#d7c4ff}
.link-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer}
.link-row:hover{background:rgba(127,214,255,.09)}
.lr-name{font-size:12px;color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-path{font-size:10px;color:var(--txt-faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.empty{color:var(--txt-faint);font-size:12px;font-style:italic}

/* HUD / LEGEND */
#hud{
  left:14px;bottom:14px;width:288px;padding:12px 14px;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.hud-totals{font-family:var(--mono);font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums}
.hud-focus{font-size:11px;color:var(--accent);margin-top:3px}
.legend-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  margin-top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faint)}
.legend-toggle{transition:.2s}
.legend.collapsed{display:none}
.legend{margin-top:8px;max-height:30vh;overflow-y:auto}
.lg-group{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin:8px 0 2px;opacity:.95}
.lg-group:first-child{margin-top:0}
.lg-row{display:flex;align-items:center;gap:8px;font-size:11px;padding:3px 4px;border-radius:6px;cursor:pointer}
.lg-row:hover{background:rgba(255,255,255,.04)}
.lg-row.off{opacity:.4}
.lg-sw{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.lg-dir{color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-family:var(--mono)}
.lg-ct{color:var(--txt-faint);font-family:var(--mono);font-size:10px}
.hud-hint{margin-top:9px;font-size:10px;color:var(--txt-faint);font-style:italic}

/* TOOLTIP */
.tooltip{position:fixed;z-index:30;pointer-events:none;padding:7px 10px;border-radius:9px;
  background:var(--glass-2);border:1px solid var(--border-bright);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:12px;max-width:320px;box-shadow:0 8px 28px rgba(0,0,0,.6)}
.tt-name{font-family:var(--mono);font-weight:700;color:var(--txt)}
.tt-path{font-family:var(--mono);font-size:10px;color:var(--txt-faint);word-break:break-all}
.tt-stat{font-family:var(--mono);font-size:10px;color:var(--accent);margin-top:3px}

/* CONSTELLATION LABELS */
#constLabels{position:fixed;inset:0;z-index:10;pointer-events:none}
.const-label{position:absolute;transform:translate(-50%,-50%);text-align:center;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
  text-shadow:0 0 22px currentColor;transition:opacity .25s;white-space:nowrap}
.const-label small{display:block;font-size:9px;letter-spacing:.18em;font-weight:500;opacity:.7;margin-top:3px}

/* ERROR OVERLAY */
.error-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(2,3,9,.92)}
.error-card{background:var(--glass-2);border:1px solid var(--border-bright);border-radius:16px;
  padding:28px 32px;text-align:center;max-width:420px}
.error-title{font-size:16px;font-weight:700;color:#ff8a9b;margin-bottom:8px}
.error-msg{font-size:12px;color:var(--txt-dim);font-family:var(--mono);margin-bottom:18px;word-break:break-all}
.retry-btn{font-size:13px;padding:9px 22px;border-radius:10px;border:1px solid var(--border-bright);
  background:rgba(127,214,255,.12);color:var(--accent);cursor:pointer;font-weight:600}
.retry-btn:hover{background:rgba(127,214,255,.2)}

/* MOBILE */
@media (max-width:760px){
  #topbar{height:46px;padding:0 10px;gap:10px;overflow-x:auto}
  .breadcrumbs{display:none}
  #leftRail{left:0;right:0;top:auto;bottom:0;width:100%;border-radius:16px 16px 0 0;
    max-height:46vh;border-left:none;border-right:none;border-bottom:none}
  #sidePanel{left:0;right:0;top:auto;bottom:0;width:100%;border-radius:16px 16px 0 0;
    max-height:60vh;z-index:25}
  #hud{left:8px;right:8px;bottom:auto;top:52px;width:auto}
  .legend{max-height:16vh}
}