* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh; }
#app { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { color: #c4a000; margin-bottom: 20px; text-align: center; }
h2 { color: #c4a000; margin: 16px 0 8px; }
h3 { color: #aaa; margin: 8px 0 4px; }

/* Upload */
#drop-zone { border: 2px dashed #555; border-radius: 12px; padding: 60px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
#drop-zone:hover, #drop-zone.dragover { border-color: #c4a000; background: rgba(196,160,0,0.05); }
.file-label { color: #c4a000; cursor: pointer; text-decoration: underline; }
.error { color: #ff4444; margin-top: 12px; text-align: center; }
#loading { text-align: center; margin-top: 12px; color: #c4a000; }
#progress-steps { margin-top: 8px; text-align: left; display: inline-block; font-size: 13px; }
.step { color: #888; padding: 2px 0; }
.step.done { color: #4caf50; }
.step.done::before { content: '✓ '; }
.step.active { color: #c4a000; }
.step.active::before { content: '⏳ '; }
.step.error { color: #ff4444; }
.step.error::before { content: '✗ '; }

/* Metadata */
#metadata { background: #16213e; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 24px; flex-wrap: wrap; }
#metadata .meta-item { display: flex; flex-direction: column; }
#metadata .meta-label { font-size: 11px; color: #888; text-transform: uppercase; }
#metadata .meta-value { font-size: 15px; font-weight: 600; }

/* Tabs */
#tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tab { background: #16213e; border: none; color: #888; padding: 10px 20px; cursor: pointer; border-radius: 6px 6px 0 0; font-size: 14px; }
.tab.active { background: #0f3460; color: #c4a000; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
th { background: #0f3460; color: #c4a000; text-align: left; padding: 8px 12px; font-size: 12px; text-transform: uppercase; cursor: pointer; user-select: none; white-space: nowrap; }
th:hover { background: #1a4a80; }
td { padding: 8px 12px; border-bottom: 1px solid #222; font-size: 13px; }
tr:hover td { background: rgba(196,160,0,0.05); }
tr.totals td { font-weight: 700; border-top: 2px solid #c4a000; background: #16213e; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.sort-arrow { margin-left: 4px; font-size: 10px; }

/* Bars */
.bar-container { height: 20px; background: #222; border-radius: 3px; overflow: hidden; display: flex; min-width: 100px; }
.bar-segment { height: 100%; transition: width 0.3s; }
.bar-direct { background: #4a9eff; }
.bar-buff { background: #ff9f43; }

/* Faction colors */
.faction-BloodAngels { color: #cc3333; }
.faction-Ultramarines { color: #3366cc; }
.faction-SpaceWolves { color: #6699cc; }
.faction-DarkAngels { color: #336633; }
.faction-BlackLegion { color: #666; }
.faction-Orks { color: #669933; }
.faction-Necrons { color: #33cc66; }
.faction-Tau { color: #cc9933; }
.faction-Tyranids { color: #993399; }
.faction-AdeptusMechanicus { color: #cc3300; }
.faction-Sisterhood { color: #cc6699; }
.faction-ThousandSons { color: #3399cc; }
.faction-DeathGuard { color: #669966; }
.faction-WorldEaters { color: #cc0000; }
.faction-Astra { color: #999933; }
.faction-Custodes { color: #ccaa00; }
.faction-BlackTemplars { color: #999; }
.faction-Eldar { color: #33cccc; }
.faction-Genestealers { color: #9966cc; }
.faction-EmperorsChildren { color: #cc66cc; }
.faction-LeaguesOfVotann { color: #cc6633; }

/* Turn cards */
.turn-card { background: #16213e; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.turn-header { padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.turn-header:hover { background: #1a3a5e; }
.turn-header h3 { margin: 0; color: #c4a000; }
.turn-total { font-size: 14px; color: #aaa; }
.turn-body { padding: 0 16px 12px; display: none; }
.turn-card.open .turn-body { display: block; }
.turn-card.open .turn-arrow { transform: rotate(90deg); }
.turn-arrow { transition: transform 0.2s; color: #888; }

/* Character action row */
.char-action-group { padding: 8px 0; border-bottom: 1px solid #1a1a2e; }
.char-action-group:last-child { border-bottom: none; }
.char-action { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.char-name { font-weight: 600; min-width: 120px; }
.ability-badge { background: #c4a000; color: #1a1a2e; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.normal-badge { background: #555; color: #ddd; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.crit-badge { background: #ff4444; color: #fff; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.crit-hit { color: #ff4444; font-weight: 700; }
.dmg-breakdown { font-size: 12px; color: #aaa; }
.buff-attr { color: #ff9f43; }

/* Character cards */
.char-card { background: #16213e; border-radius: 8px; margin-bottom: 12px; padding: 16px; }
.char-card.boss-card { border: 1px solid #c4a000; }
.char-card h3 { margin: 0 0 8px; font-size: 16px; }
.char-info { display: flex; flex-direction: column; gap: 8px; }
.char-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.char-stats .stat { font-size: 13px; color: #ccc; }
.char-stats .stat label { color: #888; font-size: 11px; text-transform: uppercase; margin-right: 4px; }
.char-weapons { display: flex; gap: 6px; flex-wrap: wrap; }
.weapon-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.weapon-badge.melee { background: #553300; color: #ffaa44; }
.weapon-badge.ranged { background: #003355; color: #44aaff; }
.char-traits { display: flex; gap: 4px; flex-wrap: wrap; }
.trait-badge { font-size: 11px; padding: 2px 6px; border-radius: 8px; background: #333; color: #aaa; }

/* Reset */
#reset-btn { display: block; margin: 20px auto; background: #0f3460; border: 1px solid #c4a000; color: #c4a000; padding: 10px 24px; border-radius: 6px; cursor: pointer; font-size: 14px; }
#reset-btn:hover { background: #1a4a80; }

/* Responsive */
@media (max-width: 768px) {
  #metadata { flex-direction: column; gap: 8px; }
  th, td { padding: 6px 8px; font-size: 12px; }
  .bar-container { min-width: 60px; }
}