*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0d1f2d;
  --bg2:#0a1929;
  --bg3:#0f2336;
  --surface:#112233;
  --surface2:#162840;
  --surface3:#1a3050;
  --border:#1e3448;
  --border2:#243d55;
  --accent:#e8292a;
  --accent-hover:#c41e1f;
  --teal:#0d6e8a;
  --teal2:#0a5a72;
  --text:#e2e8f0;
  --text2:#94a3b8;
  --text3:#5a7a94;
  --green:#22c55e;
  --green-bg:rgba(34,197,94,.12);
  --yellow:#fbbf24;
  --red:#ef4444;
  --live-red:#e8292a;
  --gold:#f59e0b;
  --font:'Barlow',sans-serif;
  --row-hover:rgba(255,255,255,.03);
}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;min-height:100vh;line-height:1.4}

[data-theme="light"]{
  --bg:#f0f4f8;
  --bg2:#e2e8f0;
  --bg3:#d8e2ed;
  --surface:#ffffff;
  --surface2:#eaf0f7;
  --surface3:#d4dfe9;
  --border:#c8d6e5;
  --border2:#b0c2d4;
  --accent:#e8292a;
  --accent-hover:#c41e1f;
  --text:#1a2f45;
  --text2:#3d5a78;
  --text3:#7a96b0;
  --row-hover:rgba(0,0,0,.03);
}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}
svg{display:inline-block;vertical-align:middle}

.topbar{display:none!important;align-items:center;justify-content:center;gap:6px;background:var(--surface2);color:var(--text2);font-size:11px;font-weight:500;padding:5px 16px;border-bottom:1px solid var(--border2);white-space:nowrap;overflow:hidden}
.refresh-topbar-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:inherit;border-radius:4px;padding:2px 9px;font-size:10px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;margin-left:4px}
.refresh-topbar-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.refresh-topbar-btn:disabled{opacity:.5;cursor:wait}
.refresh-topbar-btn.spinning svg{animation:spin .7s linear infinite}
.refresh-ctrl{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.refresh-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9);border-radius:4px;padding:3px 10px;font-size:10px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s;display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.refresh-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6);color:#fff}
.refresh-btn:disabled{opacity:.5;cursor:wait}
.refresh-btn.spinning svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.refresh-above-header{display:none}

.refresh-main-btn{margin-left:auto;background:var(--surface2);border:1px solid var(--border2);color:var(--text2);border-radius:6px;padding:5px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;height:32px}
.refresh-main-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.refresh-main-btn:disabled{opacity:.5;cursor:wait}
.refresh-main-btn.spinning svg{animation:spin .7s linear infinite}
.refresh-main-btn.live-active{border-color:var(--live-red);color:var(--live-red)}

.header-inner,
.sport-nav-inner,
.main{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  box-sizing:border-box;
}

