*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --void: #000000;
  --void-2:#000000;
  --glow-gold: #f5d97a;
  --glow-gold-dim: rgba(132, 145, 214, 0.45);
  --text: #f5f7ff;
  --text-soft: rgba(245,247,255,0.84);
  --muted: #94a3c7;
  --muted-2: rgba(148,163,199,0.62);
  --panel: rgba(6,10,28,0.42);
  --panel-strong: rgba(8,12,30,0.56);
  --panel-line: rgba(132,145,214,0.28);
  --accent: rgba(132,145,214,0.72);
  --success: rgba(80,216,128,0.9);
  --shadow: 0 18px 60px rgba(0,0,0,0.22);
  --radius: 18px;
}
html,body { width:100%; height:100%; background:#000; color:var(--text);
  font-family:'Josefin Sans',sans-serif; overflow:hidden; user-select:none; }
canvas#bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
canvas#graph { position:fixed; inset:0; z-index:1; }
canvas#minimap { position:fixed; bottom:88px; left:18px; z-index:12;
  border:1px solid var(--panel-line); background:rgba(3,8,24,0.30);
  backdrop-filter:blur(6px); width:160px; height:110px; cursor:crosshair; }

/* ── HEADER ── */
#header { display:none; }
#title-block h1 { font-family:'Cormorant Garamond',serif; font-size:1.75rem; font-weight:300;
  letter-spacing:0.15em; color:var(--glow-gold); text-shadow:0 0 36px rgba(132,145,214,0.28); line-height:1; }
#title-block p { font-size:0.55rem; letter-spacing:0.38em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
#stats { text-align:right; }
#stats .num { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:300;
  color:var(--glow-gold); opacity:.65; line-height:1; }
#stats .lbl { font-size:0.48rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted); }

/* ── SEARCH ── */
#search-wrap { position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:10; }
#search { background:rgba(8,12,30,0.24); border:1px solid rgba(132,145,214,0.18);
  color:var(--text); font-family:'Josefin Sans',sans-serif; font-size:0.62rem;
  letter-spacing:0.22em; padding:9px 18px; width:240px; outline:none;
  transition:all .3s; backdrop-filter:blur(8px); text-align:center; }
#search::placeholder { color:var(--muted); }
#search:focus { border-color:var(--panel-line); box-shadow:0 0 18px rgba(132,145,214,0.18); }

/* ── DOMAIN FILTERS ── */
#filters { position:fixed; top:72px; left:50%; transform:translateX(-50%); z-index:10;
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:820px; }
.filter-chip { font-family:'Josefin Sans',sans-serif; font-size:0.48rem; letter-spacing:0.2em;
  text-transform:uppercase; padding:5px 12px; cursor:pointer;
  border:1px solid rgba(132,145,214,0.18); color:var(--muted);
  background:rgba(8,12,30,0.18); transition:all .25s; white-space:nowrap; }
.filter-chip:hover { color:var(--text); border-color:rgba(132,145,214,0.32); }
.filter-chip.active { color:#fff; border-color:rgba(132,145,214,0.42); background:rgba(132,145,214,0.12);
  box-shadow:0 0 12px var(--chip-glow,transparent); }

/* ── ZOOM CONTROLS ── */
#zoom-controls { position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:12; display:flex; flex-direction:column; gap:6px; }
.zc-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--panel-line); color:var(--glow-gold);
  font-size:1.1rem; cursor:pointer; transition:all .25s; backdrop-filter:blur(8px); }
.zc-btn:hover { background:rgba(132,145,214,0.16); border-color:rgba(132,145,214,0.45);
  box-shadow:0 0 16px rgba(132,145,214,0.16); }
.zc-btn.fit { font-size:0.55rem; letter-spacing:0.1em; }
.zc-divider { height:1px; background:rgba(132,145,214,0.16); margin:3px 0; }

/* ── LEGEND (right side) ── */
#legend { position:fixed; right:70px; top:50%; transform:translateY(-50%);
  z-index:10; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.leg-item { display:flex; align-items:center; gap:8px; }
.leg-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.leg-lbl { font-size:0.46rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }

/* ── BOTTOM CONTROLS ── */
#controls { position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:12; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:min(980px, calc(100vw - 32px)); }
.ctrl-btn { background:rgba(8,12,30,0.34); border:1px solid var(--panel-line);
  color:var(--glow-gold); font-family:'Josefin Sans',sans-serif;
  font-size:0.55rem; letter-spacing:0.2em; text-transform:uppercase;
  padding:9px 20px; cursor:pointer; transition:all .3s; backdrop-filter:blur(8px); }
.ctrl-btn:hover { background:rgba(132,145,214,0.14); border-color:rgba(132,145,214,0.42);
  box-shadow:0 0 16px rgba(132,145,214,0.14); }
