:root {
  --bg: #0e1116;
  --bg-2: #141922;
  --panel: #171d27;
  --panel-2: #1d2430;
  --line: #2a3342;
  --line-2: #354055;
  --text: #d9e0ea;
  --muted: #8b97a8;
  --faint: #5d6878;
  --accent: #f0b429;
  --accent-2: #3d8bfd;
  --add: #3fb950;
  --add-bg: rgba(63, 185, 80, 0.12);
  --del: #f85149;
  --del-bg: rgba(248, 81, 73, 0.12);
  --mod: #d29922;
  --mod-bg: rgba(210, 153, 34, 0.14);
  --enc: #a371f7;
  --enc-bg: rgba(163, 113, 247, 0.14);
  --radius: 8px;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --q0: #9d9d9d; --q1: #ffffff; --q2: #1eff00; --q3: #0070dd; --q4: #a335ee; --q5: #ff8000; --q6: #e6cc80; --q7: #00ccff;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f6f9; --bg-2: #eceff4; --panel: #ffffff; --panel-2: #f6f8fb; --line: #dde2ea; --line-2: #c9d0db;
  --text: #1c2430; --muted: #5d6878; --faint: #8b97a8; --accent: #b7791f; --accent-2: #2563eb;
  --add: #1a7f37; --add-bg: rgba(26, 127, 55, 0.1); --del: #cf222e; --del-bg: rgba(207, 34, 46, 0.08);
  --mod: #9a6700; --mod-bg: rgba(154, 103, 0, 0.1); --enc: #8250df; --enc-bg: rgba(130, 80, 223, 0.1);
  --q1: #1c2430; --q2: #13a300; --q6: #a88a3a;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
button, input, select { font: inherit; color: inherit; }

/* header */
header.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: .2px; }
.brand .logo { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #f0b429, #d9480f); display: grid; place-items: center; color: #111; font-weight: 800; font-size: 14px; }
nav.tabs { display: flex; gap: 2px; }
nav.tabs a { padding: 6px 12px; border-radius: 6px; color: var(--muted); font-weight: 500; }
nav.tabs a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
nav.tabs a.active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.compare { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.compare label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.compare .tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.tag.a { background: var(--del-bg); color: var(--del); }
.tag.b { background: var(--add-bg); color: var(--add); }
select, input[type=text], input[type=search] {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; outline: none;
}
select:focus, input:focus { border-color: var(--accent-2); }
.btn {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--accent-2); }
.btn.primary { background: var(--accent); color: #151515; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.iconbtn { background: none; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--muted); }
.iconbtn:hover { border-color: var(--line); color: var(--text); }
.jobpill { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.spinner { width: 12px; height: 12px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

main { padding: 20px; max-width: 1680px; margin: 0 auto; min-width: 0; flex: 1; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.sub { color: var(--muted); margin-bottom: 18px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .compare { margin-left: 0; } }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.section { margin-top: 22px; }

/* stat tiles */
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: default; }
.tile.link { cursor: pointer; }
.tile.link:hover { border-color: var(--line-2); }
.tile .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.tile .value { font-size: 26px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .hint { color: var(--faint); font-size: 12px; }
.tile.add .value { color: var(--add); }
.tile.del .value { color: var(--del); }
.tile.mod .value { color: var(--mod); }
.tile.enc .value { color: var(--enc); }

.buildcard { display: flex; gap: 14px; align-items: flex-start; }
.buildcard .v { font-family: var(--mono); font-size: 13px; }
.buildcard dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 13px; }
.buildcard dt { color: var(--muted); }
.buildcard dd { margin: 0; font-variant-numeric: tabular-nums; }

/* tables */
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.data th, table.data td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: top; }
table.data th { position: sticky; top: 0; background: var(--panel-2); z-index: 2; font-weight: 600; color: var(--muted); font-size: 12px; cursor: default; }
table.data th.sortable { cursor: pointer; }
table.data th.sortable:hover { color: var(--text); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
table.data tr.click { cursor: pointer; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.wrap { white-space: normal; min-width: 240px; max-width: 560px; }
table.data td.id { position: sticky; left: 0; background: var(--panel); z-index: 1; font-weight: 600; }
table.data th.id { position: sticky; left: 0; z-index: 3; }
table.data tr.added td { background: var(--add-bg); }
table.data tr.removed td { background: var(--del-bg); }
table.data td.changed { background: var(--mod-bg); }
.cell-old { color: var(--del); text-decoration: line-through; opacity: .85; }
.cell-new { color: var(--add); }
.cell-arrow { color: var(--faint); margin: 0 4px; }
.th-alias { display: block; font-weight: 400; color: var(--faint); font-size: 11px; }
.th-fk { display: block; font-weight: 400; color: var(--accent-2); font-size: 11px; }
.null { color: var(--faint); }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; min-width: 80px; }
.bar span { display: block; height: 100%; }
.bar .a { background: var(--add); } .bar .r { background: var(--del); } .bar .m { background: var(--mod); }

.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.badge.added { background: var(--add-bg); color: var(--add); }
.badge.removed { background: var(--del-bg); color: var(--del); }
.badge.modified, .badge.changed { background: var(--mod-bg); color: var(--mod); }
.badge.unchanged, .badge.binary, .badge.present { background: var(--panel-2); color: var(--muted); }
.badge.enc { background: var(--enc-bg); color: var(--enc); }
.badge.error { background: var(--del-bg); color: var(--del); }
.badge.hotfix { background: rgba(61, 139, 253, .15); color: var(--accent-2); }

.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 4px 11px; cursor: pointer; font-size: 13px; color: var(--muted); }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.chip .n { color: var(--faint); margin-left: 5px; font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--muted); font-size: 13px; }

/* layout with sidebar */
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }
.sidebar { position: sticky; top: 70px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sidebar .head { padding: 10px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.sidebar .list { overflow: auto; }
.sidebar .item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; font-size: 13px; border-left: 2px solid transparent; }
.sidebar .item:hover { background: var(--panel-2); }
.sidebar .item.on { background: var(--panel-2); border-left-color: var(--accent); }
.sidebar .item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .item .n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--line-2); }
.dot.added { background: var(--add); } .dot.removed { background: var(--del); } .dot.changed { background: var(--mod); } .dot.error { background: var(--del); }

