/* Dark by default — this is a game tool, and PoE's palette is dark.
   Rarity colours match the game so gear reads at a glance. */
:root{
  --bg:#0a0806; --card:#15120e; --card2:#1c1813;
  --text:#e8e2d6; --dim:#8d8474; --line:rgba(255,255,255,.09);
  --accent:#d4a24c; --good:#5cc98a; --bad:#e0574f; --warn:#e8b44a;
  --normal:#c8c8c8; --magic:#8888ff; --rare:#ffff77; --unique:#af6025;
  --bar:rgba(10,8,6,.88);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--text);
  font:400 16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  display:flex; flex-direction:column;
}

.topbar{
  padding:calc(env(safe-area-inset-top) + 10px) 18px 9px;
  background:var(--bar); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); flex:none;
}
.topbar h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.02em}
.topbar .sub{font-size:12.5px;color:var(--accent);margin-top:1px;min-height:1.1em}

#scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:14px 13px 28px}

.tabbar{
  flex:none;display:flex;gap:2px;
  padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);
  background:var(--bar);backdrop-filter:blur(20px);border-top:1px solid var(--line);
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 0;border:0;background:none;cursor:pointer;color:var(--dim);
  font:500 10.5px/1 inherit;font-family:inherit;touch-action:manipulation}
.tab span{font-size:18px;line-height:1}
.tab.is-on{color:var(--accent)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-bottom:14px}
.card.pad{padding:15px}
h2.sec{font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);margin:18px 4px 8px;font-weight:600}
.card h2{font-size:16px;margin:0 0 8px}
.empty{color:var(--dim);text-align:center;padding:50px 20px;line-height:1.7}
.note{font-size:13px;line-height:1.55;color:var(--dim);margin:8px 0 0}
.status{margin:10px 0 0;font-size:13px;color:var(--dim);min-height:1.2em;text-align:center}

/* ── Headline tiles ─────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.tile .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.tile .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:2px;
  font-variant-numeric:tabular-nums}
.tile .x{font-size:11.5px;color:var(--dim);margin-top:1px}
.tile .x.bad{color:var(--bad);font-weight:600}
.tile.wide{grid-column:1/3}

/* ── Stat rows ──────────────────────────────────────────── */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.row:last-child{border-bottom:0}
.row .n{color:var(--dim)}
.row .v{font-variant-numeric:tabular-nums;text-align:right}
.row .v small{color:var(--dim);font-size:11.5px;margin-left:5px}
.v.good{color:var(--good)} .v.bad{color:var(--bad)} .v.warn{color:var(--warn)}

/* ── Gear ───────────────────────────────────────────────── */
.slot{background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:10px;overflow:hidden}
.slot>summary{padding:11px 14px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.slot>summary::-webkit-details-marker{display:none}
.slot .sname{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.slot .iname{font-size:15px;font-weight:600;line-height:1.25}
.slot .ibase{font-size:12.5px;color:var(--dim)}
.slot[open]>summary{border-bottom:1px solid var(--line);background:var(--card2)}
.rarity-NORMAL .iname{color:var(--normal)}
.rarity-MAGIC  .iname{color:var(--magic)}
.rarity-RARE   .iname{color:var(--rare)}
.rarity-UNIQUE .iname{color:var(--unique)}
.mods{padding:10px 14px 12px}
.mod{font-size:13.5px;line-height:1.5;color:#a5c4e8;padding:1px 0}
.mod.imp{color:#8aa9cc}
.mods .mod.imp:last-of-type{padding-bottom:8px;
  border-bottom:1px solid var(--line);margin-bottom:7px}
.mod .tg{font-size:10px;color:var(--accent);opacity:.8;margin-left:5px;
  text-transform:uppercase;letter-spacing:.05em}
.flags{margin-top:8px}
.flag{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bad);border:1px solid var(--bad);border-radius:4px;padding:1px 6px;margin-right:5px}
.meta{font-size:11.5px;color:var(--dim);margin-top:8px}
.raw{margin-top:9px}
.raw summary{font-size:11.5px;color:var(--dim);cursor:pointer;list-style:none}
.raw summary::-webkit-details-marker{display:none}
.raw summary::before{content:'▸ '}
.raw[open] summary::before{content:'▾ '}
.raw pre{margin:7px 0 0;padding:9px 10px;background:var(--bg);border-radius:7px;
  font:400 11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--dim);white-space:pre-wrap;overflow-wrap:anywhere;
  -webkit-user-select:text;user-select:text}

/* ── Skills ─────────────────────────────────────────────── */
.grp{background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:10px;padding:11px 14px 12px}
.grp.main{border-color:var(--accent)}
.grp .ghead{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:7px}
.grp .gname{font-size:15px;font-weight:600;color:var(--accent)}
.grp .tagm{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--bg);background:var(--accent);border-radius:4px;padding:2px 6px;font-weight:700}
.gem{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:2.5px 0}
.gem.sup{padding-left:14px;color:var(--dim);font-size:13px}
.gem .lv{font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px;white-space:nowrap}
.gem.off{opacity:.4;text-decoration:line-through}

/* ── Import ─────────────────────────────────────────────── */
textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--text);font:400 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  resize:vertical;-webkit-user-select:text;user-select:text}
textarea:focus{outline:2px solid var(--accent);border-color:transparent}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
button.primary{width:100%;margin-top:10px;padding:13px;border:0;border-radius:11px;
  background:var(--accent);color:#1a1206;font-size:16px;font-weight:700}
button.primary:active{opacity:.75}
.brow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.brow .bn{font-size:14.5px}
.brow .bd{font-size:11.5px;color:var(--dim)}
.brow.cur .bn{color:var(--accent);font-weight:600}
.bx{border:0;background:none;color:var(--dim);font-size:19px;padding:2px 4px}
.pick{flex:1;text-align:left;border:0;background:none;color:inherit;font:inherit;padding:0}

details#allStatsWrap summary{font-size:13.5px;color:var(--accent);cursor:pointer;
  list-style:none}
details#allStatsWrap summary::-webkit-details-marker{display:none}
details#allStatsWrap summary::before{content:'▸ '}
details#allStatsWrap[open] summary::before{content:'▾ '}
details#allStatsWrap .card{margin:12px -15px -15px;border:0;border-top:1px solid var(--line);
  border-radius:0}
details#allStatsWrap .row{font-size:13px;padding:7px 15px}