/* Zennlogs — dark analysis UI modelled on WarcraftLogs/WildStar Logs. */

:root {
  --bg: #0b0b0c;
  --bg-2: #111113;
  --panel: #141416;
  --row: #0e0e10;
  --row-alt: #151518;
  --row-hover: #1d2230;
  --head: #1b1b1f;
  --line: #2b2b31;
  --line-2: #3a3a42;
  --navy: #0d1a2b;
  --navy-2: #102438;
  --panel-head: #10142a;
  --panel-head-line: #2a3358;
  --text: #e3e3e6;
  --text-2: #b5b5bb;
  --muted: #85858d;
  --accent: #4aa3ff;
  --accent-2: #2f7fd6;
  --kill: #43d64b;
  --wipe: #e2554c;
  --gold: #e5b452;
  --band: rgba(122, 30, 120, .55);
  --band-bb: rgba(214, 140, 38, .22);
  --power: #e8c066;
  --condi: #c25cd0;
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-head: "Roboto Condensed", "Arial Narrow", var(--font);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: 500; margin: 0; }
img { image-rendering: auto; }
::selection { background: #2a4e7a; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 22px; height: 46px; padding: 0 16px;
  background: #050506; border-bottom: 1px solid #222;
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 8px; font: 700 18px var(--font-head); letter-spacing: .5px; text-transform: uppercase; }
.brand img { width: 28px; height: 28px; }
.search { display: flex; flex: 0 1 560px; height: 30px; }
.search input {
  flex: 1; min-width: 0; background: #2a2a2e; border: 1px solid #3a3a40; border-right: 0;
  border-radius: 3px 0 0 3px; padding: 0 12px; outline: none;
}
.search input:focus { border-color: var(--accent-2); }
.search button { width: 36px; border: 0; border-radius: 0 3px 3px 0; background: #1f3d63; color: #cfe3ff; }
.topnav { display: flex; gap: 18px; font-size: 16px; }
.topnav a { color: var(--text-2); padding: 12px 0; border-bottom: 2px solid transparent; }
.topnav a.active { color: #fff; border-color: var(--accent); }
.queue-pill {
  margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 12px;
  background: #1d2a3d; color: #bcd7f7; border: 1px solid #2d4466; white-space: nowrap;
}
.queue-pill .spin { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 2px solid #9cc4f5; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

main { min-height: calc(100vh - 46px); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 16px; }
.page { padding: 20px 0 60px; }
.muted { color: var(--muted); }
.kill { color: var(--kill); }
.wipe { color: var(--wipe); }
.cm { color: var(--gold); font-weight: 700; font-size: 11px; letter-spacing: .5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* icons */
.ic { width: 18px; height: 18px; vertical-align: -4px; border-radius: 2px; object-fit: cover; display: inline-block; }
.ic-sm { width: 14px; height: 14px; vertical-align: -2px; }
.ic-lg { width: 36px; height: 36px; border-radius: 4px; }
.ic-xl { width: 56px; height: 56px; border-radius: 6px; }
.ic-missing { background: radial-gradient(circle at 35% 30%, #3a3f4d, #1d2027); border-radius: 50%; display: inline-block; }
.prof { width: 18px; height: 18px; vertical-align: -4px; }

/* ---------- report header (fight pages) ---------- */
.report-head { background: #08080a; border-bottom: 1px solid #1f1f24; }
.report-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.report-title { font-size: 17px; }
.report-sub { font-size: 13px; color: var(--text-2); }
.report-sub b { color: #fff; font-weight: 500; }
.head-actions { display: flex; gap: 10px; align-items: center; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; min-height: 34px;
  background: #1c1c20; border: 1px solid #34343b; border-radius: 3px; color: var(--text);
}
.chip-btn:hover { background: #24242a; }
.chip-btn b { font-size: 16px; }

.fight-bar { background: linear-gradient(180deg, var(--navy-2), var(--navy)); border-bottom: 1px solid #1d3550; }
.fight-bar .wrap { display: flex; align-items: stretch; justify-content: space-between; min-height: 68px; }
.fight-pickers { display: flex; gap: 40px; align-items: center; }
.picker { position: relative; }
.picker > button { background: none; border: 0; padding: 0; text-align: left; }
.picker .pk-main { font-size: 17px; color: #fff; display: flex; align-items: center; gap: 6px; }
.picker .pk-main::after { content: ""; border: 4px solid transparent; border-top-color: #ddd; margin-top: 5px; }
.picker .pk-sub { font-size: 13px; }
.menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 260px; max-height: 70vh; overflow: auto;
  background: #16181d; border: 1px solid #343842; border-radius: 4px; box-shadow: 0 10px 30px #000a; padding: 4px 0;
}
.menu a, .menu button.mi {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; background: none; border: 0; text-align: left; white-space: nowrap;
}
.menu a:hover, .menu button.mi:hover { background: #222838; }
.menu .sel { background: #1d2a40; }
.menu .mh { padding: 8px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.view-tabs { display: flex; }
.view-tabs a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 90px;
  color: var(--text-2); font-size: 13px; border-bottom: 2px solid transparent;
}
.view-tabs a svg { width: 22px; height: 22px; }
.view-tabs a.active { color: #fff; border-bottom-color: #fff; background: #ffffff08; }
.view-tabs a:hover { color: #fff; }

.filter-bar { border-bottom: 1px solid #1f1f24; background: #050506; }
.filter-bar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 58px; gap: 16px; }
.filter-bar .picker .pk-main { font-size: 16px; }
.filter-bar .pk-sub { color: var(--text-2); }
.filter-bar .pk-sub b { color: #fff; font-weight: 500; }

.tabs { background: #141416; border-bottom: 1px solid #26262c; }
.tabs .wrap { display: flex; gap: 2px; overflow-x: auto; }
.tabs a { padding: 10px 13px 9px; color: var(--text-2); font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: #fff; }
.tabs a.active { color: #fff; border-bottom-color: #fff; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid #2c3049; margin-top: 14px; }
.panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; background: var(--panel-head); border-bottom: 1px solid var(--panel-head-line); font-size: 14px;
}
.panel-h .opts { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.panel-b { padding: 8px 10px; }
.panel-b.flush { padding: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-2 > .panel { min-width: 0; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

.seg { display: inline-flex; border: 1px solid #353a4f; border-radius: 3px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 3px 10px; color: var(--text-2); font-size: 12.5px; }
.seg button + button { border-left: 1px solid #353a4f; }
.seg button.on { background: #24304f; color: #fff; }
.toggle-link { background: none; border: 0; color: var(--text-2); font-size: 12.5px; padding: 0; border-bottom: 1px solid transparent; }
.toggle-link.on { color: #fff; border-bottom-color: #fff; }
select.inp, input.inp {
  background: #1d1f26; border: 1px solid #353946; border-radius: 3px; padding: 4px 8px; font-size: 13px;
}

/* ---------- chart ---------- */
.chart { position: relative; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; padding: 4px 6px 2px; font-size: 11.5px; }
.chart-legend .lg { background: none; border: 0; padding: 0; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .lg i { width: 14px; height: 2px; display: inline-block; }
.chart-legend .lg.off { opacity: .35; }
.chart-body { position: relative; }
.chart svg { display: block; width: 100%; }
.chart .grid { stroke: #2a2a30; stroke-width: 1; }
.chart .ylab, .chart .xlab { fill: #d8d8dc; font-size: 11px; }
.chart .band { fill: var(--band); }
.chart .band.breakbar { fill: var(--band-bb); }
.chart .marker { stroke: #ffffff30; stroke-dasharray: 3 3; }
.chart .marker-lab { fill: #9aa; font-size: 10px; }
.chart .line { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.chart .line.dash { stroke-dasharray: 4 3; }
.chart .area { opacity: .55; stroke: none; }
.chart .cross { stroke: #ffffff70; stroke-width: 1; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 160px; max-width: 280px;
  background: #0d0f14f2; border: 1px solid #39405a; border-radius: 3px; padding: 6px 8px; font-size: 12px;
}
.chart-tip .tt-time { color: var(--muted); margin-bottom: 3px; }
.chart-tip div { display: flex; align-items: center; gap: 6px; }
.chart-tip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-tip b { margin-left: auto; padding-left: 12px; font-weight: 500; }

/* ---------- tables ---------- */
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th {
  background: var(--head); color: #eee; font-weight: 500; padding: 6px 8px; border: 1px solid var(--line);
  text-align: center; white-space: nowrap; position: sticky; top: 46px; z-index: 2;
}
table.t th.sortable { cursor: pointer; user-select: none; }
table.t th.sorted::after { content: " ▾"; color: var(--accent); }
table.t th.sorted.asc::after { content: " ▴"; }
table.t td { padding: 4px 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); white-space: nowrap; }
table.t tbody tr { background: var(--row); }
table.t tbody tr:nth-child(even) { background: var(--row-alt); }
table.t tbody tr:hover { background: var(--row-hover); }
table.t tbody tr.clickable { cursor: pointer; }
table.t tbody tr.selected { background: #1c2a44; }
table.t tfoot td { background: var(--head); font-weight: 500; padding: 6px 8px; border: 1px solid var(--line); }
table.t td.name { min-width: 170px; }
table.t td.name .ic, table.t td.name .prof { margin-right: 6px; }
table.t .sub { color: var(--muted); font-size: 12px; }
td.bar-cell { width: 45%; min-width: 220px; }
.bar { display: flex; align-items: center; gap: 8px; }
.bar .pct { width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.bar .track { flex: 1; height: 14px; position: relative; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; }
.bar .fill.alt { opacity: .55; }
.bar .amt { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.dps { color: #b6f08d; font-variant-numeric: tabular-nums; }
.plus { width: 26px; text-align: center; color: var(--text-2); }
.tag {
  display: inline-block; font-size: 10.5px; padding: 0 5px; border-radius: 2px; margin-left: 6px; vertical-align: 1px;
  background: #24304a; color: #b9d0f5; letter-spacing: .3px;
}
.tag.q { background: #3c2c12; color: #ffcf76; }
.tag.a { background: #32173a; color: #e6a3ff; }
.tag.condi { background: #2c1636; color: #d996ef; }
.tag.power { background: #33290f; color: #f0d27a; }
.tag.cmd { background: #3a2f12; color: #f3d06e; }
.tag.heal { background: #15301f; color: #5fd38d; }

/* parse-style colours (percentile within your own logs) */
.rk-grey { color: #888; } .rk-green { color: #1eff00; } .rk-blue { color: #0070ff; }
.rk-purple { color: #a335ee; } .rk-orange { color: #ff8000; } .rk-pink { color: #e268a8; } .rk-gold { color: #e5cc80; }

/* ---------- composition ---------- */
.comp { width: 100%; border-collapse: collapse; }
.comp td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.comp td:first-child { width: 110px; color: var(--text); white-space: nowrap; }
.comp .who { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.comp .who a { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- reports list ---------- */
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.page-title h1 { font-size: 24px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 3px;
  background: #1f3d63; border: 1px solid #2d5a8f; color: #e8f2ff; font-size: 13.5px;
}
.btn:hover { background: #26507f; }
.btn.ghost { background: #1b1c21; border-color: #34363f; color: var(--text); }
.btn.ghost:hover { background: #24262d; }
.btn:disabled { opacity: .5; cursor: default; }

.report-list { display: flex; flex-direction: column; gap: 10px; }
.report-card {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 12px 16px;
  background: var(--panel); border: 1px solid #262833; border-left: 3px solid #2f7fd6;
}
.report-card:hover { background: #181b24; border-color: #33405e; border-left-color: var(--accent); }
.report-card h3 { font-size: 16px; color: #fff; }
.report-card .meta { font-size: 12.5px; color: var(--text-2); display: flex; gap: 14px; flex-wrap: wrap; }
.report-card .bosses { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.report-card .boss { position: relative; }
.report-card .boss img, .report-card .boss .ic-missing { width: 34px; height: 34px; border-radius: 4px; border: 1px solid #333; display: block; }
.report-card .boss.wiped img { filter: grayscale(1) brightness(.55); }
.report-card .boss .cmb { position: absolute; right: -3px; bottom: -3px; font-size: 9px; background: #000; color: var(--gold); padding: 0 2px; border-radius: 2px; }
.report-card .score { text-align: right; font-size: 13px; }
.report-card .score b { font-size: 20px; font-weight: 500; }

.empty {
  padding: 50px 20px; text-align: center; color: var(--text-2); border: 1px dashed #333a4a; background: #0f1015; border-radius: 4px;
}
.empty h2 { color: #fff; font-size: 20px; margin-bottom: 8px; }

/* ---------- report (fight list) ---------- */
.fight-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.fight-group { background: var(--panel); border: 1px solid #262833; }
.fight-group-h { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: #12162a; border-bottom: 1px solid #262c45; }
.fight-group-h .ic-lg { border: 1px solid #444; }
.fight-group-h .nm { font-size: 15px; color: #fff; }
.fight-group-h .sub { font-size: 12px; color: var(--muted); }
.pulls { display: flex; flex-direction: column; }
.pull { display: grid; grid-template-columns: 26px 1fr 110px 70px; gap: 10px; align-items: center; padding: 5px 10px; border-top: 1px solid #1c1d24; font-size: 13px; }
.pull:hover { background: var(--row-hover); }
.pull .n { color: var(--muted); text-align: right; }
.pull .hp { height: 8px; background: #2a1414; border-radius: 1px; position: relative; overflow: hidden; }
.pull .hp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #a7302a, #e2554c); }
.pull.kill .hp { background: #12301a; }
.pull.kill .hp i { background: linear-gradient(90deg, #2a8d39, #43d64b); }
.pull .when { color: var(--muted); text-align: right; }

/* ---------- deaths ---------- */
.death { border-top: 1px solid var(--line); }
.death-h { display: grid; grid-template-columns: 70px 220px 1fr 90px; gap: 10px; align-items: center; padding: 6px 10px; cursor: pointer; }
.death-h:hover { background: var(--row-hover); }
.death-b { padding: 0 10px 10px 90px; display: none; }
.death.open .death-b { display: block; }
.death-b table { width: 100%; max-width: 900px; }

/* ---------- casts timeline ---------- */
.tl { position: relative; overflow-x: auto; border: 1px solid var(--line); background: #0c0c0e; }
.tl-inner { position: relative; }
.tl-axis { position: sticky; top: 0; height: 22px; border-bottom: 1px solid var(--line); background: #141416; z-index: 3; }
.tl-axis span { position: absolute; top: 4px; font-size: 11px; color: var(--text-2); transform: translateX(-50%); }
.tl-row { position: relative; height: 34px; border-bottom: 1px solid #1a1a1f; }
.tl-row:nth-child(even) { background: #101013; }
.tl-label {
  position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 6px; width: 190px; height: 100%;
  padding: 0 8px; background: #141416; border-right: 1px solid var(--line); font-size: 13px; overflow: hidden;
}
.tl-cast { position: absolute; top: 6px; height: 22px; }
.tl-cast img, .tl-cast .ic-missing { width: 20px; height: 20px; border-radius: 2px; border: 1px solid #000; display: block; position: relative; z-index: 1; }
.tl-cast .dur { position: absolute; left: 0; top: 19px; height: 3px; background: #4aa3ffaa; }
.tl-cast.instant img { outline: 1px solid #e5b45277; }
.tl-cast.aa img { opacity: .55; width: 16px; height: 16px; margin-top: 2px; }
.tl-band { position: absolute; top: 22px; bottom: 0; background: rgba(122, 30, 120, .22); pointer-events: none; }
.tl-zoom { display: flex; align-items: center; gap: 8px; }
.tl-row.enemy .tl-label { background: #1c1214; }
.tl-label { white-space: nowrap; }
.tl-label .tl-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-row.thin { height: 24px; }
.tl-row.thin .tl-label { font-size: 12px; }
.tl-buff { position: absolute; top: 6px; height: 12px; background: #3c7fd0aa; border-left: 1px solid #7fb6f0; font-size: 9.5px; line-height: 12px; color: #fff; padding-left: 2px; overflow: hidden; }
.tl-mark { position: absolute; top: 2px; bottom: 2px; width: 3px; margin-left: -1px; z-index: 1; }
.tl-mark.down { background: #ffb347; }
.tl-mark.death { background: #ff5d5d; }

/* ---------- events ---------- */
.ev-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ev-filter { margin-left: auto; min-width: 220px; background: #101013; border: 1px solid #353a4f; border-radius: 3px; color: var(--text); padding: 4px 8px; font-size: 12.5px; }
.ev-nav { display: flex; align-items: center; gap: 14px; padding: 6px 10px; }
.ev-nav button[disabled] { opacity: .35; cursor: default; }
.ev-table th { text-align: left; }
.ev-table td { padding-top: 3px; padding-bottom: 3px; }
.ev-table .ic { vertical-align: -4px; }
.ev-phase { color: #c58bff; }
.ev-dmg { color: #ff8b80; font-variant-numeric: tabular-nums; }
.ev-damage td:first-child { color: #ff8b80; }

/* ---------- buff uptime bars (timeline) ---------- */
.uptime-row { display: grid; grid-template-columns: 220px 70px 1fr; align-items: center; gap: 10px; padding: 3px 10px; border-top: 1px solid #1a1a1f; font-size: 13px; }
.uptime-track { position: relative; height: 14px; background: #1a1a20; }
.uptime-track i { position: absolute; top: 0; bottom: 0; background: #3c7fd0; }

/* ---------- mechanics matrix ---------- */
.mech th.rot { writing-mode: vertical-rl; transform: rotate(180deg); height: 120px; padding: 6px 4px; font-weight: 400; }
.mech td.c { text-align: center; font-variant-numeric: tabular-nums; }
.mech td.c.z { color: #444; }
.mech td.c.hot { color: #ffb2a8; background: #3a1414aa; }
.sev-0 { color: #ff8b80; } .sev-1 { color: #ffbe6e; } .sev-2 { color: #e2e27a; } .sev-3 { color: #9fd4ff; } .sev-4 { color: #aaa; }

/* ---------- replay ---------- */
.replay { display: grid; grid-template-columns: 1fr 360px; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .replay { grid-template-columns: 1fr; } }
.replay-stage { position: relative; background: #050506; border: 1px solid #262833; }
.replay-stage canvas { display: block; width: 100%; height: auto; max-height: calc(100vh - 250px); object-fit: contain; background: #050506; }
.replay-controls { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #0d0d10; border-top: 1px solid #262833; font-size: 13px; flex-wrap: wrap; }
.replay-controls .play { width: 32px; height: 28px; background: #1f3d63; border: 1px solid #2d5a8f; border-radius: 3px; }
.replay-scrub { position: relative; height: 26px; background: #1a1012; cursor: pointer; border-top: 1px solid #262833; }
.replay-scrub .elapsed { position: absolute; left: 0; top: 0; bottom: 0; background: #5a1c22aa; pointer-events: none; }
.replay-scrub .rb { position: absolute; top: 0; bottom: 0; background: rgba(122, 30, 120, .7); pointer-events: none; }
.replay-scrub .head { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.frames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-content: start; }
.frame { position: relative; height: 26px; background: #1a1a1e; border: 1px solid #2c2c33; font-size: 12px; overflow: hidden; }
.frame .hpb { position: absolute; inset: 0 auto 0 0; opacity: .7; }
.frame .bar2 { position: absolute; inset: auto auto 0 0; height: 3px; background: #e0e0e0aa; }
.frame span { position: relative; padding: 4px 6px; display: flex; gap: 6px; align-items: center; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.frame.down .hpb { background: #b02020 !important; }
.frame.dead { opacity: .45; }
.boss-frame { background: #3a0c0c; border: 1px solid #6a2020; padding: 4px 8px; font-size: 12.5px; margin-bottom: 8px; position: relative; }
.boss-frame .hpb { position: absolute; inset: 0 auto 0 0; background: #8a1a1a; }
.boss-frame span { position: relative; display: flex; justify-content: space-between; }

/* ---------- upload ---------- */
.dropzone {
  display: block; cursor: pointer; margin-top: 4px;
  border: 2px dashed #3a4a6a; border-radius: 6px; padding: 40px 20px; text-align: center; background: #0f1219; color: var(--text-2);
}
.dropzone.over { border-color: var(--accent); background: #13203a; }
.dropzone b { color: #fff; font-size: 18px; display: block; margin-bottom: 6px; font-weight: 500; }
.drop-overlay {
  position: fixed; inset: 0; z-index: 100; background: #050a14d9; display: grid; place-items: center;
  font-size: 26px; color: #fff; border: 3px dashed var(--accent);
}
.jobs td.state-Done { color: var(--kill); }
.jobs td.state-Failed { color: var(--wipe); }
.jobs td.state-Parsing, .jobs td.state-Queued { color: #9cc4f5; }
.jobs td.state-Duplicate, .jobs td.state-Skipped { color: var(--muted); }

.notice { padding: 10px 14px; border: 1px solid #3b3320; background: #1d1910; color: #e8d7a8; border-radius: 3px; font-size: 13px; margin-top: 14px; }
.loading { padding: 80px 0; text-align: center; color: var(--text-2); }
.loading .spin { display: inline-block; width: 22px; height: 22px; border: 3px solid #4aa3ff; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 10px; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { background: var(--panel); border: 1px solid #262833; padding: 10px 12px; }
.tile .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tile .v { font-size: 22px; margin-top: 2px; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .topbar { gap: 10px; }
  .search { display: none; }
  .fight-bar .wrap, .filter-bar .wrap { flex-direction: column; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .view-tabs a { min-width: 70px; padding: 6px 0; }
  .fight-groups { grid-template-columns: 1fr; }
}

th.buff-h { font-weight: 400; }
th.buff-h small { display: block; font-size: 10.5px; color: var(--text-2); margin-top: 2px; }

@media (max-width: 900px) {
  .panel-b.flush { overflow-x: auto; }
  table.t th { position: static; }
  .report-head .wrap { flex-direction: column; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .panel-h { flex-wrap: wrap; }
}

/* ---------- gate ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, #13203a 0%, var(--bg) 60%); }
.gate-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 28px 26px;
  background: var(--panel); border: 1px solid #2c3049; border-top: 3px solid var(--gold); }
.gate-card .brand { justify-content: center; margin-bottom: 6px; }
.gate-q { font-size: 16px; color: #fff; text-align: center; line-height: 1.5; }
.gate-card .inp { font-size: 16px; padding: 9px 12px; text-align: center; }
.gate-card .inp[aria-invalid="true"] { border-color: var(--wipe); }
.gate-err { color: var(--wipe); text-align: center; font-size: 13.5px; }
.gate-card .btn { justify-content: center; padding: 9px 14px; font-size: 15px; }