:root{--bg: #0d1117;--surface: #161b22;--surface2: #21262d;--border: #30363d;--text: #e6edf3;--text-muted: #8b949e;--terran: #3584e4;--zerg: #9141ac;--protoss: #e5a50a;--counter: #da3633;--countered: #2ea043;--both: #d97706;--selected: #f6c90e;--type-light: #90cdf4;--type-armored: #a0aec0;--type-biological: #68d391;--type-mechanical: #f6e05e;--type-psionic: #d6bcfa;--type-massive: #f6ad55;--type-structure: #b7a99a;--type-detector: #67e8f9;--type-heroic: #fda4af}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;font-size:14px;min-height:100vh}.home-link{position:absolute;top:16px;right:20px;color:var(--text-muted);text-decoration:none;font-size:13px}.home-link:hover{color:var(--text)}header{padding:28px 24px 16px;border-bottom:1px solid var(--border);background:var(--surface)}header h1{font-size:22px;font-weight:700}.subtitle{color:var(--text-muted);font-size:13px;margin:4px 0 14px}.controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.race-filters{display:flex;gap:6px}.filter-btn{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .15s}.filter-btn:hover{border-color:var(--text-muted);color:var(--text)}.filter-btn.active{background:var(--border);color:var(--text);border-color:var(--text-muted)}.filter-btn.terran.active{background:var(--terran);border-color:var(--terran);color:#fff}.filter-btn.zerg.active{background:var(--zerg);border-color:var(--zerg);color:#fff}.filter-btn.protoss.active{background:var(--protoss);border-color:var(--protoss);color:#000}.search-input{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:13px;width:180px;outline:none}.search-input:focus{border-color:var(--text-muted)}.search-input::placeholder{color:var(--text-muted)}.container{max-width:1100px;margin:0 auto;padding:20px 20px 40px}#icon-grid{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.race-group.hidden{display:none}.race-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;padding-left:2px}.race-group-label.race-Terran{color:var(--terran)}.race-group-label.race-Zerg{color:var(--zerg)}.race-group-label.race-Protoss{color:var(--protoss)}.icon-row{display:flex;flex-wrap:wrap;gap:6px}.unit-icon{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:6px 4px 5px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:background .1s,border-color .1s,transform .1s,opacity .15s;background:var(--surface)}.unit-icon:hover{background:var(--surface2);transform:translateY(-2px)}.unit-icon.icon-selected{border-color:var(--selected);background:#f6c90e14}.unit-icon.icon-countered{background:#2ea0431f;border-color:#2ea04373}.unit-icon.icon-counter{background:#da36331f;border-color:#da363373}.unit-icon.icon-both{background:#d9770626;border-color:#d9770673}.unit-icon.icon-dimmed{opacity:.3}.icon-img{width:40px;height:40px;border-radius:7px;flex-shrink:0;display:block}.icon-img.race-Terran{background:#3584e41f;border:1px solid rgba(53,132,228,.3)}.icon-img.race-Zerg{background:#9141ac1f;border:1px solid rgba(145,65,172,.3)}.icon-img.race-Protoss{background:#e5a50a1f;border:1px solid rgba(229,165,10,.3)}.card-icon{width:56px;height:56px;border-radius:10px;flex-shrink:0;display:block}.card-icon.race-Terran{background:#3584e426;border:2px solid rgba(53,132,228,.4)}.card-icon.race-Zerg{background:#9141ac26;border:2px solid rgba(145,65,172,.4)}.card-icon.race-Protoss{background:#e5a50a26;border:2px solid rgba(229,165,10,.4)}.mu-icon{width:28px;height:28px;border-radius:5px;flex-shrink:0;display:block}.mu-icon.race-Terran{background:#3584e41f;border:1px solid rgba(53,132,228,.3)}.mu-icon.race-Zerg{background:#9141ac1f;border:1px solid rgba(145,65,172,.3)}.mu-icon.race-Protoss{background:#e5a50a1f;border:1px solid rgba(229,165,10,.3)}.icon-avatar{width:40px;height:40px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;letter-spacing:0}.icon-avatar.race-Terran{background:#3584e433;color:var(--terran);border:1px solid rgba(53,132,228,.4)}.icon-avatar.race-Zerg{background:#9141ac33;color:var(--zerg);border:1px solid rgba(145,65,172,.4)}.icon-avatar.race-Protoss{background:#e5a50a33;color:var(--protoss);border:1px solid rgba(229,165,10,.4)}.icon-name{font-size:10px;color:var(--text-muted);text-align:center;line-height:1.25;max-width:60px;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.unit-icon.icon-selected .icon-name{color:var(--text)}.move-badge{font-size:9px;font-weight:700;letter-spacing:.4px;padding:1px 5px;border-radius:4px;line-height:1.4}.move-badge.air{background:#93c5fd26;color:#93c5fd;border:1px solid rgba(147,197,253,.35)}.move-badge.ground{background:#86efac1f;color:#86efac;border:1px solid rgba(134,239,172,.3)}.legend-bar{display:flex;align-items:center;margin-bottom:16px}.table-toggle-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;margin-bottom:12px}.table-toggle-btn{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .15s;white-space:nowrap}.table-toggle-btn:hover{border-color:var(--text-muted);color:var(--text)}.table-toggle-btn .arrow{font-size:10px;transition:transform .2s}.table-toggle-btn.open .arrow{transform:rotate(180deg)}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-muted)}.legend-item{display:flex;align-items:center;gap:6px}.legend-item:before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;flex-shrink:0}.legend-item.selected-row:before{background:#f6c90e40;border:1px solid var(--selected)}.legend-item.countered-row:before{background:#2ea04359;border:1px solid var(--countered)}.legend-item.counter-row:before{background:#da363359;border:1px solid var(--counter)}.legend-item.both-row:before{background:#d9770659;border:1px solid var(--both)}.table-section{margin-bottom:16px}.table-section.hidden{display:none}.table-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:8px}#units-table{width:100%;border-collapse:collapse}#units-table thead tr{background:var(--surface2)}#units-table th{padding:9px 12px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}#units-table th[data-col]{cursor:pointer;-webkit-user-select:none;user-select:none}#units-table th[data-col]:hover,#units-table th.th-sorted{color:var(--text)}.sort-icon{font-size:10px;opacity:.7}#units-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}#units-table tbody tr:last-child{border-bottom:none}#units-table tbody tr:hover{background:var(--surface2)}#units-table td{padding:8px 12px;vertical-align:middle}#units-table tbody tr.row-selected{background:#f6c90e1a!important;outline:2px solid var(--selected);outline-offset:-2px}#units-table tbody tr.row-counter{background:#da36331f;border-left:3px solid var(--counter)}#units-table tbody tr.row-countered{background:#2ea0431f;border-left:3px solid var(--countered)}#units-table tbody tr.row-both{background:#d9770626;border-left:3px solid var(--both)}.unit-name-cell{display:flex;align-items:center;gap:10px;white-space:nowrap}.unit-avatar{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}.unit-avatar.race-Terran{background:#3584e433;color:var(--terran);border:1px solid rgba(53,132,228,.4)}.unit-avatar.race-Zerg{background:#9141ac33;color:var(--zerg);border:1px solid rgba(145,65,172,.4)}.unit-avatar.race-Protoss{background:#e5a50a33;color:var(--protoss);border:1px solid rgba(229,165,10,.4)}.unit-label{font-weight:500}.race-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}.race-badge.race-Terran{background:#3584e433;color:var(--terran)}.race-badge.race-Zerg{background:#9141ac33;color:var(--zerg)}.race-badge.race-Protoss{background:#e5a50a33;color:var(--protoss)}.stat-hp{color:#f87171;font-weight:600}.stat-shield{color:#60a5fa;font-weight:600}.stat-muted{color:var(--text-muted)}.types-cell{display:flex;gap:4px;flex-wrap:wrap}.type-pill{padding:1px 6px;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid currentColor;opacity:.85}.type-Light{color:var(--type-light)}.type-Armored{color:var(--type-armored)}.type-Biological{color:var(--type-biological)}.type-Mechanical{color:var(--type-mechanical)}.type-Psionic{color:var(--type-psionic)}.type-Massive{color:var(--type-massive)}.type-Structure{color:var(--type-structure)}.type-Detector{color:var(--type-detector)}.type-Heroic{color:var(--type-heroic)}.atk-cell{font-size:13px;white-space:nowrap}.atk-bonus{font-size:11px;color:#f9a825;margin-left:4px}.atk-none{color:var(--text-muted);font-style:italic}.unit-card{margin-top:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;animation:slide-in .18s ease}.unit-card.hidden{display:none}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.card-header{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--border)}.card-avatar{width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex-shrink:0}.card-avatar.race-Terran{background:#3584e433;color:var(--terran);border:2px solid rgba(53,132,228,.5)}.card-avatar.race-Zerg{background:#9141ac33;color:var(--zerg);border:2px solid rgba(145,65,172,.5)}.card-avatar.race-Protoss{background:#e5a50a33;color:var(--protoss);border:2px solid rgba(229,165,10,.5)}.card-title h2{font-size:20px;font-weight:700}.card-types{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.card-body{padding:18px 22px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:20px}.stat-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px}.stat-box .stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px}.stat-box .stat-value{font-size:20px;font-weight:700}.stat-box.hp-box .stat-value{color:#f87171}.stat-box.shd-box .stat-value{color:#60a5fa}.stat-box.armor-box .stat-value{color:#a0aec0}.stat-box.speed-box .stat-value{color:#86efac}.cost-lines{display:flex;flex-direction:column;gap:5px;margin-top:2px}.cost-line{display:flex;align-items:baseline;gap:6px}.cost-val{font-size:16px;font-weight:700}.cost-tag{font-size:10px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.cost-minerals{color:#7ec8e3}.cost-gas{color:#4ade80}.cost-supply{color:var(--text-muted)}.cost-time{color:#fcd34d}.stat-box.move-box .stat-value{font-size:16px}.move-air{color:#93c5fd;font-size:15px;font-weight:700}.move-ground{color:#86efac;font-size:15px;font-weight:700}.defense-lines{display:flex;flex-direction:column;gap:5px;margin-top:2px}.defense-line{display:flex;align-items:baseline;gap:6px}.defense-line span:first-child{font-size:16px;font-weight:700}.defense-tag{font-size:10px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.defense-armor{color:#a0aec0}.defense-speed{color:#86efac}.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:10px}.attacks-list{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}.attack-row{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;flex-wrap:wrap}.atk-name{font-weight:600;min-width:160px}.atk-dmg{color:#f87171;font-weight:700;font-size:15px}.atk-bonus-tag{background:#f9a82526;color:#f9a825;border:1px solid rgba(249,168,37,.4);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600}.atk-range{color:var(--text-muted);font-size:12px}.atk-target{font-size:12px}.atk-target.ground{color:#86efac}.atk-target.air{color:#93c5fd}.atk-target.both{color:#c4b5fd}.abilities-list{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}.ability-row{display:flex;flex-direction:column;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px}.ability-name{font-weight:600;font-size:13px;color:#c4b5fd}.ability-desc{font-size:12px;color:var(--text-muted);line-height:1.5}.matchup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:640px){.matchup-grid{grid-template-columns:1fr}}.matchup-title{font-size:13px;font-weight:700;padding:6px 10px;border-radius:6px;margin-bottom:10px}.matchup-title.good{background:#2ea04326;color:#4ade80;border:1px solid rgba(46,160,67,.3)}.matchup-title.bad{background:#da363326;color:#f87171;border:1px solid rgba(218,54,51,.3)}.matchup-title .count{font-weight:400;opacity:.8;font-size:12px;margin-left:4px}.matchup-cards{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;padding-right:4px}.matchup-cards::-webkit-scrollbar{width:4px}.matchup-cards::-webkit-scrollbar-track{background:var(--surface2)}.matchup-cards::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.matchup-unit{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;transition:border-color .12s}.matchup-unit:hover{border-color:var(--text-muted)}.matchup-unit.good-match{border-left:3px solid var(--countered)}.matchup-unit.bad-match{border-left:3px solid var(--counter)}.mu-avatar{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}.mu-avatar.race-Terran{background:#3584e433;color:var(--terran);border:1px solid rgba(53,132,228,.4)}.mu-avatar.race-Zerg{background:#9141ac33;color:var(--zerg);border:1px solid rgba(145,65,172,.4)}.mu-avatar.race-Protoss{background:#e5a50a33;color:var(--protoss);border:1px solid rgba(229,165,10,.4)}.mu-info{flex:1;min-width:0}.mu-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-reason{font-size:11px;color:var(--text-muted);margin-top:1px}.no-matchup{color:var(--text-muted);font-size:13px;font-style:italic;padding:4px 0}