.ctrl-btn.accent { background:rgba(132,145,214,0.18); border-color:rgba(132,145,214,0.38); }
.ctrl-btn.green { color:#ffffff; border-color:var(--panel-line); background:rgba(8,12,30,0.34); }
.ctrl-btn.green:hover { background:rgba(132,145,214,0.14); border-color:rgba(132,145,214,0.42); }
.ctrl-btn.active { background:rgba(132,145,214,0.18); border-color:rgba(132,145,214,0.42); }

/* ── DETAIL PANEL ── */
#detail-panel { position:fixed; left:18px; top:50%; transform:translateY(-50%);
  width:320px; background:linear-gradient(180deg, rgba(9,13,31,0.34), rgba(5,8,20,0.22)); border:1px solid var(--panel-line);
  border-radius:22px; backdrop-filter:blur(18px); padding:22px 18px; z-index:12;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .3s; max-height:72vh; overflow-y:auto; }
#detail-panel.show { opacity:1; pointer-events:all; }
#dp-close { position:absolute; top:10px; right:12px; background:none; border:none;
  color:var(--muted); cursor:pointer; font-size:0.85rem; transition:color .2s; }
#dp-close:hover { color:var(--glow-gold); }
#dp-name { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:300;
  color:var(--glow-gold); margin-bottom:4px; }
.dp-cat { font-size:0.47rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.dp-desc { font-size:0.6rem; line-height:1.75; color:rgba(232,228,216,0.65); margin-bottom:12px; }
.dp-ref { font-size:0.5rem; letter-spacing:0.1em; color:rgba(192,205,255,0.82); font-style:italic; margin-bottom:12px; line-height:1.6; }
.dp-section-title { font-size:0.46rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.dp-conn-list { display:flex; flex-wrap:wrap; gap:4px; }
.dp-conn-tag { font-size:0.5rem; letter-spacing:0.1em; border:1px solid rgba(132,145,214,0.18);
  padding:3px 7px; color:rgba(232,228,216,0.45); cursor:pointer; transition:all .2s; }
.dp-conn-tag:hover { border-color:rgba(132,145,214,0.42); color:var(--glow-gold); }

/* ── TOOLTIP ── */
#tooltip { position:fixed; pointer-events:none; background:rgba(8,12,30,0.3);
  border:1px solid var(--panel-line); backdrop-filter:blur(16px);
  padding:12px 16px; max-width:240px; opacity:0; transition:opacity .18s; z-index:20; }
#tooltip.show { opacity:1; }
#tooltip h3 { font-family:'Cormorant Garamond',serif; font-size:1rem; font-weight:400;
  color:var(--glow-gold); margin-bottom:3px; }
#tooltip p { font-size:0.56rem; letter-spacing:0.08em; color:var(--muted); line-height:1.6; }
#tooltip .tt-tag { display:inline-block; margin-top:6px; font-size:0.46rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
  border:1px solid rgba(132,145,214,0.18); padding:2px 7px; }

/* ── ADD MODAL ── */
#modal-bg { position:fixed; inset:0; z-index:30; background:rgba(3,6,16,0.56);
  backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; }
#modal-bg.open { display:flex; }
#modal { background:rgba(5,9,22,0.42); border:1px solid var(--panel-line);
  border-radius:24px; box-shadow:var(--shadow); padding:32px 34px; min-width:min(620px, calc(100vw - 28px)); max-width:720px; animation:fadeIn .28s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
#modal h2 { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:300;
  color:var(--glow-gold); margin-bottom:24px; }
.field { margin-bottom:15px; }
.field label { display:block; font-size:0.5rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px; }
.field input,.field select,.field textarea { width:100%; background:rgba(8,12,30,0.18);
  border:1px solid rgba(132,145,214,0.18); color:var(--text);
  font-family:'Josefin Sans',sans-serif; font-size:0.72rem; padding:9px 12px; outline:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:rgba(132,145,214,0.42); }
.field select option { background:#07071a; }
.field textarea { resize:vertical; min-height:60px; }
#modal-btns { display:flex; gap:8px; margin-top:20px; justify-content:flex-end; }
.modal-btn { font-family:'Josefin Sans',sans-serif; font-size:0.55rem; letter-spacing:0.2em;
  text-transform:uppercase; padding:9px 22px; cursor:pointer; border:1px solid; transition:all .3s; }
.modal-btn.cancel { background:transparent; border-color:rgba(132,145,214,0.18); color:var(--muted); }
.modal-btn.cancel:hover { border-color:rgba(132,145,214,0.32); color:var(--text); }
.modal-btn.confirm { background:rgba(132,145,214,0.16); border-color:rgba(132,145,214,0.38); color:var(--glow-gold); }
.modal-btn.confirm:hover { background:rgba(132,145,214,0.22); box-shadow:0 0 18px rgba(132,145,214,0.14); }

/* ── TOAST ── */
#toast { position:fixed; bottom:72px; left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid rgba(80,216,128,0.38); color:#ffffff;
  font-size:0.56rem; letter-spacing:0.2em; text-transform:uppercase;
  padding:9px 22px; z-index:50; opacity:0; transition:opacity .4s; pointer-events:none; }
