*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0a0a0a; --surface:#0f0f0f; --surface2:#141414; --surface3:#1a1a1a;
  --border:#2a2a2a; --border2:#363636;
  --accent:#d4af55; --green:#4ade80; --amber:#f59e0b; --red:#f87171;
  --text:#f0ede6; --text2:rgba(240,237,230,0.6); --text3:rgba(240,237,230,0.38);
  --mono:'DM Mono',monospace; --sans:'DM Sans',sans-serif; --display:'DM Serif Display',serif;
}
html,body { min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.5; }
.page { max-width:1400px; margin:0 auto; padding:2rem 2rem 4rem; }

/* Header */
.logo { display:inline-flex; align-items:baseline; gap:0.5rem; text-decoration:none; cursor:pointer; }
.logo:hover .logo-mark { color:#e0bc66; }
.logo-mark { font-family:var(--display); font-style:italic; font-size:1.6rem; line-height:1; color:var(--accent); letter-spacing:-1px; }
.logo-badge { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text2); border:1px solid rgba(240,237,230,0.2); padding:2px 7px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; padding:2rem 2.5rem 1.5rem; border-bottom:1px solid #2e2e2e; }
.topbar-right { display:flex; align-items:center; gap:1.75rem; padding-bottom:0.2rem; }
.status-row { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; color:var(--text2); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.tab-nav { display:flex; border-bottom:1px solid #2a2a2a; padding:0 2.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tab-nav::-webkit-scrollbar { display:none; }
.tab-btn { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text2); background:none; border:none; cursor:pointer; padding:1rem 0; margin-right:2.5rem; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.15s,border-color 0.15s; flex-shrink:0; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }

/* Layout */
.main-layout { display:grid; grid-template-columns:400px 300px 1fr; gap:2rem; align-items:start; }
.panel-label { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text3); margin-bottom:1.25rem; }

/* Search */
.search-wrap { position:relative; margin-bottom:0.75rem; }
.search-hint { font-family:var(--mono); font-size:0.6rem; color:var(--text3); letter-spacing:0.08em; margin-bottom:1rem; }
.search-hint span { color:var(--accent); }
.search-input { width:100%; background:var(--surface2); border:1px solid var(--border2); padding:0.65rem 0.9rem; color:var(--text); font-family:var(--sans); font-size:0.875rem; outline:none; transition:border-color 0.15s; border-radius:0; }
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,175,85,0.08); }
.search-input::placeholder { color:var(--text3); }
.search-dropdown { position:absolute; top:100%; left:0; right:0; z-index:100; background:var(--surface2); border:1px solid var(--border2); border-top:none; max-height:260px; overflow-y:auto; }
.search-dropdown.hidden { display:none; }
.search-item { padding:0.5rem 0.9rem; cursor:pointer; font-size:0.85rem; display:flex; align-items:center; gap:0.75rem; transition:background 0.1s; }
.search-item:hover,.search-item.active { background:var(--surface3); }
.search-item-name { text-transform:capitalize; flex:1; }
.search-item-id { font-family:var(--mono); font-size:0.6rem; color:var(--text3); }
.search-see-all { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.5rem; border-top:1px solid var(--border); cursor:pointer; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; color:var(--accent); transition:background 0.1s; text-transform:uppercase; }
.search-see-all:hover { background:var(--surface3); }
.search-msg { padding:0.6rem 0.9rem; font-family:var(--mono); font-size:0.65rem; color:var(--text3); letter-spacing:0.1em; }

/* Type grid */
.type-grid-section { border:1px solid var(--border); background:var(--surface); margin-bottom:1rem; overflow:hidden; }
.type-grid-section.hidden { display:none; }
.type-grid-header { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 1rem; border-bottom:1px solid var(--border); }
.type-grid-label { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text2); }
.type-grid-close { background:none; border:none; color:var(--text3); cursor:pointer; font-size:1rem; transition:color 0.15s; }
.type-grid-close:hover { color:var(--red); }
.type-grid-body { padding:0.75rem; max-height:280px; overflow-y:auto; }
.type-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:0.5rem; }
.type-grid-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0.5rem 0.25rem; cursor:pointer; border:1px solid var(--border); background:var(--surface2); transition:border-color 0.15s,background 0.15s; }
.type-grid-item:hover { border-color:var(--accent); background:var(--surface3); }
.type-grid-item.in-team { border-color:rgba(212,175,85,0.4); }
.type-grid-item img { width:40px; height:40px; image-rendering:pixelated; }
.type-grid-item-name { font-size:0.6rem; text-transform:capitalize; color:var(--text2); text-align:center; line-height:1.2; }