/* file preview */
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.preview-grid.single { grid-template-columns: 1fr; }
.imgbox { background: repeating-conic-gradient(#2a2f38 0% 25%, #22262e 0% 50%) 50% / 20px 20px; border-radius: 6px; display: grid; place-items: center; min-height: 120px; padding: 8px; }
.imgbox img { max-width: 100%; max-height: 520px; image-rendering: auto; }
pre.hex, pre.code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow: auto; font: 12px/1.5 var(--mono); max-height: 600px; margin: 0; }
table.diff { width: 100%; border-collapse: collapse; font: 12px/1.5 var(--mono); table-layout: fixed; }
table.diff td { padding: 0 6px; vertical-align: top; white-space: pre-wrap; word-break: break-all; }
table.diff td.ln { width: 52px; color: var(--faint); text-align: right; user-select: none; border-right: 1px solid var(--line); }
table.diff tr.ins td.b, table.diff tr.replace td.b { background: var(--add-bg); }
table.diff tr.del td.a, table.diff tr.replace td.a { background: var(--del-bg); }
table.diff tr.skip td { background: var(--panel-2); color: var(--faint); text-align: center; font-family: var(--sans); padding: 3px; }
.diffwrap { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font-size: 13px; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* items */
.itemgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.itemcard { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.itemcard:hover { border-color: var(--line-2); }
.icon { width: 36px; height: 36px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg-2); flex: none; object-fit: cover; }
.icon.lg { width: 56px; height: 56px; }
.itemcard .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemcard .meta { color: var(--faint); font-size: 12px; }
.q0 { color: var(--q0); } .q1 { color: var(--q1); } .q2 { color: var(--q2); } .q3 { color: var(--q3); } .q4 { color: var(--q4); } .q5 { color: var(--q5); } .q6 { color: var(--q6); } .q7 { color: var(--q7); }
.tooltip { background: rgba(8, 10, 22, .96); border: 1px solid #3b4252; border-radius: 6px; padding: 10px 12px; color: #fff; font-size: 13px; line-height: 1.5; max-width: 380px; }
:root[data-theme="light"] .tooltip { --q1: #fff; --q2: #1eff00; }
.tooltip .t-name { font-size: 15px; font-weight: 600; }
.tooltip .t-white { color: #fff; } .tooltip .t-green { color: #1eff00; } .tooltip .t-yellow { color: #ffd100; } .tooltip .t-gray { color: #9d9d9d; }
.tooltip .t-split { display: flex; justify-content: space-between; gap: 20px; }

.empty { padding: 40px; text-align: center; color: var(--muted); }
.notice { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--panel); border-radius: 6px; padding: 10px 14px; margin: 10px 0; }
.notice.enc { border-left-color: var(--enc); }
.notice.err { border-left-color: var(--del); }
.progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.kbd { font-family: var(--mono); font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=search] { min-width: 280px; flex: 1; max-width: 520px; }
.tabs2 { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs2 a { padding: 8px 14px; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs2 a.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs2 a:hover { color: var(--text); text-decoration: none; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; }
.path { font-family: var(--mono); font-size: 12.5px; }
.path .dir { color: var(--faint); }
.error-text { color: var(--del); white-space: pre-wrap; font-family: var(--mono); font-size: 12px; }

/* talents */
.tooltip.floating { position: fixed; z-index: 100; display: none; pointer-events: none; max-width: 360px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.treewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(ellipse at top, #1a2130, #0b0e14 70%); max-height: calc(100vh - 230px); }
:root[data-theme="light"] .treewrap { background: radial-gradient(ellipse at top, #2a3242, #141821 70%); }
.tree { position: relative; margin: 0 auto; }
.tree svg.edges { position: absolute; inset: 0; pointer-events: none; }
.tree svg.edges line { stroke: #4a5568; stroke-width: 3; }
.tree svg.edges line.on { stroke: #f0b429; }
.tree svg.edges line.alt { stroke: #6b7280; stroke-dasharray: 5 5; stroke-width: 2; }
.tnode { position: absolute; width: 44px; height: 44px; border-radius: 8px; border: 2px solid #3b4252; background: #0d1017;
  cursor: pointer; user-select: none; transition: transform .08s, border-color .1s, filter .1s; }
.tnode:hover { transform: scale(1.08); z-index: 5; }
.tnode img, .tnode .noicon { width: 100%; height: 100%; border-radius: 6px; display: block; object-fit: cover; }
.tnode .noicon { display: grid; place-items: center; color: #666; }
.tnode.choice { border-radius: 50%; }
.tnode.choice img { border-radius: 50%; }
.tnode.locked img { filter: grayscale(1) brightness(.55); }
.tnode.avail { border-color: #3fb950; box-shadow: 0 0 8px rgba(63,185,80,.45); }
.tnode.partial { border-color: #3fb950; }
.tnode.maxed { border-color: #f0b429; box-shadow: 0 0 10px rgba(240,180,41,.5); }
.tnode .trank { position: absolute; right: -8px; bottom: -8px; background: #0d1017; border: 1px solid #3b4252; border-radius: 6px;
  font: 700 11px/1 var(--mono); padding: 2px 4px; color: #9aa4b2; }
.tnode.maxed .trank { color: #f0b429; border-color: #f0b429; }
.tnode.partial .trank, .tnode.avail .trank { color: #3fb950; }
.tgate { position: absolute; left: 4px; right: 4px; height: 0; border-top: 1px dashed rgba(240,180,41,.25); color: rgba(240,180,41,.7);
  font: 600 11px var(--mono); padding-left: 2px; pointer-events: none; }
.tgate::before { content: "▸ "; }
.tpanel { position: absolute; top: 6px; display: flex; align-items: center; gap: 8px; color: #d9e0ea; font-size: 14px; }
.tpanel .icon { width: 24px; height: 24px; }

/* item hover tooltips */
.tooltip.floating.wide { max-width: 820px; background: transparent; border: none; box-shadow: none; padding: 0; }
.tipduo { display: flex; gap: 10px; align-items: flex-start; }
.tipduo > div { width: 340px; }
.tipduo .tooltip { max-width: none; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.tiplabel { font-size: 12px; color: #d9e0ea; margin-bottom: 4px; text-shadow: 0 1px 2px #000; background: rgba(8,10,22,.85); display: inline-block; padding: 2px 8px; border-radius: 4px; }
.tooltip .t-diff { background: rgba(240, 180, 41, .16); box-shadow: inset 3px 0 0 #f0b429; margin: 0 -12px; padding: 0 12px; }

/* professions */
.pitem { position: relative; display: inline-block; line-height: 0; }
.pitem .icon { width: 30px; height: 30px; }
.pcount { position: absolute; right: 1px; bottom: 1px; font: 700 11px/1 var(--mono); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.sk-orange { color: #ff8040; font-weight: 600; } .sk-yellow { color: #ffd100; } .sk-green { color: #40bf40; } .sk-grey { color: #808080; }
table.data tr.grouprow td { background: var(--panel-2); color: var(--accent); font-weight: 600; position: sticky; top: 29px; z-index: 1; }
td.nowrap { white-space: nowrap; }

/* legacy */
.legacytrees { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.legacytree .treewrap { display: flex; justify-content: center; padding: 6px 0; }
.tnode.placeholder { opacity: .35; cursor: not-allowed; border-style: dashed; }
.wrapok { white-space: normal; }

/* achievements */
tr.achrow.open td { background: var(--panel-2); }
tr.achdetail td { background: var(--bg-2); padding: 10px 14px; white-space: normal; }
.achbox + .achbox { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.crit-tree { margin-top: 8px; }
.crit-head { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.crit-row { display: flex; gap: 8px; padding: 3px 0; }
.crit-dot { color: var(--accent); width: 10px; flex: none; }
.crit-meta { font-size: 12px; }
.crit-amount { font-family: var(--mono); font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }

/* titles */
.titlegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ttitle { font-size: 16px; font-weight: 600; color: #ffd100; }
:root[data-theme="light"] .ttitle { color: #9a6700; }
.ttitle .tname { color: var(--text); font-weight: 400; font-style: italic; }
.ttitle.ally { color: #3d8bfd; } .ttitle.horde { color: #f85149; }
.tsrc { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }

/* world map */
.mapsplit { grid-template-columns: 280px minmax(0, 1fr); }
.leafletbox { height: calc(100vh - 190px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: #0a0c10; }
.leaflet-container { background: #0a0c10; font: inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); }
.leaflet-popup-content a { color: var(--accent-2); }
.iconmatch { color: var(--accent); font-weight: 600; }

/* media previews */
.tooltip.mediatip img { display: block; max-width: 256px; max-height: 256px; background: repeating-conic-gradient(#2a2f38 0% 25%, #22262e 0% 50%) 50% / 16px 16px; }
#lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 24px; }
#lightbox .lb-inner { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; max-width: 95vw; max-height: 92vh; overflow: auto; }
#lightbox .lb-images { display: flex; gap: 16px; flex-wrap: wrap; }
#lightbox .imgbox img { max-width: 80vw; max-height: 75vh; }
#audiobar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 150; display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.45); max-width: 95vw; }
#audiobar .ab-note { font-size: 22px; color: var(--accent); }
#audiobar .ab-name { min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#audiobar .ab-track { display: flex; align-items: center; gap: 6px; }
#audiobar audio { height: 32px; }
[data-file] { cursor: pointer; }

/* factions */
.st-hated, .st-hostile { color: #f85149; } .st-unfriendly { color: #ff8c42; } .st-neutral { color: #d29922; }
.st-friendly, .st-honored, .st-revered { color: #3fb950; } .st-exalted { color: #3dd6d0; font-weight: 600; }
tr.facrow.open td { background: var(--panel-2); }
tr.facdetail td { background: var(--bg-2); white-space: normal; padding: 12px 16px; }

/* 3D terrain */
.terrainbox { position: relative; height: calc(100vh - 150px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #9ec3e6; }
.terrainbox canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
.terrainbox canvas:active { cursor: grabbing; }
.terrainhud, .terrainhelp, .terraincontrols { position: absolute; left: 10px; background: rgba(10,14,20,.72); color: #e6edf3; border-radius: 6px; padding: 5px 10px; font-size: 12px; pointer-events: none; }
.terrainhud { top: 10px; font-family: var(--mono); }
.terrainhelp { bottom: 10px; }
.terraincontrols { top: 10px; left: auto; right: 10px; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.terraincontrols input[type=range] { width: 110px; vertical-align: middle; }
.terraincontrols span { font-family: var(--mono); color: #aab4c0; }

/* model viewer */
.mv-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a4150, #16181d); }
.mv-canvas { height: 420px; cursor: grab; }
.mv-canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.mv-bar { display: flex; gap: 12px; align-items: center; padding: 6px 10px; background: var(--panel); font-size: 12px; }
.mvsel { margin-bottom: 8px; max-width: 100%; }
.mvtex { display: flex; flex-wrap: wrap; gap: 8px; }
.mvtexitem { display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 2px; }
.mvtexitem img { width: 96px; height: 96px; object-fit: contain; background: #222; border-radius: 4px; }
.npcgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 16px; align-items: start; }
.npcgrid .sticky { position: sticky; top: 8px; }
tr.sel td { background: var(--mod-bg); }
@media (max-width: 900px) { .npcgrid { grid-template-columns: 1fr; } .mv-canvas { height: 320px; } }

/* item filters */
.ifpanel { margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.ifgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.ifgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.ifgrid input, .ifgrid select { width: 100%; }
.ifrange { display: flex; align-items: center; gap: 6px; }
.ifrange input { min-width: 0; }
.ifrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.iflabel { width: 70px; font-size: 12px; color: var(--muted); flex: none; }
#ifcrits { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ifcrit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ifcrit .cval { width: 110px; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable.on { color: var(--accent); }

/* mounts */
.mogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mocard { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }
.mocard:hover { border-color: var(--line-2); }
.mocard.sel { border-color: var(--accent); }
.mocard.added { background: var(--add-bg); }
.mocard .icon { width: 32px; height: 32px; flex: none; }
.mocard .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mocard .meta { font-size: 11px; color: var(--muted); }

/* 3D model beside item tooltips */
#gtip3d { position: fixed; z-index: 1001; width: 220px; height: 260px; pointer-events: none; display: none; }
#gtip3d.failed { height: auto; }
#gtip3d.failed .mv-canvas { display: none; }
.mv-wrap.compact { height: 100%; border-color: #5a5a6a; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); position: relative; }
.mv-wrap.compact .mv-canvas { height: 100%; }
.mv-wrap.compact .mv-bar { position: absolute; left: 0; right: 0; bottom: 0; background: transparent; }
.mv-wrap.compact .mv-bar label { display: none; }
#gtip3d.failed .mv-wrap.compact .mv-bar { position: static; }

/* sets, instances, races */
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.instgrid { display: flex; flex-direction: column; gap: 10px; }
.racegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.setcard.added, .instcard.added { border-color: var(--add); }
.setcard.removed, .instcard.removed { border-color: var(--del); opacity: .85; }
.setitems { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.setitem { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.setitem .icon { width: 22px; height: 22px; }
.setitem .small { margin-left: auto; }
.setitem.added { background: var(--add-bg); border-radius: 4px; }
.setbonus > div { margin: 2px 0; }
.racial { display: flex; gap: 8px; margin: 8px 0; }
.racial .icon { width: 32px; height: 32px; flex: none; }
.maplegend { background: rgba(14, 17, 22, .85); color: #d9e0ea; padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.leaflet-control-layers { font-size: 12px; }

.instcard { padding: 12px 14px; }
.insthead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.instbody { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 18px; margin-top: 8px; }
.instbody.single { grid-template-columns: minmax(0, 1fr); }
.instinfo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.instinfo details summary { cursor: pointer; }
.instbg { border-left: 2px solid var(--line-2); padding-left: 8px; }
.insttable td.wrap { white-space: normal; min-width: 160px; }
@media (max-width: 900px) { .instbody { grid-template-columns: minmax(0, 1fr); } }
.mapstatus label { display: block; cursor: pointer; white-space: nowrap; }
.leaflet-control.mapstatus { background: #fff; color: #1c2430; padding: 6px 10px; border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,.4); }
.leaflet-control.mapstatus .faint { color: #5d6878; }

/* teleport map inside the 3D view */
.trmap { position: absolute; inset: 40px 60px; z-index: 20; flex-direction: column; background: #0b0e14; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); overflow: hidden; }
.trmaphead { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--panel); color: var(--text); }
.trmaphead .btn { margin-left: auto; }
.trmapleaf { flex: 1; background: #0b0e14; cursor: crosshair; }
.trmarker div { color: #f85149; font-size: 20px; line-height: 22px; text-align: center; text-shadow: 0 0 3px #000, 0 0 6px #000; }


/* extras */
.icon.sm { width: 18px; height: 18px; }
.vendorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.vendorcard.added { border-color: var(--add); }
.vendoritems { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 260px; overflow: auto; font-size: 13px; }
.holidaydates { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--mono); font-size: 12px; }
svg.chart { width: 100%; height: auto; }
svg.chart text { fill: var(--muted); font-size: 11px; }
svg.chart line.grid { stroke: var(--line); }
.labelcard summary { cursor: pointer; }
.spellchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.spellchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.spellchip.added { border-color: var(--add); background: var(--add-bg); }
.spellchip.removed { border-color: var(--del); background: var(--del-bg); text-decoration: line-through; }
.choices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.choice { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.choice.added { border-color: var(--add); background: var(--add-bg); }
.choice i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.4); }
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.artcard { margin: 0; padding: 8px; }
.artcard img { width: 100%; display: block; border-radius: 4px; }
.artcard.added { border-color: var(--add); }
.artcard.removed { border-color: var(--del); }
.artcard figcaption { margin-top: 6px; }
.maptiles { display: grid; gap: 0; }
.maptiles img { border-radius: 0; }
.track { display: inline-block; padding: 1px 6px; margin: 1px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.vendoritems .notinbuild { opacity: .55; }

/* left sidebar navigation */
.layout { display: flex; align-items: flex-start; }
.sidenav { position: sticky; top: 49px; flex: none; width: 206px; height: calc(100vh - 49px); overflow-y: auto; padding: 10px 8px 24px;
  border-right: 1px solid var(--line); background: var(--bg-2); }
.navgroup { margin-bottom: 4px; }
.navgroup summary { cursor: pointer; list-style: none; padding: 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--faint); border-radius: 6px; user-select: none; }
.navgroup summary::-webkit-details-marker { display: none; }
.navgroup summary::before { content: "▸"; display: inline-block; width: 12px; transition: transform .15s; }
.navgroup[open] summary::before { transform: rotate(90deg); }
.navgroup summary:hover { color: var(--text); }
.sidenav a { display: block; padding: 5px 10px 5px 22px; border-radius: 6px; color: var(--muted); font-weight: 500; font-size: 13.5px; }
.sidenav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.sidenav a.active { background: var(--panel-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
body.navhidden .sidenav { display: none; }
@media (max-width: 900px) {
  .sidenav { position: fixed; left: 0; top: 49px; z-index: 30; box-shadow: 4px 0 20px rgba(0,0,0,.4); }
  body:not(.navhidden) .sidenav { display: block; }
}

.t-red { color: var(--del); }
.chip.disabled { opacity: .45; cursor: default; }
table.data th.num { text-align: right; }
.t-green { color: var(--add); }

/* world events calendar */
.callayout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .callayout { grid-template-columns: 1fr; } }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.calhead { padding: 6px 8px; font-size: 12px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line); }
.calday { min-height: 104px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; }
.calday:nth-child(7n+7) { border-right: 0; }
.calday.other { background: var(--bg-2); }
.calday.other .calnum { color: var(--faint); }
.calday.today { box-shadow: inset 0 0 0 2px var(--accent); }
.calnum { font-size: 12px; color: var(--muted); margin: 0 2px 3px; font-variant-numeric: tabular-nums; }
.calev { font-size: 11.5px; line-height: 1.35; padding: 1px 5px; margin-bottom: 2px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.calev.added { outline: 1px solid var(--add); }
.calev.removed { outline: 1px dashed var(--del); text-decoration: line-through; opacity: .75; }
.caldot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex: none; }
.calside { position: sticky; top: 10px; max-height: calc(100vh - 90px); overflow: auto; }
.calleg { display: flex; align-items: center; gap: 4px; font-size: 13px; padding: 2px 0; cursor: pointer; }
.calleg input { margin: 0 4px 0 0; }
@media (max-width: 640px) { .calday { min-height: 70px; } .calev { font-size: 10px; } }

/* spell detail */
.sdhead { display: flex; gap: 12px; align-items: center; margin: 10px 0 8px; }
.sdhead img.icon { width: 48px; height: 48px; }
.sdtext { white-space: pre-wrap; line-height: 1.5; }
.sdtext + .sdtext { margin-top: 8px; }
.sdeffects { display: flex; flex-direction: column; gap: 8px; }
.sdeff { padding: 10px 12px; }
.sdeff.added { border-color: var(--add); }
.sdeff.removed { border-color: var(--del); opacity: .8; }
.sdeff.changed { border-color: var(--mod, var(--accent)); }
.sdidx { font-family: var(--mono); color: var(--faint); font-size: 12px; min-width: 22px; }
.sdsum { font-size: 15px; }
.sdfacts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.sdaffects { margin-top: 6px; }
.sdchips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.sdchip { border: 1px solid var(--line); border-radius: 12px; padding: 1px 8px; font-size: 12.5px; background: var(--panel-2); }
.sdchip.added { border-color: var(--add); }
.sdchip.removed { border-color: var(--del); text-decoration: line-through; }
.spref { display: inline-flex; align-items: center; gap: 4px; }
.spref img.icon { width: 16px; height: 16px; }
.sdattr { border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--muted); cursor: help; }
.sdattr.added { border-color: var(--add); color: var(--add); }
.sdattr.removed { border-color: var(--del); color: var(--del); text-decoration: line-through; }
.sdlist > div { padding: 2px 0; }
.sdgeneral td:first-child { width: 1%; }
.sdgeneral tr.sdchanged td:first-child { color: var(--text); }
.sdcols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sdgeneral th { white-space: normal; }
.sdgeneral td { word-break: break-word; }

/* misc: name generator, subzone group rows */
.choice.removed { border-color: var(--del); text-decoration: line-through; opacity: .8; }
.choice.sample { border-color: var(--accent); }
.ngsample:empty { display: none; }
table.data tr.grouphead td { background: var(--panel-2); padding-top: 8px; }

.instreqbox { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.instreqbox summary { cursor: pointer; }
ul.instreq { margin: 2px 0 6px; padding-left: 18px; }
ul.instreq li { margin: 1px 0; }

.ixsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 800px) { .ixsplit { grid-template-columns: 1fr; } }

/* name generator */
.ngen .ngresults { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; align-items: baseline; }
.ngname { font-size: 15px; }
.ngname.main { font-size: 22px; font-weight: 600; width: 100%; }
.ngsur { color: var(--accent); }

/* nested sidebar submenus */
.navsub { margin: 1px 0 1px 12px; }
.navsub summary { cursor: pointer; list-style: none; padding: 5px 10px; border-radius: 6px; color: var(--muted); font-size: 13.5px; font-weight: 500; user-select: none; }
.navsub summary::-webkit-details-marker { display: none; }
.navsub summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--faint); transition: transform .15s; }
.navsub[open] summary::before { transform: rotate(90deg); }
.navsub summary:hover { background: var(--panel-2); color: var(--text); }
.sidenav .navsub a { padding-left: 30px; font-size: 13px; }

/* encrypted content banner + page */
.mainwrap { flex: 1; min-width: 0; }
#encbanner { max-width: 1680px; margin: 0 auto; padding: 0 20px; }
#encbanner:empty { display: none; }
.encbanner { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--add); background: color-mix(in srgb, var(--add) 12%, var(--panel)); }
.encbanner.new_locked { border-color: var(--line-2); background: var(--panel); }
.encicon { font-size: 20px; flex: none; }
.enctext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.encevent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.encevent.unlocked, .encevent.no_longer_encrypted { border-color: var(--add); }
.enccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.encbig { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
table.data tr.sel td { background: var(--panel-2); }
.navgroup .navsub summary { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 5px 10px 5px 10px; }
.navgroup .navsub summary:hover { color: var(--text); }

/* global search */
.gswrap { position: relative; flex: 1 1 280px; max-width: 460px; min-width: 200px; }
.gswrap input#globalsearch { width: 100%; }
.gsdrop { position: absolute; top: calc(100% + 4px); left: 0; width: max(100%, 520px); max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); z-index: 50; padding: 4px 0; }
.gsdrop[hidden] { display: none; }
.gsgroup + .gsgroup { border-top: 1px solid var(--line); }
.gshead { display: flex; justify-content: space-between; padding: 6px 12px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.gsitem { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--text); min-width: 0; }
.gsitem:hover, .gsitem.on, .gsall.on, .gsall:hover { background: var(--panel-2); text-decoration: none; }
.gsitem .gsmain { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.gsitem .gsmain > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gssub { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsright { display: flex; align-items: center; gap: 6px; flex: none; }
.gsall { display: flex; justify-content: space-between; padding: 7px 12px; border-top: 1px solid var(--line); color: var(--accent); }
.gsempty { padding: 14px 12px; color: var(--muted); }
.gsglyph { width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; border-radius: 4px; font-size: 9px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); overflow: hidden; }
.gsremoved .gsmain, tr.gsremoved td { opacity: .7; }
.gsremoved .gsmain > span:first-child { text-decoration: line-through; }
@media (max-width: 700px) { .gswrap { max-width: none; flex-basis: 100%; order: 5; } .gsdrop { width: 100%; } }
/* unreleased content */
.urtag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 8px; background: var(--mod-bg); color: var(--mod); white-space: nowrap; }
tr.urgroup td { background: var(--panel-2); font-weight: 600; font-size: 12px; }
.urnames { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.urname { white-space: nowrap; }
.urblocks .insthead { margin-bottom: 6px; }

#ccclasses .tabs2 { flex-wrap: wrap; }
#ccclasses .tabs2 a { display: inline-flex; align-items: center; gap: 6px; }
.ccchgs { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.ccchg { white-space: nowrap; }
.cctable details { margin-top: 4px; }
.cctable details ul { margin: 4px 0 4px 18px; padding: 0; }
.ccgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; }
.ccgrid .chart { width: 100%; height: auto; }
.isgroup h2 { font-size: 15px; }

/* zones */
.zonecard h3 { font-size: 16px; }
.zonemeta { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; }
.zonethumbs { display: flex; gap: 6px; flex-shrink: 0; }
.zonethumb { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); display: block; }
.zonecard details summary { cursor: pointer; margin: 4px 0; }
.zchildren a { white-space: nowrap; }
/* uihints */
.uhwords { margin: 6px 0 10px; flex-wrap: wrap; }
.uhgroups { display: flex; flex-direction: column; gap: 6px; }
.uhgroup { padding: 6px 10px; }
.uhgroup summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.uhpreview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.uhrows { margin-top: 6px; }

/* ------------------------------------------------------------------ what's new / patch notes (web/digest.js) */
.dg-summary { margin-bottom: 14px; }
.dg-summary-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.dg-summary.dg-clientonly { border-color: var(--accent); }
.dg-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dg-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; color: var(--text); text-decoration: none; }
.dg-card:hover { border-color: var(--accent); }
.dg-card.dg-zero { opacity: .55; }
.dg-card-label { font-size: 12px; color: var(--muted); }
.dg-card-nums { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.dg-mod { color: var(--mod, var(--accent)); }
.dg-sechead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dg-sechead h2 { margin: 0; }
.dg-note { margin: -2px 0 8px; }
.dg-seeall { font-size: 13px; white-space: nowrap; }
.dg-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 10px 0 4px; cursor: default; }
details > summary.dg-sub { cursor: pointer; }
.dg-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; }
.dg-class { padding: 12px 14px; min-width: 0; }
.dg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 10px; }
.dg-list { list-style: none; margin: 0; padding: 0; }
.dg-list.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 18px; }
.dg-entry { padding: 5px 0; border-top: 1px solid var(--line); min-width: 0; }
.dg-list > .dg-entry:first-child, .dg-list.dg-grid > .dg-entry { border-top: 0; }
.dg-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dg-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.dg-text { margin-top: 2px; overflow-wrap: anywhere; }
.dg-change { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.dg-pieces { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dg-chips .chip { text-decoration: none; }
.dg-gone { text-decoration: line-through !important; opacity: .7; }
.dg-class .dg-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-sub .dg-seeall { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }

/* spell modifier calculator */
.simgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px; margin-bottom: 12px; }
.simsearch { position: relative; margin: 8px 0; }
.simsearch input { width: 100%; }
.simdrop { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.simhit { display: flex; gap: 8px; align-items: center; padding: 5px 10px; cursor: pointer; }
.simhit:hover { background: var(--panel-2); }
.simhit img.icon { width: 18px; height: 18px; }
.simmod { border-top: 1px solid var(--line); padding: 6px 0; }
.simchecks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 360px; overflow: auto; }
.simcheck { display: block; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.simcheck:hover { background: var(--panel-2); }
.simeffs { margin-left: 22px; }
table.simtable tr.simfirst td { border-top: 2px solid var(--line-2); }

/* new art gallery */
.gal-toolbar #galq { min-width: 280px; }
.gal-folders { margin: 6px 0; }
.gal-folders.sub .chip { font-size: 12px; padding: 2px 9px; }
.gal-grid { display: grid; gap: 10px; margin: 10px 0; }
.gal-grid.g-icons { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gal-grid.g-textures, .gal-grid.g-models { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gal-grid.g-art { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gal-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; min-width: 0; }
.gal-tile.g-icon { display: flex; gap: 10px; align-items: flex-start; }
.gal-tile .gal-img { display: grid; place-items: center; position: relative; border-radius: 6px; overflow: hidden;
  background: repeating-conic-gradient(var(--panel-2) 0 25%, var(--bg-2) 0 50%) 0 0 / 16px 16px; }
.gal-tile.g-icon .gal-img { width: 56px; height: 56px; flex: none; }
.gal-tile.g-icon .gal-img img { width: 56px; height: 56px; }
.gal-tile.g-textures .gal-img, .gal-tile.g-model .gal-img { height: 132px; }
.gal-tile.g-art .gal-img { height: 200px; }
.gal-tile .gal-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gal-tile.g-model { cursor: pointer; }
.gal-tile.g-model:hover { border-color: var(--accent); }
.gal-3d { position: absolute; right: 4px; bottom: 4px; font: 700 10px var(--mono); background: rgba(0,0,0,.65); color: #fff; padding: 1px 4px; border-radius: 4px; }
.gal-meta { min-width: 0; flex: 1; }
.gal-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.gal-tile.g-icon .gal-name { margin-top: 0; font-weight: 600; }
.gal-dir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-links a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-ph { width: 100%; height: 100%; min-height: 48px; display: grid; place-items: center; color: var(--faint); font-size: 11px; text-align: center; }
.gal-ph.lock { color: var(--enc); }
.gal-ph.big { height: 420px; gap: 6px; align-content: center; }
#galmodal { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 24px; }
#galmodal .gm-inner { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; width: min(1200px, 95vw); max-height: 92vh; overflow: auto; }
#galmodal .gm-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
#galmodal .gm-info h3:first-child { margin-top: 0; }
@media (max-width: 900px) { #galmodal .gm-body { grid-template-columns: 1fr; } .gal-toolbar #galq { min-width: 0; width: 100%; } }

/* talent tree comparison */
.td-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1400px) { .td-side { grid-template-columns: 1fr; } }
.td-title { font-size: 13px; margin: 8px 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tnode.td { width: 40px; height: 40px; }
.tnode.td .trank { font-size: 10px; }
.tnode.td.same img { filter: saturate(.35) brightness(.7); }
.tnode.td.added { border-color: var(--add); box-shadow: 0 0 10px rgba(63,185,80,.6); }
.tnode.td.removed { border-color: var(--del); box-shadow: 0 0 10px rgba(248,81,73,.6); }
.tnode.td.changed { border-color: #f0b429; box-shadow: 0 0 10px rgba(240,180,41,.55); }
.tnode.td.moved { border-color: #3d8bfd; box-shadow: 0 0 10px rgba(61,139,253,.55); }
.tnode.td.changed.wasmoved { outline: 2px dashed #3d8bfd; outline-offset: 2px; }
.tnode.td.ghost { opacity: .65; border-style: dashed; transform: scale(.8); }
.tnode.td.ghost img { filter: grayscale(.6); }
.tnode.td.sel { outline: 3px solid #fff; outline-offset: 2px; z-index: 6; }
.tree svg.edges line.move { stroke: #3d8bfd; stroke-width: 2; stroke-dasharray: 4 4; }
.tree svg.edges circle.move { fill: none; stroke: #3d8bfd; stroke-width: 2; }
.td-legend { margin: 6px 0; color: var(--muted); }
.td-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid; vertical-align: -2px; margin-right: 4px; }
.td-key.added { border-color: var(--add); } .td-key.removed { border-color: var(--del); } .td-key.changed { border-color: #f0b429; }
.td-key.moved { border-color: #3d8bfd; } .td-key.same { border-color: #3b4252; }
.td-detail { margin-top: 12px; }
.td-changes { margin: 6px 0; padding-left: 18px; }
.td-vers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .td-vers { grid-template-columns: 1fr; } }
.td-desc { margin: 4px 0; white-space: normal; }

/* header: keep search + build selectors on one row on normal screens */
@media (min-width: 1000px) {
  header.top { flex-wrap: nowrap; gap: 14px; }
  .compare { flex: none; }
  .compare select { max-width: 250px; min-width: 150px; }
  .gswrap { flex: 1 1 220px; min-width: 160px; }
}

/* talent row unlock lines: in the gap between rows, label in the left margin */
.tgate { z-index: 0; }
.tgate::before { content: none; }
.tgate span { position: absolute; left: 0; top: -8px; padding: 0 5px; line-height: 15px; border-radius: 4px; white-space: nowrap;
  background: var(--panel, #171d27); border: 1px solid rgba(240,180,41,.35); }
.tnode { z-index: 1; }

.simdrop { max-height: 460px; }
.simhit { align-items: flex-start; border-bottom: 1px solid var(--line); }
.simhit img.icon { margin-top: 2px; }
.simhitmain { min-width: 0; flex: 1; }
.simhitdesc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }

/* socialsys: tabs, color swatches, icon grids, language words */
#sstabs .tabs2 { flex-wrap: wrap; }
.ss-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ss-swatch { width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: flex-end; }
.ss-swatch span { font-size: 10px; line-height: 1; padding: 1px 3px; background: rgba(0,0,0,.55); color: #fff; border-radius: 3px 0 3px 0; }
.ss-swatch.added { outline: 2px solid var(--add); outline-offset: 1px; }
.ss-swatch.removed { outline: 2px solid var(--del); outline-offset: 1px; opacity: .6; }
.ss-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-icon { width: 58px; text-align: center; padding: 3px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.ss-icon.added { border-color: var(--add); }
.ss-icon.removed { border-color: var(--del); opacity: .7; }
.ss-thumb { object-fit: contain; background: var(--panel-2); border-radius: 3px; vertical-align: middle; }
.ss-words { line-height: 1.8; margin-top: 4px; font-size: 13px; }
.ss-words span { display: inline-block; padding: 0 4px; border-radius: 3px; background: var(--panel-2); margin: 1px 0; }
.ss-words span.ss-new { background: var(--add); color: #000; }
.ss-words span.cell-old { text-decoration: line-through; }

/* scripted content */
.scaudio { display: flex; align-items: center; gap: 6px; }
.scaudio audio { height: 28px; width: 230px; }
mark.schl { background: var(--mod-bg); color: var(--accent); border-radius: 3px; padding: 0 2px; }
.scbt { color: var(--accent-2); text-decoration: underline dotted; cursor: help; }
pre.code.scsrc { max-height: 75vh; white-space: pre; tab-size: 4; }
a.sclink, a.scws, a.scexpr, a.scgoexpr { cursor: pointer; }

/* vehicles page */
.vehpathgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.vehsvg { display: block; margin-top: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.vehspark { display: block; }
#vehbody .icon.sm { vertical-align: middle; }
tr.vehseats > td { border-bottom: 1px solid var(--line); padding-top: 0; }
tr.vehseats details > summary { cursor: pointer; }

/* UI code page (web/uicode.js) */
.badge.fl-loaded { background: var(--add-bg); color: var(--add); }
.badge.fl-other { background: var(--mod-bg); color: var(--mod); }
.badge.fl-unlisted { background: var(--panel-2); color: var(--faint); }
pre.ucsnip { max-height: none; margin: 4px 0 8px; padding: 6px 8px; white-space: pre; }
pre.ucsnip > span, pre.ucdiff > span { display: block; min-height: 1.5em; }
pre.ucsnip .ucln { display: inline-block; min-width: 4.5em; padding-right: 10px; color: var(--faint); text-align: right; user-select: none; }
pre.ucsnip .uchl { background: color-mix(in srgb, var(--accent) 16%, transparent); }
pre.ucdiff { max-height: none; white-space: pre; }
pre.ucdiff .ucadd { color: var(--add); background: var(--add-bg); }
pre.ucdiff .ucdel { color: var(--del); background: var(--del-bg); }
pre.ucdiff .uchunk { color: var(--accent); margin-top: 6px; }
.ucref { margin: 6px 0 10px; }
.ucrefrow > td { background: var(--panel-2); }
.ucside { margin-bottom: 8px; }
.ucaddon { margin: 8px 0; }
.ucaddon > summary, details.ucsys > summary, details.section > summary { cursor: pointer; }
details.ucsys { margin: 6px 0; padding: 8px 12px; }
details.ucsys h4 { margin: 10px 0 4px; }
td .ucexp { cursor: pointer; }

/* origins */
.orbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--panel-2); min-width: 160px; }
.orbar span { display: block; height: 100%; }
.orbar .or-new { background: var(--add); }
.orbar .or-changed { background: var(--mod); }
.orbar .or-same { background: var(--line-2); }
.orlegend span { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.orlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
option.others { font-weight: 700; }

/* in-game data: item cards */
.igcards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.igcard { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2);
  min-width: 220px; max-width: 360px; color: inherit; text-decoration: none; }
.igcard:hover { border-color: var(--accent, #58a6ff); }
.igcard > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.igtip { color: var(--text-2, #c9d1d9); }

/* in-game character sheet */
.paperdoll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) minmax(0, 1fr); gap: 10px 16px; align-items: start; max-width: 900px; }
.paperdoll .dollcol { display: flex; flex-direction: column; gap: 6px; }
.paperdoll .dollmid { text-align: center; padding-top: 30px; }
.paperdoll .dollname { font-size: 20px; font-weight: 600; }
.paperdoll .dollbottom { grid-column: 1 / -1; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.dollslot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dollslot.right { flex-direction: row-reverse; text-align: right; }
.dollslot.bottom { flex-direction: column; text-align: center; width: 150px; }
.dollicon { flex: none; width: 40px; height: 40px; border: 2px solid; border-radius: 5px; background: var(--panel-2, #161b22); overflow: hidden; display: block; }
.dollicon img { width: 100%; height: 100%; display: block; }
.dolllabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.igdrops { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
@media (max-width: 640px) {
  .paperdoll { grid-template-columns: 1fr 1fr; }
  .paperdoll .dollmid { grid-column: 1 / -1; grid-row: 1; padding-top: 0; }
}

/* in-game NPC page: map (2/3) next to the 3D model (1/3) */
.igside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.igside > div > .panel { height: 100%; box-sizing: border-box; margin-top: 0; }
.igside .section { margin-top: 0; }
/* map and model on top of their panels, same height; titles and legends below them */
.igside > div > .panel { display: flex; flex-direction: column; }
.igside .leafletbox, .igside #igmodel { order: -1; height: 550px !important; margin: 0 0 10px 0 !important; flex: none; }
.igside #igmodel .mv-wrap { height: 100%; }
.igside #igmodel .mv-canvas { height: 100%; }
@media (max-width: 900px) { .igside { grid-template-columns: 1fr; } }

/* in-game texts: placeholders ($N...) as small tags, quest texts a size smaller */
.igph { font-size: 0.85em; padding: 0 4px; border-radius: 4px; background: var(--panel-2, #21262d); border: 1px solid var(--line, #30363d); color: var(--accent, #58a6ff); white-space: nowrap; }
.igquesttext .panel > div, .igquesttext .panel li { font-size: 13px; line-height: 1.5; }

/* sign-in box in the header (admin.js) */
.authbox { display: inline-flex; align-items: center; gap: 6px; }
.authuser { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.authuser img { width: 20px; height: 20px; border-radius: 50%; }

/* features given through permission groups (admin.js sets body.perm-<name>) */
body:not(.perm-world3d) .needs-world3d { display: none !important; }
body:not(.perm-ingame) .needs-ingame { display: none !important; }