/* ══════════════════════════════════════════════════════════════════════
   skin: anime — the Star Rail treatment
   Every component is re-cut, not re-tinted: panels become gacha cards with a
   rarity rule, checkboxes become switches, dependency rows become tiles with a
   colour spine, and the type goes rounded throughout.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0a20; --panel:rgba(23,22,60,.80); --panel2:rgba(35,32,84,.72);
  --ink:#ffffff; --dim:#c9cfff; --faint:#8b91cc;
  --rule:rgba(255,255,255,.18); --rule2:rgba(255,255,255,.08);
  --app:#8fd0ff; --vm:#63e8cd; --ext:#ffc85a; --edge:#a77bff;
  --svc:#8ff2a8; --bad:#ff8e88;
  --gold:#ffc85a; --violet:#a77bff; --rose:#ff86c8;
  --field:#1b1848;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'M PLUS Rounded 1c',ui-rounded,system-ui,sans-serif;
}
body{background:var(--bg)}

/* ── masthead: a banner bar, not a caption ─────────────────────────── */
header{
  background:linear-gradient(180deg,rgba(11,10,32,.94) 30%,rgba(11,10,32,0));
  padding:16px 20px 22px;
}
h1{font-weight:800;letter-spacing:.12em;font-size:20px}
h1 b{color:var(--gold)}
h1::after{
  content:"";display:block;height:2px;margin-top:6px;width:118px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.meta{font-size:11px}
.meta b{color:var(--ink);font-weight:700}

/* ── panels become cards ───────────────────────────────────────────── */
#side,#detail{
  border-radius:20px;border:1px solid var(--rule);
  background:linear-gradient(165deg,var(--panel2),var(--panel));
  box-shadow:0 20px 60px rgba(4,2,20,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
#side{padding:14px}
#detail{padding:16px}
#detail::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:3px;
  border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--violet),var(--gold),var(--rose));
}
#detail .kind{color:var(--violet);letter-spacing:.2em;font-weight:500}
#detail h3{font-weight:800;letter-spacing:0;font-size:22px}
#detail .sub{color:var(--dim)}
#detail dl{
  background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px;gap:6px 14px;
}
#detail dt{color:var(--faint)}
#detail h4{
  color:var(--gold);letter-spacing:.14em;border-top:0;
  display:flex;align-items:center;gap:8px;
}
#detail h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--rule),transparent)}

/* ── dependency rows: tiles with a colour spine ────────────────────── */
.dep{
  border-radius:14px;border:1px solid var(--rule2);padding:9px 11px 9px 14px;
  background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  position:relative;overflow:hidden;
}
.dep::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:hsl(var(--h) 80% 66%);opacity:.9;
}
.dep:hover{background:rgba(255,255,255,.12);border-color:var(--rule);transform:translateX(2px)}
.dep{transition:transform .14s ease, background .14s ease}
.dep .r1{font-family:var(--sans);font-weight:700;font-size:12.5px}
.dep .r1 .t{
  font-family:var(--mono);color:var(--gold);background:rgba(255,200,90,.12);
  padding:2px 7px;border-radius:999px;font-size:9px;
}
.dep .r2{color:var(--faint)}

/* ── filters: switches and chips ───────────────────────────────────── */
.group h2{color:var(--gold);letter-spacing:.16em;font-weight:700}
.chk{
  border-radius:12px;padding:5px 8px;font-family:var(--sans);font-size:12px;font-weight:500;
}
.chk:hover{background:rgba(255,255,255,.07)}
.chk input{
  appearance:none;width:30px;height:17px;border-radius:999px;flex:none;cursor:pointer;
  background:rgba(255,255,255,.14);position:relative;transition:background .16s ease;
}
.chk input::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;
  background:#fff;transition:transform .16s ease;
}
.chk input:checked{background:linear-gradient(90deg,var(--violet),var(--gold))}
.chk input:checked::after{transform:translateX(13px)}
.chk .n{
  font-family:var(--mono);font-size:10px;color:var(--ink);
  background:rgba(255,255,255,.10);border-radius:999px;padding:1px 7px;
}
#q{
  border-radius:14px;background:rgba(255,255,255,.07);font-family:var(--sans);
  font-size:12.5px;padding:9px 12px;
}
#q:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,123,255,.22)}

