:root {
  --bg: #0b1119;
  --panel: #121c28;
  --panel-2: #172332;
  --panel-3: #1d2c3e;
  --text: #f5f8fc;
  --muted: #9aabbd;
  --line: #2b3d50;
  --accent: #f0c94d;
  --accent-2: #69b7ff;
  --good: #77d39b;
  --bad: #ff7a7a;
  --warn: #ffc66d;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(105,183,255,.08), transparent 30rem),
    radial-gradient(circle at 90% 12%, rgba(240,201,77,.07), transparent 28rem),
    var(--bg);
  color: var(--text);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d1620;
  color: var(--text);
  padding: .72rem .8rem;
  outline: none;
}
input:focus, select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(105,183,255,.12); }
.app-shell { max-width: 1700px; margin: 0 auto; padding: 24px; }
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.04em; }
h2 { margin-bottom: 0; font-size: 1.25rem; }
h3 { margin-bottom: .6rem; }
.subtitle, .muted, .tiny-note { color: var(--muted); }
.subtitle { margin-bottom: 0; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .72rem; letter-spacing: .16em; font-weight: 800; }
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent), var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.button {
  border: 1px solid transparent;
  border-radius: 11px;
  padding: .72rem 1rem;
  font-weight: 750;
  color: var(--text);
  background: var(--panel-3);
}
.button:hover { filter: brightness(1.08); }
.button.primary { color: #16130a; background: var(--accent); }
.button.secondary { border-color: var(--line); }
.button.danger { background: rgba(255,122,122,.12); border-color: rgba(255,122,122,.35); color: #ffd3d3; }
.button.mini { padding: .55rem .7rem; }
.button:disabled { opacity: .38; cursor: not-allowed; filter: none; }
.file-button input { display: none; }
.top-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.trainer-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) 110px 120px 120px auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  margin-bottom: 16px;
}
.field { display: grid; gap: 5px; margin-bottom: 12px; }
.field label, .readout span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.compact-field { margin-bottom: 0; }
.numeric-field input { font-variant-numeric: tabular-nums; }
.readout { min-height: 45px; display: flex; flex-direction: column; justify-content: center; padding: 0 .8rem; border-left: 1px solid var(--line); }
.readout strong { font-size: 1.2rem; }
.rest-controls { display: flex; justify-content: flex-end; gap: 8px; }
.team-layout { display: grid; grid-template-columns: 330px minmax(540px, 1fr) 330px; gap: 16px; align-items: start; }
.team-rail, .active-panel, .combat-side { min-height: 690px; }
.team-rail, .combat-side { padding: 16px; }
.active-panel { padding: 18px; }
.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 14px; }
.tiny-note { font-size: .7rem; text-align: right; }
.team-slots { display: grid; gap: 9px; }
.team-slot {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}
.team-slot:hover { border-color: #48627d; }
.team-slot.selected { outline: 2px solid rgba(105,183,255,.6); }
.team-slot.active { border-color: var(--accent); }
.team-slot.fainted { opacity: .56; }
.mon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0d1620;
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: .78rem;
}
.slot-copy { min-width: 0; }
.slot-name { display: flex; gap: 7px; align-items: center; font-weight: 850; }
.slot-meta { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.hp-mini { height: 5px; border-radius: 10px; overflow: hidden; background: #091018; margin-top: 7px; }
.hp-mini > span { display: block; height: 100%; background: var(--good); }
.slot-status { font-size: .66rem; font-weight: 900; letter-spacing: .08em; color: var(--accent); }
.slot-status.fainted { color: var(--bad); }
.editor-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.editor-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.editor-title-row h2 { font-size: 2rem; letter-spacing: -.035em; }
.status-pill, .type-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .7rem;
  font-weight: 800;
  background: var(--panel-2);
}
.status-pill.active { border-color: rgba(240,201,77,.5); color: var(--accent); }
.status-pill.fainted { border-color: rgba(255,122,122,.45); color: var(--bad); }
.editor-actions { display: flex; gap: 8px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
.summary-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; padding: 11px; }
.summary-card span { display:block; color: var(--muted); font-size: .7rem; font-weight: 750; }
.summary-card strong { display:block; margin-top: 3px; font-size: 1.15rem; }
.hp-block { background: #0d1620; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 15px; }
.hp-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.hp-values { font-size: 1.25rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.hp-bar { height: 12px; border-radius: 20px; overflow:hidden; background:#060b10; margin-top: 10px; }
.hp-fill { height:100%; background: var(--good); transition: width .2s ease; }
.hp-actions { display:flex; gap:6px; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(72px,1fr)); gap: 8px; margin-bottom: 16px; }
.stat-card { border:1px solid var(--line); border-radius: 12px; padding: 9px; background: var(--panel-2); }
.stat-card label { display:block; font-size:.66rem; color:var(--muted); font-weight:800; text-transform:uppercase; }
.stat-card input { margin-top:5px; padding:.55rem; }
.stat-derived { display:flex; justify-content:space-between; margin-top:6px; font-size:.69rem; color:var(--muted); }
.moves-heading { display:flex; justify-content:space-between; align-items:end; gap:8px; margin: 6px 0 10px; }
.moves-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.move-card { border:1px solid var(--line); border-radius:14px; background:var(--panel-2); padding:12px; }
.move-top { display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; margin-bottom:8px; }
.move-name { font-weight:850; }
.move-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px; }
.move-tag { font-size:.66rem; border:1px solid var(--line); border-radius:999px; padding:.2rem .45rem; color:var(--muted); }
.move-fields { display:grid; grid-template-columns: 1.3fr .8fr .8fr; gap:7px; }
.move-fields .field { margin-bottom:8px; }
.move-fields input, .move-fields select { padding:.55rem; }
.move-preview { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#0d1620; border-radius:10px; padding:8px; margin: 2px 0 8px; font-size:.74rem; }
.move-preview strong { color:var(--accent); }
.use-move { width:100%; }
.fainted-overlay { border:1px dashed rgba(255,122,122,.45); color:#ffd0d0; background:rgba(255,122,122,.06); border-radius:12px; padding:12px; margin-bottom:12px; }
.target-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.inline-inputs { display:grid; grid-template-columns:1fr auto; gap:7px; }
.combat-log-header { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.text-button { border:0; background:transparent; color:var(--accent-2); padding:4px; }
.combat-log { height: 390px; overflow:auto; border-top:1px solid var(--line); padding-top:9px; display:grid; align-content:start; gap:8px; }
.log-empty { color:var(--muted); font-size:.8rem; padding:12px 0; }
.log-entry { border-left:3px solid var(--line); background:var(--panel-2); border-radius:8px; padding:9px 10px; font-size:.78rem; line-height:1.45; }
.log-entry.hit { border-left-color:var(--good); }
.log-entry.miss { border-left-color:var(--bad); }
.log-entry.system { border-left-color:var(--accent-2); }
.log-entry strong { color:var(--text); }
.log-entry .math { color:var(--muted); }
.rules-summary { margin-top:16px; padding:16px; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.rule-chips { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.rule-chips span { border:1px solid var(--line); border-radius:999px; padding:.42rem .7rem; background:var(--panel-2); color:var(--muted); font-size:.72rem; }
.modal { width:min(760px, calc(100vw - 30px)); border:0; padding:0; background:transparent; color:var(--text); }
.modal::backdrop { background:rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.modal-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow); }
.modal-header { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
.icon-button { border:1px solid var(--line); background:var(--panel-2); color:var(--text); width:36px; height:36px; border-radius:50%; font-size:1.35rem; }
.settings-grid { display:grid; gap:8px; }
.setting-row { display:grid; grid-template-columns:1fr 90px; gap:14px; align-items:center; padding:11px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; }
.setting-row strong, .setting-row small { display:block; }
.setting-row small { color:var(--muted); margin-top:3px; line-height:1.35; }
.checkbox-row input { width:24px; height:24px; justify-self:end; }
.formula-box { margin-top:12px; padding:12px; border:1px dashed var(--line); border-radius:12px; background:#0d1620; }
.formula-box p { margin: 5px 0; color:var(--muted); font-size:.78rem; }
.formula-box strong { color:var(--text); }
.modal-actions { display:flex; justify-content:space-between; gap:8px; margin-top:14px; }
.small-modal { width:min(520px, calc(100vw - 30px)); }
.rest-choice-list { display:grid; gap:8px; }
.rest-choice { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--panel-2); color:var(--text); text-align:left; }
.rest-choice:hover { border-color:var(--accent-2); }
.rest-choice:disabled { opacity:.4; }
.rest-choice small { color:var(--muted); display:block; margin-top:2px; }
@media (max-width: 1180px) {
  .team-layout { grid-template-columns: 280px 1fr; }
  .combat-side { grid-column: 1 / -1; min-height: auto; }
  .combat-log { height:260px; }
}
@media (max-width: 800px) {
  .app-shell { padding:14px; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .top-actions { justify-content:flex-start; }
  .trainer-strip { grid-template-columns: 1fr 90px 100px; }
  .rest-controls { grid-column:1/-1; justify-content:flex-start; }
  .team-layout { grid-template-columns:1fr; }
  .team-rail, .active-panel, .combat-side { min-height:auto; }
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .moves-grid { grid-template-columns:1fr; }
  .rules-summary { align-items:flex-start; flex-direction:column; }
  .rule-chips { justify-content:flex-start; }
}
@media (max-width: 520px) {
  .trainer-strip { grid-template-columns:1fr 1fr; }
  .compact-field:first-child { grid-column:1/-1; }
  .summary-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .move-fields { grid-template-columns:1fr 1fr; }
  .move-fields .field:first-child { grid-column:1/-1; }
  .settings-grid .setting-row { grid-template-columns:1fr; }
  .checkbox-row input { justify-self:start; }
}

/* v0.2 — tabs, PokéAPI team builder and proficiency */
.tabs { display:flex; gap:6px; padding:6px; margin-bottom:16px; width:max-content; max-width:100%; }
.tab-button { border:0; border-radius:11px; padding:.7rem 1rem; background:transparent; color:var(--muted); font-weight:800; }
.tab-button.active { background:var(--panel-3); color:var(--text); }
.tab-view { display:none; }
.tab-view.active { display:block; }
.identity-row { display:flex; gap:14px; align-items:center; }
.mon-badge.image { overflow:hidden; padding:0; background:#0c151f; }
.mon-badge.image img { width:100%; height:100%; object-fit:contain; display:block; }
.mon-badge.large { width:74px; height:74px; min-width:74px; border-radius:18px; font-size:1rem; }
.proficiency-line { margin-top:7px; color:var(--muted); font-size:.75rem; }
.proficiency-line.trained strong { color:var(--good); }
.proficiency-line.untrained strong { color:var(--warn); }
.summary-grid.four { grid-template-columns:repeat(4,1fr); }
.move-effect { min-height:2.2em; color:var(--muted); font-size:.75rem; line-height:1.42; margin:0 0 9px; }
.team-slot.empty { opacity:.72; border-style:dashed; }
.compact-slot { padding:8px; }

.setup-layout { display:grid; grid-template-columns:300px minmax(520px,1fr) 330px; gap:16px; align-items:start; }
.pokemon-browser, .setup-main, .setup-team, .moveset-setup { padding:16px; }
.pokemon-browser, .setup-main, .setup-team { min-height:620px; }
.pokemon-results { height:520px; overflow:auto; display:grid; align-content:start; gap:6px; padding-right:3px; }
.pokemon-result { display:grid; grid-template-columns:58px 1fr; gap:8px; align-items:center; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--text); padding:9px 10px; text-align:left; }
.pokemon-result:hover { border-color:var(--accent-2); }
.pokemon-result span { color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; }
.api-status { font-size:.68rem; font-weight:800; color:var(--muted); }
.api-status.ready { color:var(--good); }
.api-status.error { color:var(--bad); }
.api-error { border:1px solid rgba(255,122,122,.35); background:rgba(255,122,122,.06); color:#ffd1d1; border-radius:12px; padding:12px; line-height:1.45; }
.loading-card, .learnset-empty, .candidate-empty { border:1px dashed var(--line); border-radius:14px; padding:18px; color:var(--muted); }
.candidate-head { display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:center; margin-bottom:16px; }
.candidate-art { min-height:190px; display:grid; place-items:center; background:#0d1620; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.candidate-art img { width:100%; height:190px; object-fit:contain; }
.candidate-art span { font-size:3rem; color:var(--muted); }
.compact { margin-bottom:0; }
.candidate-stats { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:16px; }
.candidate-stats > div { display:grid; gap:2px; text-align:center; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:10px 7px; }
.candidate-stats span, .candidate-stats small { color:var(--muted); font-size:.66rem; font-weight:800; }
.candidate-stats strong { font-size:1.15rem; }
.candidate-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.proficiency-toggle { grid-column:1/-1; display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); padding:11px; }
.proficiency-toggle input { width:20px; height:20px; margin-top:2px; }
.proficiency-toggle strong, .proficiency-toggle small { display:block; }
.proficiency-toggle small { color:var(--muted); line-height:1.35; margin-top:3px; }
.proficiency-toggle.inline { grid-column:auto; min-width:240px; padding:8px 10px; }
.candidate-foot { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-top:10px; }
.candidate-foot p { margin:0; max-width:65ch; font-size:.78rem; }
.moveset-setup { margin-top:16px; min-height:300px; }
.moveset-meta { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:12px; }
.moveset-meta > div { min-width:120px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:9px 11px; }
.moveset-meta > div strong, .moveset-meta > div span { display:block; }
.moveset-meta > div span { color:var(--muted); font-size:.68rem; margin-top:2px; }
.move-picker-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.move-picker { border:1px solid var(--line); background:var(--panel-2); border-radius:14px; padding:11px; }
.move-picker > label { display:block; color:var(--muted); font-size:.7rem; font-weight:800; margin-bottom:5px; }
.chosen-move-summary { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chosen-move-summary span { border:1px solid var(--line); border-radius:999px; padding:.2rem .45rem; color:var(--muted); font-size:.66rem; }
.move-picker p { color:var(--muted); font-size:.72rem; line-height:1.4; margin:8px 0 0; }

@media (max-width: 1250px) {
  .setup-layout { grid-template-columns:280px 1fr; }
  .setup-team { grid-column:1/-1; min-height:auto; }
  .setup-team .team-slots { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 800px) {
  .tabs { width:100%; }
  .tab-button { flex:1; }
  .summary-grid.four { grid-template-columns:repeat(2,1fr); }
  .setup-layout { grid-template-columns:1fr; }
  .pokemon-browser, .setup-main, .setup-team { min-height:auto; }
  .pokemon-results { height:320px; }
  .setup-team .team-slots { grid-template-columns:1fr; }
  .candidate-head { grid-template-columns:120px 1fr; }
  .candidate-art, .candidate-art img { min-height:120px; height:120px; }
  .candidate-stats { grid-template-columns:repeat(3,1fr); }
  .move-picker-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .identity-row { align-items:flex-start; }
  .mon-badge.large { width:58px; height:58px; min-width:58px; }
  .candidate-head { grid-template-columns:1fr; }
  .candidate-art, .candidate-art img { min-height:180px; height:180px; }
  .candidate-controls { grid-template-columns:1fr; }
  .candidate-foot { align-items:stretch; flex-direction:column; }
  .proficiency-toggle.inline { min-width:0; width:100%; }
}

/* v0.4 — Mega Evolution and moveset-level controls */
.editor-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.mega-control { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 9px; border:1px solid rgba(255,211,74,.35); background:rgba(255,211,74,.06); border-radius:12px; }
.mega-control select { width:auto; min-width:150px; }
.mega-name { font-size:.72rem; font-weight:850; color:var(--accent); }
.mega-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.72rem; font-weight:850; }
.mega-toggle input { width:19px; height:19px; }
.moveset-level-control { min-width:150px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:8px 10px; display:grid; grid-template-columns:1fr 64px; gap:8px; align-items:center; }
.moveset-level-control span { color:var(--muted); font-size:.68rem; font-weight:750; }
.moveset-level-control input { min-width:0; padding:.48rem .55rem; }
.move-card.locked-move { opacity:.68; border-style:dashed; }
.move-card.locked-move .move-preview strong { color:var(--warn); }
@media (max-width: 800px) {
  .editor-actions { justify-content:flex-start; }
  .mega-control { width:100%; }
  .moveset-level-control { width:100%; }
}