#toast.show { opacity:1; }

/* ── SIMULATION STATUS ── */
#sim-status { position:fixed; bottom:60px; right:18px; z-index:12;
  font-size:0.46rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }

#hint { position:fixed; bottom:56px; left:50%; transform:translateX(-50%);
  font-size:0.46rem; letter-spacing:0.24em; text-transform:uppercase;
  color:rgba(104,120,160,0.4); pointer-events:none; white-space:nowrap; z-index:10; }


/* ── CORNER UI CARDS ── */
.ui-corner {
  position: fixed;
  z-index: 13;
  border: 1px solid rgba(132,145,214,0.18);
  background: linear-gradient(180deg, rgba(7,11,28,0.32), rgba(6,10,24,0.16));
  backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.16);
}

#brand-card {
  left: 18px;
  top: 18px;
  padding: 12px 14px;
  width: 190px;
}

#brand-card .brand-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--glow-gold);
  line-height: 1;
}

#brand-card .brand-sub {
  margin-top: 5px;
  font-size: 0.44rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.45;
}

#brand-card .brand-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.mini-hud-btn{background:rgba(132,145,214,0.10);border:1px solid rgba(132,145,214,0.26);color:var(--glow-gold);border-radius:999px;padding:6px 10px;font-size:0.42rem;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.mini-hud-btn:hover{background:rgba(132,145,214,0.18);border-color:rgba(132,145,214,0.42);}
#math-panel{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 32px));padding:14px 16px;z-index:16;display:none;pointer-events:auto;}
#math-panel.show{display:block;}
.math-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.math-section{padding:10px 12px;border-radius:14px;border:1px solid rgba(132,145,214,0.14);background:rgba(8,12,30,0.14);margin-top:8px;}
.math-label{font-size:0.42rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
#math-panel pre{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.58rem;line-height:1.6;color:var(--text-soft);}
#tooltip.edge-tip h3{color:#cfd6e0;}
#tooltip .tt-math{display:block;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.52rem;line-height:1.55;color:var(--text-soft);white-space:pre-wrap;}

#research-corner {
  right: 18px;
  top: 18px;
  width: min(158px, calc(100vw - 36px));
  padding: 8px 10px;
}

