:root{
      --bg0:#05060a;
      --bg1:#07080b;
      --panel:rgba(255,255,255,.035);
      --panel2:rgba(255,255,255,.02);
      --line:rgba(255,255,255,.14);
      --line2:rgba(255,255,255,.10);
      --text:#f4f6fb;
      --muted:rgba(244,246,251,.72);
      --muted2:rgba(244,246,251,.55);
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --r1:16px;
      --r2:22px;
      --accent:#24c07f;
      --accent2:#2a2f3a;
      --chip: rgba(255,255,255,.06);
      --chip2: rgba(255,255,255,.03);
      --max: 1200px;
      --rightMin: 320px;
      --rightMax: 420px;
      --topbar-bg: rgb(8,9,14);
      --topbar-border: rgba(255,255,255,.06);
      --overlay-bg: rgba(255,255,255,.03);
      --overlay-border: rgba(255,255,255,.10);
      --input-bg: rgba(255,255,255,.03);
      --modal-bg: rgba(10,11,15,.92);
      --modal-border: rgba(255,255,255,.12);
      --match-bg: rgba(255,255,255,.02);
      --match-border: rgba(255,255,255,.08);
      --match-hover: rgba(255,255,255,.03);
      --match-hover-border: rgba(255,255,255,.14);
      --signal-bg: rgba(255,255,255,.02);
      --signal-border: rgba(255,255,255,.08);
      --share-bg: rgba(255,255,255,.03);
      --share-border: rgba(255,255,255,.10);
      --tab-bg: rgba(255,255,255,.03);
      --tab-border: rgba(255,255,255,.10);
      --tab-active-bg: rgba(255,255,255,.10);
      --tab-active-border: rgba(255,255,255,.18);
      --body-bg: linear-gradient(180deg, #08090e 0%, #0b0d14 30%, #080a10 65%, #060810 100%);
      --hfeat-bg: rgba(255,255,255,.025);
      --hfeat-border: rgba(255,255,255,.08);
      --trust-bg: rgba(255,255,255,.015);
      --trust-border: rgba(255,255,255,.07);
      --countdown-bg: rgba(36,192,127,.06);
      --countdown-border: rgba(36,192,127,.2);
    }

    /* ─── LIGHT THEME ─── */
    [data-theme="light"]{
      --bg0:#f0f2f7;
      --bg1:#e8ebf3;
      --panel:rgba(255,255,255,.85);
      --panel2:rgba(255,255,255,.6);
      --line:rgba(0,0,0,.12);
      --line2:rgba(0,0,0,.08);
      --text:#111827;
      --muted:rgba(17,24,39,.68);
      --muted2:rgba(17,24,39,.48);
      --shadow: 0 12px 40px rgba(0,0,0,.12);
      --accent:#1aa36b;
      --accent2:#e8f5ef;
      --chip: rgba(0,0,0,.06);
      --chip2: rgba(0,0,0,.03);
      --topbar-bg: rgb(242,244,249);
      --topbar-border: rgba(0,0,0,.08);
      --overlay-bg: rgba(0,0,0,.03);
      --overlay-border: rgba(0,0,0,.10);
      --input-bg: rgba(255,255,255,.9);
      --modal-bg: rgba(252,253,255,.98);
      --modal-border: rgba(0,0,0,.10);
      --match-bg: rgba(255,255,255,.7);
      --match-border: rgba(0,0,0,.08);
      --match-hover: rgba(255,255,255,.95);
      --match-hover-border: rgba(0,0,0,.14);
      --signal-bg: rgba(0,0,0,.025);
      --signal-border: rgba(0,0,0,.07);
      --share-bg: rgba(0,0,0,.03);
      --share-border: rgba(0,0,0,.10);
      --tab-bg: rgba(255,255,255,.6);
      --tab-border: rgba(0,0,0,.10);
      --tab-active-bg: rgba(255,255,255,.95);
      --tab-active-border: rgba(0,0,0,.18);
      --body-bg: linear-gradient(160deg, #edf0f9 0%, #e8ecf5 40%, #e4e8f2 70%, #e2e6f0 100%);
      --hfeat-bg: rgba(255,255,255,.6);
      --hfeat-border: rgba(0,0,0,.07);
      --trust-bg: rgba(255,255,255,.5);
      --trust-border: rgba(0,0,0,.06);
      --countdown-bg: rgba(26,163,107,.08);
      --countdown-border: rgba(26,163,107,.25);
    }
    [data-theme="light"] body{
      color: var(--text);
      background: transparent;
    }
    [data-theme="light"] html{
      background: var(--body-bg);
      min-height: 100%;
    }
    [data-theme="light"] .topbar{
      background: var(--topbar-bg);
      border-bottom-color: var(--topbar-border);
    }
    [data-theme="light"] .panel{
      background: var(--panel);
      border-color: var(--line2);
      box-shadow: 0 4px 24px rgba(0,0,0,.07);
    }
    [data-theme="light"] .modal{
      background: var(--modal-bg);
      border-color: var(--modal-border);
    }
    [data-theme="light"] .overlay{ background: rgba(0,0,0,.38); }
    [data-theme="light"] .match{
      background: var(--match-bg);
      border-color: var(--match-border);
    }
    [data-theme="light"] .match:hover{
      background: var(--match-hover);
      border-color: var(--match-hover-border);
    }
    [data-theme="light"] .signalRow{ background: var(--signal-bg); border-color: var(--signal-border); }
    [data-theme="light"] .box{ background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08); }
    [data-theme="light"] .btn{
      background: rgba(255,255,255,.7);
      border-color: rgba(0,0,0,.10);
      color: var(--text);
    }
    [data-theme="light"] .btn:hover{ background: rgba(255,255,255,.95); border-color: rgba(0,0,0,.18); }
    [data-theme="light"] .tab{
      background: var(--tab-bg);
      border-color: var(--tab-border);
      color: var(--text);
    }
    [data-theme="light"] .tab:hover{ background: rgba(255,255,255,.85); }
    [data-theme="light"] .tab.active{
      background: var(--tab-active-bg);
      border-color: var(--tab-active-border);
    }
    [data-theme="light"] .hFeat{ background: var(--hfeat-bg); border-color: var(--hfeat-border); }
    [data-theme="light"] .trustBar{ background: var(--trust-bg); border-color: var(--trust-border); }
    [data-theme="light"] .article{ background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08); }
    [data-theme="light"] .article:hover{ background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.14); }
    [data-theme="light"] .pill{ background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.10); color: var(--text); }
    [data-theme="light"] .chip{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: var(--text); }
    [data-theme="light"] .shareBtn{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); color: rgba(17,24,39,.72); }
    [data-theme="light"] .shareBtn:hover{ background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.18); color: var(--text); }
    [data-theme="light"] .badge{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.10); color: var(--text); }
    [data-theme="light"] .footerCard{ background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08); box-shadow: 0 4px 24px rgba(0,0,0,.07); }
    [data-theme="light"] .input, [data-theme="light"] .select{
      background: var(--input-bg);
      border-color: rgba(0,0,0,.12);
      color: var(--text);
    }
    [data-theme="light"] .tzSelect{
      background: rgba(255,255,255,.7);
      border-color: rgba(0,0,0,.10);
      color: var(--text);
    }
    [data-theme="light"] .toast{ background: rgba(252,253,255,.96); border-color: rgba(0,0,0,.10); color: var(--text); }
    [data-theme="light"] .mbc-link{ color: var(--accent); }
    [data-theme="light"] .mbc-sep{ color: var(--accent); }
    [data-theme="light"] .mbc-current { color: rgba(17,24,39,.7) !important; font-weight: 600; }
    [data-theme="light"] .matchTitle, [data-theme="light"] .articleTitle{ background: rgba(26,163,107,.07); border-left-color: var(--accent); }
    [data-theme="light"] .signalsSectionTitle { color: rgba(17,24,39,.8) !important; }
    [data-theme="light"] .pred{ color: rgba(17,24,39,.82); }
    [data-theme="light"] .pred p{ color: rgba(17,24,39,.82); }
    [data-theme="light"] .preview{ color: rgba(17,24,39,.62); }
    [data-theme="light"] select option{ background: #fff; color: #111; }
    [data-theme="light"] .heroDesc p{ color: rgba(17,24,39,.68); }
    [data-theme="light"] .countdown{ background: var(--countdown-bg); border-color: var(--countdown-border); }
    [data-theme="light"] .cdLabel{ color: rgba(17,24,39,.55); }
    [data-theme="light"] .motd{ background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.08); }
    /* ── Light theme: text contrast fixes ── */
    [data-theme="light"] .sub { color: rgba(17,24,39,.55); }
    [data-theme="light"] .muted { color: rgba(17,24,39,.6); }
    [data-theme="light"] .panelHead { border-bottom-color: rgba(0,0,0,.07); }
    [data-theme="light"] .panelHead h2, [data-theme="light"] .panelHead h3 { color: var(--text); }
    [data-theme="light"] .modalHead { border-bottom-color: rgba(0,0,0,.07); }
    [data-theme="light"] .modalHead h2, [data-theme="light"] .modalHead h3 { color: var(--text); }
    [data-theme="light"] .modalSub { color: rgba(17,24,39,.52); }
    [data-theme="light"] .mTeams { color: var(--text); }
    [data-theme="light"] .mMeta { color: rgba(17,24,39,.55); }
    [data-theme="light"] label { color: rgba(17,24,39,.55); }
    [data-theme="light"] .hFeatTitle { color: var(--text); }
    [data-theme="light"] .hFeatSub { color: rgba(17,24,39,.55); }
    [data-theme="light"] .trustItem { color: rgba(17,24,39,.7); }
    [data-theme="light"] .trustItem b { color: var(--text); }
    [data-theme="light"] .motdTeams { color: var(--text); }
    [data-theme="light"] .motdMeta { color: rgba(17,24,39,.52); }
    [data-theme="light"] .signalLabel { color: rgba(17,24,39,.45); }
    [data-theme="light"] .signalVal { color: var(--text); }
    [data-theme="light"] .signalIco i { color: var(--accent); }
    /* Bet signal row: keep text dark/readable on green bg in both themes */
    [data-theme="light"] .signal-bet { background: rgba(36,192,127,.15) !important; border-color: rgba(36,192,127,.35) !important; }
    [data-theme="light"] .signal-bet .signalVal { color: #0d7a52 !important; }
    [data-theme="light"] .signal-bet .signalLabel { color: rgba(13,122,82,.7) !important; }
    [data-theme="light"] .signal-bet .betReason-txt { color: rgba(13,122,82,.75) !important; }
    [data-theme="light"] .tabIco { filter: none; }
    [data-theme="light"] .phIco i { color: var(--accent); }
    [data-theme="light"] .artIco { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.08); color: var(--accent); }
    [data-theme="light"] .article h4 { color: var(--text); }
    [data-theme="light"] .article p { color: rgba(17,24,39,.55); }
    [data-theme="light"] .heroTitle { color: var(--text); }
    [data-theme="light"] .footCompactTitle { color: var(--accent); }
    [data-theme="light"] .footLogo .word { color: var(--text); }
    [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(0) brightness(0.3);
    }
    [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    }
    [data-theme="light"] .shareRow { border-top-color: rgba(0,0,0,.07); }
    [data-theme="light"] .shareRow > span { color: rgba(17,24,39,.42) !important; }
    [data-theme="light"] .cdNum { color: var(--accent); }
    [data-theme="light"] .cdSub { color: rgba(17,24,39,.45); }
    [data-theme="light"] .cdSep { color: var(--accent); }
    [data-theme="light"] .motdBadge { background: rgba(26,163,107,.12); border-color: rgba(26,163,107,.3); color: var(--accent); }

    /* Theme toggle button */
    .themeToggle {
      width: 36px; height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: var(--text);
      cursor: pointer;
      display: grid; place-items: center;
      font-size: 16px;
      transition: background .2s, border-color .2s, transform .2s;
      flex-shrink: 0;
    }
    .themeToggle:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); transform: rotate(20deg); }
    [data-theme="light"] .themeToggle{ border-color: rgba(0,0,0,.10); background: rgba(255,255,255,.7); }
    [data-theme="light"] .themeToggle:hover{ background: rgba(255,255,255,.95); }

    *{box-sizing:border-box}
    body{height:100%}
    html {
      background: #08090e;
      min-height: 100%;
    }
    /* Градиентный фон на отдельном GPU-слое — не тормозит скролл */
    html::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background: var(--body-bg, #08090e);
      pointer-events: none;
    }
    body{
      margin:0;
      padding-top:44px;
      background: transparent;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      line-height:1.35;
      transition: color .3s;
      min-height: 100vh;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:8px 18px 6px}
    .topbar{
      position:fixed; top:0; left:0; right:0; z-index:60;
      background: var(--topbar-bg, rgb(8,9,14));
      border-bottom:1px solid var(--topbar-border, rgba(255,255,255,.06));
      will-change: transform;
    }
    .topinner{max-width:var(--max); margin:0 auto; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; overflow:hidden;}
    .brand{display:flex; align-items:center; gap:6px; font-weight:800; letter-spacing:.06em; flex-shrink:0; white-space:nowrap; min-width:0;}
    .dot{
      display: none;
    }
    .badges{display:flex; gap:8px; align-items:center}
    .badge{
      font-size:11px; padding:3px 8px; border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(244,246,251,.86);
      letter-spacing:.04em;
      white-space:nowrap;
    }
    .nav{display:flex; gap:8px; align-items:center; color:var(--muted); flex-shrink:0;}
    .nav a{font-size:13px; text-decoration:none}
    .nav a:hover{color:var(--text)}
    .nav .pill{font-size:12px}
    .pill{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(244,246,251,.78);
      white-space:nowrap;
    }

    .panel{
      background: var(--panel);
      border:1px solid var(--line2);
      border-radius: var(--r2);
      box-shadow: var(--shadow);
    }
    .panelHead{
      padding:14px 16px;
      border-bottom:1px solid var(--line2);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .panelHead h2, .panelHead h3{margin:0; font-size:14px; letter-spacing:.02em; font-weight:600}
    .panelBody{padding:14px 16px}
    .sub{color:var(--muted2); font-size:12px}

    /* Hero */
    .hero{
      display:grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap:16px;
      margin-top:6px;
      align-items:start;
    }
    @media (max-width: 760px){
      .hero{grid-template-columns: 1fr;}
    }
    .heroTitle{font-size:24.2px; line-height:1.02; margin:0 0 10px; letter-spacing:-.02em}
    @media (max-width: 520px){
      .heroTitle{font-size:16.2px}
    }
    .btnRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
    .btn{
      appearance:none; border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      font-size:13px;
      cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16)}
    .btn:active{transform: translateY(1px)}
    .btn.primary{
      background: linear-gradient(180deg, rgba(36,192,127,.95), rgba(26,160,105,.95));
      border-color: rgba(36,192,127,.55);
      color:#06110c;
      font-weight:800;
    }
    .btn.primary:hover{filter: brightness(1.03)}
    .btn.ghost{background: rgba(255,255,255,.02)}
    .kpiRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
    .kpi{padding:8px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); font-size:12px; color:rgba(244,246,251,.82)}
    .kpi b{color:var(--text)}

    /* Tabs + actions */
    .switchBar{margin-top:4px}
    .switchRow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
    .tabsGroup{display:flex;align-items:center;gap:0;flex:1;min-width:0;position:relative}
    .tabsScroll{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative}
    .tabsScroll::-webkit-scrollbar{display:none}
    .tabs{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;padding:2px 4px}
    /* Fade-маски по краям */
    .tabsScroll.fadeL::before,.tabsScroll.fadeR::after{content:'';position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:2}
    .tabsScroll.fadeL::before{left:0;background:linear-gradient(to right,var(--bg1,#05060a) 20%,transparent)}
    .tabsScroll.fadeR::after{right:0;background:linear-gradient(to left,var(--bg1,#05060a) 20%,transparent)}
    [data-theme="light"] .tabsScroll.fadeL::before{background:linear-gradient(to right,var(--panel,#fff) 20%,transparent)}
    [data-theme="light"] .tabsScroll.fadeR::after{background:linear-gradient(to left,var(--panel,#fff) 20%,transparent)}
    /* Стрелки */
    .tabsArrow{flex:0 0 auto;background:none;border:none;color:var(--text);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;opacity:.6;transition:opacity .15s,color .15s;user-select:none}
    .tabsArrow:hover{opacity:1;color:var(--accent)}
    .tabsArrowHidden{opacity:0!important;pointer-events:none}
    .tab{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:rgba(244,246,251,.86);
      padding:6px 12px;
      border-radius:999px;
      font-size:12px;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      gap:5px;
      line-height:1.2;
    }
    .tab:hover{background: rgba(255,255,255,.06)}
    .tab.active{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.18);
    }
    .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

    /* Main layout (important) */
    .mainGrid{
      margin-top:6px;
      display:grid;
      gap:14px;
      grid-template-columns: minmax(0,1fr) minmax(var(--rightMin), var(--rightMax));
      align-items:start;
    }
    .mainGrid > *{align-self:start}
    @media (max-width: 900px){
      .mainGrid{grid-template-columns: 1fr;}
    }

    /* Match cards */
    .list{display:flex; flex-direction:column; gap:12px}
    a.match{color:inherit; text-decoration:none}
    .match{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      border-radius: 18px;
      padding:14px;
      cursor:pointer;
      transition: background .15s ease, border-color .15s ease;
      content-visibility: auto;
      contain-intrinsic-size: 0 80px;
    }
    .match:hover{background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.14)}
    .mTop{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
    .mTeams{font-weight:800;display:flex;align-items:center;flex-wrap:wrap;gap:3px}
    .liveBadge{color:#48bb78;font-size:11px;font-weight:600;letter-spacing:.3px;white-space:nowrap;margin-left:6px;vertical-align:middle}
    .liveBadge:empty{display:none}
    .liveBadge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#48bb78;margin-right:4px;vertical-align:middle;animation:livePulse 1.5s ease-in-out infinite}
    @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
    .liveBadge-preview{float:right;margin-left:8px;margin-top:2px}
    /* lb-desktop: visible on desktop, hidden on mobile */
    .lb-desktop{display:inline}
    .lb-desktop:empty{display:none}
    /* lb-mobile: hidden on desktop, visible on mobile */
    .lb-mobile{display:none}
    @media(max-width:639px){.lb-desktop{display:none}.lb-mobile{display:block}}
    .mMeta{color:var(--muted2); font-size:12px; margin-top:4px}
    .chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
    .chip{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:rgba(244,246,251,.78);
    }
    .preview{margin-top:10px; color:rgba(244,246,251,.70); font-size:13px; overflow-wrap:anywhere; }
    .rightBox .match{padding:12px}
    .rightBox .mTeams{font-size:14px}
    .rightBox .chips{margin-top:8px}
    .rightBox .preview{display:none}

    /* Tabs as links */
    a.tab{color:inherit; text-decoration:none; display:inline-flex}

    /* Articles */
    .article{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      border-radius: 18px;
      padding:14px;
    }
    .article h4{margin:0 0 6px; font-size:14px}
    .article p{margin:0; color:var(--muted); font-size:12px}

    /* Modal */
    .overlay{
      position:fixed; inset:0; z-index:100;
      display:none;
      background: rgba(0,0,0,.76);
      padding: 16px;
      overflow-y: hidden;
      box-sizing: border-box;
    }
    .overlay.show{
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .modal{
      width: min(1060px, 100%);
      max-width: 100%;
      background: var(--modal-bg);
      border:1px solid var(--modal-border);
      border-radius: 22px;
      box-shadow: 0 32px 100px rgba(0,0,0,.8);
      overflow:clip;
      flex-shrink: 0;
      margin: 0 auto;
      display:flex; flex-direction:column;
      max-height:calc(100vh - 32px);
    }
    @media (max-width: 600px) {
      .overlay { padding: 6px; }
      .modal { border-radius: 14px; width: calc(100vw - 12px); max-height:calc(100vh - 12px); }
    }
    .modalHead{
      padding:16px 20px;
      display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
      border-bottom:1px solid rgba(255,255,255,.08);
      position:sticky; top:0; z-index:2;
      background:var(--modal-bg, #1a1d2e);
      flex-shrink:0;
    }
    .modalHead > div:first-child { flex:1; min-width:0; }
    .modalHead h2, .modalHead h3{margin:0; font-size:16px; font-weight:600}
    .modalBody{padding:18px 20px; overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column;}
    @media (max-width: 600px){
      .modalHead{ padding:12px 14px; }
      .modalBody{ padding:12px 12px; overflow-y:auto; }
    }

    .modalSub{color:var(--muted2); font-size:12px; margin-top:4px}
    .modalGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:12px;
      align-items:start;
      height:100%;
    }
    @media (max-width: 900px){
      .modalGrid{grid-template-columns: 1fr; height:auto;}
    }
    .box{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      border-radius: 18px;
      padding:18px;
    }
    /* Левая колонка (текст прогноза) скроллится сама — не весь modalBody */
    .modalGrid > .box:first-child {
      overflow-y:auto;
      max-height:calc(100vh - 120px);
    }
    @media (max-width:600px){
      /* На мобильном: box не ограничен по высоте, modalBody скроллит всё */
      .modalGrid > .box:first-child {
        overflow-y:visible;
        max-height:none;
      }
      /* Когда попап звёзд открыт — overflow у modalBody снимается через JS */
    }
    @media (max-width:600px){ .box{ padding:14px; } }
    /* Prediction text: do NOT break inside numbers like 1.0 or bets like ТБ(2.5) */
    .pred{ color:rgba(244,246,251,.88); overflow-wrap:normal; word-break:normal; hyphens:none; -webkit-hyphens:none; -ms-hyphens:none; line-height:1.85; font-size:16px; }
    .pred, .pred *{ hyphens:none !important; -webkit-hyphens:none !important; -ms-hyphens:none !important; }
    .pred p{ margin:0 0 1.1em 0 }
    .pred p:last-child{ margin-bottom:0 }
    @media (max-width:600px){ .pred{ font-size:15px; line-height:1.75; } }
    .row{display:flex; gap:8px; flex-wrap:wrap}
    .row .chip{background: rgba(255,255,255,.02)}
    .formGrid{
      display:grid; grid-template-columns: 1fr 1fr; gap:10px;
    }
    @media (max-width: 760px){
      .formGrid{grid-template-columns: 1fr;}
    }
    label{font-size:12px; color:var(--muted2)}
    .input, .select{
      width:100%;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color:var(--text);
      outline:none;
    }
    .input:focus, .select:focus{border-color: rgba(255,255,255,.20)}

/* Competition filter custom dropdown (flags instead of OS country codes in native select) */
#competition.compNativeHidden{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.compProxyBtn{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  text-align:left;
  cursor:pointer;
}
.compProxyBtn .compProxyBtnLabel{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.compProxyCaret{
  margin-left:auto;
  opacity:.9;
  transition: transform .15s ease;
}
.compProxyBtn.is-open .compProxyCaret{ transform: rotate(180deg); }
.compProxyFlag{
  width:16px;
  height:12px;
  border-radius:2px;
  overflow:hidden;
  display:inline-block;
  flex:0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}
.compProxyFlag--globe{
  width:auto;
  height:auto;
  box-shadow:none;
  font-size:14px;
  line-height:1;
}
.compProxyMenu{
  position:fixed;
  z-index:10060;
  background:#0d111b;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
.compProxyMenu[hidden]{ display:none !important; }
.compProxyMenuInner{
  max-height: inherit;
  overflow:auto;
  padding:6px;
}
.compProxyItem{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  cursor:pointer;
  font: inherit;
}
.compProxyItem:hover{ background: rgba(255,255,255,.06); }
.compProxyItem.active{
  background: rgba(120,170,255,.22);
  color:#fff;
}
.compProxyName{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
[data-theme="light"] .compProxyMenu{
  background:#fff;
  border-color:rgba(0,0,0,.12);
  box-shadow:0 16px 44px rgba(0,0,0,.14);
}
[data-theme="light"] .compProxyItem{
  color:#111827;
}
[data-theme="light"] .compProxyItem:hover{
  background:rgba(17,24,39,.05);
}
[data-theme="light"] .compProxyItem.active{
  background:rgba(59,130,246,.16);
  color:#111827;
}

    .footerActions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:12px}

    /* Toast */
    .toast{
      position: fixed;
      left: 18px; bottom: 18px;
      z-index: 120;
      background: var(--modal-bg);
      border:1px solid var(--modal-border);
      border-radius: 16px;
      padding: 10px 12px;
      color: var(--text);
      font-size: 12px;
      box-shadow: 0 16px 60px rgba(0,0,0,.6);
      display:none;
      max-width: 520px;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }
    .toast.show{display:block}

    /* Hero: два верхних блока на одном уровне (десктоп) */
    .hero{align-items:stretch}
    .hero > .panel{height:100%}
    .hero .panelBody{height:100%; display:flex; flex-direction:column}
    .hero .panel:first-child .panelBody{min-height: 360px}
    .rightBox .panelBody{min-height: 0}
    /* чтобы правый блок не расползался по высоте от списка */
    #todayList{overflow:auto; padding-right:4px}
    #todayList::-webkit-scrollbar{width:10px}
    #todayList::-webkit-scrollbar-thumb{background: rgba(255,255,255,.08); border-radius:999px}
/* Hero note (вместо плашек) */
    .heroNote{
      margin-top:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      border-radius: 18px;
      padding:14px;
    }
    .heroNoteHead{display:flex; gap:12px; align-items:flex-start}
    .hnIco{
      width:38px; height:38px; border-radius: 14px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(244,246,251,.92);
      flex:0 0 auto;
    }
    .hnIco svg{width:18px; height:18px}
    .heroNoteTitle{font-weight:900; font-size:14px; letter-spacing:.01em}
    .heroNoteSub{margin-top:3px; font-size:12px; color: rgba(244,246,251,.70)}
    .heroNoteGrid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px}
    .hnItem{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
    }
    .hnDot{
      width:30px; height:30px; border-radius: 12px;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(244,246,251,.92);
      flex:0 0 auto;
      margin-top:1px;
    }
    .hnDot svg{width:16px; height:16px}
    .hnTitle{font-weight:850; font-size:13px}
    .hnText{margin-top:2px; font-size:12px; color: rgba(244,246,251,.72); line-height:1.35}
    .heroNoteFoot{
      margin-top:12px;
      display:flex; gap:8px; align-items:flex-start;
      color: rgba(244,246,251,.62);
      font-size:12px;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.015);
    }
    .hnMini{opacity:.9}
    .pillIco{margin-right:6px; opacity:.9}

    /* Footer */
    .siteFooter{
      margin-top:6px;
      border-top:1px solid rgba(255,255,255,.08);
      background: radial-gradient(800px 200px at 30% 0%, rgba(255,255,255,.04), transparent 60%);
    }
    .footerInner{display:flex; gap:18px; align-items:flex-start; justify-content:space-between; padding:18px 0}
    @media (max-width: 980px){ .footerInner{flex-direction:column} }
    .footLogo{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.08em; font-size:13px}
    .footText{margin-top:8px; color: rgba(244,246,251,.62); font-size:12px; max-width:520px; line-height:1.4}
    .footCols{display:flex; gap:26px}
    @media (max-width: 980px){ .footCols{width:100%} }
    .footCol{min-width:170px}
    .footTitle{font-weight:850; font-size:12px; color: rgba(244,246,251,.80); margin-bottom:8px}
    .footLink, .footLinkBtn{
      display:inline-block;
      font-size:12px;
      color: rgba(244,246,251,.70);
      text-decoration:none;
      padding:6px 0;
    }
    .footLink:hover, .footLinkBtn:hover{color: rgba(244,246,251,.92)}
    .footLinkBtn{
      background:none; border:none; cursor:pointer; text-align:left;
      font: inherit;
      padding:6px 0;
    }
    .footMeta{font-size:12px; color: rgba(244,246,251,.62); padding:4px 0; line-height:1.35}
    .footLinks { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
    .footLinkBtn i { font-size:12px; margin-right:3px; color: var(--accent); opacity:.7; }
    .footShareRow { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

    /* Compact footer layout */
    .footerCompact {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 24px;
      align-items: start;
    }
    @media (max-width: 860px) { .footerCompact { grid-template-columns: 1fr; } }
    .footCompactBrand { min-width: 0; }
    .footTagline { font-size: 12px; color: var(--muted2); margin-top: 6px; line-height: 1.4; max-width: 260px; }
    .footAge{ font-size:11px;color:var(--muted2);margin-top:8px;display:flex;align-items:center;gap:6px }
    .foot18{ background:#e53935;color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.04em }
    .footDisclaimer{ margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);font-size:10px;color:var(--muted2);line-height:1.6;display:flex;gap:8px;align-items:flex-start }
    .foot18sm{ background:#e53935;color:#fff;font-size:9px;font-weight:800;padding:1px 4px;border-radius:3px;flex-shrink:0;margin-top:2px }
    .footCopy{ margin-top:12px;font-size:10px;color:var(--muted2);opacity:.6;text-align:center }
    .footCompactCols { display: flex; gap: 22px; }
    @media (max-width: 600px) { .footCompactCols { flex-direction: column; gap: 16px; } }
    .footCompactGroup { min-width: 140px; }
    .footCompactTitle { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
    .footCompactTitle i { font-size: 12px; }
    .footCompactLinks { display: flex; flex-direction: column; gap: 1px; }
    .fcl {
      background: none; border: none; padding: 3px 0; cursor: pointer;
      font-size: 12px; color: var(--muted); text-align: left;
      font-family: inherit; transition: color .15s; text-decoration: none; display: block;
    }
    .fcl:hover { color: var(--accent); }
    .footCompactRight { min-width: 130px; }
    .footStaticLinks { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.06); }
    .footStaticLink { font-size:11px; color:var(--muted2); text-decoration:none; display:flex; align-items:center; gap:5px; transition:color .15s; }
    .footStaticLink i { color:var(--accent); font-size:12px; }
    .footStaticLink:hover { color:var(--accent); }
    [data-theme="light"] .footStaticLink { color:rgba(17,24,39,.5); }
    [data-theme="light"] .footStaticLink:hover { color:var(--accent); }
    .footCompactMeta { font-size: 11px; color: var(--muted2); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
    .footCompactMeta i { color: var(--accent); font-size: 12px; }
    .footRating { display: flex; align-items: center; gap: 8px; font-size: 12px; }
    .footRating .stars { color: #f0b429; letter-spacing: 1px; }
    .footRating .ratingVal { color: var(--muted); font-weight: 500; }
    .footFlag {
      display: inline-block;
      width: 15px;
      height: 11px;
      border-radius: 2px;
      overflow: hidden;
      vertical-align: middle;
      margin-right: 5px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.10);
      position: relative;
      top: -1px;
    }
    [data-theme="light"] .footFlag { box-shadow: 0 0 0 1px rgba(0,0,0,.10); }
    [data-theme="light"] .fcl { color: rgba(17,24,39,.6); }
    [data-theme="light"] .footTagline { color: rgba(17,24,39,.5); }
    [data-theme="light"] .footCompactMeta { color: rgba(17,24,39,.5); }


    /* v10: Top5 list — без скролла (всегда 5 карточек) */
    #todayList, .todayList, .rightList, .top5List, .topList{
      max-height: none !important;
      height: auto !important;
      overflow: visible !important;
    }


    /* Footer v13: карточка в сетке (не во весь экран) */
    .siteFooter{ margin: 4px 0 0; }
    .footerCard{
      border-radius: 22px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      padding: 18px 18px;
    }
    .footerInner{display:flex; gap:18px; align-items:flex-start; justify-content:space-between;}
    @media (max-width: 980px){ .footerInner{flex-direction:column} }


    /* Top5 v13: компактно и без скролла */
    #todayList .row, .todayRow, .topRow{ min-height: 64px; }
    #todayList:empty::before{
      content:"Нет ближайших матчей по выбранным фильтрам";
      display:block;
      color: rgba(244,246,251,.55);
      font-size:12px;
      padding: 10px 2px;
    }


    /* v14: убираем белую полосу перед футером */
    .siteFooter{ border-top: none !important; background: transparent !important; }
    .siteFooter::before{ content:none !important; }
    .divider, .sectionDivider, .hrLine{ display:none !important; }

  
    /* ── Timezone selector ── */
    .tzWrap{display:flex;align-items:center;gap:8px; min-width:0}
    .tzIco{font-size:15px;line-height:1;flex-shrink:0}
    .tzSelect{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.10);
      border-radius:999px;
      color:var(--text);
      font-size:12px;
      padding:5px 10px;
      outline:none;
      cursor:pointer;
      max-width: 180px;
    }
    .tzSelect:hover{border-color:rgba(255,255,255,.18)}
    @media (max-width: 500px) {
      .tzSelect { max-width: 130px; font-size:11px; padding: 4px 8px; }
      .tzIco { display: none; }
    }

    /* ── Hero features ── */
    .heroFeatures{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
    @media(max-width:520px){.heroFeatures{grid-template-columns:1fr}}
    .hFeat{
      display:flex;align-items:flex-start;gap:10px;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.025);
    }
    .hFeatIco{
      font-size:20px;line-height:1;
      flex:0 0 auto;margin-top:1px;
    }
    .hFeatTitle{font-size:13px;font-weight:700;letter-spacing:.01em}
    .hFeatSub{font-size:11px;color:rgba(244,246,251,.60);margin-top:2px;line-height:1.35}

    /* ── Hero trust bar ── */
    .trustBar{
      display:flex;gap:16px;flex-wrap:wrap;
      margin-top:16px;padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.015);
      max-width:100%;box-sizing:border-box;
    }
    .trustItem{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(244,246,251,.72);min-width:0}
    .trustItem b{color:var(--text);font-size:13px}

    /* ── Article иконки ── */
    .articleHead{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
    .artIco{
      width:32px;height:32px;border-radius:10px;
      display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      font-size:15px;flex:0 0 auto;
    }

    /* ── Match card иконка лиги ── */
    .compIco{font-size:14px;margin-right:4px}

    /* ── Signals block in modal ── */
    .signalRow{
      display:flex;align-items:center;gap:10px;
      padding:9px 10px;border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
    }
    .signalIco{font-size:16px;flex:0 0 auto}
    .signalLabel{font-size:11px;color:rgba(244,246,251,.55);text-transform:uppercase;letter-spacing:.04em}
    .signalVal{font-size:13px;font-weight:600;margin-top:1px}

    /* ── Tab иконки ── */
    .tabIco{margin-right:5px}
    .tabFlag {
      display: inline-block;
      width: 18px;
      height: 13px;
      border-radius: 2px;
      overflow: hidden;
      vertical-align: middle;
      margin-right: 6px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.10);
      position: relative;
      top: -1px;
      flex-shrink: 0;
    }
    [data-theme="light"] .tabFlag { box-shadow: 0 0 0 1px rgba(0,0,0,.10); }

    /* ── PanelHead иконки ── */
    .phIco{font-size:15px;margin-right:6px}

    /* ── Fix select/option text colors ── */
    select option {
      background: #12141a;
      color: #f4f6fb;
    }
    .select, .tzSelect {
      color-scheme: dark;
    }
    /* ── Fix date input calendar icon — force light icon ── */
    input[type="date"] {
      color-scheme: dark;
      background-image: none;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
      background-color: transparent;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f6fb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      opacity: .75;
    }
    input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

    /* ── Modal breadcrumbs ── */
    .modalBreadcrumbs {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .mbc-link {
      font-size: 12px;
      color: var(--accent);
      cursor: pointer;
      text-decoration: none;
      transition: color .15s, opacity .15s;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
      opacity: .82;
    }
    .mbc-link:hover { opacity: 1; }
    .mbc-sep { font-size: 11px; color: var(--accent); opacity: .35; }
    .mbc-current {
      font-size: 12px;
      color: rgba(244,246,251,.65);
      font-weight: 500;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── Remix icon sizing in UI ── */
    .ri-ico { font-size: 15px; line-height: 1; }
    .btn i, .btn .ri-ico { font-size: 14px; }
    .phIco i { font-size: 15px; }
    .hFeatIco i { font-size: 20px; }
    .artIco i { font-size: 16px; }
    .signalIco i { font-size: 17px; color: var(--accent); }
    .trustItem i { font-size: 14px; color: var(--accent); margin-right: 2px; }

    /* ── Articles clickable ── */
    .article {
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }
    .article:hover {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.14);
    }

    /* ── Hero desc paragraphs ── */
    .heroDesc { margin-top: 10px; }
    .heroDesc p {
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.6;
      color: rgba(244,246,251,.70);
    }
    .heroDesc p:last-child { margin-bottom: 0; }

    /* ── Article modal H1 ── */
    .articleTitle {
      margin: 6px 0 0;
      font-size: 19px;
      font-weight: 900;
      letter-spacing: -.015em;
      line-height: 1.25;
      color: var(--text);
      display: block;
      padding: 6px 14px 6px 12px;
      border-left: 3px solid var(--accent);
      border-radius: 0 10px 10px 0;
      background: rgba(36,192,127,.06);
      word-break: break-word;
      overflow-wrap: anywhere;
      max-width: 100%;
    }
    @media (max-width:600px){
      .articleTitle { font-size:15px; padding:5px 10px; }
    }

    /* ── Match title refinement ── */
    .matchTitle {
      margin: 8px 0 0;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -.02em;
      line-height: 1.25;
      color: var(--text);
      display: block;
      padding: 6px 14px 6px 12px;
      border-left: 3px solid var(--accent);
      border-radius: 0 10px 10px 0;
      background: rgba(36,192,127,.06);
      word-break: break-word;
      overflow-wrap: anywhere;
      max-width: 100%;
    }
    @media (max-width:600px){
      .matchTitle { font-size:15px; padding:5px 10px; }
    }

    /* ── "Показать ещё" centered ── */
    .footerActions {
      justify-content: center !important;
    }

    /* ── Icon-only button ── */
    .btn-icon {
      width: 38px; height: 38px;
      padding: 0;
      border-radius: 12px;
      justify-content: center;
    }
    .btn-icon i { font-size: 16px; }

    /* ── Archive checkbox ── */
    .archiveLabel {
      display: flex; align-items: center; gap: 10px;
      cursor: pointer; font-size: 13px; color: var(--text);
      user-select: none;
    }
    .archiveLabel input[type="checkbox"] { display: none; }
    .archiveCheck {
      width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.04);
      display: grid; place-items: center;
      transition: background .15s, border-color .15s;
    }
    .archiveLabel input:checked + .archiveCheck {
      background: var(--accent);
      border-color: var(--accent);
    }
    .archiveLabel input:checked + .archiveCheck::after {
      content: "";
      width: 5px; height: 9px;
      border: 2px solid #fff;
      border-top: none; border-left: none;
      transform: rotate(42deg) translateY(-1px);
      display: block;
    }
    .archiveHint { font-size: 11px; color: var(--muted2); margin-top: 5px; padding-left: 28px; }
    [data-theme="light"] .archiveCheck { border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.03); }

    /* ── Match card football icon (no border) ── */
    .matchBall {
      font-size: 15px;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px;
      opacity: .85;
    }
    [data-theme="light"] .matchBall { opacity: .75; }

    /* ── Comp flag inline emoji ── */
    .compFlagEmoji { font-size: 12px; margin-right: 3px; }

    /* ── flag-icons integration ── */
    .cFlag {
      display: inline-block;
      width: 16px;
      height: 12px;
      border-radius: 2px;
      overflow: hidden;
      vertical-align: middle;
      margin-right: 4px;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255,255,255,.12);
      position: relative;
      top: -1px;
    }
    [data-theme="light"] .cFlag {
      box-shadow: 0 0 0 1px rgba(0,0,0,.12);
    }

    /* ── ✕ Close button — always visible, floats top-right ── */
    .btn-close-x {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: rgba(244,246,251,.6);
      font-size: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
      line-height: 1;
      padding: 0;
    }
    .btn-close-x:hover {
      background: rgba(240,82,82,.18);
      border-color: rgba(240,82,82,.4);
      color: #f05252;
    }
    [data-theme="light"] .btn-close-x {
      border-color: rgba(0,0,0,.12);
      background: rgba(0,0,0,.04);
      color: rgba(17,24,39,.5);
    }
    [data-theme="light"] .btn-close-x:hover {
      background: rgba(240,82,82,.1);
      border-color: rgba(240,82,82,.3);
      color: #d93025;
    }

    /* ── Countdown block ── */
    .countdown {
      display: flex;
      gap: 6px;
      align-items: center;
      background: var(--countdown-bg, rgba(36,192,127,.06));
      border: 1px solid var(--countdown-border, rgba(36,192,127,.2));
      border-radius: 16px;
      padding: 10px 14px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .cdLabel {
      font-size: 11px;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-right: 4px;
    }
    .cdUnit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      min-width: 36px;
    }
    .cdNum {
      font-size: 18px;
      font-weight: 900;
      color: var(--accent);
      line-height: 1;
    }
    .cdSub { font-size: 9px; color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; }
    .cdSep { font-size: 16px; font-weight: 700; color: var(--accent); opacity: .5; margin-bottom: 8px; }

    /* ── Match of the Day strip ── */
    .motd {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid var(--match-border, rgba(255,255,255,.08));
      background: var(--match-bg, rgba(255,255,255,.02));
      margin-bottom: 10px;
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .motd:hover { background: var(--match-hover, rgba(255,255,255,.04)); border-color: var(--match-hover-border, rgba(255,255,255,.14)); }
    .motdFire { font-size: 22px; flex-shrink: 0; }
    .motdBadge {
      font-size: 10px; font-weight: 800; letter-spacing: .06em;
      padding: 3px 7px; border-radius: 999px;
      background: rgba(36,192,127,.15); border: 1px solid rgba(36,192,127,.3);
      color: var(--accent); white-space: nowrap; flex-shrink: 0;
    }
    .motdTeams { font-weight: 800; font-size: 14px; }
    .motdMeta { font-size: 11px; color: var(--muted2); margin-top: 2px; }
    .motdArrow { margin-left: auto; color: var(--muted2); font-size: 16px; flex-shrink: 0; }

    /* ── Social share row ── */
    .shareRow {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .shareBtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px; height: 34px;
      padding: 0;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: rgba(244,246,251,.75);
      font-size: 13px;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
      text-decoration: none;
      font-family: inherit;
      flex-shrink: 0;
    }
    .shareBtn i { font-size: 18px; }
    .shareBtn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--text); }
    .shareBtn.tg:hover { border-color: rgba(41,182,246,.4); color: #29b6f6; }
    .shareBtn.tw:hover { border-color: rgba(255,255,255,.3); color: #e7e9ea; }
    .shareBtn.vk:hover { border-color: rgba(77,118,200,.4); color: #7fa3d0; }
    .shareBtn.copy:hover { border-color: rgba(36,192,127,.4); color: var(--accent); }
    .shareBtn.fb:hover { border-color: rgba(66,103,178,.4); color: #4267b2; }

    /* ── Hero creative buttons ── */
    .heroCta {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .heroCtaMain {
      flex: 1;
      min-width: 180px;
      padding: 13px 18px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(36,192,127,.18), rgba(36,192,127,.06));
      border: 1px solid rgba(36,192,127,.3);
      color: var(--accent);
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background .2s, border-color .2s;
      font-family: inherit;
    }
    .heroCtaMain:hover { background: linear-gradient(135deg, rgba(36,192,127,.26), rgba(36,192,127,.10)); border-color: rgba(36,192,127,.5); }
    .heroCtaMain i { font-size: 18px; }
    .heroCtaSub {
      padding: 13px 18px;
      border-radius: 16px;
      background: rgba(255,255,255,.02);
      border: 1px solid rgba(255,255,255,.09);
      color: rgba(244,246,251,.65);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background .2s, border-color .2s, color .2s;
      font-family: inherit;
    }
    .heroCtaSub:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: var(--text); }
    .heroCtaSub i { font-size: 15px; }

    /* ─── TOURNAMENT DESCRIPTION ─── */
    .tourDescBlock {
      grid-column: 1 / -1;
      margin-bottom: 0;
    }
    .tourDescInner {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px 20px;
      background: rgba(36,192,127,.04);
      border: 1px solid rgba(36,192,127,.12);
      border-radius: var(--r1);
      animation: fadeInDesc .3s ease;
    }
    @keyframes fadeInDesc { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }
    .tourDescIcon { color: var(--accent); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
    .tourDescText { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }

    /* ─── SCHEMA RATING STARS (desktop only) ─── */
    .schemaStars {
      display: none;
      align-items: center;
      gap: 3px;
      margin-left: auto;
      flex-shrink: 0;
    }
    @media (min-width: 769px) {
      .schemaStars { display: inline-flex; }
    }
    .schemaStars .star {
      color: #f0b429;
      font-size: 14px;
      line-height: 1;
    }
    .schemaStars .star.empty {
      color: rgba(240,180,41,.25);
    }
    [data-theme="light"] .schemaStars .star { color: #c8960a; }
    [data-theme="light"] .schemaStars .star.empty { color: rgba(160,110,0,.22); }
    .schemaStars .ratingVal {
      font-size: 10px;
      color: var(--muted2);
      margin-left: 4px;
    }

    /* ─── SITEMAP FOOTER LINK ─── */
    .footSitemapLink {
      display: none !important;
    }





/* === PATCH: article modal fixed size + custom scroll + shared rating label === */
#articleOverlay .modal{
  display:flex;
  flex-direction:column;
}
@media (min-width: 769px){
  #articleOverlay .modal{
    width: min(1060px, 100%);
    max-width: 100%;
    max-height: calc(100vh - 32px);
  }
  #articleOverlay .modalBody{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow: hidden !important;
    padding-bottom: 14px;
  }
  #articleOverlay .modalBody > .box{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }
  #articleOverlay #artBody{
    flex:1 1 auto;
    min-height:0;
    max-height:none !important;
    overflow:auto !important;
    padding-right:8px;
    padding-bottom:6px;
  }
  #articleOverlay .shareRow{
    flex-shrink:0;
    margin-top:10px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top:10px;
    background: var(--modal-bg);
    border-top: 1px solid var(--modal-border);
  }
}
#articleOverlay #artBody{
  scrollbar-width: thin;
  scrollbar-color: rgba(36,192,127,.45) rgba(255,255,255,.04);
}
#articleOverlay #artBody::-webkit-scrollbar{ width:7px; }
#articleOverlay #artBody::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
#articleOverlay #artBody::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(36,192,127,.42), rgba(21,110,79,.62));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.05);
}
#articleOverlay #artBody::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(36,192,127,.58), rgba(21,110,79,.82));
}

/* Shared interactive rating styles (predict + article + footer) */
.schemaStars.schemaStars--interactive{
  display:inline-flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
  flex-shrink:0;
}
.schemaStars .ratingLabel{
  font-size:11px;
  color: var(--muted2);
  margin-right: 4px;
  white-space: nowrap;
}
.schemaStars .starBtn{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  cursor:pointer;
  color: rgba(240,180,41,.25);
  line-height:1;
}
[data-theme="light"] .schemaStars .starBtn{ color: rgba(160,110,0,.22); }
.schemaStars .starBtn .star{
  font-size: 15px;
  line-height:1;
  color: inherit;
  transition: color .12s ease;
}
.schemaStars .starBtn.is-active{ color:#f0b429; }
[data-theme="light"] .schemaStars .starBtn.is-active{ color:#c8960a; }
.schemaStars .starBtn:hover:not([disabled]){ color:#f0b429; }
[data-theme="light"] .schemaStars .starBtn:hover:not([disabled]){ color:#c8960a; }
.schemaStars.is-voted .starBtn{ cursor:default; }
.schemaStars .starBtn:focus-visible{
  outline: 1px solid rgba(36,192,127,.55);
  outline-offset: 1px;
  border-radius: 3px;
}
.schemaStars.schemaStars--interactive .ratingVal{
  margin-left: 5px;
}

/* Footer site rating + inline sitemap */
.footCompactBrand .footRateRow{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  justify-content: flex-start;
  width: 100%;
}
.footCompactBrand .footRateRow .schemaStars{
  margin-left: 0;
}
.footCopy .footCopySitemapInline{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(244,246,251,.25);
}
.footCopy .footCopySitemapInline:hover{
  color: var(--accent);
  border-bottom-color: rgba(36,192,127,.45);
}

/* Header brand clickable state when on #league/#article/#predict */
.brand.is-home-link{
  cursor: pointer;
}
.brand.is-home-link:hover{
  filter: brightness(1.05);
}

/* Filters / stats modal close icon button look */
.btn-modal-close-x{
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  border-radius: 12px;
}

/* Keep "Оценить" before stars in desktop and mobile */
.shareRow > .schemaStars{ order: 2; }
@media (max-width: 768px){
  .shareRow{
    row-gap: 8px;
    gap: 5px;
    flex-wrap: nowrap;
  }
  #mainShareRow {
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }
  #mainShareRow .shareBtn {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
  #mainShareRow .shareBtn i { font-size: 14px; }
  #mainShareRow > span:first-child { font-size: 10px; }
  /* Allow popup to wrap onto next line */
  .shareRow .mStarPopup {
    flex-wrap: wrap;
  }
  .shareRow > .schemaStars{
    order: 99;
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .schemaStars .ratingLabel{
    margin-right: 6px;
  }
  /* Compact share buttons on mobile */
  #matchOverlay .shareRow .shareBtn,
  #articleOverlay .shareRow .shareBtn {
    width: 30px;
    height: 30px;
  }
  #matchOverlay .shareRow .shareBtn i,
  #articleOverlay .shareRow .shareBtn i {
    font-size: 16px;
  }
  /* Allow popup row when open */
  #matchOverlay .shareRow:has(.mStarPopup.open),
  #articleOverlay .shareRow:has(.mStarPopup.open) {
    flex-wrap: wrap;
  }
  /* Поделиться label — hide on very small screens if needed */
  #matchOverlay .shareRow > span:first-child,
  #articleOverlay .shareRow > span:first-child {
    display: none;
  }
}


/* Mobile: keep tabs + Фильтры on one row */
@media (max-width: 768px){
  .switchRow{display:flex;flex-wrap:nowrap;align-items:center;gap:4px}
  .tabsGroup{flex:1 1 0;min-width:0;gap:0}
  .switchRow .tabs{flex-wrap:nowrap;gap:5px;padding:2px 2px}
  .switchRow .tabs .tab{flex:0 0 auto;white-space:nowrap;line-height:1;font-size:11px;padding:5px 9px;gap:4px}
  .switchRow .actions{flex:0 0 auto;flex-wrap:nowrap;gap:4px;margin-left:0}
  .switchRow .actions .btn{flex:0 0 auto}
  /* Стрелки на мобиле — меньше и ближе */
  .tabsArrow{font-size:16px;padding:2px 3px}
  /* Fade уже — меньше перекрывают текст */
  .tabsScroll.fadeL::before,.tabsScroll.fadeR::after{width:24px}
  /* Флаг меньше на мобиле */
  .switchRow .tabs .tabFlag{width:14px;height:10px;margin-right:4px}
  .btn-mobile-inline{
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    flex: 0 0 auto;
  }
}

/* Ensure "Оценить" label stays visible in rating widgets */
.shareRow > .schemaStars .ratingLabel{ display:inline-block; }


/* === PATCH: light theme + mobile "Ещё" dropdown fixes (requested only) === */
/* 1) Article modal sticky bottom share bar in light theme */
@media (min-width: 769px){
  [data-theme="light"] #articleOverlay .shareRow{
    background: rgba(252,253,255,.98);
    border-top-color: rgba(0,0,0,.08);
  }
}

/* 2) Light theme native date picker (filters) */
[data-theme="light"] input[type="date"]{
  color-scheme: light;
}



/* ─── MATCH PAGE ─── */
.matchPage { max-width: 800px; margin: 0 auto; padding: 20px; }
.matchPageHeader { text-align: center; margin-bottom: 30px; }
.matchTeams { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.matchTeams .vs { color: var(--muted); margin: 0 12px; }
.matchMeta { color: var(--muted); font-size: 14px; display: flex; justify-content: center; gap: 20px; }
.matchMeta .compName { color: var(--accent); }
.matchBet { background: var(--panel); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 24px; }
.matchBet .betLabel { font-size: 12px; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.matchBet .betPick { font-size: 32px; font-weight: 700; color: var(--accent); }
.matchBet .betReason { color: var(--muted); margin-top: 8px; }
.matchPrediction { margin-bottom: 24px; }
.matchPrediction h2 { font-size: 18px; margin-bottom: 12px; }
.predictionText { line-height: 1.8; color: var(--text); }
.matchDetails { background: var(--panel); border-radius: 12px; padding: 20px; margin-bottom: 24px; }
.detailItem { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.detailItem:last-child { border-bottom: none; }
.detailLabel { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.detailValue { font-weight: 500; }
.detailValue.risk-низкий { color: #22c55e; }
.detailValue.risk-средний { color: #f59e0b; }
.detailValue.risk-повышенный { color: #ef4444; }
.matchShare { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.matchShare span { color: var(--muted); }
.backLink { text-align: center; }
.backLink a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs { padding: 12px 0; font-size: 13px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { margin: 0 8px; }

/* ─── LEAGUE PAGE ─── */
.leagueHeader { text-align: center; padding: 0; }
.leagueHeader h1 { font-size: 22.4px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.leagueDesc { color: var(--muted); max-width: 600px; margin: 0; }
.matchesList { display: flex; flex-direction: column; gap: 12px; }
.emptyState { text-align: center; padding: 60px 20px; color: var(--muted); }
.emptyState i { font-size: 48px; margin-bottom: 16px; display: block; }

/* ─── FOOTER FIX ─── */
.footCompItem { display: inline-block; }
.footCompItem .fcl { margin-bottom: 6px; }



/* ───────────────────────────────────────────────────────────
   Home pagination (desktop) + Load more (mobile)
   ─────────────────────────────────────────────────────────── */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.pageLink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  color: var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pageLink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.pageLink.active{
  background: var(--tab-active-bg);
  border-color: var(--tab-active-border);
}
.pageDots{
  color: var(--muted2);
  padding: 0 4px;
}

.loadMoreWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:14px;
}
.loadMoreBtn{
  width:min(380px, 100%);
  padding:12px 16px;
  border-radius:14px;
  background: rgba(36,192,127,.12);
  border: 1px solid rgba(36,192,127,.35);
  color: var(--text);
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.loadMoreBtn:hover{
  transform: translateY(-1px);
  background: rgba(36,192,127,.16);
  border-color: rgba(36,192,127,.5);
}
.loadMoreBtn:disabled{
  opacity:.65;
  cursor:default;
  transform:none;
}

/* ── Custom Competition Select with Flags ── */
.compSelectWrap{
  position:relative;
  width:100%;
}
.compSelectTrigger{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--text);cursor:pointer;
  box-sizing:border-box;
  user-select:none;
}
.compSelectTrigger:hover{border-color:rgba(255,255,255,.18)}
.compSelectWrap.open .compSelectTrigger{border-color:rgba(255,255,255,.20)}
.compSelectFlag{
  flex:0 0 auto;
  width:20px;height:15px;
  border-radius:2px;
  overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;
}
.compSelectFlag.fi{box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;}
.compSelectLabel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;}
.compSelectArrow{margin-left:auto;flex:0 0 auto;transition:transform .15s;font-size:16px;opacity:.6;}
.compSelectWrap.open .compSelectArrow{transform:rotate(180deg)}
.compSelectDropdown{
  display:none;
  position:fixed;z-index:10100;
  background:var(--card,#14162a);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  overflow-y:auto;max-height:260px;
  padding:4px;
  min-width:200px;
}
.compSelectWrap.open .compSelectDropdown{display:block}
.compSelectItem{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  cursor:pointer;font-size:13px;
  color:rgba(244,246,251,.86);
  transition:background .12s;
}
.compSelectItem:hover{background:rgba(255,255,255,.08)}
.compSelectItem.selected{background:rgba(255,255,255,.13);color:#fff}
.csiFlag{
  flex:0 0 auto;
  width:20px;height:14px;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
}
.csiGlobe{flex:0 0 auto;font-size:15px;line-height:1;}
.csiLabel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
[data-theme="light"] .compSelectTrigger{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.12);color:#111}
[data-theme="light"] .compSelectDropdown{background:#fff;border-color:rgba(0,0,0,.12)}
[data-theme="light"] .compSelectItem{color:#222}
[data-theme="light"] .compSelectItem:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .compSelectItem.selected{background:rgba(36,192,127,.12)}

/* Hide tournament description on mobile */
@media (max-width: 768px){
  #tourDescBlock,
  .tourDescBlock{
    display: none !important;
  }
}


/* ── Mobile star rating button in shareRow ── */
/* Desktop: hide toggle btn, show schemaStars */
@media (min-width: 769px) {
  .mStarToggle { display: none !important; }
  .mStarPopup  { display: none !important; }
  #matchOverlay .schemaStars--interactive,
  #articleOverlay .schemaStars--interactive,
  #mainShareRow .schemaStars--interactive { display: inline-flex; }
}

/* Mobile: hide schemaStars, show toggle btn */
@media (max-width: 768px) {
  #matchOverlay .schemaStars--interactive,
  #articleOverlay .schemaStars--interactive,
  #mainShareRow .schemaStars--interactive { display: none !important; }
}

/* Toggle button — in-row, same size as other shareBtn */
.mStarToggle {
  color: rgba(240,180,41,.35);
  flex-shrink: 0;
}
[data-theme="light"] .mStarToggle { color: rgba(160,110,0,.35); }
.mStarToggle.is-voted {
  color: #f0b429 !important;
  border-color: rgba(240,180,41,.4) !important;
}
[data-theme="light"] .mStarToggle.is-voted {
  color: #c8960a !important;
  border-color: rgba(160,110,0,.4) !important;
}

/* Popup — drops below shareRow buttons on next flex line */
.mStarPopup {
  display: none;
  flex-basis: 100%;
  width: 100%;
  align-items: center;
  gap: 6px;
  padding: 4px 0 0;
  order: 99;
}
.mStarPopup.open { display: flex; }

.mStarPopupLabel {
  font-size: 11px;
  color: rgba(244,246,251,.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.mStarPopupStars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.mStarPopupBtn {
  background: none;
  border: none;
  padding: 1px 4px;
  cursor: pointer;
  color: rgba(240,180,41,.2);
  font-size: 26px;
  line-height: 1;
  transition: color .1s, transform .1s;
}
.mStarPopupBtn.active { color: #f0b429; }
.mStarPopupBtn:hover  { color: #f0b429; transform: scale(1.12); }
.mStarPopup.voted .mStarPopupBtn { cursor: default; pointer-events: none; }

/* ══ mainShareRow: звёзды inline на десктопе ══ */
#mainShareRow .schemaStars--interactive {
  margin-left: 0;
  flex-shrink: 0;
  order: 10;    /* после всех кнопок, но не wrap */
  width: auto !important;
  flex-basis: auto !important;
}
#mainShareRow .schemaStars--interactive .ratingLabel {
  font-size: 10px;
  margin-right: 3px;
}
#mainShareRow .schemaStars--interactive .starBtn {
  width: 15px;
  height: 15px;
}
#mainShareRow .schemaStars--interactive .star {
  font-size: 13px;
}
@media (min-width: 769px) {
  #mainShareRow .shareBtn {
    width: 30px;
    height: 30px;
  }
  #mainShareRow .shareBtn i { font-size: 15px; }
  #mainShareRow > span:first-child { font-size: 10px; }
}
/* ══ mainShareRow мобайл: popup переносится снизу ══ */
#mainShareRow .mStarPopup {
  order: 99;
  flex-basis: 100%;
}
#mainShareRow:has(.mStarPopup.open) {
  flex-wrap: wrap;
}

/* ── Светлая тема: попап оценки (мобиль) ── */
[data-theme="light"] .mStarPopupLabel {
  color: rgba(17,24,39,.5);
}
[data-theme="light"] .mStarPopupBtn {
  color: rgba(160,110,0,.22);
}
[data-theme="light"] .mStarPopupBtn.active,
[data-theme="light"] .mStarPopupBtn:hover {
  color: #c8960a;
}
[data-theme="light"] .mStarPopup.voted .mStarPopupBtn {
  color: rgba(160,110,0,.22);
}
[data-theme="light"] .mStarPopup.voted .mStarPopupBtn.active {
  color: #c8960a;
}

/* ── Другие турниры · блок внутри модалки матча ── */
#mOtherPreds:empty { display:none }
.mOtherTitle {
  font-size:11px; font-weight:700; color:var(--muted2);
  text-transform:uppercase; letter-spacing:.07em;
  display:flex; align-items:center; gap:7px;
  margin:22px 0 10px;
}
.mOtherTitle i { color:var(--accent); font-size:14px }
.mOtherGrid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px;
}
#mOtherPreds .match { border-radius:14px; cursor:pointer; text-decoration:none; display:block; }
@media(max-width:480px){ .mOtherGrid { grid-template-columns:1fr } }
/* ── Другие статьи в модале ── */
#artOtherPreds:empty { display:none }
.artOtherTitle {
  font-size:11px; font-weight:700; color:var(--muted2);
  text-transform:uppercase; letter-spacing:.07em;
  display:flex; align-items:center; gap:7px;
  margin:22px 0 10px;
}
.artOtherTitle i { color:var(--accent); font-size:14px }
.artOtherGrid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px;
}
@media(max-width:480px){ .artOtherGrid { grid-template-columns:1fr } }
.artOtherCard {
  display:block; text-decoration:none; cursor:pointer;
  background: var(--match-bg, rgba(255,255,255,.02));
  border: 1px solid var(--match-border, rgba(255,255,255,.08));
  border-radius:14px; padding:12px 14px;
  transition: background .15s, border-color .15s;
}
.artOtherCard:hover {
  background: var(--match-hover, rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.14);
}
[data-theme="light"] .artOtherCard {
  background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .artOtherCard:hover {
  background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.14);
}
.artOtherCardLabel {
  font-size:10px; font-weight:600; color:var(--accent);
  display:flex; align-items:center; gap:5px; margin-bottom:6px;
}
.artOtherCardTitle {
  font-size:13px; font-weight:600; color:var(--text);
  line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}