/* Team slots */
.team-slots { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem; }
.team-slot { display:flex; align-items:center; gap:0.75rem; padding:0.55rem 0.75rem; border:1px solid var(--border); background:var(--surface); min-height:64px; transition:border-color 0.15s; }
.team-slot.empty { border-style:dashed; }
.team-slot.filled { cursor:pointer; }
.team-slot.filled:hover { border-color:var(--border2); }
.team-slot.selected { border-color:rgba(212,175,85,0.5); background:rgba(212,175,85,0.03); }
.slot-num { font-family:var(--mono); font-size:0.6rem; color:var(--text3); letter-spacing:0.1em; width:18px; flex-shrink:0; text-align:center; }
.slot-sprite-wrap { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.slot-sprite { width:44px; height:44px; object-fit:contain; image-rendering:pixelated; }
.slot-empty-icon { width:26px; height:26px; border:1px dashed var(--border2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:1rem; }
.slot-info { flex:1; min-width:0; }
.slot-name { font-size:0.82rem; font-weight:500; text-transform:capitalize; margin-bottom:0.2rem; display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.slot-not-in-champions { font-family:var(--mono); font-size:0.52rem; color:var(--amber); border:0.5px solid rgba(245,158,11,0.3); padding:1px 5px; letter-spacing:0.05em; }
.slot-types { display:flex; flex-wrap:wrap; gap:3px; }
.slot-stats { display:flex; gap:0.6rem; margin-top:0.2rem; flex-wrap:wrap; }
.slot-stat { font-family:var(--mono); font-size:0.58rem; color:var(--text3); }
.slot-stat span { color:var(--text2); }
.slot-stat.boosted span { color:#4ade80; }
.slot-stat.reduced span { color:#f87171; }
.slot-move-hint { font-family:var(--mono); font-size:0.52rem; color:var(--accent); letter-spacing:0.06em; margin-top:0.15rem; }
.slot-abilities { margin-top:0.25rem; display:flex; flex-direction:column; gap:4px; }
.ability-chip { font-family:var(--mono); font-size:0.5rem; letter-spacing:0.06em; background:none; border:0.5px solid var(--border2); color:var(--text3); cursor:pointer; padding:1px 6px; transition:all 0.12s; text-transform:capitalize; }
.ability-chip:hover { color:var(--text2); border-color:rgba(212,175,85,0.35); }
.ability-chip.active { color:var(--accent); border-color:rgba(212,175,85,0.5); background:rgba(212,175,85,0.06); }
.ability-hidden { font-family:var(--mono); font-size:0.44rem; color:var(--text3); margin-left:4px; vertical-align:middle; }
.ability-desc { font-family:var(--sans); font-size:0.68rem; color:var(--text2); line-height:1.5; padding:0.35rem 0.5rem; border-left:2px solid rgba(212,175,85,0.4); background:rgba(212,175,85,0.04); }
.slot-remove { background:none; border:none; color:var(--text3); cursor:pointer; font-size:1.1rem; line-height:1; padding:4px 5px; transition:color 0.15s; flex-shrink:0; }
.slot-remove:hover { color:var(--red); }
.slot-empty-label { font-family:var(--mono); font-size:0.6rem; color:var(--text3); letter-spacing:0.1em; text-transform:uppercase; }
.nature-badge { font-family:var(--mono); font-size:0.5rem; letter-spacing:0.06em; color:var(--text3); border:0.5px solid rgba(240,237,230,0.15); padding:1px 5px; flex-shrink:0; }
.nat-plus { color:#4ade80; } .nat-minus { color:#f87171; }

/* Actions */
.team-actions { display:flex; align-items:center; justify-content:space-between; }
.team-count { font-family:var(--mono); font-size:0.65rem; color:var(--text3); letter-spacing:0.1em; }
.btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.45rem 1rem; font-family:var(--mono); font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; border:none; transition:all 0.15s; white-space:nowrap; }
.btn-secondary { background:transparent; color:var(--text2); border:1px solid var(--border2); }
.btn-secondary:hover { border-color:rgba(212,175,85,0.4); color:var(--accent); }
.btn-sm { padding:0.35rem 0.85rem; font-size:0.62rem; }

/* Type chips */
.type-chip { display:inline-block; font-family:var(--mono); font-size:0.55rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; padding:2px 6px; border-radius:2px; color:#fff; }
.type-normal{background:#6d6d4e} .type-fire{background:#9c3e10} .type-water{background:#2a5f9e}
.type-electric{background:#8a7a10} .type-grass{background:#3a6b1a} .type-ice{background:#2a7a7a}
.type-fighting{background:#7a1e1e} .type-poison{background:#622062} .type-ground{background:#8a6220}
.type-flying{background:#4a5a8a} .type-psychic{background:#8a1a4a} .type-bug{background:#5a6210}
.type-rock{background:#6a5e20} .type-ghost{background:#3e2a5e} .type-dragon{background:#3a1a9e}
.type-dark{background:#3e2e1e} .type-steel{background:#5e5e72} .type-fairy{background:#7a3a5e}
.type-chip.dim { opacity:0.3; }

/* Moves panel */
.moves-empty { font-family:var(--mono); font-size:0.65rem; color:var(--text3); letter-spacing:0.08em; text-align:center; padding:3rem 1rem; border:1px dashed var(--border); background:var(--surface); line-height:1.8; }
.moves-content.hidden { display:none; }
.moves-poke-header { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.75rem; border:1px solid var(--border); background:var(--surface); margin-bottom:0.5rem; }
.moves-poke-sprite { width:34px; height:34px; image-rendering:pixelated; }
.moves-poke-name { font-size:0.88rem; font-weight:500; text-transform:capitalize; flex:1; }
.moves-slot-count { font-family:var(--mono); font-size:0.58rem; color:var(--text3); }

/* Assigned moves */
.assigned-moves { display:flex; flex-direction:column; gap:3px; margin-bottom:0.65rem; }
.asgn-slot { display:flex; align-items:center; gap:0.5rem; padding:0.38rem 0.65rem; border:1px solid var(--border); background:var(--surface); min-height:34px; transition:background 0.1s,border-color 0.1s; }
.asgn-slot:not(.empty):hover { background:var(--surface2); }
.asgn-slot.selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.asgn-slot.empty { border-style:dashed; cursor:default !important; }
.asgn-num { font-family:var(--mono); font-size:0.55rem; color:var(--text3); width:12px; flex-shrink:0; }
.asgn-name { font-size:0.78rem; flex:1; text-transform:capitalize; }
.asgn-power { font-family:var(--mono); font-size:0.58rem; color:var(--text2); flex-shrink:0; }
.asgn-cat { font-family:var(--mono); font-size:0.55rem; width:18px; text-align:center; flex-shrink:0; }
.asgn-cat.phys { color:#c05028; } .asgn-cat.spec { color:#a0306a; } .asgn-cat.stat { color:var(--text3); }
.asgn-empty-label { font-family:var(--mono); font-size:0.55rem; color:var(--text3); letter-spacing:0.08em; text-transform:uppercase; }
.asgn-remove { background:none; border:none; color:var(--text3); cursor:pointer; font-size:0.9rem; line-height:1; padding:2px 3px; transition:color 0.15s; flex-shrink:0; }
.asgn-remove:hover { color:var(--red); }

/* Item section */
.item-section { margin-bottom:0.65rem; }
.item-row { display:flex; align-items:center; gap:0.5rem; padding:0.38rem 0.65rem; border:1px solid var(--border); background:var(--surface); }
.item-lbl { font-family:var(--mono); font-size:0.56rem; color:var(--text3); width:28px; flex-shrink:0; letter-spacing:0.06em; text-transform:uppercase; }
.item-search-wrap { flex:1; position:relative; }
.item-input { width:100%; background:var(--surface3); border:1px solid var(--border); color:var(--text); font-family:var(--sans); font-size:0.75rem; padding:2px 6px; outline:none; }
.item-input:focus { border-color:var(--accent); }
.item-input::placeholder { color:var(--text3); font-size:0.72rem; }
.item-suggestions { position:absolute; top:100%; left:0; right:0; background:var(--surface2); border:1px solid var(--border); z-index:20; }
.item-suggestion { padding:0.3rem 0.65rem; font-size:0.75rem; cursor:pointer; }
.item-suggestion:hover { background:var(--surface3); color:var(--accent); }
.item-clear-btn { font-family:var(--mono); font-size:0.8rem; background:none; border:none; color:var(--text3); cursor:pointer; padding:0 2px; flex-shrink:0; line-height:1; }
.item-clear-btn:hover { color:var(--accent); }

/* EV section */
.ev-section { border:1px solid var(--border); background:var(--surface); margin-bottom:0.65rem; }
.ev-header { display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0.75rem; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.ev-header:hover { background:var(--surface2); }
.ev-header-lbl { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text3); }
.ev-total { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.06em; color:var(--text3); }
.ev-total.full { color:var(--green); }
.ev-total.over { color:var(--red); }
.ev-body { padding:0.6rem 0.75rem; display:flex; flex-direction:column; gap:0.5rem; }
.ev-body.hidden { display:none; }
.ev-presets { display:flex; flex-wrap:wrap; gap:4px; }
.ev-preset { font-family:var(--mono); font-size:0.55rem; letter-spacing:0.06em; background:none; border:0.5px solid var(--border2); color:var(--text3); cursor:pointer; padding:3px 7px; transition:all 0.12s; white-space:nowrap; }
.ev-preset:hover { color:var(--text2); }
.ev-preset.active { border-color:rgba(212,175,85,0.5); color:var(--accent); background:rgba(212,175,85,0.06); }
.ev-nature-row { display:flex; align-items:center; gap:0.5rem; }
.ev-nat-lbl { font-family:var(--mono); font-size:0.56rem; color:var(--text3); width:38px; flex-shrink:0; letter-spacing:0.06em; }
.ev-nature-select { flex:1; background:var(--surface2); border:1px solid var(--border2); color:var(--text); font-family:var(--mono); font-size:0.65rem; padding:3px 5px; outline:none; cursor:pointer; }
.ev-nature-select:focus { border-color:var(--accent); }
.ev-nature-effect { font-family:var(--mono); font-size:0.58rem; flex-shrink:0; white-space:nowrap; }
.ev-nature-effect .plus  { color:#4ade80; }
.ev-nature-effect .minus { color:#f87171; }
.ev-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 0.5rem; }
.ev-item { display:flex; align-items:center; gap:4px; }
.ev-stat-lbl { font-family:var(--mono); font-size:0.56rem; color:var(--text3); width:28px; flex-shrink:0; letter-spacing:0.06em; }
.ev-stat-lbl.boosted { color:#4ade80; }
.ev-stat-lbl.reduced { color:#f87171; }
.ev-input { width:44px; background:var(--surface3); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:0.65rem; padding:2px 4px; text-align:right; outline:none; appearance:textfield; -moz-appearance:textfield; }
.ev-input:focus { border-color:var(--accent); }
.ev-input::-webkit-outer-spin-button,.ev-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ev-max-btn { font-family:var(--mono); font-size:0.48rem; background:none; border:0.5px solid var(--border); color:var(--text3); cursor:pointer; padding:1px 4px; letter-spacing:0.04em; transition:all 0.12s; flex-shrink:0; }
.ev-max-btn:hover { color:var(--accent); border-color:rgba(212,175,85,0.4); }
.ev-calc { font-family:var(--mono); font-size:0.62rem; flex:1; text-align:right; }
.ev-calc.boosted { color:#4ade80; }
.ev-calc.reduced { color:#f87171; }
.ev-calc.normal  { color:var(--text2); }

/* Move list */
.move-filter-wrap { margin-bottom:0.4rem; }
.move-filter { width:100%; background:var(--surface2); border:1px solid var(--border2); padding:0.5rem 0.7rem; color:var(--text); font-family:var(--sans); font-size:0.8rem; outline:none; border-radius:0; transition:border-color 0.15s; }
.move-filter:focus { border-color:var(--accent); }
.move-filter::placeholder { color:var(--text3); font-size:0.75rem; }
.move-list-lbl { font-family:var(--mono); font-size:0.55rem; color:var(--text3); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.35rem; }
.move-list { max-height:340px; overflow-y:auto; border:1px solid var(--border); background:var(--surface); }
.move-item { display:flex; align-items:center; gap:0.45rem; padding:0.35rem 0.65rem; cursor:pointer; border-bottom:0.5px solid var(--border); transition:background 0.1s; }
.move-item:last-child { border-bottom:none; }
.move-item:hover { background:var(--surface3); }
.move-item.assigned { opacity:0.35; cursor:default; pointer-events:none; }
.move-item-type { width:44px; flex-shrink:0; }
.move-item-name { flex:1; font-size:0.78rem; text-transform:capitalize; }
.move-item-power { font-family:var(--mono); font-size:0.58rem; color:var(--text2); flex-shrink:0; width:26px; text-align:right; }
.move-item-cat { font-family:var(--mono); font-size:0.55rem; width:16px; text-align:center; flex-shrink:0; }
.move-item-cat.phys { color:#c05028; } .move-item-cat.spec { color:#a0306a; } .move-item-cat.stat { color:var(--text3); }
.move-list-empty { font-family:var(--mono); font-size:0.65rem; color:var(--text3); padding:0.75rem; text-align:center; }
.move-list-add-anyway { font-family:var(--mono); font-size:0.62rem; color:var(--accent); padding:0.65rem; text-align:center; cursor:pointer; letter-spacing:0.08em; transition:background 0.1s; }
.move-list-add-anyway:hover { background:var(--surface3); }
.move-list-loading { font-family:var(--mono); font-size:0.58rem; color:var(--text3); padding:0.4rem 0.65rem; letter-spacing:0.08em; border-top:0.5px solid var(--border); }
.move-item-add { background:none; border:none; color:var(--text3); cursor:pointer; font-size:1rem; line-height:1; padding:2px 4px; flex-shrink:0; transition:color 0.1s; }
.move-item-add:hover { color:var(--accent); }
.move-item.selected { background:var(--surface3); }

/* Move detail */
.move-detail { border:1px solid var(--border); background:var(--surface2); padding:0.65rem 0.75rem; margin-bottom:0.5rem; }
.move-detail.hidden { display:none; }
.move-detail-head { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.move-detail-name { font-size:0.88rem; font-weight:500; text-transform:capitalize; flex:1; }
.move-detail-stats { display:flex; gap:0.75rem; margin-bottom:0.45rem; }
.move-detail-stat { font-family:var(--mono); font-size:0.58rem; color:var(--text3); }
.move-detail-stat span { color:var(--text2); }
.move-detail-desc { font-size:0.75rem; color:var(--text2); line-height:1.55; margin-bottom:0.55rem; }
.move-detail-add { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; background:transparent; border:1px solid rgba(212,175,85,0.3); color:var(--accent); cursor:pointer; padding:4px 10px; transition:all 0.15s; }
.move-detail-add:hover { border-color:rgba(212,175,85,0.6); background:rgba(212,175,85,0.06); }
.move-detail-note { font-family:var(--mono); font-size:0.6rem; color:var(--text3); }

/* Analysis */
.analysis-panel { position:sticky; top:1rem; }
.analysis-empty { font-family:var(--mono); font-size:0.7rem; color:var(--text3); letter-spacing:0.1em; text-align:center; padding:4rem 2rem; border:1px dashed var(--border); background:var(--surface); }
.analysis-content { display:flex; flex-direction:column; gap:0.75rem; }
.a-section { border:1px solid var(--border); background:var(--surface); }
.a-section-head { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 1rem; border-bottom:1px solid var(--border); }
.a-status { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.a-status.green { background:var(--green); box-shadow:0 0 6px rgba(74,222,128,0.4); }
.a-status.amber { background:var(--amber); box-shadow:0 0 6px rgba(245,158,11,0.4); }
.a-status.red   { background:var(--red);   box-shadow:0 0 6px rgba(248,113,113,0.4); }
.a-title { font-family:var(--mono); font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text2); flex:1; }
.a-badge { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.08em; padding:2px 7px; border:0.5px solid; }
.a-badge.green { color:var(--green); border-color:rgba(74,222,128,0.3); background:rgba(74,222,128,0.06); }
.a-badge.amber { color:var(--amber); border-color:rgba(245,158,11,0.3); background:rgba(245,158,11,0.06); }
.a-badge.red   { color:var(--red);   border-color:rgba(248,113,113,0.3); background:rgba(248,113,113,0.06); }
.a-body { padding:0.85rem 1rem; }

/* Check rows */
.check-row { display:flex; align-items:center; gap:0.65rem; padding:0.35rem 0; border-bottom:0.5px solid var(--border); }
.check-row:last-child { border-bottom:none; }
.check-icon { font-size:0.75rem; font-family:var(--mono); width:14px; flex-shrink:0; }
.check-icon.ok { color:var(--green); } .check-icon.miss { color:var(--red); }
.check-label { font-size:0.8rem; flex-shrink:0; min-width:110px; }
.check-note { font-family:var(--mono); font-size:0.62rem; color:var(--text2); margin-left:auto; text-align:right; line-height:1.4; }
.check-note.suggestion { color:var(--amber); }
.check-types { display:flex; gap:3px; flex-shrink:0; }

/* Weakness bars */
.weak-rows { display:flex; flex-direction:column; gap:0.45rem; }
.weak-row { display:flex; align-items:center; gap:0.65rem; }
.weak-bar-track { flex:1; height:4px; background:var(--surface3); }
.weak-bar-fill { height:4px; transition:width 0.3s; }
.weak-bar-fill.ok { background:var(--text3); } .weak-bar-fill.amber { background:var(--amber); } .weak-bar-fill.red { background:var(--red); }
.weak-count { font-family:var(--mono); font-size:0.65rem; width:22px; text-align:right; flex-shrink:0; }
.weak-count.ok { color:var(--text3); } .weak-count.amber { color:var(--amber); } .weak-count.red { color:var(--red); }
.weak-empty { font-family:var(--mono); font-size:0.65rem; color:var(--green); }

/* Coverage */
.cov-grid { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:0.5rem; }
.cov-gap-label { font-family:var(--mono); font-size:0.62rem; color:var(--text3); letter-spacing:0.08em; margin-top:0.5rem; margin-bottom:0.35rem; }
.cov-note { font-family:var(--mono); font-size:0.65rem; padding:0.45rem 0.65rem; border-left:2px solid var(--amber); color:var(--amber); background:rgba(245,158,11,0.04); margin-top:0.5rem; }
.cov-basis { font-family:var(--mono); font-size:0.58rem; color:var(--text3); margin-bottom:0.5rem; letter-spacing:0.05em; }

/* Offensive split */
.offense-bar { height:8px; display:flex; overflow:hidden; border:1px solid var(--border2); margin-bottom:0.4rem; }
.offense-bar-phys { background:#c05028; transition:width 0.3s; }
.offense-bar-spec { background:#a0306a; transition:width 0.3s; }
.offense-labels { display:flex; justify-content:space-between; margin-bottom:0.6rem; }
.offense-label { font-family:var(--mono); font-size:0.62rem; }
.offense-hint { font-family:var(--mono); font-size:0.65rem; margin-top:0.5rem; padding:0.4rem 0.6rem; border-left:2px solid; line-height:1.5; }
.offense-hint.ok   { color:var(--green); border-color:var(--green); background:rgba(74,222,128,0.04); }
.offense-hint.warn { color:var(--amber); border-color:var(--amber); background:rgba(245,158,11,0.04); }
.offense-hint.bad  { color:var(--red);   border-color:var(--red);   background:rgba(248,113,113,0.04); }

/* Defensive profile */
.def-rows { display:flex; flex-direction:column; gap:0.4rem; }
.def-row { display:flex; align-items:center; gap:0.65rem; padding:0.3rem 0; border-bottom:0.5px solid var(--border); }
.def-row:last-child { border-bottom:none; }
.def-name { font-size:0.78rem; text-transform:capitalize; min-width:85px; flex-shrink:0; }
.def-bars { flex:1; display:flex; flex-direction:column; gap:3px; }
.def-bar-row { display:flex; align-items:center; gap:0.4rem; }
.def-bar-lbl { font-family:var(--mono); font-size:0.52rem; color:var(--text3); width:22px; flex-shrink:0; }
.def-bar-track { flex:1; height:3px; background:var(--surface3); }
.def-bar-fill { height:3px; transition:width 0.3s; }
.def-bar-fill.hi { background:var(--green); opacity:0.7; }
.def-bar-fill.md { background:var(--amber); opacity:0.6; }
.def-bar-fill.lo { background:var(--red); opacity:0.7; }
.def-val { font-family:var(--mono); font-size:0.58rem; color:var(--text2); width:26px; text-align:right; flex-shrink:0; }

/* Speed */
.speed-rows { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:0.75rem; }
.speed-row { display:flex; align-items:center; gap:0.65rem; font-size:0.8rem; }
.speed-name { text-transform:capitalize; flex:1; }
.speed-bar-track { width:80px; height:4px; background:var(--surface3); }
.speed-bar-fill { height:4px; background:var(--accent); }
.speed-val { font-family:var(--mono); font-size:0.65rem; color:var(--text2); width:28px; text-align:right; }
.speed-hint { font-family:var(--mono); font-size:0.65rem; padding:0.45rem 0.65rem; border-left:2px solid; line-height:1.5; }
.speed-hint.green { color:var(--green); border-color:var(--green); background:rgba(74,222,128,0.04); }
.speed-hint.amber { color:var(--amber); border-color:var(--amber); background:rgba(245,158,11,0.04); }
.speed-hint.red   { color:var(--red);   border-color:var(--red);   background:rgba(248,113,113,0.04); }

/* Pillars */
.pillar-row { display:flex; align-items:center; gap:0.65rem; padding:0.35rem 0; border-bottom:0.5px solid var(--border); }
.pillar-row:last-child { border-bottom:none; }
.pillar-reason { font-family:var(--mono); font-size:0.6rem; color:var(--text3); margin-left:auto; text-align:right; max-width:180px; line-height:1.4; }
.pillar-reason.found { color:var(--text2); }

/* Save form */
.save-form { display:flex; gap:0.4rem; align-items:center; margin-top:0.4rem; }
.save-form.hidden { display:none; }
.save-name-input { flex:1; background:var(--surface2); border:1px solid var(--border2); padding:0.4rem 0.7rem; color:var(--text); font-family:var(--sans); font-size:0.8rem; outline:none; border-radius:0; transition:border-color 0.15s; }
.save-name-input:focus { border-color:var(--accent); }
.btn-xs { padding:0.28rem 0.65rem; font-size:0.6rem; }

/* Saved teams */
.saved-teams-section { margin-top:0.5rem; border:1px solid var(--border); background:var(--surface); }
.saved-teams-section.hidden { display:none; }
.saved-teams-header { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0.85rem; cursor:pointer; user-select:none; }
.saved-teams-header:hover { background:var(--surface2); }
.saved-teams-lbl { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text3); }
.saved-teams-count { font-family:var(--mono); font-size:0.6rem; color:var(--text3); letter-spacing:0.08em; }
.saved-teams-list { display:flex; flex-direction:column; }
.saved-team-item { display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0.85rem; border-top:0.5px solid var(--border); }
.saved-team-sprites { display:flex; gap:0; flex-shrink:0; }
.saved-team-info { flex:1; min-width:0; }
.saved-team-name { font-size:0.82rem; font-weight:500; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.saved-team-date { font-family:var(--mono); font-size:0.55rem; color:var(--text3); }

/* Responsive */
@media (max-width:1200px) {
  .main-layout { grid-template-columns:400px 1fr; grid-template-rows:auto auto; }
  .moves-panel { grid-column:1; grid-row:2; }
  .analysis-panel { grid-column:2; grid-row:1/3; position:static; }
}
@media (max-width:860px) {
  .main-layout { grid-template-columns:1fr; }
  .moves-panel,.analysis-panel { grid-column:1; grid-row:auto; position:static; }
}
@media (max-width:600px) {
  .page { padding:1rem 1rem 3rem; }
  .topbar { flex-direction:column; align-items:flex-start; gap:1rem; padding:1.5rem 1.25rem 1.25rem; }
  .tab-nav { padding:0 1rem; }
}