:root{
 --bg:#07100c;--bg-2:#0a1611;--surface:#0e1c16;--surface-2:#13251d;--surface-3:#1a3127;
 --line:rgba(206,240,220,.08);--line-2:rgba(206,240,220,.14);
 --text:#ecf3ee;--text-2:#b7c8be;--muted:#7f978a;
 --accent:#c8f169;--accent-2:#9bd23c;--accent-ink:#0b1607;
 --gold:#d8bd7a;--live:#ff5d63;--up:#4fd88b;--down:#ff6b6b;--warn:#f2c14e;
 --radius:16px;--radius-sm:10px;
 --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
 --display:'Barlow Condensed','Arial Narrow',var(--font);
 color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:500 14px/1.45 var(--font);font-feature-settings:'tnum' 1;
 background-image:radial-gradient(1200px 500px at 85% -10%,rgba(200,241,105,.07),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(56,140,96,.10),transparent 60%);background-attachment:fixed;min-height:100vh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
img{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
code{font:600 12px/1 ui-monospace,Consolas,monospace;background:var(--surface-3);padding:2px 6px;border-radius:6px;color:var(--accent)}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(7,16,12,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-inner{max-width:1320px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand{flex-shrink:0}
.brand-logo{width:200px;max-width:100%;height:auto}
.site-foot .brand-logo{width:160px}
.word{font:700 21px/1 var(--display);letter-spacing:.06em}
.word b{font-weight:500;color:var(--accent);margin-left:2px}
.feed-state{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}
.feed-state::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted)}
.feed-state.ok::before{background:var(--up);box-shadow:0 0 0 3px rgba(79,216,139,.18)}
.feed-state.err::before{background:var(--live)}
.feed-state.report::before{background:var(--gold)}
.feed-state.wait::before{background:var(--warn);animation:blink 1s infinite}
.prefs{margin-left:auto;display:flex;gap:8px}
.select select{appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237f978a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:999px;padding:7px 32px 7px 14px;font-size:12px;font-weight:600;color:var(--text-2)}
.select select:hover{border-color:var(--line-2)}

/* ---------- date bar ---------- */
.datebar{display:flex;align-items:center;gap:8px;margin:22px 0 16px}
.days{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{padding:9px 6px;border-radius:12px;text-align:center;border:1px solid transparent;color:var(--text-2);transition:background .2s,border-color .2s}
.day small{display:block;font-size:11px;color:var(--muted);text-transform:capitalize}
.day b{font:600 17px/1.15 var(--display);letter-spacing:.02em}
.day:hover{background:var(--surface)}
.day.is-today small{color:var(--accent)}
.day[aria-pressed="true"]{background:var(--surface-2);border-color:var(--line-2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);font-size:20px;color:var(--text-2);display:grid;place-items:center;flex:none}
.icon-btn:hover{background:var(--surface);color:var(--text)}
.cal input{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--text-2);font-size:12px;color-scheme:dark}

/* ---------- banners ---------- */
.banner{display:grid;gap:8px;margin-bottom:16px}
.note{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;color:var(--text-2)}
.note p{margin:0}
.note strong{color:var(--text)}
.note.err{border-color:rgba(255,93,99,.35);background:linear-gradient(90deg,rgba(255,93,99,.08),transparent)}
.note.warn{border-color:rgba(242,193,78,.28);background:linear-gradient(90deg,rgba(242,193,78,.07),transparent)}
.note button,.empty button{flex:none;padding:7px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px}

/* ---------- rail ---------- */
.rail-wrap{margin-bottom:22px}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.section-head h2{margin:0;font:600 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.card{scroll-snap-align:start;display:grid;gap:9px;text-align:left;padding:14px 16px;border-radius:var(--radius);background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.card.is-live{border-color:rgba(200,241,105,.22);background:linear-gradient(160deg,#16301f,var(--surface))}
.card-league{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-league img{width:16px;height:16px;object-fit:contain}
.card-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;font-weight:600}
.card-row .sc{font:700 22px/1 var(--display)}
.card-foot{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent)}
.card:not(.is-live) .card-foot{color:var(--muted);font-weight:600}
.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(255,93,99,.6);animation:pulse 1.6s infinite}

/* ---------- crest ---------- */
.crest{width:24px;height:24px;object-fit:contain;flex:none}
.crest.sm{width:20px;height:20px}
.crest.lg{width:64px;height:64px}
.crest.ph{display:grid;place-items:center;border-radius:50%;background:var(--surface-3);color:var(--text-2);font:700 10px/1 var(--font);letter-spacing:.02em}
.crest.lg.ph{font-size:20px}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start;margin-bottom:40px}
.leagues{position:sticky;top:76px;max-height:calc(100vh - 96px);display:flex;flex-direction:column;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line)}
.aside-head{display:flex;justify-content:space-between;align-items:baseline;padding:16px 16px 8px}
.aside-head h2{margin:0;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.league-list{overflow-y:auto;padding:0 8px 10px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.lg{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;text-align:left;color:var(--text-2)}
.lg:hover{background:var(--surface)}
.lg[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
.lg img{width:20px;height:20px;object-fit:contain;flex:none}
/* Banyak logo liga dibuat untuk latar putih; beri alas terang agar terbaca di tema gelap. */
.lg img,.lg-logo,.card-league img,.d-league img{background:#eef3ef;border-radius:6px;padding:2px}
.lg-dot{width:20px;height:20px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--accent) 0 3px,var(--surface-3) 4px)}
.lg-name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-name small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.lg-count{font-size:11px;color:var(--muted)}
.lg-live{font-size:10px;font-weight:800;color:var(--live);background:rgba(255,93,99,.12);padding:2px 6px;border-radius:999px}

/* ---------- board ---------- */
.board{min-width:0}
.board-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--text-2);display:flex;gap:7px;align-items:center;transition:background .2s,border-color .2s}
.chip span{font-weight:600;color:var(--muted);font-size:11px}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip[aria-pressed="true"] span{color:#4c5f55}
.chip-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--live)}
.search{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);min-width:240px;color:var(--muted)}
.search input{border:0;background:none;outline:none;padding:9px 0;width:100%;font-size:13px;color:var(--text)}
.search:focus-within{border-color:var(--line-2)}
.board-sub{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.seg{display:flex;padding:3px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.seg button{padding:7px 14px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--accent)}
#count{font-size:12px}

.group{border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);margin-bottom:12px;overflow:hidden}
.group-head{display:grid;grid-template-columns:28px 1fr var(--odds-w,186px) 36px;align-items:center;gap:12px;padding:12px 14px 10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),transparent)}
.group-head h3{margin:0;font-size:14px;font-weight:700}
.group-head small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.lg-logo{width:26px;height:26px;object-fit:contain}
.flag{width:14px;height:10px;object-fit:cover;border-radius:2px}
.odds-head{display:grid;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;grid-column:3}
.k-result{grid-template-columns:repeat(3,1fr)}
.k-handicap,.k-total{grid-template-columns:repeat(2,1fr)}

