.counter-page{--ink:#142238;--muted:#687991;--line:#d8e3ec;--soft:#f5f8fa;--teal:#087f6d;--teal2:#16927f;--teal-soft:#eaf7f3;--coral:#c85d54;--coral-soft:#fff1ef;--amber:#a96b12;--amber-soft:#fff8e8;color:var(--ink)}
.counter-heading{margin-bottom:28px}.counter-eyebrow{margin:0 0 8px!important;color:var(--teal);font-size:13px!important;font-weight:800}.counter-heading h1{margin:0 0 14px;color:#0e192a;font-size:42px;line-height:1.22;letter-spacing:0}.counter-heading>p:last-child{max-width:840px;margin:0;color:#52627a;font-size:18px;line-height:1.75}
.counter-search,.target-profile,.recommend-panel,.matchup-columns>section,.lane-plan,.compare-panel,.pool-panel,.empty-counter,.counter-guide{border:1px solid var(--line);border-radius:8px;background:#fff}.counter-search{padding:24px}.counter-search>header,.recommend-panel>header,.lane-plan>header,.compare-panel>header,.pool-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.counter-search h2,.recommend-panel h2,.lane-plan h2,.compare-panel h2,.pool-panel h2{margin:0;color:var(--ink);font-size:23px;line-height:1.35;letter-spacing:0}.counter-search>header>span,.recommend-panel>header>span{padding:6px 9px;border-radius:5px;background:var(--teal-soft);color:var(--teal);font-size:12px;font-weight:800;white-space:nowrap}
.champion-search-row{display:grid;grid-template-columns:minmax(0,1fr) 126px;align-items:end;gap:9px;margin-top:20px}.champion-search-row label,.pool-fields label,.compare-selects label{display:grid;gap:7px}.champion-search-row label>span,.pool-fields label>span,.compare-selects label>span{color:#35465d;font-size:13px;font-weight:800}.champion-search-row input,.pool-fields input,.pool-fields select,.compare-selects select{width:100%;height:49px;margin:0;padding:0 14px;border:1px solid #cbd8e5;border-radius:7px;background:#fff;color:var(--ink);font-size:15px}.champion-search-row input:focus,.pool-fields input:focus,.pool-fields select:focus,.compare-selects select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,127,109,.12)}.champion-search-row button,.pool-fields button{height:49px;margin:0;border:1px solid var(--teal);border-radius:7px;background:var(--teal);color:#fff;box-shadow:none;font-size:14px;font-weight:800}
.popular-champions{display:flex;align-items:flex-start;gap:10px;margin-top:14px}.popular-champions>span{padding-top:8px;color:var(--muted);font-size:12px;white-space:nowrap}.popular-champions>div{display:flex;flex-wrap:wrap;gap:6px}.popular-champions button{display:flex;height:34px;align-items:center;gap:6px;margin:0;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#405169;box-shadow:none;font-size:12px}.popular-champions img{width:22px;height:22px;border-radius:4px}.role-picker{margin:18px 0 0;padding:0;border:0}.role-picker legend{margin-bottom:8px;color:#35465d;font-size:13px;font-weight:800}.role-picker>div{display:grid;grid-template-columns:repeat(5,1fr);padding:4px;border:1px solid var(--line);border-radius:8px;background:#f2f5f7}.role-picker button{height:39px;margin:0;border:0;border-radius:6px;background:transparent!important;color:#697991!important;box-shadow:none;font-size:13px;font-weight:800}.role-picker button.active{background:#fff!important;color:var(--teal)!important;box-shadow:0 1px 4px rgba(20,34,56,.12)}.data-status{min-height:20px;margin:14px 0 0;padding:11px 13px;border-radius:6px;background:#f3f6f8;color:#607086;font-size:13px}.data-status.loading{background:var(--teal-soft);color:var(--teal)}.data-status.error{background:var(--coral-soft);color:#a23f38}
.counter-result{display:grid;gap:13px;margin-top:15px}.target-profile{display:flex;align-items:center;gap:16px;padding:19px}.target-portrait{width:78px;height:78px;flex:0 0 78px;overflow:hidden;border-radius:8px;background:#183047}.target-portrait img{width:100%;height:100%;object-fit:cover}.target-profile>div:nth-child(2){min-width:0;flex:1}.target-profile>div:nth-child(2)>span{color:var(--teal);font-size:12px;font-weight:800}.target-profile h2{margin:3px 0;font-size:27px;letter-spacing:0}.target-profile p{margin:0;color:var(--muted);font-size:13px}.target-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.target-tags span{padding:6px 8px;border-radius:5px;background:var(--teal-soft);color:var(--teal);font-size:11px;font-weight:800}
.counter-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border:1px solid var(--line);border-radius:8px;background:#f2f5f7}.counter-tabs button{height:43px;margin:0;border:0;border-radius:6px;background:transparent!important;color:#66758b!important;box-shadow:none;font-size:14px;font-weight:800;white-space:nowrap}.counter-tabs button.active{background:#fff!important;color:var(--teal)!important;box-shadow:0 1px 4px rgba(20,34,56,.12)}.counter-view{display:grid;gap:13px}.counter-view[hidden],.counter-result[hidden],.empty-counter[hidden]{display:none!important}.recommend-panel,.lane-plan,.compare-panel,.pool-panel{padding:22px}.panel-intro{margin:11px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.counter-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}.counter-page button.counter-card{display:grid;width:100%;grid-template-columns:52px minmax(0,1fr) 58px;align-items:center;gap:11px;margin:0;padding:13px;border:1px solid #dbe5ed;border-radius:7px;background:#fff;color:var(--ink);box-shadow:none;text-align:left;cursor:pointer}.counter-page button.counter-card:hover{border-color:#82bdb3;background:#f4faf8;color:var(--ink)}.counter-page button.counter-card:focus-visible{border-color:var(--teal);background:#f4faf8;color:var(--ink);outline:3px solid rgba(8,127,109,.18);outline-offset:2px}.counter-card img{width:52px;height:52px;border-radius:7px;object-fit:cover}.counter-card strong,.counter-card span,.counter-card small{display:block}.counter-card strong{color:var(--ink);font-size:14px}.counter-card span{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45}.counter-score{text-align:right}.counter-score b{display:block;color:var(--teal);font-size:20px}.counter-score small{color:var(--muted);font-size:9px}
.matchup-columns{display:grid;grid-template-columns:1fr 1fr;gap:13px}.matchup-columns>section{padding:20px}.matchup-columns h3{margin:0;font-size:17px}.matchup-columns>section>p{margin:6px 0 14px;color:var(--muted);font-size:12px;line-height:1.55}.compact-matchups{display:grid;gap:7px}.counter-page button.compact-matchup{display:grid;width:100%;grid-template-columns:38px minmax(0,1fr) 42px;align-items:center;gap:9px;margin:0;padding:9px;border:1px solid transparent;border-radius:7px;background:#f7f9fa;color:var(--ink);box-shadow:none;text-align:left}.counter-page button.compact-matchup:hover{border-color:#a9d2cb;background:var(--teal-soft);color:var(--ink)}.counter-page button.compact-matchup:focus-visible{border-color:var(--teal);background:var(--teal-soft);color:var(--ink);outline:3px solid rgba(8,127,109,.18);outline-offset:2px}.compact-matchup img{width:38px;height:38px;border-radius:6px}.compact-matchup strong,.compact-matchup span{display:block}.compact-matchup strong{color:var(--ink);font-size:12px}.compact-matchup span{color:var(--muted);font-size:10px}.compact-matchup b{text-align:right;color:var(--teal);font-size:12px}.matchup-columns>section:last-child .compact-matchup b{color:var(--coral)}
.lane-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}.lane-tip{padding:15px;border-top:3px solid #80c3b7;background:#f6f9fa}.lane-tip b{display:block;margin-bottom:6px;font-size:13px}.lane-tip p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.compare-selects{display:grid;grid-template-columns:1fr 42px 1fr;align-items:end;gap:12px;margin-top:18px}.compare-selects>b{display:grid;height:49px;place-items:center;color:#8a98aa;font-size:12px}.compare-summary{display:flex;align-items:center;gap:14px;margin-top:17px;padding:16px;border-left:4px solid var(--teal);background:var(--teal-soft)}.compare-summary img{width:54px;height:54px;border-radius:7px}.compare-summary div{min-width:0;flex:1}.compare-summary strong,.compare-summary span{display:block}.compare-summary strong{font-size:16px}.compare-summary span{margin-top:4px;color:#51706b;font-size:12px;line-height:1.55}.compare-summary b{color:var(--teal);font-size:26px}.stat-compare{display:grid;gap:9px;margin-top:18px}.stat-row{display:grid;grid-template-columns:70px minmax(0,1fr) 70px;align-items:center;gap:10px}.stat-row>strong:first-child{text-align:right}.stat-row>strong{font-size:12px}.stat-track{position:relative;display:grid;grid-template-columns:1fr 1fr;height:20px;overflow:hidden;border-radius:5px;background:#edf1f4}.stat-track i{display:block;height:100%;transition:width .22s ease}.stat-track .stat-bar-mine{justify-self:end;background:var(--teal2)}.stat-track .stat-bar-enemy{justify-self:start;background:#d27a72}.stat-track span{position:absolute;inset:0;display:grid;place-items:center;color:#23344c;font-size:9px;font-weight:800}.compare-tips{margin-top:18px;padding:16px;border:1px solid #ead9b9;border-radius:7px;background:var(--amber-soft)}.compare-tips h3{margin:0 0 7px;font-size:15px}.compare-tips ul{margin:0;padding-left:19px;color:#765b2c;font-size:12px;line-height:1.75}
.pool-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(130px,.7fr) 132px;align-items:end;gap:9px;margin-top:18px}.pool-results{display:grid;gap:8px;margin-top:15px}.pool-card{display:grid;grid-template-columns:48px minmax(0,1fr) 80px;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:7px}.pool-card img{width:48px;height:48px;border-radius:7px}.pool-card strong,.pool-card span{display:block}.pool-card strong{font-size:14px}.pool-card span{margin-top:3px;color:var(--muted);font-size:11px}.pool-card>div:last-child{text-align:right}.pool-card b{display:block;color:var(--teal);font-size:17px}.pool-card small{color:var(--muted);font-size:9px}
.empty-counter{margin-top:14px;padding:28px;text-align:center}.empty-counter strong{font-size:16px}.empty-counter p{max-width:620px;margin:8px auto 0;color:var(--muted);font-size:13px;line-height:1.7}.counter-guide{margin-top:25px;padding:28px}.counter-guide>header h2{margin:0 0 12px;font-size:28px;letter-spacing:0}.counter-guide>header>p:last-child{margin:0;color:#586980;font-size:15px;line-height:1.8}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:23px}.guide-grid article{padding:18px;border-top:3px solid #8cc9bf;background:#f7f9fb}.guide-grid h3{margin:0 0 7px;font-size:16px}.guide-grid p,.faq-block p,.source-note p,.riot-legal{margin:0;color:var(--muted);font-size:13px;line-height:1.75}.faq-block{margin-top:25px}.faq-block>h3{margin:0 0 9px;font-size:21px}.faq-block details{border-top:1px solid var(--line)}.faq-block details:last-child{border-bottom:1px solid var(--line)}.faq-block summary{padding:14px 2px;font-size:14px;font-weight:800;cursor:pointer}.faq-block p{padding:0 3px 15px}.source-note{margin-top:22px;padding:17px;border-left:4px solid var(--teal);background:var(--teal-soft)}.source-note strong{display:block;margin-bottom:5px;color:var(--teal);font-size:13px}.riot-legal{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--line);font-size:10px!important}
@media(max-width:980px){.counter-cards{grid-template-columns:1fr}.lane-tips{grid-template-columns:1fr}.pool-fields{grid-template-columns:1fr 150px}.pool-fields button{grid-column:1/-1}}
@media(max-width:700px){.counter-heading h1{font-size:34px}.counter-heading>p:last-child{font-size:16px}.counter-search,.recommend-panel,.lane-plan,.compare-panel,.pool-panel,.counter-guide{padding:18px 15px}.champion-search-row{grid-template-columns:1fr}.popular-champions{display:grid}.role-picker button{font-size:12px}.target-profile{align-items:flex-start;flex-wrap:wrap;padding:16px}.target-portrait{width:64px;height:64px;flex-basis:64px}.target-profile h2{font-size:22px}.target-tags{width:100%;justify-content:flex-start}.counter-tabs button{font-size:12px}.matchup-columns,.guide-grid{grid-template-columns:1fr}.compare-selects{grid-template-columns:1fr}.compare-selects>b{height:auto}.pool-fields{grid-template-columns:1fr}.pool-fields button{grid-column:auto}.counter-card{grid-template-columns:46px minmax(0,1fr) 52px}.counter-card img{width:46px;height:46px}.lane-tips{grid-template-columns:1fr}.stat-row{grid-template-columns:56px minmax(0,1fr) 56px}.counter-guide>header h2{font-size:24px}}
@media(max-width:420px){.role-picker>div{grid-template-columns:repeat(5,minmax(0,1fr))}.role-picker button{padding:0 3px;font-size:11px}.counter-tabs button{font-size:11px}.counter-search>header>span,.recommend-panel>header>span{display:none}.pool-card{grid-template-columns:42px minmax(0,1fr) 66px}.pool-card img{width:42px;height:42px}}