.corner-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.corner-title {
  font-size: 0.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.corner-status {
  margin-top: 4px;
  font-size: 0.47rem;
  line-height: 1.35;
  color: var(--text-soft);
}

.corner-actions { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.corner-actions .ctrl-btn { width:100%; padding:6px 8px; font-size:0.38rem; letter-spacing:0.14em; }

.source-pills {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(132,145,214,0.18);
  background: rgba(8,12,30,0.16);
}

.source-pill .name {
  font-size: 0.34rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.source-pill .state {
  font-size: 0.33rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.source-pill .state.ok { color: rgba(180,230,255,0.92); }
.source-pill .state.warn { color: rgba(255,210,150,0.92); }
.source-pill .state.err { color: rgba(255,160,160,0.92); }

#metrics-corner {
  left: 18px;
  bottom: 214px;
  width: 236px;
  padding: 12px 14px;
}

.metrics-title {
  font-size: 0.44rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metric-tile {
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(8,12,30,0.16);
  border: 1px solid rgba(132,145,214,0.16);
}

.metric-tile .value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.96rem;
  line-height: 1.05;
  color: var(--glow-gold);
}

.metric-tile .label {
  margin-top: 3px;
  font-size: 0.38rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
}
#view-switcher { position:fixed; top:154px; right:18px; z-index:13; display:flex; flex-direction:column; gap:8px; }
.view-btn { min-width:112px; text-align:center; background:rgba(8,12,30,0.28); color:var(--muted);
  border:1px solid rgba(132,145,214,0.22); border-radius:999px; padding:9px 12px;
  font-size:0.52rem; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(12px); transition:all .25s; }
.view-btn.active,.view-btn:hover { color:var(--text); border-color:rgba(132,145,214,0.42); background:rgba(132,145,214,0.14); box-shadow:0 10px 30px rgba(0,0,0,0.14); }

.detail-grid { display:grid; gap:10px; }
.meta-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px; }
.meta-pill { border:1px solid rgba(132,145,214,0.18); border-radius:12px; padding:8px 10px; background:rgba(8,12,30,0.18); }
.meta-pill .meta-k { font-size:0.46rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.meta-pill .meta-v { font-size:0.62rem; color:var(--text-soft); line-height:1.45; }
.dp-empty { font-size:0.56rem; line-height:1.65; color:var(--muted-2); }
#dp-focus { margin-top:14px; width:100%; }

kbd { font-family:inherit; font-size:0.52rem; padding:2px 6px; border-radius:6px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:var(--text-soft); }
.dp-conn-tag.possible { border-style:dashed; color:rgba(232,228,216,0.42); background:rgba(132,145,214,0.03); }
.dp-conn-tag.possible:hover { color:rgba(255,255,255,0.82); border-color:rgba(132,145,214,0.36); }
#dp-edge-notes { color:rgba(232,228,216,0.58); min-height:22px; }


.hud-actions { display:flex; gap:8px; flex-wrap:wrap; }
.hud-status { display:grid; gap:8px; }
.hud-status-line { font-size:0.5rem; line-height:1.5; color:var(--text-soft); }
.hud-status-line strong { color:var(--glow-gold); font-weight:400; }
.hud-source-grid { display:grid; gap:6px; }
.hud-source-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:12px; border:1px solid rgba(132,145,214,0.16); background:rgba(8,12,30,0.18); }
.hud-source-name { font-size:0.44rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-soft); }
.hud-source-state { font-size:0.44rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.hud-source-state.ok { color:rgba(180,230,255,0.92); }
.hud-source-state.warn { color:rgba(255,210,150,0.92); }
.hud-source-state.err { color:rgba(255,160,160,0.92); }
.dp-subtle { font-size:0.52rem; line-height:1.6; color:var(--muted-2); }
.research-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; background:#6ee7b7; box-shadow:0 0 10px rgba(110,231,183,0.7); vertical-align:middle; }
.research-live-dot.offline { background:#f59e0b; box-shadow:0 0 10px rgba(245,158,11,0.55); }
.dp-mini-list { display:grid; gap:6px; }
.dp-mini-item { padding:7px 9px; border-radius:12px; border:1px solid rgba(132,145,214,0.16); background:rgba(8,12,30,0.16); }
.dp-mini-item strong { color:var(--text-soft); font-weight:400; }

@media (max-width: 980px) {
  #legend { display:none; }
  #brand-card { left:12px; top:16px; width:172px; }
  #research-corner { right:12px; top:16px; width:min(148px, calc(100vw - 24px)); }
  #metrics-corner { left:12px; bottom:206px; width:220px; }
  #detail-panel { left:12px; width:min(320px, calc(100vw - 24px)); top:auto; bottom:126px; transform:none; max-height:46vh; }
  #view-switcher { top:auto; right:12px; bottom:128px; }
  #header { padding:18px 18px 0 18px; }
  #search-wrap { top:102px; left:50%; transform:translateX(-50%); }
  #filters { top:154px; max-width:calc(100vw - 28px); }
}

@media (max-width: 700px) {
  #math-panel{top:74px;width:calc(100vw - 20px);}
  #brand-card { left:12px; top:12px; width:calc(100vw - 24px); }
  #research-corner { left:12px; right:12px; top:86px; width:auto; }
  #metrics-corner { left:12px; right:12px; width:auto; bottom:206px; }
  #header { display:none; }
  #search-wrap { left:12px; right:12px; top:214px; transform:none; }
  #search { width:100%; }
  #filters { top:266px; }
  #zoom-controls { right:12px; top:auto; bottom:188px; transform:none; }
  #controls { left:12px; right:12px; transform:none; justify-content:stretch; bottom:14px; }
  .ctrl-btn { flex:1 1 calc(50% - 8px); padding:11px 10px; }
  #hint { display:none; }
  canvas#minimap { width:128px; height:92px; bottom:106px; left:12px; }
}


.epistemic-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid rgba(132,145,214,0.22); background:rgba(8,12,30,0.18); font-size:0.44rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-soft); margin:0 6px 6px 0; }
.epistemic-badge.confirmed { color:#f5d97a; border-color:rgba(245,217,122,0.35); }
.epistemic-badge.candidate { color:#c8ced8; border-style:dashed; border-color:rgba(200,206,216,0.35); }
.epistemic-badge.review { color:#bcdcff; border-color:rgba(188,220,255,0.35); }
.epistemic-badge.rejected { color:#ffb0b0; border-color:rgba(255,176,176,0.35); }
.epistemic-badge.insufficient { color:#c8b5ff; border-color:rgba(200,181,255,0.35); }

#layer-legend { position:fixed; right:18px; bottom:128px; z-index:13; width:min(250px, calc(100vw - 36px)); padding:12px 14px; }
.legend-title { font-size:0.42rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.legend-list { display:grid; gap:7px; }
.legend-row { display:flex; align-items:center; gap:10px; color:var(--text-soft); font-size:0.48rem; line-height:1.35; }
.legend-sample-line { width:32px; height:0; border-top:2px solid #f5d97a; box-shadow:0 0 8px rgba(245,217,122,0.45); }
.legend-sample-line.candidate { border-top:1px dashed rgba(190,196,204,0.85); box-shadow:none; }
.legend-sample-dot { width:9px; height:9px; border-radius:50%; background:#f5d97a; box-shadow:0 0 14px rgba(245,217,122,0.45); }
.legend-sample-dot.candidate { background:#a8aeb8; box-shadow:none; }
.legend-sample-wave { width:34px; height:14px; border-radius:999px; border:1px solid rgba(120,160,255,0.18); background:radial-gradient(circle at center, rgba(120,160,255,0.34), rgba(120,160,255,0.03) 62%, rgba(0,0,0,0)); }
.legend-sample-stars { width:34px; height:14px; background:
 radial-gradient(circle at 25% 55%, rgba(255,255,255,0.65) 0 1px, transparent 2px),
 radial-gradient(circle at 70% 35%, rgba(180,200,255,0.52) 0 1px, transparent 2px),
 radial-gradient(circle at 52% 72%, rgba(245,217,122,0.45) 0 1px, transparent 2px); }

#neighborhood-card { right:18px; top:430px; width:min(170px, calc(100vw - 36px)); padding:10px 12px; }
#neighbor-mode { width:100%; margin-top:8px; background:rgba(8,12,30,0.18); border:1px solid rgba(132,145,214,0.18); color:var(--text); font-family:'Josefin Sans',sans-serif; font-size:0.52rem; letter-spacing:0.12em; padding:8px 10px; outline:none; }
#neighbor-mode option { background:#07071a; }

#energy-card { right:18px; top:300px; width:min(170px, calc(100vw - 36px)); padding:10px 12px; }
.energy-line { font-size:0.48rem; line-height:1.5; color:var(--text-soft); }
.energy-line strong { color:var(--glow-gold); font-weight:400; }
#cluster-chip-row { margin:8px 0 4px; }
.cluster-hint { font-size:0.48rem; line-height:1.5; color:var(--muted-2); }

.dp-score-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.score-tile { padding:8px 9px; border-radius:12px; border:1px solid rgba(132,145,214,0.16); background:rgba(8,12,30,0.16); }
.score-tile .k { font-size:0.42rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.score-tile .v { font-size:0.66rem; color:var(--text-soft); }
.edge-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border-radius:12px; border:1px solid rgba(132,145,214,0.16); background:rgba(8,12,30,0.16); cursor:pointer; transition:all .2s; }
.edge-row:hover, .edge-row.active { border-color:rgba(132,145,214,0.38); background:rgba(132,145,214,0.10); }
.edge-row strong { color:var(--text-soft); font-weight:400; }
.edge-row small { color:var(--muted); }

@media (max-width: 980px) {
  #layer-legend { right:12px; bottom:118px; }
  #energy-card { right:12px; top:auto; bottom:350px; }
  #neighborhood-card { right:12px; top:auto; bottom:258px; }
}

/* Scrollbar */
#detail-panel::-webkit-scrollbar { width:3px; }
#detail-panel::-webkit-scrollbar-track { background:transparent; }
#detail-panel::-webkit-scrollbar-thumb { background:rgba(132,145,214,0.42); }


/* ── HUD REORGANIZATION PATCH ── */
#left-dock, #right-dock {
  position: fixed;
  z-index: 13;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
#left-dock { left: 14px; top: 14px; width: 182px; }
#right-dock { right: 14px; top: 14px; width: 156px; }
#left-dock > *, #right-dock > * {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 !important;
  pointer-events: auto;
}
#brand-card { padding: 10px 12px; }
#brand-card .brand-title { font-size: 0.92rem; }
#brand-card .brand-sub { font-size: 0.4rem; letter-spacing: 0.18em; }
#research-corner { padding: 8px 9px; }
.corner-actions { gap: 5px; margin-top: 7px; }
.corner-actions .ctrl-btn { padding: 6px 7px; font-size: 0.34rem; }
.source-pills { gap: 4px; margin-top: 6px; }
.source-pill { padding: 4px 6px; }
.source-pill .name, .source-pill .state { font-size: 0.3rem; }
#metrics-corner { padding: 10px 12px; }
.metrics-grid { grid-template-columns: 1fr; gap: 6px; }
.metric-tile { padding: 7px 8px; }
.metric-tile .value { font-size: 0.86rem; }
.metric-tile .label { font-size: 0.34rem; }
#view-switcher { display: grid; gap: 6px; }
.view-btn { min-width: 0; width: 100%; padding: 7px 8px; font-size: 0.42rem; letter-spacing: 0.16em; }
#energy-card, #neighborhood-card, #layer-legend { padding: 9px 10px; }
.legend-title, .corner-title, .metrics-title { font-size: 0.38rem; }
.legend-row { font-size: 0.42rem; gap: 8px; }
#search-wrap {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(380px, calc(100vw - 400px));
}
#search { width: 100%; font-size: 0.56rem; padding: 8px 14px; }
#filters {
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 420px));
  max-width: min(760px, calc(100vw - 420px));
  gap: 5px;
}
.filter-chip { font-size: 0.42rem; padding: 4px 10px; }
#detail-panel {
  left: 210px;
  top: 14px;
  transform: none;
  width: min(320px, calc(100vw - 408px));
  max-height: calc(100vh - 108px);
}
canvas#minimap {
  left: 14px;
  bottom: 110px;
  width: 136px;
  height: 94px;
}
#controls {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(880px, calc(100vw - 380px));
  max-width: calc(100vw - 380px);
  gap: 6px;
}
.ctrl-btn { padding: 8px 14px; font-size: 0.48rem; }
#sim-status { bottom: 82px; right: 14px; font-size: 0.4rem; }
#hint { bottom: 82px; font-size: 0.38rem; }
@media (max-width: 1280px), (max-height: 860px) {
  #left-dock { width: 168px; }
  #right-dock { width: 148px; }
  #search-wrap { width: min(320px, calc(100vw - 360px)); }
  #filters { width: min(640px, calc(100vw - 380px)); max-width: min(640px, calc(100vw - 380px)); }
  #detail-panel { left: 194px; width: min(300px, calc(100vw - 372px)); }
  #controls { width: min(760px, calc(100vw - 340px)); max-width: calc(100vw - 340px); }
  .legend-row { font-size: 0.39rem; }
}
@media (max-width: 1100px) {
  #right-dock { right: 12px; top: auto; bottom: 108px; width: 172px; max-height: calc(100vh - 128px); overflow: auto; }
  #left-dock { left: 12px; width: 162px; }
  #search-wrap { top: 12px; width: min(300px, calc(100vw - 220px)); }
  #filters { top: 52px; width: min(520px, calc(100vw - 220px)); max-width: min(520px, calc(100vw - 220px)); }
  #detail-panel { left: 186px; width: min(300px, calc(100vw - 386px)); }
  #controls { width: min(620px, calc(100vw - 220px)); max-width: calc(100vw - 220px); }
  #hint { display: none; }
}
@media (max-width: 860px) {
  #left-dock, #right-dock {
    position: fixed;
    width: calc(50vw - 18px);
    gap: 8px;
  }
  #left-dock { left: 10px; top: 10px; }
  #right-dock { right: 10px; top: 10px; max-height: 44vh; overflow: auto; }
  #search-wrap { top: auto; left: 10px; right: 10px; bottom: 170px; transform: none; width: auto; }
  #filters { top: auto; left: 10px; right: 10px; bottom: 126px; transform: none; width: auto; max-width: none; justify-content: flex-start; }
  #detail-panel {
    left: 10px;
    right: 10px;
    width: auto;
    top: auto;
    bottom: 214px;
    max-height: 38vh;
  }
  #controls { left: 10px; right: 10px; bottom: 12px; transform: none; width: auto; max-width: none; justify-content: stretch; }
  .ctrl-btn { flex: 1 1 calc(50% - 6px); }
  canvas#minimap { left: 10px; bottom: 224px; width: 118px; height: 82px; }
  #sim-status { right: 10px; bottom: 194px; }
}
@media (max-width: 640px) {
  #left-dock, #right-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    width: auto;
  }
  #right-dock { top: 172px; bottom: auto; max-height: 24vh; }
  #left-dock { top: 10px; }
  #search-wrap { bottom: 188px; }
  #filters { bottom: 138px; }
  #detail-panel { bottom: 244px; max-height: 32vh; }
  canvas#minimap { display: none; }
}


