/* DeFi Map — colours follow the validated dataviz reference palette; sectors = fixed categorical slots 1–8, CEX = neutral. */
:root {
  color-scheme: light;
  --bg: #fcfcfb; --surface: #ffffff; --surface-2: #f3f2ee; --line: #e3e2dc;
  --ink: #0b0b0b; --ink-2: #52514e; --ink-3: #85837c;
  --sea: #eef0f2;
  --s0: #8a8983;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --region-fill: .10; --region-stroke: .55; --cat-fill: .14; --cat-stroke: .45;
  --up: #006300; --down: #b92f2f;
  --shadow: 0 8px 30px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1a19; --surface: #222221; --surface-2: #2b2b29; --line: #3a3a37;
    --ink: #f0efec; --ink-2: #c3c2b7; --ink-3: #8f8e86;
    --sea: #141413;
    --s0: #9a9992;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --region-fill: .09; --region-stroke: .55; --cat-fill: .16; --cat-stroke: .5;
    --up: #4cc24c; --down: #ff7b7b;
    --shadow: 0 8px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1a19; --surface: #222221; --surface-2: #2b2b29; --line: #3a3a37;
  --ink: #f0efec; --ink-2: #c3c2b7; --ink-3: #8f8e86;
  --sea: #141413;
  --s0: #9a9992;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --region-fill: .09; --region-stroke: .55; --cat-fill: .16; --cat-stroke: .5;
  --up: #4cc24c; --down: #ff7b7b;
  --shadow: 0 8px 30px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }

header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap;
}
.brand h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.brand p { margin: 2px 0 0; color: var(--ink-2); font-size: 12px; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controls select, .controls input[type=search] {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; height: 32px;
}
.controls input[type=search] { width: 220px; }
.search-wrap { position: relative; }
#results {
  position: absolute; top: 36px; left: 0; z-index: 30; min-width: 320px; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto;
}
#results li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
#results li:hover, #results li.on { background: var(--surface-2); }
#results img { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); }
#results .meta { color: var(--ink-3); font-size: 12px; margin-left: auto; white-space: nowrap; }
.toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--surface-2); border: 0; padding: 6px 12px; cursor: pointer; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: var(--bg); }
button.icon { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; font-size: 16px; line-height: 1; }

#legend { display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); scrollbar-width: thin; }
#legend button {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 999px; padding: 4px 10px 4px 6px; cursor: pointer; font-size: 12px; color: var(--ink);
}
#legend button i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; }
#legend button b { font-weight: 600; }
#legend button span { color: var(--ink-3); }
#legend button.off { opacity: .4; }
#legend button:hover { border-color: var(--ink-3); }

main { flex: 1; display: flex; position: relative; min-height: 0; }
#stage { flex: 1; position: relative; background: var(--sea); min-width: 0; min-height: 0; }
#map { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#map:active { cursor: grabbing; }

/* map marks */
.n { stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.n.d1, .n.d2 { cursor: pointer; }
.n.d1 { fill: var(--c); fill-opacity: var(--region-fill); stroke: var(--c); stroke-opacity: var(--region-stroke); }
.n.d2 { fill: var(--c); fill-opacity: var(--cat-fill); stroke: var(--c); stroke-opacity: var(--cat-stroke); }
.n.d3 { fill: var(--c); fill-opacity: .92; stroke: var(--sea); stroke-width: 1.5px; cursor: pointer; }
.n.d3:hover { fill-opacity: 1; }
.n.d3.sel { stroke: var(--ink); stroke-width: 3px; }
.n.dim { fill-opacity: .12 !important; stroke-opacity: .2; }
.n.match { stroke: var(--ink); stroke-opacity: 1; }
.lbl { pointer-events: none; fill: var(--ink); font-family: inherit; }
.lbl.sector { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink); opacity: .85; }
.lbl.cat { font-weight: 600; fill: var(--ink); opacity: .8; }
.lbl.proto { font-weight: 600; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: .08em; }
.logo { pointer-events: none; }

#crumbs { position: absolute; top: 10px; left: 12px; display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
#crumbs button { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; cursor: pointer; color: var(--ink); }
#crumbs .sep { color: var(--ink-3); }
#hint { position: absolute; bottom: 10px; left: 12px; font-size: 11px; color: var(--ink-3); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 3px 8px; border-radius: 6px; pointer-events: none; }

/* list view */
#list { position: absolute; inset: 0; overflow: auto; background: var(--bg); padding: 0 16px 24px; }
#list table { border-collapse: collapse; width: 100%; font-size: 13px; }
#list th, #list td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
#list th { position: sticky; top: 0; background: var(--surface); color: var(--ink-2); font-weight: 600; cursor: pointer; user-select: none; z-index: 2; }
#list th.on { color: var(--ink); }
#list th:first-child, #list td:first-child, #list th.l, #list td.l { text-align: left; }
#list td.name { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
#list td.name img { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); }
#list tr:hover td { background: var(--surface-2); }
#list .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c); margin-right: 6px; vertical-align: middle; }
#list .more { padding: 12px; color: var(--ink-3); }

/* detail panel */
#panel {
  width: 400px; max-width: 100%; border-left: 1px solid var(--line); background: var(--surface); overflow: auto; position: relative; flex: none;
}
#panel[hidden] { display: none; }
#close { position: absolute; top: 10px; right: 10px; z-index: 2; }
#panel-body { padding: 16px 18px 28px; }
.ph { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.ph img { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); flex: none; }
.ph h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.ph .sym { color: var(--ink-3); font-weight: 400; font-size: 14px; margin-left: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.chip { font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--ink-2); background: var(--surface-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
.chip.static { cursor: default; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.stat { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.stat b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.stat span { font-size: 11px; color: var(--ink-3); }
.stat small { font-size: 11px; margin-left: 4px; }
.up { color: var(--up); } .down { color: var(--down); }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 18px 0 8px; }
.bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.bar i { display: block; height: 100%; background: var(--c); opacity: var(--o, 1); }
.barkey { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.barkey span b { color: var(--ink); font-weight: 600; }
.how p { margin: 0 0 10px; }
.how ul { margin: 0 0 10px; padding-left: 18px; }
.how li { margin-bottom: 4px; }
.risk { border-left: 3px solid var(--s8); padding: 6px 10px; background: var(--surface-2); border-radius: 0 8px 8px 0; margin: 8px 0; color: var(--ink-2); }
.note { color: var(--ink-3); font-size: 12px; }
.desc { color: var(--ink-2); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rows li:hover { background: var(--surface-2); }
.rows li img { width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); }
.rows li .v { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows li .c { color: var(--ink-3); font-size: 12px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.links a { font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; text-decoration: none; background: var(--surface-2); }
.links a:hover { border-color: var(--ink-3); }
.btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 6px 10px; cursor: pointer; }

#tip {
  position: fixed; z-index: 40; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; box-shadow: var(--shadow); max-width: 260px;
}
#tip b { font-size: 13px; }
#tip .m { color: var(--ink-2); }
#tip .k { display: grid; grid-template-columns: auto auto; gap: 1px 12px; margin-top: 4px; }
#tip .k span:nth-child(odd) { color: var(--ink-3); }

@media (max-width: 900px) {
  header { padding: 8px 12px; }
  .controls input[type=search] { width: 160px; }
  main { flex-direction: column; }
  #panel { width: 100%; height: 52vh; min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
  #stage { min-height: 160px; }
  #hint { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}