:root{
  --bg:#0a1419; --panel:#0f1f28; --panel2:#0c1c23; --ink:#d7e6ec; --muted:#8aa6b1;
  --amber:#f0a830; --amber-soft:#caa14a; --teal:#36c2c2; --teal-deep:#1d6e72;
  --red:#e2604c; --green:#62b56a; --purple:#b58ad6; --line:#1d3540; --chip:#16323d;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;font-size:16px;}
.page{max-width:1080px;margin:0 auto;padding:26px 30px 120px;}
a{color:var(--teal);}
.backbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13px;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:8px;}
.backbar a{color:var(--amber-soft);text-decoration:none;}
.backbar a:hover{color:var(--amber);}
header.hero{background:radial-gradient(900px 240px at 16% -20%,rgba(54,194,194,.16),transparent),
  linear-gradient(160deg,#102b33,#0a161c);border:1px solid var(--line);border-radius:14px;
  padding:24px 28px;margin:14px 0 22px;}
header.hero .kicker{color:var(--teal);letter-spacing:3px;text-transform:uppercase;font-size:11.5px;font-weight:700;}
header.hero h1{margin:6px 0 8px;font-size:30px;line-height:1.15;color:#fff;}
header.hero p{margin:6px 0;color:var(--muted);max-width:780px;}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.badge{background:var(--chip);border:1px solid var(--line);color:var(--amber-soft);
  padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;}
.badge.dep{color:#ef9080;border-color:#5a2b27;}
.badge.lua{color:#5fd0d0;}
.badge.xml{color:#7fce86;}
.badge.warn{color:#ef9080;border-color:#5a2b27;}
h2{font-size:22px;color:#fff;margin:38px 0 6px;padding-top:8px;border-top:2px solid var(--teal-deep);}
h2 .ic{color:var(--teal);margin-right:8px;}
h3{font-size:17.5px;color:var(--amber);margin:24px 0 6px;}
h4{font-size:14.5px;color:var(--teal);margin:16px 0 4px;letter-spacing:.3px;text-transform:uppercase;}
p{margin:10px 0;}
ul,ol{margin:8px 0 8px 2px;padding-left:22px;}
li{margin:4px 0;}
code{background:#0b2027;border:1px solid var(--line);padding:1px 6px;border-radius:5px;
  font-family:"Consolas",monospace;font-size:13px;color:var(--amber);}
.lead{color:var(--muted);font-size:16px;}
.quickfacts{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:8px 0 6px;font-size:14.5px;}
.quickfacts dt{color:var(--teal);font-weight:600;}
.quickfacts dd{margin:0;}
.callout{border-left:4px solid var(--teal);background:var(--panel);padding:12px 16px;border-radius:0 9px 9px 0;margin:14px 0;}
.callout.warn{border-left-color:var(--red);}
.callout.warn strong{color:var(--red);}
.callout.tip{border-left-color:var(--green);}
.callout.tip strong{color:var(--green);}
.callout strong{color:var(--teal);}
.callout.note{border-left-color:var(--amber);}
.callout.note strong{color:var(--amber);}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px;}
caption{caption-side:top;text-align:left;color:var(--muted);font-size:12.5px;margin-bottom:6px;font-style:italic;}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top;}
th{background:#0d2129;color:var(--amber);text-transform:uppercase;letter-spacing:.7px;font-size:11px;}
tr:hover td{background:#0d2027;}
.tag{display:inline-block;background:var(--chip);border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;padding:1px 7px;border-radius:5px;margin:1px 2px 1px 0;white-space:nowrap;}
.tag.t-basic{color:#9fd0c0;} .tag.t-int{color:#caa14a;} .tag.t-adv{color:#ef9080;}
.tag.skill{color:#7fb0e0;}
.unv{color:var(--purple);font-style:italic;}
.unv::before{content:"\26A0 ";}
.box{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:12px 16px;margin:10px 0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:820px){.grid2{grid-template-columns:1fr;}.quickfacts{grid-template-columns:1fr;}}
.step{display:flex;gap:13px;margin:12px 0;align-items:flex-start;}
.step .n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--teal-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;border:1px solid var(--teal);}
.step .c{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 14px;}
details{background:var(--panel);border:1px solid var(--line);border-radius:9px;margin:10px 0;overflow:hidden;}
details>summary{cursor:pointer;padding:12px 16px;font-weight:700;color:#fff;list-style:none;
  display:flex;justify-content:space-between;gap:10px;}
details>summary::-webkit-details-marker{display:none;}
details>summary::after{content:"+";color:var(--teal);font-size:19px;}
details[open]>summary::after{content:"\2013";}
details>summary:hover{background:#13282f;}
.det-body{padding:2px 18px 16px;border-top:1px solid var(--line);}
.footer{color:var(--muted);font-size:12.5px;margin-top:46px;border-top:1px solid var(--line);padding-top:16px;}
.footer a{color:var(--amber-soft);}
.srclist{font-size:13px;}
.srclist li{margin:3px 0;}
.navmods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:14px 0;}
.modcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;text-decoration:none;color:var(--ink);transition:.15s;}
.modcard:hover{border-color:var(--teal);background:#13282f;transform:translateY(-2px);}
.modcard .mc-num{color:var(--teal);font-weight:700;font-size:12px;}
.modcard .mc-title{color:#fff;font-weight:700;font-size:16px;margin:2px 0 4px;}
.modcard .mc-desc{color:var(--muted);font-size:12.5px;line-height:1.45;}
.cat-head{color:var(--amber);letter-spacing:2px;text-transform:uppercase;font-size:12px;
  font-weight:700;margin:26px 0 4px;border-bottom:1px solid var(--line);padding-bottom:5px;}
.loadtable td{font-size:13px;}
.loadtable .lo-num{color:var(--teal);font-weight:700;width:30px;}
.band td{background:linear-gradient(90deg,#13323b,#0e2027)!important;color:var(--amber);
  font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:11px;}

/* ── Prev / Next navigation ── */
.prev-next{display:flex;gap:14px;margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);}
.prev-next a{flex:1;display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;text-decoration:none;color:var(--ink);transition:.18s;}
.prev-next a:hover{border-color:var(--teal);background:#13282f;transform:translateY(-1px);}
.prev-next .pn-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--muted);margin-bottom:2px;}
.prev-next .pn-title{font-weight:700;color:#fff;font-size:15px;}
.prev-next .pn-next{text-align:right;}
.prev-next .pn-prev .pn-label::before{content:"\2190 ";}
.prev-next .pn-next .pn-label::after{content:" \2192";}
@media(max-width:600px){.prev-next{flex-direction:column;}}

/* ── Back-to-top button ── */
.back-top{position:fixed;bottom:28px;right:28px;width:44px;height:44px;border-radius:50%;
  background:var(--teal-deep);border:1px solid var(--teal);color:#fff;font-size:20px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.4);}
.back-top.visible{opacity:1;pointer-events:auto;}
.back-top:hover{transform:translateY(-2px);background:var(--teal);color:var(--bg);}

/* ── Category accent colors on mod cards ── */
.modcard[data-cat="framework"]{border-left:3px solid #5fd0d0;}
.modcard[data-cat="overhaul"]{border-left:3px solid var(--amber);}
.modcard[data-cat="content"]{border-left:3px solid var(--green);}
.modcard[data-cat="world"]{border-left:3px solid var(--purple);}

/* ── Improved mobile responsiveness ── */
@media(max-width:820px){
  .grid2{grid-template-columns:1fr;}
  .quickfacts{grid-template-columns:1fr;}
  .page{padding:18px 16px 80px;}
  header.hero{padding:18px 18px;}
  header.hero h1{font-size:24px;}
  .loadtable{font-size:12px;}
  .loadtable th,.loadtable td{padding:6px 8px;}
  .navmods{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){
  .backbar{font-size:12px;gap:8px;}
  .navmods{grid-template-columns:1fr;}
  .badges{gap:5px;}
  .badge{font-size:11px;padding:2px 8px;}
  h2{font-size:19px;}
  table{font-size:12.5px;}
  th,td{padding:6px 8px;}
  .back-top{bottom:18px;right:18px;width:40px;height:40px;font-size:18px;}
}

/* ── Smoother table link affordance ── */
.loadtable a{color:var(--teal);text-decoration:none;border-bottom:1px solid transparent;transition:.15s;}
.loadtable a:hover{color:#fff;border-bottom-color:var(--teal);}

/* ── Subtle focus styles for accessibility ── */
a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
details>summary:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}

/* ── Quick-start highlight box (index) ── */
.quickstart{background:linear-gradient(135deg,#0f2a33,#0c1e26);border:1px solid var(--teal-deep);
  border-radius:12px;padding:18px 22px;margin:18px 0;}
.quickstart h3{color:var(--teal);margin:0 0 8px;font-size:16px;}
.quickstart ol{margin:6px 0;padding-left:22px;}
.quickstart li{margin:5px 0;color:var(--ink);}

/* ── Section anchor scroll offset ── */
h2[id]{scroll-margin-top:20px;}