/* ── UNIFIED TWO-PANEL HUD LAYOUT ── */
:root {
  --hud-gap: 10px;
  --hud-pad: 10px;
  --hud-left-width: clamp(142px, 18vw, 248px);
  --hud-right-width: clamp(148px, 20vw, 264px);
}

#legend { display:none !important; }

#left-dock,
#right-dock {
  position: fixed;
  top: var(--hud-pad);
  bottom: var(--hud-pad);
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: var(--hud-gap);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  pointer-events: auto;
}

#left-dock { left: var(--hud-pad); width: var(--hud-left-width); }
#right-dock { right: var(--hud-pad); width: var(--hud-right-width); }

#left-dock > *,
#right-dock > * {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

#left-dock::-webkit-scrollbar,
#right-dock::-webkit-scrollbar,
#detail-panel::-webkit-scrollbar,
#math-panel::-webkit-scrollbar,
#evaluation-output::-webkit-scrollbar {
  width: 6px;
}

#left-dock::-webkit-scrollbar-track,
#right-dock::-webkit-scrollbar-track,
#detail-panel::-webkit-scrollbar-track,
#math-panel::-webkit-scrollbar-track,
#evaluation-output::-webkit-scrollbar-track {
  background: transparent;
}

#left-dock::-webkit-scrollbar-thumb,
#right-dock::-webkit-scrollbar-thumb,
#detail-panel::-webkit-scrollbar-thumb,
#math-panel::-webkit-scrollbar-thumb,
#evaluation-output::-webkit-scrollbar-thumb {
  background: rgba(132,145,214,0.42);
  border-radius: 999px;
}