.row{display:grid;grid-template-columns:62px minmax(0,1fr) var(--odds-w,186px) 36px;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);transition:background .15s}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(255,255,255,.015)}
.row.is-live{box-shadow:inset 3px 0 0 var(--live)}
.when{display:grid;gap:2px;text-align:center}
.when b{font:600 17px/1 var(--display);letter-spacing:.02em}
.when small{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.is-live .when b{color:var(--accent)}
.live-tag{color:var(--live)!important}
.muted-b{color:var(--muted)}
.st-postponed .teams,.st-cancelled .teams,.st-abandoned .teams{opacity:.55}
.teams{display:grid;gap:6px;text-align:left;min-width:0;padding:2px 0}
.team{display:grid;grid-template-columns:20px minmax(0,1fr) 24px;align-items:center;gap:10px;font-weight:600;font-size:14px}
.teams:hover .name{color:var(--accent)}
.sc{font:700 18px/1 var(--display);text-align:right;color:var(--text-2)}
.sc.win,.is-live .sc{color:var(--text)}
.sc.flash{animation:goal 2.4s ease-out}
.st-finished .team:has(.sc:not(.win)) .name{color:var(--text-2)}

.odds{display:grid;gap:6px}
.odd{position:relative;display:grid;gap:1px;place-items:center;padding:6px 4px;border-radius:9px;background:var(--surface);border:1px solid var(--line);min-height:44px}
.odd small{font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.odd b{font:600 16px/1 var(--display);letter-spacing:.02em}
.group .k-result .odd small{display:none}
.odd.src-live{border-color:rgba(200,241,105,.18)}
.odd.up b{color:var(--up)}.odd.down b{color:var(--down)}
.odd.up::after,.odd.down::after{position:absolute;top:3px;right:5px;font-size:8px}
.odd.up::after{content:'▲';color:var(--up)}
.odd.down::after{content:'▼';color:var(--down)}
.odd.up,.odd.down{animation:tick 1.6s ease-out}
.odd.susp{opacity:.6}
.lock{display:inline-block;width:10px;height:12px;position:relative}
.lock::before{content:'';position:absolute;left:1px;right:1px;bottom:0;height:7px;border-radius:2px;background:var(--muted)}
.lock::after{content:'';position:absolute;left:2.5px;right:2.5px;top:0;height:7px;border:1.5px solid var(--muted);border-bottom:0;border-radius:4px 4px 0 0}
.odds-load{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:9px;border:1px dashed var(--line-2);color:var(--muted);font-size:12.5px;font-weight:700;transition:color .2s,border-color .2s}
.odds-load span{font-size:16px}
.odds-load:hover{color:var(--accent);border-color:rgba(200,241,105,.4)}
.fav{width:32px;height:32px;border-radius:50%;font-size:17px;color:var(--muted);display:grid;place-items:center}
.fav:hover{background:var(--surface);color:var(--text)}
.fav[aria-pressed="true"]{color:var(--gold)}

.empty{padding:48px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--radius);color:var(--text-2)}
.empty strong{display:block;font:600 22px/1.2 var(--display);letter-spacing:.04em;color:var(--text);margin-bottom:4px}
.empty p{margin:0 0 14px}
.skeleton{display:grid;gap:8px}
.skeleton span{height:58px;border-radius:12px;background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.3s infinite linear}
.skeleton.tall span{height:90px}
.board-foot{margin:14px 2px 0;font-size:11.5px;color:var(--muted)}

.site-foot{border-top:1px solid var(--line);padding-top:22px;padding-bottom:40px;display:grid;gap:8px;color:var(--muted);font-size:12px}
.site-foot p{margin:0;max-width:760px}
.site-foot .word{font-size:17px;color:var(--text-2)}

/* ---------- detail ---------- */
dialog{padding:0;border:0;background:transparent;color:var(--text);max-width:min(720px,100vw - 24px);width:100%;max-height:calc(100vh - 40px)}
dialog::backdrop{background:rgba(2,6,4,.72);backdrop-filter:blur(6px)}
.sheet{position:relative;background:linear-gradient(180deg,var(--surface-2),var(--bg-2) 260px);border:1px solid var(--line-2);border-radius:22px;padding:22px 24px 20px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;font-size:22px;color:var(--text-2);background:var(--surface);border:1px solid var(--line)}
.close:hover{color:var(--text)}
.d-league{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-right:44px}
.d-league img{width:20px;height:20px;object-fit:contain}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:22px 0 8px}
.sb-team{display:grid;justify-items:center;gap:10px;text-align:center;font-size:15px}
.sb-mid{display:grid;justify-items:center;gap:8px;min-width:130px}
.sb-mid small{color:var(--muted);font-size:12px}
.sb-score{font:700 54px/1 var(--display);letter-spacing:.04em}
.sb-score i{font-style:normal;color:var(--muted);margin:0 6px}
.vs{font-size:28px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-3);color:var(--text-2)}
.tag.live{background:rgba(255,93,99,.14);color:var(--live)}
.d-meta{text-align:center;color:var(--muted);font-size:12.5px;margin:6px 0 16px}
.dsec{margin-top:22px}
.dsec h3{margin:0 0 10px;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.mkts{display:grid;gap:10px}
.mkt{padding:12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.mkt-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;font-size:12px;color:var(--muted)}
.mkt-head h4{margin:0;font-size:13.5px;color:var(--text)}
.mkt-head .tag{padding:2px 8px;font-size:10px}
.mkt-cells{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ev{display:grid;grid-template-columns:46px 22px 1fr;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:var(--bg-2)}
.ev.away{grid-template-columns:1fr 22px 46px;text-align:right}
.ev.away .ev-min{order:3}.ev.away .ev-ico{order:2}.ev.away .ev-txt{order:1}
.ev-min{font:600 15px/1 var(--display);color:var(--accent)}
.ev-txt b{font-size:13px;display:block}
.ev-txt small{color:var(--muted);font-size:11.5px}
.ev-ico{width:16px;height:16px;justify-self:center;border-radius:50%;background:var(--surface-3)}
.ev-goal .ev-ico{background:radial-gradient(circle at 35% 35%,#fff 0 30%,#cfd8d3 31% 100%)}
.ev-card .ev-ico{width:11px;height:15px;border-radius:2px;background:var(--warn)}
.ev-card.red .ev-ico{background:var(--live)}
.ev-sub .ev-ico{background:none;border:2px solid var(--up);width:13px;height:13px}
.ev-var .ev-ico{border-radius:3px;background:var(--surface-3);box-shadow:inset 0 0 0 2px var(--text-2)}
.stat{margin-bottom:12px}
.stat-top{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;font-size:12.5px;color:var(--text-2);text-align:center;margin-bottom:6px}
.stat-top b{font:600 16px/1 var(--display);color:var(--text)}
.stat-top b:first-child{text-align:left}.stat-top b:last-child{text-align:right}
.bar{display:flex;gap:4px;height:6px}
.bar span{border-radius:4px;background:var(--accent);min-width:2px}
.bar span:last-child{background:var(--surface-3)}
.bet{border-top:1px solid var(--line)}
.bet summary{display:flex;justify-content:space-between;padding:11px 2px;cursor:pointer;font-weight:600;font-size:13px;list-style:none}
.bet summary::-webkit-details-marker{display:none}
.bet summary span{color:var(--muted);font-size:11px}
.bet summary::after{content:'+';color:var(--muted);margin-left:8px}
.bet[open] summary::after{content:'−'}
.bet summary{gap:8px}.bet summary span{margin-left:auto}
.bet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;padding-bottom:12px}
.d-foot{margin:22px 0 0;font-size:11.5px;color:var(--muted);text-align:center}

/* ---------- iklan ---------- */
.ad-slot-top{min-width:0;margin-bottom:18px}
.ad-slot-inline{margin:0 0 12px}
.ad-slot-sidebar{padding:4px 12px 14px;border-top:1px solid var(--line)}
.ad-slot-detail{margin-top:22px}
.ad{position:relative}
.ad-link{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);transition:border-color .2s,transform .2s}
.ad-link:hover{border-color:var(--line-2);transform:translateY(-1px)}
.ad img{width:100%;height:auto}
.ad-inline img{aspect-ratio:8/1;object-fit:cover}
.ad-sidebar img{aspect-ratio:6/5;object-fit:cover}
.ad-detail img{aspect-ratio:4/1;object-fit:cover}
.ad-label{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#e6ece8;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.ad-ph-box{display:grid;place-items:center;align-content:center;gap:3px;text-align:center;text-decoration:none;color:var(--muted);border:1px dashed var(--line-2);border-radius:14px;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(206,240,220,.025) 12px 24px);padding:14px}
.ad-top .ad-ph-box,.ad-inline .ad-ph-box{aspect-ratio:8/1;min-height:84px}
.ad-sidebar .ad-ph-box{aspect-ratio:6/5}
.ad-detail .ad-ph-box{aspect-ratio:4/1;min-height:84px}
.ad-ph-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.ad-ph-box strong{color:var(--text-2);font-size:14px}
.ad-ph-box small{font-size:11px}
a.ad-ph-box:hover{border-color:rgba(216,189,122,.5);color:var(--text-2)}

/* ---------- motion ---------- */
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(255,93,99,0)}100%{box-shadow:0 0 0 0 rgba(255,93,99,0)}}
@keyframes blink{50%{opacity:.3}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes goal{0%{color:var(--accent);text-shadow:0 0 14px rgba(200,241,105,.8)}100%{text-shadow:none}}
@keyframes tick{0%{background:var(--surface-3)}100%{background:var(--surface)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
 .layout{grid-template-columns:220px minmax(0,1fr)}
 .search{min-width:0;flex:1}
}
@media (max-width:900px){
 .wrap{padding:0 16px}
 .top-inner{padding:10px 16px;flex-wrap:wrap;gap:10px 12px}
 .prefs{margin-left:0;width:100%}
 .prefs .select{flex:1}.prefs select{width:100%}
 .feed-state{margin-left:auto}
 .layout{grid-template-columns:minmax(0,1fr)}
 .leagues{min-width:0;position:static;max-height:none;background:none;border:0}
 .aside-head{display:none}
 .league-list{display:flex;gap:6px;overflow-x:auto;padding:0 0 6px;margin:0 -16px;padding-inline:16px}
 .lg{width:auto;flex:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px}
 .lg-name small{display:none}
 .lg-count{display:none}
 .ad-slot-sidebar{display:none}
 .board-head{display:grid;grid-template-columns:minmax(0,1fr)}
 .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px}
 .chip{flex:none}
}
@media (max-width:640px){
 .brand-logo{width:170px}
 .datebar{gap:4px;margin:14px 0 12px}
 .days{grid-template-columns:repeat(5,minmax(0,1fr))}
 .day:first-child,.day:last-child{display:none}
 .day{padding:7px 2px}.day b{font-size:15px}
 .cal{display:none}
 .icon-btn{width:32px;height:32px}
 .board-sub{flex-wrap:wrap}
 .seg{flex:1}.seg button{flex:1;padding:7px 6px}
 .group-head{grid-template-columns:24px 1fr;padding:11px 12px 9px}
 .odds-head{display:none}
 .row{grid-template-columns:50px minmax(0,1fr) 32px;grid-template-areas:'when teams fav' 'odds odds odds';gap:8px 10px;padding:10px 12px}
 .when{grid-area:when}.teams{grid-area:teams}.fav{grid-area:fav}
 .odds,.odds-load{grid-area:odds}
 .odds-load{min-height:34px}
 .group .k-result .odd small{display:block}
 .odd{grid-auto-flow:column;justify-content:space-between;min-height:34px;padding:5px 10px}
 .sheet{padding:18px 16px;border-radius:18px}
 .ad-inline img{aspect-ratio:16/5}
 .ad-top .ad-ph-box,.ad-inline .ad-ph-box{aspect-ratio:16/5}
 .sb-score{font-size:42px}.crest.lg{width:48px;height:48px}
 .sb-mid{min-width:96px}
 .sb-team{font-size:13px}
 .mkt-cells{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
 .mkt-head{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- laporan iklan ---------- */
.report{padding-top:28px;padding-bottom:48px}
.report-auth{max-width:460px;display:grid;gap:8px;margin-bottom:18px;font-size:13px;color:var(--text-2)}
.report-row{display:flex;gap:8px}
.report-row input{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;color:var(--text)}
.report-row button,.ghost{padding:9px 16px;border-radius:10px;font-weight:700;font-size:13px}
.report-row button{background:var(--accent);color:var(--accent-ink)}
.ghost{border:1px solid var(--line-2);color:var(--text-2)}
.ghost:hover{color:var(--text);border-color:var(--text-2)}
.report-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{padding:14px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.kpi small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kpi b{font:600 30px/1.1 var(--display)}
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:var(--bg-2)}
.report-table{width:100%;border-collapse:collapse;font-size:13px}
.report-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line)}
.report-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.report-table tr:last-child td{border-bottom:0}
.report-table td small{display:block;color:var(--muted);font-size:11px}
.report-table .num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}