:root { --bg:#f6f3ec; --card:#fff; --ink:#2b2a26; --mute:#7a766b; --line:#e4dfd2; --accent:#3f7d4e; --accent2:#c98a1b; --bad:#b44; --chip:#efeadd; }
@media (prefers-color-scheme: dark) { :root { --bg:#1d1f1b; --card:#262922; --ink:#ece9df; --mute:#9a9688; --line:#38392f; --accent:#6fbf82; --accent2:#e0a93c; --bad:#e07070; --chip:#30332b; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 system-ui,Segoe UI,sans-serif; overflow-x:hidden; }
a { color:var(--accent); }
header { padding:16px 16px 4px; max-width:1200px; margin:0 auto; }
h1 { margin:0 0 4px; font-size:22px; }
h2 { font-size:16px; margin:0 0 10px; }
.sub { color:var(--mute); margin:0; }
main { max-width:1200px; margin:0 auto; padding:12px 16px 60px; display:grid; gap:16px; }
main > *, .grid2 > * { min-width:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:16px; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; color:var(--mute); font-weight:600; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll table { min-width:max-content; }
.scroll td { white-space:nowrap; }
input[type=number], select { background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; min-height:34px; }
input[type=number] { width:68px; }
input[type=checkbox] { flex:none; width:20px; height:20px; min-width:20px; min-height:20px; margin:0; padding:0; accent-color:var(--accent); vertical-align:middle; }
label.inline { display:inline-flex; gap:6px; align-items:center; margin-right:14px; margin-bottom:6px; }
#settings { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 14px; }
#settings > label.inline { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin:0; font-size:13px; color:var(--mute); }
#settings > label.inline select, #settings > label.inline input[type=number] { width:100%; color:var(--ink); font-size:15px; }
#settings > label.inline:has(> input[type=checkbox]) { flex-direction:row; align-items:center; gap:8px; color:var(--ink); font-size:15px; }
#settings > .wide { grid-column:1/-1; }
#settings > label.wide select { max-width:420px; }
.quals { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; font-size:14px; }
.quals label { text-transform:uppercase; font-weight:600; font-size:13px; display:inline-flex; gap:5px; align-items:center; }
#depths { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 12px; }
#depths label.inline { margin:0; }
.who { display:flex; gap:8px; align-items:center; }
.trait { font-size:12px; color:var(--mute); }
button { background:var(--accent); color:#fff; border:0; border-radius:10px; padding:11px 22px; font:inherit; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); padding:6px 12px; font-weight:400; }
button:disabled { opacity:.5; cursor:wait; }
.slot-h { margin:12px 0 4px; font-weight:600; font-size:13px; }
.best { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; background:var(--accent); color:#fff; margin-left:6px; vertical-align:middle; }
.tag.warn { background:var(--accent2); }
.mute { color:var(--mute); }
.big { font-size:22px; font-weight:700; color:var(--accent); line-height:1.2; }
.sub2 { color:var(--mute); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.chip { background:var(--chip); border-radius:99px; padding:3px 10px; font-size:12.5px; color:var(--mute); }
.chip b { color:var(--ink); }
ul.gear { margin:4px 0 0; padding-left:0; list-style:none; }
ul.gear li { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 0; }
li.mem { align-items:flex-start; flex-wrap:nowrap; }
.row { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
progress { width:200px; max-width:100%; height:8px; }
details > summary { cursor:pointer; font-weight:600; padding:2px 0; }
.q-common{color:#797979} .q-rare{color:#f9ba39} .q-epic{color:#a85dd8} .q-holy{color:#51e1ec}
img.ico { width:22px; height:22px; object-fit:contain; vertical-align:middle; flex:none; }
img.ico.lg { width:34px; height:34px; }
img.ico.ring { width:30px; height:30px; border-radius:50%; border:2px solid; padding:1px; background:var(--bg); }
img.ico.ring.r-common{border-color:#797979} img.ico.ring.r-rare{border-color:#f9ba39} img.ico.ring.r-epic{border-color:#a85dd8} img.ico.ring.r-holy{border-color:#51e1ec}
.banner { width:100%; height:200px; object-fit:cover; object-position:center 50%; border-radius:12px; display:block; margin-bottom:10px; }
.gear-wrap td:first-child, .gear-wrap th:first-child { width:36px; }
.low { color:var(--bad); }
#runbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
@media (max-width: 640px) {
  body { font-size:14.5px; }
  header { padding:10px 12px 0; } main { padding:10px 12px 40px; gap:12px; }
  .card { padding:12px; border-radius:10px; }
  h1 { font-size:19px; }
  .banner { height:90px; }
  input[type=number], select { font-size:16px; }
  input[type=number] { width:62px; }
  th, td { padding:6px 5px; }
  #runbar button { width:100%; padding:14px; }
  #runbar progress { width:100%; }
  .big { font-size:20px; }
  .gear-wrap table { min-width:0; }
  .gear-wrap tr { display:grid; grid-template-columns:repeat(4,1fr); gap:4px 6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
  .gear-wrap th, .gear-wrap td { border:0; padding:0; }
  .gear-wrap tr.gs, .gear-wrap tr.gs th { display:block; }
  .gear-wrap tr.gs { grid-column:1/-1; padding:10px 0 2px; }
  .gear-wrap tr.gh th:nth-child(-n+2) { display:none; }
  .gear-wrap tr:not(.gs):not(.gh) td:nth-child(1) { grid-column:1; }
  .gear-wrap tr:not(.gs):not(.gh) td:nth-child(2) { grid-column:2/-1; font-weight:600; }
  .gear-wrap td:nth-child(n+3) { display:flex; flex-direction:column; align-items:center; gap:3px; }
  .gear-wrap td input[type=number] { width:100%; min-width:0; text-align:center; }
}
.credit { text-align:center; color:var(--mute); font-size:13px; padding:4px 0 0; }