#brand-card,
#metrics-corner,
#receiver-card,
#experiment-card,
#detail-panel,
#math-panel,
#minimap-card,
#research-corner,
#view-switcher,
#energy-card,
#neighborhood-card,
#layer-legend,
#app-controls-card,
#scenario-card,
#final-framing-card,
#evaluation-card,
#status-card {
  border-radius: 18px;
  border: 1px solid rgba(132,145,214,0.18);
  background: linear-gradient(180deg, rgba(7,11,28,0.34), rgba(6,10,24,0.18));
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}

#brand-card { padding: 10px 12px; }
#brand-card .brand-title { font-size: 0.92rem; }
#brand-card .brand-sub { font-size: 0.38rem; letter-spacing: 0.18em; line-height: 1.45; }

#metrics-corner { padding: 10px 12px; }
.metrics-title { margin-bottom: 8px; font-size: 0.36rem; }
.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.metric-tile { padding: 7px 8px; border-radius: 12px; }
.metric-tile .value { font-size: 0.84rem; }
.metric-tile .label { font-size: 0.31rem; letter-spacing: 0.14em; }

#research-corner { padding: 9px 10px; }
.corner-title,
.legend-title { font-size: 0.34rem; }
.corner-status,
#energy-card .corner-status,
#neighborhood-card .corner-status,
#layer-legend .corner-status,
.legend-row { font-size: 0.38rem; line-height: 1.35; }
.corner-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.corner-actions .ctrl-btn { padding: 7px 8px; font-size: 0.32rem; letter-spacing: 0.12em; }
.source-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.source-pill { padding: 4px 6px; min-height: 24px; }
.source-pill .name,
.source-pill .state { font-size: 0.28rem; letter-spacing: 0.12em; }