/* the bootstrap group reads as a sealed drawer */
.grp{margin-top:8px;border-top:1px solid var(--rule2);padding-top:8px}
.grphead{font-weight:700}
.grphead .sw-boot{
  width:9px;height:9px;border-radius:3px;flex:none;
  background:linear-gradient(135deg,var(--violet),var(--gold));
}
.grptoggle{
  margin:2px 0 0 46px;border:0;background:none;color:var(--faint);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:2px 0;
}
.grptoggle::before{content:"▸ ";}
.grptoggle[aria-expanded="true"]::before{content:"▾ ";}
.grptoggle:hover{color:var(--gold)}
.grpbody{margin-left:12px;border-left:1px solid var(--rule2);padding-left:8px}
.chk.sub{font-size:11px;opacity:.85}
.chk.sub input{width:24px;height:14px}
.chk.sub input::after{width:9.5px;height:9.5px}
.chk.sub input:checked::after{transform:translateX(10px)}

/* ── map furniture ─────────────────────────────────────────────────── */
.node .tag{font-family:var(--sans);font-weight:500;font-size:11.5px}
.node.star .tag{font-weight:800;letter-spacing:.16em;font-size:14px}
.node.star .dot{
  box-shadow:0 0 0 2px rgba(255,255,255,.55) inset, 0 0 30px hsl(var(--h) 90% 62% / .85),
             0 0 0 7px hsl(var(--h) 80% 60% / .14);
}
.node.star .stars{
  font-size:9px;letter-spacing:2px;color:var(--gold);
  text-shadow:0 1px 4px rgba(0,0,0,.9);margin-top:-3px;
}
.node.peer .ico{color:hsl(var(--h) 90% 74%)}
.node.sel .dot,.node.sel .ico{filter:drop-shadow(0 0 10px var(--gold))}

/* ── footer ────────────────────────────────────────────────────────── */
footer{font-family:var(--sans);font-size:11px}
footer .k{color:var(--gold);font-weight:700}
#reset{border-radius:999px;padding:4px 14px;font-weight:700;border-color:var(--rule)}
#reset:hover{background:rgba(255,255,255,.12)}
.skins a{border-bottom:0;border-radius:999px;padding:2px 10px;background:rgba(255,255,255,.06)}
.skins a[aria-current="page"]{background:linear-gradient(90deg,var(--violet),var(--gold));color:#1a1030}

/* ── variants: tiles in the ledger ─────────────────────────────────── */
.var{
  border:0;border-radius:12px;margin-bottom:5px;padding:8px 10px;
  background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
}
.var .v1{font-family:var(--sans);font-weight:700;font-size:12.5px}
.var .v1 .t{
  font-family:var(--mono);color:var(--gold);background:rgba(255,200,90,.12);
  padding:2px 7px;border-radius:999px;font-size:9px;letter-spacing:.06em;
}
.var.w-away{background:rgba(255,255,255,.03)}
.vico{color:var(--violet)}
.node.mv .dot::after{border-color:hsl(var(--h) 90% 72% / .6)}

/* ── the index drawer: one more gacha card ─────────────────────────── */
#ixToggle{border-radius:999px;padding:6px 14px;font-family:var(--sans);font-weight:700;font-size:11px}
.ix-title{letter-spacing:.14em;color:var(--gold)}
#ixBody{
  border-radius:20px;border:1px solid var(--rule);
  background:linear-gradient(165deg,var(--panel2),var(--panel));
  box-shadow:0 20px 60px rgba(4,2,20,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
.ix-tools{border-bottom:1px solid var(--rule2)}
.ix-tab{border-radius:999px;font-family:var(--sans);font-weight:700;letter-spacing:.06em}
.ix-tab.on{
  background:linear-gradient(90deg,var(--violet),var(--gold));color:#1a1030;border-color:transparent;
}
#ixQ,.ix-f select,#ixFocus,#ixClear{border-radius:999px}
.ix-f select,.ix-f select option{background:var(--field);color:var(--ink)}
#ixQ:focus,.ix-f select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,123,255,.22)}
#ixFocus{background:rgba(167,123,255,.18);color:var(--ink)}
.ix-f > span{font-family:var(--sans);font-weight:500}
#ixTable th{color:var(--faint);letter-spacing:.14em;border-bottom:1px solid var(--rule2)}
#ixTable tr[data-go]:hover td{background:rgba(255,255,255,.10)}
#ixTable tr.on td{background:rgba(167,123,255,.16)}