.header{background:var(--bg2);border-bottom:2px solid var(--border)}
.header-inner{display:flex;align-items:center;padding:12px 24px;gap:16px;width:100%}
.logo{display:flex;align-items:baseline;gap:0;font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800;letter-spacing:-.5px;flex-shrink:0}
.logo-live{color:#fff}
.logo-score{color:#fff}
.logo-dot{color:var(--accent);font-size:24px;margin:0 1px}
.logo-in{background:var(--accent);color:#fff;padding:1px 6px;border-radius:3px;font-size:20px;font-weight:800;margin-left:2px}
.header-spacer{flex:1}
.header-actions{display:flex;align-items:center;gap:8px}
.btn-icon{background:none;border:none;color:var(--text2);padding:6px;border-radius:6px;transition:all .15s;display:flex;align-items:center;justify-content:center;width:34px;height:34px}
.btn-icon:hover{background:var(--surface2);color:var(--text)}
.btn-login{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border2);color:var(--text);padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;transition:all .15s}
.btn-login:hover{background:var(--surface2);border-color:var(--text3)}
.btn-lang{position:relative;display:flex;align-items:center}
.btn-lang-toggle{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--border2);color:var(--text);padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap}
.btn-lang-toggle:hover{background:var(--surface2);border-color:var(--text3)}
.btn-lang-flag{font-size:15px;line-height:1}
.btn-lang-code{font-size:11px;font-weight:700;letter-spacing:.3px}
.btn-lang-chevron{font-size:9px;color:var(--text3);transition:transform .2s}
.btn-lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--border2);border-radius:8px;min-width:160px;z-index:600;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);display:none;pointer-events:none}
.btn-lang-dropdown.open{display:block;pointer-events:all}
.lang-option{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .12s}
.lang-option:hover{background:rgba(255,255,255,.05);color:var(--text)}
.lang-option.active{color:var(--accent);font-weight:700}
.lang-option-flag{font-size:16px;flex-shrink:0}
.lang-option-name{flex:1}
.lang-option-check{font-size:11px;color:var(--accent)}
.btn-menu{background:none;border:none;color:var(--text2);padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.btn-menu span{display:block;width:18px;height:2px;background:var(--text2);border-radius:1px}
.user-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--border2);color:var(--text);padding:4px 10px 4px 4px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.user-btn:hover{background:var(--surface2)}
.user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border2);border-radius:8px;min-width:180px;z-index:500;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4);display:none}
.user-dropdown.open{display:block}
.user-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border)}
.user-dropdown-name{font-size:13px;font-weight:700;color:var(--text)}
.user-dropdown-email{font-size:11px;color:var(--text3);margin-top:2px}
.user-dropdown-item{display:flex;align-items:center;gap:9px;padding:10px 16px;font-size:12px;color:var(--text2);cursor:pointer;transition:background .12s}
.user-dropdown-item:hover{background:var(--surface2);color:var(--text)}
.user-dropdown-item svg{width:14px;height:14px;flex-shrink:0}
.user-dropdown-sep{height:1px;background:var(--border);margin:4px 0}
.user-dropdown-item.danger{color:#ef4444}
.user-dropdown-item.danger:hover{background:rgba(239,68,68,.08)}
.header-actions{position:relative}
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;padding:16px}
.auth-overlay.open{opacity:1;pointer-events:all}
.auth-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;width:100%;max-width:400px;overflow:hidden;transform:translateY(-10px);transition:transform .2s}
.auth-overlay.open .auth-modal{transform:translateY(0)}
.auth-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.auth-modal-title{font-size:15px;font-weight:700;color:var(--text)}
.auth-close{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px}
.auth-close:hover{color:var(--text);background:var(--surface2)}
.auth-tabs{display:flex;border-bottom:1px solid var(--border)}
.auth-tab{flex:1;padding:11px;text-align:center;font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;background:none;border-left:none;border-right:none;border-top:none;text-transform:uppercase;letter-spacing:.3px}
.auth-tab.active{color:#fff;border-bottom-color:var(--accent)}
.auth-body{padding:20px}
.auth-field{margin-bottom:14px}
.auth-label{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.auth-input{width:100%;background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:9px 12px;border-radius:6px;font-size:13px;font-family:var(--font);transition:border-color .15s;box-sizing:border-box}
.auth-input:focus{outline:none;border-color:var(--accent)}
.auth-submit{width:100%;background:var(--accent);color:#fff;border:none;padding:10px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .15s;margin-top:4px}
.auth-submit:hover{background:var(--accent-hover)}
.auth-submit:disabled{opacity:.5;cursor:not-allowed}
.auth-msg{font-size:12px;padding:8px 12px;border-radius:6px;margin-bottom:12px;display:none}
.auth-msg.error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#ef4444;display:block}
.auth-msg.success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#22c55e;display:block}

.sport-nav{background:var(--bg2);border-bottom:1px solid var(--border);position:relative;display:flex;align-items:center}
.sport-nav-inner{display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;width:100%;padding:8px 12px;gap:6px;scroll-behavior:smooth}
.sport-nav-inner::-webkit-scrollbar{display:none}
.sport-nav-arrow{display:none;align-items:center;justify-content:center;width:32px;min-width:32px;height:100%;background:var(--bg2);border:none;cursor:pointer;color:var(--text2);font-size:16px;padding:0;transition:color .15s,background .15s;z-index:2;position:relative}
.sport-nav-arrow:hover{color:var(--text);background:rgba(255,255,255,.06)}
.sport-nav-arrow.visible{display:flex}
.sport-nav-arrow-left{border-right:1px solid var(--border)}
.sport-nav-arrow-right{border-left:1px solid var(--border)}
.sport-item{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;border:1.5px solid transparent;border-radius:999px;white-space:nowrap;transition:all .15s;text-transform:capitalize;letter-spacing:0;background:none;flex-shrink:0}
.sport-item:hover{color:var(--text);border-color:var(--border2);background:var(--surface)}
.sport-item.active{color:#fff;background:var(--surface2);border-color:var(--text2)}
.sport-item svg{width:16px;height:16px;flex-shrink:0}
.sport-item .badge{background:var(--accent);color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;font-weight:700;margin-left:2px}

.main{display:flex;gap:0;width:100%;position:relative}

.btn-sidebar-toggle{
  background:none;border:none;color:var(--text2);padding:6px;
  border-radius:6px;cursor:pointer;display:none;align-items:center;
  justify-content:center;width:34px;height:34px;transition:all .15s;flex-shrink:0;
}
.btn-sidebar-toggle:hover{background:var(--surface2);color:var(--text)}

.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity .25s;backdrop-filter:blur(2px);
}
.sidebar-overlay.open{opacity:1;pointer-events:all}

.sidebar{
  width:210px;flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  min-height:calc(100vh - 110px);
  display:flex;flex-direction:column;
  overflow-y:auto;
}

.sidebar-header{display:none}

.sidebar-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.sidebar-body::-webkit-scrollbar{width:3px}
.sidebar-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.sidebar-klasemen-btn{display:flex;align-items:center;gap:9px;padding:10px 16px;cursor:pointer;transition:all .15s;color:#4dc6e0;font-size:13px;font-weight:700;border-bottom:2px solid var(--teal);background:rgba(13,110,138,.1)}
.sidebar-klasemen-btn:hover{background:rgba(13,110,138,.25)}
.sidebar-klasemen-btn.active{background:var(--teal);color:#fff}

@media(max-width:800px){
  .btn-sidebar-toggle{display:flex}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:230px;min-height:unset;
    z-index:210;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.open{transform:translateX(0)}

  .sidebar-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 16px;border-bottom:1px solid var(--border);
    background:var(--surface);flex-shrink:0;
  }
}

.sidebar-search-wrap{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-search-inp{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px 10px 6px 28px;font-size:12px;color:var(--text);outline:none;box-sizing:border-box}
.sidebar-search-inp::placeholder{color:var(--text3)}
.sidebar-search-inp:focus{border-color:var(--accent)}
.sidebar-search-wrap{position:relative}
.sidebar-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--text3);pointer-events:none}
.sidebar-show-more{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:11px;color:var(--accent);cursor:pointer;border-top:1px solid var(--border);font-weight:600;transition:background .12s}
.sidebar-show-more:hover{background:rgba(232,41,42,.07)}
.sidebar-hidden-league{display:none !important}.sidebar-hidden-league.sb-visible{display:flex !important;align-items:center}
.sidebar-section-title{padding:12px 16px 6px;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:7px}
.sidebar-section-title svg{color:var(--yellow);width:13px;height:13px}
.sidebar-league{display:flex;align-items:center;gap:9px;padding:7px 16px;cursor:pointer;transition:background .12s;color:var(--text2);font-size:12px;font-weight:500}
.sidebar-league:hover{background:rgba(255,255,255,.04);color:var(--text)}
.sidebar-league.active{background:rgba(232,41,42,.1);color:#fff;border-left:3px solid var(--accent)}
.sidebar-league.active .name{color:#fff;font-weight:700}
.sidebar-league-all{display:flex;align-items:center;gap:9px;padding:7px 16px;cursor:pointer;transition:background .12s;color:var(--accent);font-size:12px;font-weight:600;border-bottom:1px solid var(--border)}
.sidebar-league-all:hover{background:rgba(232,41,42,.07)}
.league-filter-banner{display:none;align-items:center;gap:8px;padding:7px 16px;background:rgba(232,41,42,.1);border-bottom:2px solid var(--accent);font-size:12px;font-weight:600;color:#fff}
.league-filter-banner.show{display:flex}
.league-filter-banner button{background:none;border:1px solid rgba(232,41,42,.4);color:var(--accent);font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:auto;font-weight:700}
.league-filter-banner button:hover{background:rgba(232,41,42,.15)}
.sidebar-league .flag{width:18px;height:13px;border-radius:1px;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.sidebar-league .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sidebar-divider{height:1px;background:var(--border);margin:4px 0}
.tim-saya{padding:10px 16px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:6px;margin-top:4px}
.tim-saya svg{color:var(--yellow);width:13px;height:13px}
.tambah-tim{display:flex;align-items:center;gap:7px;padding:7px 16px;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:color .15s}
.tambah-tim:hover{color:var(--accent-hover)}
.tambah-tim svg{width:14px;height:14px}
.negara-title{padding:10px 16px 6px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.negara-item{padding:6px 16px;font-size:12px;color:var(--text2);cursor:pointer;transition:all .12s}
.negara-item:hover{color:var(--text);background:rgba(255,255,255,.03)}

.header{background:var(--bg2);border-bottom:2px solid var(--border)}
.sport-nav{background:var(--bg2);border-bottom:1px solid var(--border)}
.content{flex:1;min-width:0}

.ks-nav-btn{background:var(--surface2)!important;border-color:var(--border2)!important;color:var(--text2)!important;border-radius:6px!important;font-size:11px!important;padding:4px 10px!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap}
.ks-nav-btn:hover{color:var(--text)!important;border-color:var(--accent)!important}
.ks-nav-btn.active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
#pageKlasemen{display:none;flex:1;min-width:0;flex-direction:column;width:100%;overflow-y:auto}
#pageKlasemen.active{display:flex}
.ks-header{padding:14px 20px 10px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ks-title{font-size:14px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.5px;flex:0 0 auto}
.ks-league-select{background:var(--surface);border:1px solid var(--border2);color:var(--text);padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;outline:none}
.ks-league-select:focus{border-color:var(--accent)}
.ks-refresh-btn{margin-left:auto;background:var(--surface);border:1px solid var(--border2);color:var(--text2);padding:5px 12px;border-radius:6px;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
.ks-refresh-btn:hover{color:var(--text);border-color:var(--accent)}
.ks-body{padding:0 0 40px}
.ks-table-wrap{overflow-x:auto}
.ks-table{width:100%;border-collapse:collapse;font-size:12px}
.ks-table th{background:var(--surface);color:var(--text3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;text-align:center;position:sticky;top:0;z-index:2;white-space:nowrap;border-bottom:1px solid var(--border)}
.ks-table th:first-child,.ks-table th:nth-child(2){text-align:left}
.ks-table td{padding:7px 10px;border-bottom:1px solid var(--border);text-align:center;color:var(--text2);vertical-align:middle}
.ks-table tr:hover td{background:rgba(255,255,255,.03)}
.ks-table td:first-child{text-align:left;width:28px;color:var(--text3);font-weight:700;font-size:11px}
.ks-table td:nth-child(2){text-align:left}
.ks-rank-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:10px;font-weight:800}
.ks-rank-cl{background:rgba(59,130,246,.2);color:#60a5fa}
.ks-rank-el{background:rgba(251,146,60,.2);color:#fb923c}
.ks-rank-rel{background:rgba(239,68,68,.2);color:#f87171}
.ks-rank-elconf{background:rgba(168,85,247,.2);color:#c084fc}
.ks-team-cell{display:flex;align-items:center;gap:8px;min-width:130px}
.ks-team-logo{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.ks-team-logo-fb{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.ks-team-name{font-weight:600;color:var(--text);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.ks-pts{font-weight:800;color:var(--text);font-size:13px}
.ks-form-wrap{display:flex;gap:2px}
.ks-form-badge{width:16px;height:16px;border-radius:3px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff}
.ks-form-w{background:#22c55e}
.ks-form-d{background:#6b7280}
.ks-form-l{background:#ef4444}
.ks-loading{text-align:center;padding:48px 20px;color:var(--text3)}
.ks-spin{display:inline-block;width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:10px}
.ks-error{text-align:center;padding:48px 20px;color:var(--text3)}
@media(max-width:768px){
  .ks-header{padding:10px 12px;gap:8px}
  .ks-title{font-size:12px}
  .ks-table th,.ks-table td{padding:6px 7px;font-size:11px}
  .ks-team-name{max-width:80px}
}

.filter-bar{display:flex;align-items:center;gap:0;padding:0 8px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;height:52px}
.filter-tab{padding:0 18px;font-size:12px;font-weight:800;border:none;border-radius:999px;background:#fff;color:#111;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.3px;height:34px;display:inline-flex;align-items:center;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.filter-tab:hover{background:#f0f0f0}
.filter-tab.active{background:#fff;color:#111}
.filter-bar-spacer{flex:1}
.filter-sep{display:none}
.date-nav-wrap{display:none}
.date-arr{background:none;border:none;color:var(--text2);width:36px;height:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s;flex-shrink:0}
.date-arr:hover{color:var(--text)}
.date-arr svg{pointer-events:none}
.date-center{flex:1;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--text);cursor:default;letter-spacing:.2px}
.date-pills{display:none}
.date-pill{display:none}
.date-other{display:none}
.date-display{display:none}
.date-cal-btn{background:none;border:none;color:var(--text2);width:40px;height:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s;flex-shrink:0}
.date-cal-btn:hover{color:var(--text)}
.date-cal-btn svg{pointer-events:none}

.ad-banner{background:var(--surface);border:1px solid var(--border2);border-radius:6px;margin:10px 16px;padding:12px 14px;display:flex;align-items:center;gap:12px;position:relative}
.ad-banner img{width:100%;max-width:728px;height:90px;object-fit:cover;display:block;margin:0 auto;border-radius:4px}
.ad-banner iframe,.ad-banner ins{display:block;width:100%;max-width:728px;height:90px;margin:0 auto}
.ad-close{position:absolute;right:10px;top:10px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;line-height:1}
.ad-close:hover{color:var(--text)}
.ad-logo-1xbet{background:#1a5eba;color:#fff;font-weight:900;font-size:13px;padding:4px 10px;border-radius:3px;flex-shrink:0;font-style:italic}
.ad-logo-1xbet span{color:#fbbf24}
.ad-text{flex:1;min-width:0}
.ad-title{font-size:13px;font-weight:700;color:#fbbf24;margin-bottom:2px}
.ad-sub{font-size:10px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-btn{background:#fbbf24;color:#000;font-weight:700;font-size:11px;padding:6px 16px;border-radius:4px;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.ad-btn:hover{background:#f59e0b}
.ad-label{font-size:9px;color:var(--text3);text-align:center;margin:4px 16px 2px}

.ad-banner-bottom{display:flex;justify-content:center;padding:8px 16px 12px;background:transparent}
.ad-banner-bottom img{width:300px;max-width:100%;height:250px;object-fit:cover;display:block;border-radius:6px}
.ad-banner-bottom iframe,.ad-banner-bottom ins{display:block;width:300px;max-width:100%;height:250px}

.league-group{border-bottom:1px solid var(--border)}
.league-header{display:flex;align-items:center;gap:10px;padding:7px 16px;background:var(--surface);cursor:pointer;user-select:none;transition:background .12s}
.league-header:hover{background:var(--surface2)}
.league-group--live>.league-header{border-left:3px solid var(--live-red);background:rgba(239,68,68,.05)}
.lh-live-badge{background:var(--live-red);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:4px;letter-spacing:.5px;animation:livePulse 2s infinite;flex-shrink:0}
.lh-popular-badge{font-size:11px;flex-shrink:0;opacity:.6}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.6}}
.lh-star{background:none;border:none;color:var(--text3);padding:2px;cursor:pointer;display:flex;align-items:center;font-size:14px;transition:color .15s;flex-shrink:0}
.lh-star:hover,.lh-star.fav{color:var(--yellow)}
.lh-flag{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.lh-flag img{width:20px;height:14px;border-radius:1px;object-fit:cover}
.lh-name{font-size:12px;font-weight:700;color:var(--text);flex:1;display:flex;align-items:center;gap:6px}
.lh-name .country{color:var(--text3);font-weight:500}
.lh-pin{color:var(--teal);font-size:12px;margin-left:2px}
.lh-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.lh-klasemen{font-size:11px;color:var(--text3);cursor:pointer;transition:color .15s;font-weight:500}
.lh-klasemen:hover{color:var(--text)}
.lh-chevron{color:var(--text3);font-size:11px;transition:transform .2s;flex-shrink:0}
.lh-chevron.open{transform:rotate(180deg)}

.match-list{background:var(--bg)}
.match-row{display:flex;align-items:center;gap:0;padding:0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .12s;min-height:52px}
.match-row:hover{background:var(--row-hover)}
.match-row--live{background:rgba(232,41,42,.07);border-bottom-color:rgba(232,41,42,.12)}
.match-row--live:hover{background:rgba(232,41,42,.12)}
.match-row--live .mr-team-name{color:#f1f5f9}
.match-row--live .mr-time-col{border-right:2px solid rgba(232,41,42,.5)}
.mr-star{padding:8px 10px 8px 16px;color:var(--text3);font-size:14px;flex-shrink:0;cursor:pointer;transition:color .15s}
.mr-star:hover,.mr-star.fav{color:var(--yellow)}
.mr-time-col{width:62px;flex-shrink:0;text-align:center;padding:4px 0}
.mr-time{font-size:12px;font-weight:600;color:var(--text2)}
.mr-time.live{color:var(--live-red)}
.mr-time.finished{color:#e2e8f0;font-size:10px;font-weight:700}
.mr-live-min{font-size:11px;font-weight:700;color:var(--live-red);display:flex;align-items:center;gap:3px;justify-content:center}
.mr-live-dot{width:6px;height:6px;border-radius:50%;background:var(--live-red);animation:blink 1.2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.mr-teams{flex:1;min-width:0;padding:6px 0}
.mr-team{display:flex;align-items:center;gap:7px;padding:3px 0}
.mr-team-logo{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;overflow:hidden}
.mr-team-logo img{width:100%;height:100%;object-fit:contain}
.mr-team-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:500}
.mr-team-name.winner{font-weight:800;color:#fff}
.mr-card{display:inline-block;width:8px;height:11px;border-radius:1px;margin-left:4px;flex-shrink:0}
.mr-card.yellow{background:var(--yellow)}
.mr-card.red{background:var(--red)}
.mr-scores{width:60px;flex-shrink:0;text-align:center;padding:4px 8px}
.mr-score{font-size:17px;font-weight:800;color:var(--text);line-height:1.6;transition:color .3s}
.mr-score.live-score{color:var(--live-red)}
.mr-score.score-flash{animation:scoreFlash .8s ease}

.mr-score.tennis-score{font-size:11px;font-weight:700;color:var(--text);line-height:1.8;letter-spacing:.5px;white-space:nowrap}
.match-row:has(.tennis-score) .mr-scores{width:72px}
@keyframes scoreFlash{0%{transform:scale(1.4);color:#facc15}50%{transform:scale(1.2);color:#facc15}100%{transform:scale(1);color:var(--live-red)}}
.mr-score-dot{font-size:18px;font-weight:700;color:var(--text3);line-height:1.6}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:flex-start;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;overflow-y:auto;padding:20px 0;backdrop-filter:blur(3px)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg2);border:1px solid var(--border);width:90%;max-width:820px;border-radius:8px;overflow:hidden;transform:translateY(-10px);transition:transform .2s;margin:auto}
.modal-overlay.open .modal{transform:translateY(0)}
@media(min-width:801px){
  /* Panel kanan independen - tidak overlay */
  .modal-overlay{
    position:sticky;
    top:0;
    /* reset overlay styles */
    inset:unset;
    background:none !important;
    backdrop-filter:none !important;
    /* selalu opacity 1, tidak fade */
    opacity:0;
    pointer-events:none;
    /* sizing */
    width:340px;
    flex-shrink:0;
    align-self:flex-start;
    height:calc(100vh - 110px);
    overflow-y:auto;
    overflow-x:hidden;
    /* layout */
    display:flex;
    flex-direction:column;
    /* no transition needed */
    transition:none;
    padding:0;
    z-index:10;
    border-left:1px solid var(--border);
    background:var(--bg2) !important;
  }
  .modal-overlay.open{
    opacity:1 !important;
    pointer-events:all !important;
    display:flex !important;
  }
  .modal{
    width:100%;
    max-width:100%;
    border-radius:0;
    border:none;
    transform:none !important;
    margin:0;
    min-height:100%;
    display:flex;
    flex-direction:column;
    flex:1;
  }
  .modal-overlay.open .modal{transform:none !important}
  .modal-body{
    max-height:unset;
    flex:1;
    overflow-y:auto;
  }
  /* Sembunyikan tombol close di desktop - panel selalu visible */
  .modal-close-btn{
    display:flex;
  }
}

.modal-topbar{background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:10px 16px;flex-shrink:0}
.modal-league-lbl{font-size:11px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.5px}
.modal-close-btn{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s}
.modal-close-btn:hover{background:var(--surface2);color:var(--text)}

.modal-scoreboard{background:linear-gradient(180deg,var(--surface3) 0%,var(--surface) 100%);padding:20px 24px;text-align:center;flex-shrink:0}
.msb-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.msb-team{display:flex;flex-direction:column;align-items:center;gap:10px}
.msb-logo{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff}
.msb-name{font-size:13px;font-weight:700;color:#fff;text-align:center;line-height:1.3}
.msb-center{display:flex;flex-direction:column;align-items:center;gap:4px}
.msb-live-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(232,41,42,.15);border:1px solid rgba(232,41,42,.4);color:var(--live-red);font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:.5px;margin-bottom:2px}
.msb-live-dot{width:6px;height:6px;background:var(--live-red);border-radius:50%;animation:livePulse 1.2s infinite;flex-shrink:0}
.msb-score{font-size:48px;font-weight:900;color:#fff;letter-spacing:-2px;font-family:'Barlow Condensed',sans-serif;display:flex;align-items:center;gap:8px}
.msb-score-sep{font-size:36px;color:var(--text3);font-weight:400}
.msb-score.live{color:var(--live-red)}
.msb-score.fin{color:var(--text)}
.msb-ht{font-size:11px;color:var(--text3);margin-top:2px}
.msb-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;margin-top:2px;display:inline-flex;align-items:center;gap:5px}
.msb-status.live{background:rgba(232,41,42,.15);color:var(--live-red);border:1px solid rgba(232,41,42,.3)}
.msb-status.finished{background:rgba(148,163,184,.1);color:var(--text3);border:1px solid var(--border)}
.msb-status.scheduled{background:rgba(251,191,36,.1);color:var(--yellow);border:1px solid rgba(251,191,36,.3)}
.msb-date-info{font-size:11px;color:var(--text3);margin-top:4px;text-align:center;opacity:.85}

.modal-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2);overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex-shrink:0}
.modal-tabs::-webkit-scrollbar{display:none}
.modal-tab-btn{padding:9px 11px;font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;text-transform:uppercase;letter-spacing:.3px;background:none;border-left:none;border-right:none;border-top:none;flex-shrink:0}
.modal-tab-btn:hover{color:var(--text)}
.modal-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

.modal-tabs-wrap{position:relative}
.modal-tabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:1px;width:24px;background:linear-gradient(to right,transparent,var(--bg2));pointer-events:none;z-index:1}
.modal-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

.modal-body{overflow-y:auto;max-height:500px;padding:0;min-height:0}
.modal-body::-webkit-scrollbar{width:4px}

#infoPanelDiskusi #commentArea{padding:12px 14px}
#infoPanelDiskusi .comment-form-wrap{padding:0 0 4px}
#infoPanelPrediksi{padding:0}
.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.mpanel{display:none}
.mpanel.active{display:block}

.sec-hdr{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);padding:4px 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px}

.goal-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.goal-min{width:32px;font-size:11px;font-weight:800;color:var(--yellow);text-align:center;flex-shrink:0}
.goal-icon{font-size:15px;flex-shrink:0}
.goal-inf{flex:1}
.goal-scorer{font-size:13px;font-weight:600;color:#fff}
.goal-meta{font-size:10px;color:var(--text3);margin-top:1px}
.goal-badge{display:inline-block;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;text-transform:uppercase;margin-top:2px}
.goal-badge.goal{background:rgba(251,191,36,.15);color:var(--yellow)}
.goal-badge.penalty{background:rgba(34,197,94,.15);color:var(--green)}
.goal-badge.og{background:rgba(239,68,68,.15);color:var(--red)}
.goal-badge.header{background:rgba(99,102,241,.15);color:#818cf8}

.gc-header{display:grid;grid-template-columns:1fr 24px 1fr;padding:8px 0 6px;border-bottom:2px solid rgba(255,255,255,.08)}
.gc-team-home{font-size:12px;font-weight:700;color:var(--accent);text-align:left}
.gc-team-away{font-size:12px;font-weight:700;color:#4a9eff;text-align:right}
.gc-center-hdr{font-size:14px;text-align:center}
.goal-2col-row{display:grid;grid-template-columns:1fr 36px 1fr;padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.04);align-items:center;min-height:44px}
.gc-home{text-align:left}
.gc-away{text-align:right}
.gc-min{font-size:12px;font-weight:800;color:var(--yellow);text-align:center;line-height:1}
.gc-name{font-size:12px;font-weight:700;color:#fff;line-height:1.4}
.gc-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:3px}
.gc-meta-away{justify-content:flex-end}
.gc-assist{font-size:10px;color:var(--text3)}

.goal-side{width:10px;height:10px;border-radius:50%;flex-shrink:0}

.pitch{background:linear-gradient(180deg,#14532d 0%,#166534 100%);border-radius:6px;padding:14px;position:relative;overflow:hidden;margin-bottom:12px}
.pitch::before,.pitch::after{content:'';position:absolute;pointer-events:none}
.pitch::before{left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.1);transform:translateX(-50%)}
.pitch::after{left:50%;top:50%;width:70px;height:70px;border:1px solid rgba(255,255,255,.1);border-radius:50%;transform:translate(-50%,-50%)}
.pitch-penalty-home{position:absolute;left:16px;top:50%;width:30px;height:70px;border:1px solid rgba(255,255,255,.1);transform:translateY(-50%);border-left:none}
.pitch-penalty-away{position:absolute;right:16px;top:50%;width:30px;height:70px;border:1px solid rgba(255,255,255,.1);transform:translateY(-50%);border-right:none}
.pitch-teams{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:1}
.pitch-col-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:6px}
.player-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.07);border-radius:5px;padding:5px 8px;display:flex;align-items:center;gap:6px;margin-bottom:3px;cursor:pointer;transition:background .12s}
.player-chip:hover{background:rgba(255,255,255,.18)}
.pc-num{font-size:10px;font-weight:700;color:rgba(255,255,255,.45);width:18px;text-align:center;flex-shrink:0}
.pc-name{font-size:11px;color:#fff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-pos{font-size:9px;color:rgba(255,255,255,.4);flex-shrink:0}
.pc-goal{font-size:10px;flex-shrink:0}
.pc-ycard{width:8px;height:11px;background:var(--yellow);border-radius:1px;flex-shrink:0}
.pc-rcard{width:8px;height:11px;background:var(--red);border-radius:1px;flex-shrink:0}
.subs-hdr{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;border-top:1px solid var(--border);padding-top:10px;margin:10px 0 8px}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sub-item{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:5px 8px;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:5px}
.sub-item-icon{color:var(--green);font-size:12px}
.sub-event-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.sub-event-row:last-child{border-bottom:none}
.sub-event-min{min-width:32px;font-size:11px;font-weight:700;color:var(--text3);text-align:right}
.sub-event-icons{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:13px}
.sub-event-info{flex:1}
.sub-event-out{font-size:12px;color:var(--red);display:flex;align-items:center;gap:4px}
.sub-event-in{font-size:12px;color:var(--green);display:flex;align-items:center;gap:4px}
.sub-team-badge{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:auto;flex-shrink:0}
.sub-team-col{display:flex;flex-direction:column;gap:0}
.sub-col-hdr{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:4px}

.stat-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.sv-home{width:40px;text-align:right;font-size:12px;font-weight:700;color:var(--accent);flex-shrink:0}
.sv-away{width:40px;text-align:left;font-size:12px;font-weight:700;color:#4a9eff;flex-shrink:0}
.stat-bars{flex:1;display:flex;gap:4px;align-items:center}
.stat-bar-wrap{flex:1;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden;position:relative}
.stat-bar-fill{height:100%;position:absolute;border-radius:2px}
.sbf-home{background:var(--accent);right:0}
.sbf-away{background:#4a9eff;left:0}
.stat-lbl{font-size:10px;color:var(--text3);text-align:center;width:110px;flex-shrink:0;font-weight:500}

.comment-row{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.cm-min{width:28px;font-size:10px;font-weight:800;color:var(--yellow);flex-shrink:0;padding-top:2px}
.cm-body{flex:1}
.cm-badge{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:3px;margin-bottom:3px}
.cm-badge.goal{background:rgba(251,191,36,.2);color:var(--yellow)}
.cm-badge.card{background:rgba(239,68,68,.2);color:var(--red)}
.cm-badge.sub{background:rgba(74,222,128,.2);color:var(--green)}
.cm-badge.kickoff,.cm-badge.halftime,.cm-badge.fulltime{background:rgba(148,163,184,.15);color:var(--text3)}
.cm-badge.normal{display:none}
.cm-text{font-size:12px;color:var(--text);line-height:1.5}

.modal-spin-wrap{text-align:center;padding:32px;color:var(--text3)}
.modal-spin{display:inline-block;width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:8px}
@keyframes spin{to{transform:rotate(360deg)}}

.player-popup{position:fixed;z-index:2000;background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:11px 13px;width:200px;box-shadow:0 8px 30px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .15s}
.player-popup.show{opacity:1}
.pp-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:1px}
.pp-pos{font-size:10px;color:var(--text3);margin-bottom:7px}
.pp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.pp-stat{background:var(--surface);border-radius:3px;padding:5px;text-align:center}
.pp-val{font-size:13px;font-weight:800;color:var(--yellow)}
.pp-lbl{font-size:9px;color:var(--text3)}

.mobile-ad-bar{display:none}

@media(max-width:1100px){
    .mobile-ad-bar{
    display:flex;align-items:center;justify-content:center;
    background:var(--surface);border-bottom:1px solid var(--border);
    padding:8px 16px;gap:8px;
  }
  .mobile-ad-bar-inner{
    width:320px;max-width:100%;height:50px;
    border:1px dashed var(--border2);border-radius:6px;
    background:var(--bg2);display:flex;align-items:center;
    justify-content:center;gap:10px;padding:0;overflow:hidden;
  }
  .mobile-ad-bar-inner img{width:320px;max-width:100%;height:50px;object-fit:cover;display:block}
  .mobile-ad-bar-inner iframe,.mobile-ad-bar-inner ins{display:block;width:320px;max-width:100%;height:50px}
  .mobile-ad-bar-inner svg{color:var(--border2);flex-shrink:0}
  .mobile-ad-bar-text{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
}

.filter-tab-klasemen{background:rgba(13,110,138,.15);border-color:var(--teal)!important;color:#4dc6e0!important}
.filter-tab-klasemen.active{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)!important}

#klasemenOverlayPanel{
  transition:max-height .28s cubic-bezier(.4,0,.2,1),opacity .22s;
  max-height:0;overflow:hidden;opacity:0;
}
#klasemenOverlayPanel.open{max-height:600px;opacity:1}

.mobile-ks-widget{
  display:none;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:2px solid var(--border);
  margin-top:0;
}
.mobile-ks-widget .rp-widget{
  border-radius:0;
  border-left:none;border-right:none;border-top:none;border-bottom:none;
}
.mobile-ks-widget .rp-panel{max-height:320px}

.rp-widget{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.rp-widget-select-row{display:flex;align-items:center;gap:6px;padding:7px 8px;background:var(--bg2);border-bottom:1px solid var(--border)}
.rp-league-select{flex:1;background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:4px 6px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;outline:none;min-width:0}
.rp-league-select:focus{border-color:var(--accent)}
.rp-refresh-btn{background:none;border:1px solid var(--border2);color:var(--text3);width:26px;height:26px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.rp-refresh-btn:hover{color:var(--accent);border-color:var(--accent)}
.rp-panel{display:none;max-height:460px;overflow-y:auto;overscroll-behavior:contain}
.rp-panel::-webkit-scrollbar{width:3px}
.rp-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.rp-panel.active{display:block}
.rp-loading{text-align:center;padding:28px 12px;color:var(--text3);font-size:11px}
.rp-ks-table{width:100%;border-collapse:collapse;font-size:11px}
.rp-ks-table th{background:var(--bg2);color:var(--text3);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:5px 6px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}
.rp-ks-table th:nth-child(2){text-align:left}
.rp-ks-table td{padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.035);text-align:center;color:var(--text2);vertical-align:middle;font-size:11px}
.rp-ks-table tr:last-child td{border-bottom:none}
.rp-ks-table tr:hover td{background:rgba(255,255,255,.03)}
.rp-ks-table td:nth-child(2){text-align:left}
.rp-ks-team{display:flex;align-items:center;gap:5px;min-width:0}
.rp-ks-logo{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.rp-ks-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.rp-ks-pts{font-weight:800;color:var(--text);font-size:12px}
.rp-ks-rank{font-size:10px;font-weight:700;color:var(--text3);width:16px}
.rp-ks-rank.cl{color:#60a5fa}
.rp-ks-rank.el{color:#fb923c}
.rp-ks-rank.rel{color:#f87171}
.rp-ks-legend{display:flex;gap:8px;flex-wrap:wrap;padding:7px 8px;font-size:9px;color:var(--text3);border-top:1px solid var(--border);background:var(--bg2)}
.rp-ks-group-title{padding:5px 8px;font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;background:var(--bg2);border-bottom:1px solid var(--border)}

.loading-wrap{text-align:center;padding:50px 20px;color:var(--text3)}
.loading-spin{display:inline-block;width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:10px}

.empty{text-align:center;padding:40px;color:var(--text3);font-size:13px}

@media(max-width:800px){.mr-odds{display:none}}
@media(max-width:600px){.modal{width:100%;border-radius:8px 8px 0 0;align-self:flex-end}.modal-overlay{align-items:flex-end}}

@media(max-width:600px){

  
  .topbar{font-size:10px;padding:5px 12px}

  
  .header-inner{padding:10px 14px;gap:10px}
  .logo{font-size:22px}
  .logo-in{font-size:17px;padding:1px 5px}
  .btn-login{padding:5px 10px;font-size:11px;gap:4px}
  .btn-icon{width:30px;height:30px}
  .btn-lang-toggle{padding:4px 8px;font-size:11px;gap:4px}
  .btn-lang-code{display:none}
  .btn-lang-chevron{display:none}
  .btn-lang-dropdown{right:0;min-width:150px}

  
  .sport-nav-inner{padding:6px 8px;gap:5px}
  .sport-item{padding:5px 12px;font-size:11px;gap:5px}
  .sport-item svg{width:14px;height:14px}
  .sport-item .badge{font-size:9px;padding:1px 4px}
  
  .filter-bar{padding:0 10px;height:48px;align-items:center}
  .filter-tab{padding:0 14px;font-size:11px;height:30px}
  .filter-tab.active{background:#fff;color:#111;border-bottom:none}
  .refresh-above-header{display:none}
  .filter-sep{display:none}
  .date-nav-wrap{flex:1;justify-content:center}
  .date-arr{width:40px;height:48px;font-size:18px}
  .date-center{min-width:70px;font-size:13px;font-weight:700}

  
  .match-row{min-height:64px;padding:0 4px}
  .mr-bell{padding:8px 4px 8px 8px;font-size:15px}
  .mr-star{padding:8px 4px 8px 8px;font-size:16px}
  .mr-time-col{width:52px;padding:3px 0}
  .mr-time{font-size:12px;font-weight:700}
  .mr-time.finished{font-size:11px}
  .mr-live-min{font-size:11px;gap:3px}
  .mr-live-dot{width:6px;height:6px}
  .mr-teams{padding:7px 4px}
  .mr-team{gap:8px;padding:3px 0}
  .mr-team-logo{width:22px;height:22px;font-size:8px}
  .mr-team-name{font-size:13px;font-weight:500}
  .mr-team-name.winner{font-weight:800}
  .mr-scores{width:52px;padding:3px 6px}
  .mr-score{font-size:17px;font-weight:800;line-height:1.5}
  .mr-score-dot{font-size:18px}
  .mr-odds{display:none}
  .mr-card{width:7px;height:11px}

  
  .league-header{padding:8px 12px;gap:8px}
  .lh-flag{font-size:15px;width:20px}
  .lh-name{font-size:12px;gap:4px}
  .lh-klasemen{font-size:10px}
  .lh-star{font-size:13px}

  
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{
    width:100%;
    max-width:100%;
    border-radius:16px 16px 0 0;
    align-self:flex-end;
    max-height:92vh;
    display:flex;
    flex-direction:column;
  }
  .modal-topbar{padding:10px 14px}
  .modal-league-lbl{font-size:10px;gap:5px}
  .modal-close-btn{font-size:16px;padding:3px 8px}

  
  .modal::before{
    content:'';
    display:block;
    width:36px;height:4px;
    background:rgba(255,255,255,.15);
    border-radius:2px;
    margin:8px auto 0;
    flex-shrink:0;
  }

  
  .modal-scoreboard{padding:14px 16px 16px}
  .msb-grid{gap:10px}
  .msb-logo{width:56px;height:56px;font-size:18px}
  .msb-name{font-size:12px}
  .msb-score{font-size:40px;letter-spacing:-1px}
  .msb-ht{font-size:10px}
  .msb-status{font-size:10px;padding:2px 8px;gap:4px}
  .msb-date-info{font-size:10px}

  
  .modal-tabs{overflow-x:auto;scrollbar-width:none}
  .modal-tabs::-webkit-scrollbar{display:none}
  .modal-tab-btn{padding:8px 9px;font-size:10px;letter-spacing:.2px}

  
  .modal-body{
    max-height:calc(92vh - 210px);
    padding:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    flex:1;
    min-height:0;
  }

  
  .goal-row{gap:7px;padding:7px 0}
  .goal-min{width:28px;font-size:10px}
  .goal-icon{font-size:14px}
  .goal-scorer{font-size:12px}
  .goal-meta{font-size:9px}
  .goal-badge{font-size:8px;padding:1px 5px}

  
  .pitch{padding:10px}
  .pitch-col-title{font-size:9px;margin-bottom:5px}
  .player-chip{padding:4px 6px;gap:4px;margin-bottom:2px;border-radius:4px}
  .pc-num{font-size:9px;width:15px}
  .pc-name{font-size:10px}
  .pc-pos{font-size:8px}
  .pc-goal{font-size:9px}
  .pc-ycard,.pc-rcard{width:6px;height:9px}
  .subs-hdr{font-size:9px;margin:8px 0 6px}
  .sub-grid{grid-template-columns:1fr}
  .sub-item{font-size:10px;padding:4px 7px}

  
  .stat-row{padding:6px 0;gap:6px}
  .sv-home,.sv-away{width:32px;font-size:11px}
  .stat-lbl{font-size:9px;width:90px}
  .stat-bar-wrap{height:3px}

  
  .comment-row{gap:7px;padding:7px 0}
  .cm-min{width:24px;font-size:9px}
  .cm-badge{font-size:8px;padding:1px 5px}
  .cm-text{font-size:11px;line-height:1.45}

  
  .ad-banner{margin:8px 10px;padding:10px 12px;gap:8px;border-radius:5px}
  .ad-title{font-size:12px}
  .ad-sub{font-size:9px}
  .ad-btn{padding:5px 12px;font-size:10px}

  
  .loading-wrap{padding:40px 16px}
  .empty{padding:30px 16px;font-size:12px}

  
  .sec-hdr{font-size:10px;padding:3px 0 8px;margin-bottom:8px}
}

@media(max-width:380px){
  .header-inner{padding:9px 10px}
  .logo{font-size:20px}
  .filter-tab{padding:4px 8px;font-size:9px}
  .mr-time-col{width:46px}
  .mr-team-name{font-size:12px}
  .mr-scores{width:46px}
  .mr-score{font-size:15px}
  .msb-score{font-size:30px}
  .msb-logo{width:38px;height:38px;font-size:13px}
  .msb-name{font-size:11px}
  .modal-tab-btn{padding:7px 8px;font-size:9px;letter-spacing:.1px}
  .sport-item{padding:9px 10px}
}

@media(max-width:600px){
  .sport-nav-inner,.filter-bar,.modal-tabs{
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .match-row{
    -webkit-tap-highlight-color:rgba(232,41,42,.08);
  }
  
  .match-row:active{background:rgba(255,255,255,.06)}
}

.search-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:60px 16px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.search-overlay.open{opacity:1;pointer-events:all}
.search-modal{
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:12px;
  width:100%;max-width:640px;
  overflow:hidden;
  transform:translateY(-8px);
  transition:transform .2s;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.search-overlay.open .search-modal{transform:translateY(0)}
.search-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.search-input-wrap{
  flex:1;display:flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:8px;padding:0 12px;
  transition:border-color .15s;
}
.search-input-wrap:focus-within{border-color:var(--accent)}
.search-icon-inp{width:16px;height:16px;color:var(--text3);flex-shrink:0}
.search-input{
  flex:1;background:none;border:none;outline:none;
  color:var(--text);font-family:var(--font);font-size:14px;
  padding:10px 0;
}
.search-input::placeholder{color:var(--text3)}
.search-clear{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:2px 4px;border-radius:3px;line-height:1;transition:color .15s}
.search-clear:hover{color:var(--text)}
.search-close-btn{
  background:none;border:1px solid var(--border2);color:var(--text2);
  font-family:var(--font);font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.search-close-btn:hover{background:var(--surface2);color:var(--text)}
.search-body{max-height:480px;overflow-y:auto}
.search-body::-webkit-scrollbar{width:4px}
.search-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.search-hint{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:48px 24px;color:var(--text3);font-size:13px;text-align:center;
}
.search-section-title{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--text3);padding:10px 16px 4px;
}
.search-match-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .12s;
}
.search-match-row:hover,.search-match-row.focused{background:var(--surface2)}
.search-match-row:last-child{border-bottom:none}
.smr-logos{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.smr-teams{flex:1;min-width:0}
.smr-team{font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px;padding:1px 0}
.smr-team.winner{font-weight:700;color:#fff}
.smr-score-col{text-align:center;flex-shrink:0;width:48px}
.smr-score{font-size:15px;font-weight:700;color:var(--text)}
.smr-score.live{color:var(--live-red)}
.smr-score-dot{font-size:16px;color:var(--text3)}
.smr-status{font-size:10px;color:var(--text3);margin-top:1px}
.smr-status.live{color:var(--live-red);font-weight:700;display:flex;align-items:center;gap:3px;justify-content:center}
.smr-league{font-size:10px;color:var(--text3);padding-top:2px}
.search-empty{
  padding:36px 24px;text-align:center;color:var(--text3);font-size:13px;
}
@media(max-width:600px){
  .search-overlay{padding:50px 10px 16px}
  .search-modal{border-radius:10px}
  .search-body{max-height:calc(100vh - 180px)}
}
.user-dropdown-header {
    background: var(--surface2);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border2);
}
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: var(--text2);
    cursor: pointer;
    transition: 0.2s;
    font-size: 13px;
}
.user-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    opacity: 0.8;
}
.user-dropdown-item:hover {
    background: rgba(232, 41, 42, 0.08);
    color: #e8292a !important;
}
.user-dropdown-item:hover svg {
    stroke: #e8292a;
    opacity: 1;
}
[data-theme="light"] .user-dropdown-header {
    background: var(--surface2);
    border-bottom-color: var(--border2);
}
[data-theme="light"] .user-dropdown-item {
    color: var(--text2);
}
[data-theme="light"] .user-dropdown-item:hover {
    background: rgba(232, 41, 42, 0.08);
}

.pitch2d-wrap{position:relative;width:100%;margin-bottom:12px}
.pitch2d-field{
  position:relative;
  width:100%;
  
  padding-bottom:min(143%,460px);
  height:0;
  border-radius:6px;
  overflow:hidden;
}

.p2d-inner{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#14532d 0%,#1a6b38 50%,#14532d 100%);
  border-radius:6px;
  overflow:hidden;
}

.p2d-inner::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    180deg,
    transparent 0px,transparent 28px,
    rgba(0,0,0,.07) 28px,rgba(0,0,0,.07) 56px
  );
  pointer-events:none;
  z-index:0;
}
.p2d-lines{position:absolute;inset:0;pointer-events:none}
.p2d-lines svg{width:100%;height:100%}

.p2d-player{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  cursor:pointer;z-index:5;
}
.p2d-dot{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  transition:transform .15s,box-shadow .15s;
  position:relative;
}
.p2d-player:hover .p2d-dot{transform:scale(1.2);box-shadow:0 4px 12px rgba(0,0,0,.7)}
.p2d-player.home .p2d-dot{background:var(--accent)}
.p2d-player.away .p2d-dot{background:#2563eb}
.p2d-dot-goal::after{
  content:'⚽';position:absolute;top:-9px;right:-9px;
  font-size:9px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
.p2d-dot-ycard::after{
  content:'';position:absolute;top:-8px;right:-7px;
  width:7px;height:9px;background:var(--yellow);border-radius:1px;
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.p2d-dot-rcard::after{
  content:'';position:absolute;top:-8px;right:-7px;
  width:7px;height:9px;background:var(--red);border-radius:1px;
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.p2d-name{
  font-size:8px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  white-space:nowrap;max-width:52px;
  overflow:hidden;text-overflow:ellipsis;
  margin-top:2px;text-align:center;
}
.p2d-num{
  font-size:7px;color:rgba(255,255,255,.6);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.p2d-legend{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;background:var(--surface);border:1px solid var(--border);
  border-radius:0 0 6px 6px;font-size:10px;
}
.p2d-legend-team{display:flex;align-items:center;gap:5px;font-weight:700}
.p2d-legend-dot{width:10px;height:10px;border-radius:50%}
.p2d-legend-form{font-size:9px;color:var(--text3)}
.p2d-toggle-row{display:flex;gap:6px;margin-bottom:6px}
.p2d-toggle-btn{
  flex:1;padding:5px 8px;border-radius:4px;font-size:10px;font-weight:700;
  border:1px solid var(--border2);background:var(--surface2);color:var(--text2);
  cursor:pointer;transition:all .15s;font-family:var(--font);
}
.p2d-toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:600px){
  .p2d-dot{width:20px;height:20px;font-size:8px}
  .p2d-name{font-size:7px;max-width:40px}
  .p2d-num{font-size:6px}
}

.pred-wrap {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pred-loading {
  text-align: center;
  color: var(--text2);
  font-size: 13px;
  padding: 24px;
}

.pred-result-badge {
  text-align: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}
.pred-actual {
  text-align: center;
  font-size: 13px;
  color: var(--text2);
  margin-top: -8px;
}

.pred-community {
  background: var(--bg2);
  border-radius: 12px;
  padding: 14px 16px;
}
.pred-community-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
}
.pred-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pred-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pred-bar-label.away { text-align: right; }
.pred-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: var(--border);
}
.pred-bar-seg {
  height: 100%;
  transition: width .4s ease;
}
.pred-bar-seg.home { background: var(--accent); }
.pred-bar-seg.draw { background: var(--text3); }
.pred-bar-seg.away { background: #e05050; }

.pred-bar-pct {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}

.pred-form {
  background: var(--bg2);
  border-radius: 12px;
  padding: 16px;
}
.pred-form-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}
.pred-score-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pred-team-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pred-team-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pred-vs {
  font-size: 13px;
  font-weight: 700;
  color: var(--text3);
  flex-shrink: 0;
}
.pred-counter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pred-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .1s, transform .1s;
  user-select: none;
}
.pred-btn:hover { background: var(--row-hover); }
.pred-btn:active { transform: scale(.92); }
.pred-num {
  width: 44px;
  height: 44px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  -moz-appearance: textfield;
  padding: 0;
}
.pred-num::-webkit-outer-spin-button,
.pred-num::-webkit-inner-spin-button { -webkit-appearance: none; }

.pred-submit-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  transition: opacity .15s, transform .1s;
}
.pred-submit-btn:hover { opacity: .85; }
.pred-submit-btn:active { transform: scale(.98); }
.pred-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

.pred-msg {
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
  min-height: 18px;
}
.pred-msg.success { color: #1D9E75; }
.pred-msg.error   { color: #e05050; }

.pred-login-notice {
  text-align: center;
  font-size: 13px;
  color: var(--text2);
  padding: 12px 0;
}
.pred-login-notice a { color: var(--accent); font-weight: 700; text-decoration: none; }

.pred-closed {
  text-align: center;
  font-size: 13px;
  color: var(--text2);
  padding: 14px;
  background: var(--bg2);
  border-radius: 10px;
}

.pred-leaderboard-mini {
  background: var(--bg2);
  border-radius: 12px;
  padding: 14px;
}
.pred-lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.pred-lb-header span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pred-lb-more {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.pred-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 8px;
  transition: background .1s;
}
.pred-lb-row:hover { background: var(--row-hover); }
.pred-lb-row.me    { background: rgba(var(--accent-rgb,55,138,221),.1); }
.pred-lb-rank {
  min-width: 28px;
  font-size: 16px;
  text-align: center;
}
.pred-lb-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pred-lb-pts {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 480px) {
  .pred-wrap { padding: 12px; gap: 12px; }
  .pred-team-name { font-size: 11px; max-width: 80px; }
  .pred-num { width: 40px; height: 40px; font-size: 20px; }
}

.sidebar-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 4px;
}
.sidebar-dot--today {
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34,197,94,.8);
}
.sidebar-dot--live {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(232,41,42,.9);
  animation: dot-pulse 1s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.65); }
}

.loading-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-8px); opacity: 1; }
}

.mtbl-logo { width: 16px !important; height: 16px !important; object-fit: contain !important; }
.mtbl-team-cell { display: flex; align-items: center; gap: 6px; }

.mtbl-logo { width: 18px !important; height: 18px !important; object-fit: contain !important; flex-shrink: 0 !important; }
.mtbl-team-cell { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
.mtbl-name { font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 90px !important; }
.mtbl th, .mtbl td { padding: 7px 6px !important; }
.mtbl th.col-team, .mtbl td.col-team { padding-left: 6px !important; min-width: 120px !important; }
.mtbl-rank { min-width: 20px !important; }

.mtbl-logo { width: 18px !important; height: 18px !important; object-fit: contain !important; flex-shrink: 0 !important; }
.mtbl-team-cell { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
.mtbl-name { font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 90px !important; }
.mtbl th, .mtbl td { padding: 7px 6px !important; }
.mtbl th.col-team, .mtbl td.col-team { padding-left: 6px !important; min-width: 120px !important; }
.mtbl-rank { min-width: 20px !important; }

.mtbl-logo { width: 18px !important; height: 18px !important; object-fit: contain !important; flex-shrink: 0 !important; }
.mtbl-team-cell { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; }
.mtbl-name { font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 90px !important; }
.mtbl th, .mtbl td { padding: 7px 6px !important; }
.mtbl th.col-team, .mtbl td.col-team { padding-left: 6px !important; min-width: 120px !important; }
.mtbl-rank { min-width: 20px !important; }

.mtbl-name { max-width: 120px !important; font-size: 11px !important; }
.mtbl th.col-team, .mtbl td.col-team { min-width: 140px !important; }

/* ── Events Panel (dipindah dari index.php) ── */
.ev-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; font-size: 11px; font-weight: 700;
  color: var(--text2); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ev-list { max-height: 420px; overflow-y: auto; }
.ev-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border2, rgba(255,255,255,.04));
  font-size: 12px; line-height: 1.4;
}
.ev-row:last-child { border-bottom: none; }
.ev-row.ev-key { background: rgba(255,255,255,.03); }
.ev-clock {
  min-width: 36px; font-size: 11px; font-weight: 700;
  color: var(--accent); text-align: right; padding-top: 1px; flex-shrink: 0;
}
.ev-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; padding-top: 1px; }
.ev-body { flex: 1; }
.ev-team { font-size: 10px; font-weight: 700; color: var(--accent); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.4px; }
.ev-text { color: var(--text); }
/* ev-assist moved to ev2 section */


.ev2-header {
  display: grid; grid-template-columns: 1fr 32px 1fr;
  padding: 10px 12px; font-size: 11px; font-weight: 700;
  color: var(--text2); border-bottom: 2px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ev2-team-home { text-align: right; color: var(--accent); }
.ev2-team-away { text-align: left; color: #4a9eff; }
.ev2-center { text-align: center; }
.ev2-list { }
.ev2-row {
  display: grid; grid-template-columns: 1fr 36px 1fr;
  min-height: 44px; border-bottom: 1px solid var(--border2, rgba(255,255,255,.04));
  align-items: center;
}
.ev2-row:last-child { border-bottom: none; }
.ev2-min {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text3); padding: 4px 2px;
}
.ev2-home {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; padding: 6px 8px 6px 12px; text-align: right;
}
.ev2-away {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 6px; padding: 6px 12px 6px 8px; text-align: left;
}
.ev2-icon { font-size: 16px; flex-shrink: 0; }
.ev2-content { font-size: 12px; line-height: 1.4; }
.ev2-label { color: var(--text); }
.ev-name { font-weight: 600; }
.ev-score {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; margin-left: 4px;
}
.ev-desc { color: var(--text3); font-size: 10px; }
.ev-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: 3px; margin-left: 3px; vertical-align: middle;
}
.ev-og  { background: rgba(239,68,68,.15); color: #ef4444; }
.ev-rc  { background: rgba(239,68,68,.15); color: #ef4444; }
.ev-yrc { background: rgba(251,191,36,.15); color: #fbbf24; }
.ev-miss { background: rgba(156,163,175,.15); color: var(--text3); }
.ev-assist { font-size: 11px; color: var(--text2); margin-top: 2px; }
.ev-assist-icon { font-size: 10px; }
.ev-sub-in  { color: #4ade80; font-size: 11px; font-weight: 600; }
.ev-sub-out { color: #f87171; font-size: 11px; }

.ev2-content-home { text-align: right; }
.ev2-content-home .ev-assist { text-align: right; }


.ev3-list { padding: 4px 0; }
.ev3-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 14px; border-bottom: 1px solid var(--border2, rgba(255,255,255,.05));
  font-size: 13px; line-height: 1.5;
}
.ev3-row:last-child { border-bottom: none; }
.ev3-min {
  min-width: 38px; font-size: 12px; font-weight: 700;
  color: var(--text3); flex-shrink: 0; padding-top: 1px;
}
.ev3-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; padding-top: 1px; }
.ev3-desc { flex: 1; color: var(--text); word-break: break-word; }
.ev3-desc b { color: var(--text); }
.ev-tm { color: var(--text2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.ev-tm-neutral { color: var(--text3); font-size: 11px; font-style: italic; }
.ev-desc { color: var(--text3); font-size: 11px; margin-left: 2px; }
.ev-sub-in  { color: #4ade80; font-size: 12px; }
.ev-sub-out { color: #f87171; font-size: 12px; }
.ev-assist  { color: var(--text2); font-size: 11px; }
.ev-badge   {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 3px;
}
.ev-og   { background: rgba(239,68,68,.15);   color: #ef4444; }
.ev-miss { background: rgba(156,163,175,.15); color: var(--text3); }
.ev-yrc  { background: rgba(251,191,36,.15);  color: #fbbf24; }
.ev-pen  { background: rgba(99,102,241,.15);  color: #818cf8; }
.ev-score {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; margin-left: 3px; vertical-align: middle;
}

.cev-list { padding: 4px 0; }
.cev-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12.5px; line-height: 1.4;
}
.cev-row:last-child { border-bottom: none; }
.cev-min {
  min-width: 38px; font-size: 12px; font-weight: 700;
  color: var(--accent); text-align: right; padding-top: 1px; flex-shrink: 0;
}
.cev-icon { font-size: 15px; flex-shrink: 0; width: 22px; text-align: center; }
.cev-body { flex: 1; }
.cev-desc { color: var(--text); font-size: 13px; }
.cev-desc b { font-weight: 700; }
.cev-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
.cev-team { font-weight: 600; }
.cev-light { color: var(--text3); }
.cev-score {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; margin: 0 3px; vertical-align: middle;
}
.cev-tag {
  display: inline-block; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
  vertical-align: middle; text-transform: uppercase; letter-spacing: .3px;
}
.cev-og   { background: rgba(239,68,68,.2);  color: #ef4444; }
.cev-rc   { background: rgba(239,68,68,.2);  color: #ef4444; }
.cev-yrc  { background: rgba(251,191,36,.2); color: #fbbf24; }
.cev-miss { background: rgba(156,163,175,.2);color: #9ca3af; }
.cev-pen  { background: rgba(99,102,241,.2); color: #818cf8; }
.cev-period {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text2); letter-spacing: 1px;
}
.cev-in  { color: #4ade80; font-weight: 600; }
.cev-out { color: #f87171; }.h2h-summary{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:16px 14px;align-items:center;border-bottom:1px solid var(--border);text-align:center;background:var(--surface)}
.h2h-stat-num{font-size:32px;font-weight:900;line-height:1}
.h2h-stat-label{font-size:10px;color:var(--text3);margin-top:3px;text-transform:uppercase}
.h2h-center-lbl{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.h2h-bar-wrap{padding:12px 14px 6px}
.h2h-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px}
.h2h-bar-home{background:var(--accent);border-radius:4px 0 0 4px}
.h2h-bar-draw{background:var(--text3);opacity:.5}
.h2h-bar-away{background:#4a9eff;border-radius:0 4px 4px 0}
.h2h-bar-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:5px;font-weight:700}
.h2h-list-hdr{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text3);letter-spacing:.6px;padding:10px 14px 4px;border-top:1px solid var(--border);margin-top:4px}
.h2h-row{display:grid;grid-template-columns:46px 1fr auto 1fr 12px;align-items:center;gap:4px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.h2h-row:last-child{border-bottom:none}
.h2h-date{font-size:10px;color:var(--text3);text-align:center;line-height:1.3}
.h2h-team{color:var(--text);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-team.home{text-align:right;padding-right:4px}
.h2h-team.away{text-align:left;padding-left:4px}
.h2h-score-wrap{text-align:center}
.h2h-score{display:inline-block;font-weight:800;font-size:13px;color:var(--text);background:rgba(255,255,255,.07);padding:3px 10px;border-radius:5px}
.h2h-score.win-home{color:var(--accent)}
.h2h-score.win-away{color:#4a9eff}
.h2h-comp{font-size:9px;color:var(--text3);text-align:center;margin-top:2px}

/* ── Light Mode Fixes ── */
[data-theme="light"] .match-row{border-bottom-color:var(--border)}
[data-theme="light"] .match-row--live{background:rgba(232,41,42,.05);border-bottom-color:rgba(232,41,42,.15)}
[data-theme="light"] .match-row--live:hover{background:rgba(232,41,42,.09)}
[data-theme="light"] .goal-row{border-bottom-color:var(--border)}
[data-theme="light"] .goal-2col-row{border-bottom-color:var(--border)}
[data-theme="light"] .gc-header{border-bottom-color:var(--border2)}
[data-theme="light"] .gc-name{color:var(--text)}
[data-theme="light"] .goal-scorer{color:var(--text)}
[data-theme="light"] .msb-name{color:var(--text)}
[data-theme="light"] .msb-score{color:var(--text)}
[data-theme="light"] .mr-team-name.winner{color:var(--text)}
[data-theme="light"] .sidebar-league.active .name{color:var(--accent)}
[data-theme="light"] .pitch::before{background:rgba(0,0,0,.1)}
[data-theme="light"] .pitch::after{border-color:rgba(0,0,0,.1)}
[data-theme="light"] .pitch-penalty-home{border-color:rgba(0,0,0,.1)}
[data-theme="light"] .pitch-penalty-away{border-color:rgba(0,0,0,.1)}
[data-theme="light"] .pitch-col-title{color:rgba(0,0,0,.4)}
[data-theme="light"] .player-chip{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.07)}
[data-theme="light"] .player-chip:hover{background:rgba(0,0,0,.1)}
[data-theme="light"] .pc-num{color:rgba(0,0,0,.35)}
[data-theme="light"] .ks-table tr:hover td{background:rgba(0,0,0,.03)}
[data-theme="light"] .h2h-score{background:rgba(0,0,0,.06)}
[data-theme="light"] .h2h-row{border-bottom-color:var(--border)}
[data-theme="light"] .com-row{border-bottom-color:var(--border)}
[data-theme="light"] .sum-event-row{border-bottom-color:var(--border)}
[data-theme="light"] .modal-tab-btn{color:var(--text2)}
[data-theme="light"] .modal-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
[data-theme="light"] .stat-bar-bg{background:rgba(0,0,0,.08)}
[data-theme="light"] .stat-bar-home{background:var(--accent)}
[data-theme="light"] .stat-bar-away{background:#4a9eff}
[data-theme="light"] .refresh-btn{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);color:var(--text)}
[data-theme="light"] .refresh-btn:hover{background:rgba(0,0,0,.12)}
[data-theme="light"] .refresh-topbar-btn{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15)}
[data-theme="light"] .refresh-topbar-btn:hover{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.3)}
[data-theme="light"] .msb-logo{color:var(--text)}
[data-theme="light"] .mr-team-logo{color:var(--text)}
[data-theme="light"] .ks-team-logo-fb{color:#fff}

/* ── Modal scoreboard spacing fix ── */
.msb-name{padding:0 4px;max-width:110px;word-break:break-word}
.msb-team{gap:6px}
.msb-logo{margin-bottom:2px}

/* ── Modal scoreboard spacing fix v2 ── */
.msb-name{padding:0;max-width:none;margin-top:4px}
.msb-team{gap:0}
.msb-logo{margin-bottom:0}

/* ── Modal scoreboard spacing fix v3 ── */
.msb-team{gap:8px}
.msb-name{padding:0;max-width:120px;word-break:break-word;line-height:1.3}

/* ── Modal logo img fix — paksa img ikut ukuran parent ── */
.msb-logo img{width:100%!important;height:100%!important;object-fit:contain}

/* ── Logo light mode fix ── */
[data-theme="light"] .logo-live{color:var(--text)}
[data-theme="light"] .logo-score{color:var(--text)}


/* ── Match Page Desktop Layout (min-width: 801px) ── */
@media(min-width:801px){
  /* Match page menggunakan lebar content area, bukan full-screen */
  .mp-wrap{
    max-width:700px;
    margin:0 auto;
    min-height:unset;
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    overflow-y:visible;
  }
  /* Header match page sticky di desktop */
  .mp-header{
    position:sticky;
    top:0;
    z-index:20;
    background:var(--surface);
  }
  /* Tab bar match page sticky di desktop */
  .mp-tabs{
    position:sticky;
    top:130px;
    z-index:19;
    background:var(--surface);
  }
  /* Body konten match page punya padding lebih di desktop */
  .mp-body{
    padding:16px 20px;
  }
  /* Score lebih besar di desktop */
  .mp-score{
    font-size:44px;
  }
  /* Statistik: bar lebih tebal di desktop */
  .stat-bar-wrap{
    height:6px;
  }
}

/* ── Stats fallback untuk match page independen ── */
#panelStatsMp .stat-bar-wrap,
#panelStatsMp .stat-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
/* ── Light mode sport nav & sidebar fixes ── */
[data-theme="light"] .sport-item.active{color:var(--accent);background:rgba(232,41,42,.1);border-color:var(--accent)}
[data-theme="light"] .sport-nav-arrow:hover{background:rgba(0,0,0,.05)}
[data-theme="light"] .sport-item:hover{background:var(--surface2)}
[data-theme="light"] .sidebar-league{color:var(--text2)}
[data-theme="light"] .sidebar-league:hover{background:var(--surface2);color:var(--text)}
[data-theme="light"] .sidebar-league.active{background:rgba(232,41,42,.08);color:var(--accent)}
[data-theme="light"] .sidebar-league.active .name{color:var(--accent);font-weight:700}
[data-theme="light"] .sidebar-section-title{color:var(--text3)}
[data-theme="light"] .sidebar-country-name{color:var(--text2)}
[data-theme="light"] .league-row{border-bottom-color:var(--border)}
[data-theme="light"] .league-header{color:var(--text);background:var(--surface2)}
[data-theme="light"] .league-country{color:var(--text3)}
[data-theme="light"] .mr-status{color:var(--text3)}
[data-theme="light"] .mr-score{color:var(--text)}
[data-theme="light"] .mr-team-name{color:var(--text)}
[data-theme="light"] .mr-time{color:var(--text2)}
[data-theme="light"] .filter-btn{color:var(--text2);border-color:var(--border)}
[data-theme="light"] .filter-btn.active{color:var(--accent);border-color:var(--accent);background:rgba(232,41,42,.08)}
[data-theme="light"] .header{background:var(--surface);border-bottom-color:var(--border)}
[data-theme="light"] .btn-icon{color:var(--text2)}
[data-theme="light"] .btn-icon:hover{color:var(--text);background:var(--surface2)}