#receiver-card { padding:10px 12px; }
.receiver-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.receiver-value { font-family:'Cormorant Garamond',serif; color:var(--glow-gold); font-size:1rem; line-height:1; }
.receiver-slider { width:100%; accent-color:#f5d97a; }
.receiver-sub { margin-top:6px; font-size:0.4rem; line-height:1.45; color:var(--muted); }
.receiver-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:8px; }
.receiver-presets .mini-hud-btn { padding:6px 8px; font-size:0.32rem; }
.intent-stack { display:grid; gap:10px; margin-top:10px; }
.intent-control { display:grid; gap:5px; }
.intent-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.intent-label { font-size:0.36rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.intent-value { font-family:'Cormorant Garamond',serif; font-size:0.88rem; color:var(--glow-gold); line-height:1; }
.intent-slider { width:100%; accent-color:#f5d97a; }
.intent-sub { font-size:0.36rem; line-height:1.45; color:var(--muted); }

#experiment-card { padding:10px 12px; }
.experiment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px; }
.experiment-tile { padding:7px 8px; border-radius:12px; border:1px solid rgba(132,145,214,0.16); background:rgba(8,12,30,0.16); }
.experiment-tile .k { font-size:0.33rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.experiment-tile .v { margin-top:4px; font-size:0.72rem; color:var(--text-soft); font-family:'Cormorant Garamond',serif; }
.experiment-note { margin-top:8px; font-size:0.38rem; line-height:1.45; color:var(--muted); }

#view-switcher {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.view-btn { padding: 7px 8px; font-size: 0.36rem; letter-spacing: 0.14em; border-radius: 999px; min-width: 0; width: 100%; }

#energy-card,
#neighborhood-card,
#layer-legend,
#status-card,
#app-controls-card,
#scenario-card,
#final-framing-card,
#evaluation-card,
#minimap-card { padding: 10px 12px; }
.legend-row { gap: 6px; }

#detail-panel {
  display: none;
  opacity: 1;
  pointer-events: auto;
  padding: 16px 14px;
  max-height: none;
  overflow-y: auto;
}
#detail-panel.show { display: block; }
#dp-close { top: 10px; right: 12px; }
#dp-name { font-size: 1rem; padding-right: 20px; }
.dp-cat { font-size: 0.38rem; letter-spacing: 0.18em; }
.dp-desc { font-size: 0.48rem; line-height: 1.65; }
.dp-ref { font-size: 0.4rem; }
.dp-section-title { font-size: 0.36rem; margin-bottom: 6px; }

#math-panel {
  display: none;
  pointer-events: auto;
  padding: 14px 16px;
  overflow-y: auto;
}
#math-panel.show { display: block; }
.math-panel-head { margin-bottom: 10px; }
.math-label { font-size: 0.36rem; }
#math-panel pre { font-size: 0.44rem; line-height: 1.5; }
.formal-note { font-size:0.42rem; line-height:1.6; color:var(--text-soft); }
.science-list { display:grid; gap:8px; }
.science-item { padding:8px 10px; border-radius:12px; border:1px solid rgba(132,145,214,0.14); background:rgba(8,12,30,0.14); }
.science-item strong { color:var(--glow-gold); font-weight:400; display:block; margin-bottom:4px; }

#minimap-card {
  display: grid;
  gap: 8px;
}
#minimap-card .corner-title { margin-bottom: 0; }
#minimap-card canvas#minimap {
  position: relative !important;
  display: block !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
}

#app-controls-card { display: grid; gap: 8px; }
#app-controls-card .controls-note {
  font-size: 0.34rem;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#app-controls-card #search-wrap,
#app-controls-card #filters,
#app-controls-card #controls {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#app-controls-card #search-wrap { z-index: auto; }
#app-controls-card #search {
  width: 100%;
  font-size: 0.48rem;
  padding: 8px 12px;
  text-align: left;
}
#app-controls-card #filters {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
  overflow-x: hidden;
}
#app-controls-card .filter-chip {
  font-size: 0.32rem;
  padding: 4px 8px;
  letter-spacing: 0.12em;
}
#app-controls-card #controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
#app-controls-card .ctrl-btn,
#scenario-card .ctrl-btn,
#evaluation-card .ctrl-btn {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.34rem;
  letter-spacing: 0.13em;
}

.scenario-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.scenario-btn { width:100%; padding:7px 8px; font-size:0.34rem; letter-spacing:0.14em; text-transform:uppercase; }
.scenario-note,
.framing-note { margin-top:8px; font-size:0.4rem; line-height:1.55; color:var(--text-soft); }
.framing-note strong { color:var(--glow-gold); font-weight:400; }

#evaluation-output {
  margin-top: 10px;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.3rem;
  line-height: 1.5;
  color: var(--text-soft);
  max-height: 180px;
  overflow: auto;
}

#status-card {
  display: grid;
  gap: 8px;
}
#status-card #hint,
#status-card #sim-status {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: block !important;
  margin: 0;
}
#status-card #hint {
  font-size: 0.3rem;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(104,120,160,0.66);
  pointer-events: auto;
  white-space: normal;
}
#status-card #sim-status {
  font-size: 0.3rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  max-width: none;
}

#search-wrap,
#filters,
#controls,
#detail-panel,
#math-panel,
#minimap,
#hint,
#sim-status {
  z-index: auto;
}

@media (max-width: 1180px) {
  :root {
    --hud-left-width: clamp(138px, 19vw, 220px);
    --hud-right-width: clamp(142px, 21vw, 236px);
  }

  #app-controls-card #controls { grid-template-columns: 1fr; }
  .corner-actions,
  .scenario-grid,
  .experiment-grid,
  .metrics-grid { grid-template-columns: 1fr; }
  .receiver-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root {
    --hud-pad: 8px;
    --hud-gap: 8px;
    --hud-left-width: calc(50vw - 12px);
    --hud-right-width: calc(50vw - 12px);
  }

  #left-dock,
  #right-dock { padding-right: 2px; }

  #brand-card,
  #metrics-corner,
  #receiver-card,
  #experiment-card,
  #detail-panel,
  #math-panel,
  #minimap-card,
  #research-corner,
  #energy-card,
  #neighborhood-card,
  #layer-legend,
  #app-controls-card,
  #scenario-card,
  #final-framing-card,
  #evaluation-card,
  #status-card {
    padding: 9px 10px;
  }

  #app-controls-card #controls,
  .scenario-grid,
  .experiment-grid,
  .metrics-grid,
  .corner-actions,
  .source-pills,
  .receiver-presets { grid-template-columns: 1fr; }

  #view-switcher { grid-template-columns: 1fr; }
}