:root{
        --bg-0:#070d18;
        --bg-1:#0a1326;
        --bg-2:#0d1a33;
        --bg-3:#0f2244;

        --card:#0c1b35;
        --card-2:#0b1730;

        --line:rgba(255,255,255,.08);
        --line-2:rgba(255,255,255,.12);

        --txt:#eaf1ff;
        --muted:rgba(234,241,255,.70);
        --muted-2:rgba(234,241,255,.55);

        --blue:#2a75ff;
        --blue-2:#1c5fe8;
        --cyan:#2bd4ff;
        --green:#2bff9a;
        --yellow:#ffcc3d;
        --red:#ff4d5e;

        --shadow:0 10px 30px rgba(0,0,0,.35);
        --radius:14px;
        --radius-2:18px;

        --w-left:280px;
        --w-right:320px;
        --topbar-h:58px;
        --subbar-h:56px;

        --tap:44px;

        /* Mobile drawers */
        --drawer-w-left:min(92vw, 360px);
        --drawer-w-right:min(92vw, 380px);
      }

      *{box-sizing:border-box}
      html,body{height:100%}
      body{
        margin:0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
        background:
          radial-gradient(1200px 800px at 30% -10%, rgba(42,117,255,.16), transparent 55%),
          radial-gradient(1000px 700px at 85% 15%, rgba(43,212,255,.08), transparent 60%),
          linear-gradient(180deg, var(--bg-0), var(--bg-1));
        color:var(--txt);
        -webkit-tap-highlight-color: transparent;
      }

      a{color:inherit; text-decoration:none}
      button, input, select{font:inherit}
      .hidden{display:none !important}

      /* Acessibilidade */
      .sr-only{
        position:absolute !important;
        width:1px;height:1px;
        padding:0;margin:-1px;
        overflow:hidden;clip:rect(0,0,0,0);
        white-space:nowrap;border:0;
      }

      /* Ícones */
      .fa-fw{width:1.2em; text-align:center}
      .ico-muted{color:rgba(234,241,255,.72)}
      .ico-bright{color:rgba(234,241,255,.92)}

      /* ======= ALTERNADORES SOMENTE COM CSS (DRAWERS E MODAL) ======= */
      .drawer-toggle{
        position:absolute;
        width:1px;height:1px;
        opacity:0;
        pointer-events:none;
      }

      /* Planos de fundo (clicar fecha) */
      .backdrop{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        z-index:60;
        display:none;
      }

      /* ======= MODAL: MINHAS APOSTAS ======= */
      .modal{
        position:fixed;
        inset:0;
        z-index:95;
        display:none;
        align-items:center;
        justify-content:center;
        padding:16px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left));
      }
      .modal-card{
        width:min(92vw, 760px);
        max-height:82vh;
        border:1px solid var(--line);
        border-radius:18px;
        background:linear-gradient(180deg, rgba(12,27,53,.86), rgba(11,23,48,.72));
        box-shadow:0 22px 70px rgba(0,0,0,.65);
        overflow:hidden;
        display:flex;
        flex-direction:column;
      }
      .modal-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:12px 14px;
        border-bottom:1px solid var(--line);
        background:linear-gradient(180deg, rgba(10,19,38,.92), rgba(10,19,38,.70));
        backdrop-filter: blur(10px);
      }
      .modal-head h4{
        margin:0;
        font-size:14px;
        letter-spacing:.2px;
        display:flex;
        align-items:center;
        gap:10px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .modal-body{
        padding:12px 14px 14px;
        overflow:auto;
      }
      .modal-actions{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-end;
        padding-bottom:10px;
        border-bottom:1px solid rgba(255,255,255,.06);
        margin-bottom:10px;
      }
      .modal-actions .hint{
        margin-right:auto;
        max-width:520px;
      }
      .mybets{
        display:flex;
        flex-direction:column;
        gap:10px;
      }
      .mybet{
        border:1px solid rgba(255,255,255,.10);
        background:rgba(7,13,24,.30);
        border-radius:16px;
        padding:12px 12px;
        display:flex;
        flex-direction:column;
        gap:10px;
      }
      .mybet-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
        flex-wrap:wrap;
      }
      .mybet-title{
        display:flex;
        flex-direction:column;
        gap:4px;
        min-width:240px;
      }
      .mybet-title strong{
        font-size:13px;
        letter-spacing:.2px;
      }
      .mybet-title span{
        font-size:12px;
        color:var(--muted);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:6px 10px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.04);
        color:rgba(234,241,255,.78);
        font-size:12px;
        white-space:nowrap;
      }
      .chip .dot{
        width:8px;height:8px;border-radius:999px;
        background:rgba(255,255,255,.22);
        box-shadow:0 0 0 5px rgba(255,255,255,.08);
      }
      .chip-open{
        border-color:rgba(42,117,255,.35);
        background:rgba(42,117,255,.10);
        color:rgba(234,241,255,.92);
      }
      .chip-open .dot{
        background:var(--blue);
        box-shadow:0 0 0 5px rgba(42,117,255,.12);
      }
      .chip-won{
        border-color:rgba(43,255,154,.35);
        background:rgba(43,255,154,.10);
        color:#d8ffef;
      }
      .chip-won .dot{
        background:var(--green);
        box-shadow:0 0 0 5px rgba(43,255,154,.12);
      }
      .chip-lost{
        border-color:rgba(255,77,94,.35);
        background:rgba(255,77,94,.10);
        color:#ffd7dc;
      }
      .chip-lost .dot{
        background:var(--red);
        box-shadow:0 0 0 5px rgba(255,77,94,.12);
      }

      .mybet-grid{
        display:grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap:10px;
      }
      .mybet-field{
        border:1px solid rgba(255,255,255,.08);
        background:rgba(255,255,255,.03);
        border-radius:14px;
        padding:10px 10px;
        min-width:0;
      }
      .mybet-field .k{
        font-size:11px;
        color:var(--muted);
        letter-spacing:.12em;
        text-transform:uppercase;
        margin-bottom:6px;
      }
      .mybet-field .v{
        font-weight:900;
        font-size:13px;
        letter-spacing:.2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      @media (max-width: 560px){
        .modal-card{
          width:min(94vw, 760px);
          max-height:86vh;
        }
        .mybet-grid{
          grid-template-columns: 1fr 1fr;
        }
      }

      /* Controle do modal via checkbox */
      #toggleMyBetsModal:checked ~ .modal-backdrop{display:block; z-index:94}
      #toggleMyBetsModal:checked ~ .modal:not(.modal-betslip){display:flex}
      #toggleBetSlipModal:checked ~ .modal-backdrop{display:block; z-index:94}
      #toggleBetSlipModal:checked ~ .modal-betslip{display:flex}

      /* ======= BARRA SUPERIOR ======= */
      .topbar{
        position:sticky;
        top:0;
        z-index:70;
        height:var(--topbar-h);
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
        background:linear-gradient(180deg, rgba(10,19,38,.92), rgba(10,19,38,.76));
        backdrop-filter: blur(10px);
        border-bottom:1px solid var(--line);
      }

      .brand{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:240px;
      }
      .brand-badge{
        width:34px;
        height:34px;
        border-radius:10px;
        background:linear-gradient(135deg, rgba(42,117,255,.95), rgba(43,212,255,.70));
        box-shadow:0 10px 25px rgba(42,117,255,.22);
        position:relative;
        flex:0 0 auto;
      }
      .brand-badge:before{
        content:"";
        position:absolute;
        inset:7px;
        border-radius:8px;
        background:rgba(7,13,24,.55);
        border:1px solid rgba(255,255,255,.12);
      }
      .brand-title{
        display:flex;
        flex-direction:column;
        line-height:1.05;
      }
      .brand-title strong{
        font-size:14px;
        letter-spacing:.2px;
        display:flex;
        align-items:center;
        gap:8px;
      }
      .brand-title span{
        font-size:12px;
        color:var(--muted);
      }

      .topbar-center{
        display:flex;
        align-items:center;
        gap:10px;
        flex:1;
        justify-content:center;
        padding:0 12px;
        min-width:0;
      }

      .pill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:9px 12px;
        border-radius:999px;
        background:rgba(255,255,255,.06);
        border:1px solid var(--line);
        color:var(--muted);
        font-size:12px;
        white-space:nowrap;
      }
      .pill-dot{
        width:8px;
        height:8px;
        border-radius:999px;
        background:var(--green);
        box-shadow:0 0 0 6px rgba(43,255,154,.12);
      }

      .topbar-actions{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:240px;
        justify-content:flex-end;
      }

      .btn{
        appearance:none;
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        color:var(--txt);
        padding:9px 12px;
        border-radius:12px;
        cursor:pointer;
        transition:transform .05s ease, background .2s ease, border-color .2s ease;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        min-height:var(--tap);
      }
      .btn:hover{
        background:rgba(255,255,255,.09);
        border-color:rgba(255,255,255,.14);
      }
      .btn:active{transform:translateY(1px)}
      .btn-primary{
        border-color:rgba(42,117,255,.50);
        background:linear-gradient(135deg, rgba(42,117,255,.95), rgba(28,95,232,.92));
        box-shadow:0 12px 26px rgba(42,117,255,.20);
      }
      .btn-primary:hover{
        background:linear-gradient(135deg, rgba(42,117,255,1), rgba(28,95,232,1));
      }

      .icon-btn{
        width:44px;
        height:44px;
        padding:0;
        border-radius:14px;
      }

      .mobile-only{display:none}
      .desktop-only{display:inline-flex}

      /* ======= GRID PRINCIPAL (DESKTOP) ======= */
      .app{
        display:grid;
        grid-template-columns: var(--w-left) 1fr;
        min-height:calc(100vh - var(--topbar-h));
      }

      /* ======= SIDEBAR ESQUERDA ======= */
      .sidebar{
        border-right:1px solid var(--line);
        background:linear-gradient(180deg, rgba(13,26,51,.84), rgba(10,19,38,.70));
        padding:14px 12px;
        overflow:auto;
      }

      .sidebar-head{
        display:none;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:10px 10px 12px;
        border-bottom:1px solid var(--line);
        margin:-14px -12px 12px;
        background:linear-gradient(180deg, rgba(10,19,38,.92), rgba(10,19,38,.72));
        position:sticky;
        top:0;
        z-index:1;
        backdrop-filter: blur(10px);
      }
      .sidebar-head strong{
        font-size:13px;
        letter-spacing:.2px;
        display:flex;
        align-items:center;
        gap:8px;
      }
      .sidebar-head .muted{color:var(--muted); font-size:12px}

      .sidebar-section{
        margin-bottom:14px;
      }
      .sidebar-title{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:10px 10px 8px;
        color:var(--muted);
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.12em;
      }
      .sidebar-title .left{
        display:flex;
        align-items:center;
        gap:8px;
        min-width:0;
      }

      .search{
        display:flex;
        gap:10px;
        padding:10px;
        border-radius:14px;
        border:1px solid var(--line);
        background:rgba(7,13,24,.35);
        margin:0 6px 12px;
        align-items:center;
      }
      .search input{
        width:100%;
        border:0;
        outline:0;
        background:transparent;
        color:var(--txt);
        font-size:13px;
      }
      .search .search-ico{
        width:34px;height:34px;border-radius:12px;
        background:rgba(255,255,255,.07);
        border:1px solid var(--line);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
      }

      .list{
        display:flex;
        flex-direction:column;
        gap:6px;
        padding:0 6px 8px;
      }
      .item{
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 10px;
        border-radius:14px;
        border:1px solid transparent;
        color:var(--muted);
        background:transparent;
        cursor:pointer;
        user-select:none;
        min-height:var(--tap);
      }
      .item:hover{
        background:rgba(255,255,255,.05);
        border-color:rgba(255,255,255,.06);
        color:var(--txt);
      }
      .item.active{
        background:linear-gradient(135deg, rgba(42,117,255,.18), rgba(43,212,255,.08));
        border-color:rgba(42,117,255,.25);
        color:var(--txt);
      }
      .item .badge{
        font-size:11px;
        padding:4px 8px;
        border-radius:999px;
        border:1px solid var(--line);
        color:var(--muted);
        margin-left:auto;
        white-space:nowrap;
      }
      .item .leftdot{
        width:10px;height:10px;border-radius:999px;
        background:rgba(255,255,255,.12);
        border:1px solid var(--line);
        flex:0 0 auto;
      }
      .item.live .leftdot{
        background:var(--red);
        box-shadow:0 0 0 6px rgba(255,77,94,.14);
        border-color:rgba(255,77,94,.35);
      }
      .item i{
        width:18px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:rgba(234,241,255,.78);
      }

      /* ======= CAMPEONATOS POR PAÍS ======= */
      .countries{
        display:flex;
        flex-direction:column;
        gap:8px;
        padding:0 6px 10px;
      }
      .country{
        border:1px solid rgba(255,255,255,.08);
        background:rgba(7,13,24,.25);
        border-radius:16px;
        overflow:hidden;
      }
      .country > summary{
        list-style:none;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:10px 10px;
        color:rgba(234,241,255,.86);
        user-select:none;
        min-height:var(--tap);
      }
      .country > summary::-webkit-details-marker{display:none}
      .country > summary:hover{background:rgba(255,255,255,.05)}
      .country[open] > summary{
        background:linear-gradient(135deg, rgba(42,117,255,.14), rgba(43,212,255,.06));
        border-bottom:1px solid rgba(255,255,255,.08);
      }

      .country-left{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
      }
      .flag-img{
        width:22px;height:22px;
        border-radius:8px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        object-fit:cover;
        flex:0 0 auto;
      }
      .country-name{
        font-weight:800;
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .country-meta{
        display:inline-flex;
        align-items:center;
        gap:8px;
        flex:0 0 auto;
      }
      .chev{
        width:10px;height:10px;
        border-right:2px solid rgba(234,241,255,.70);
        border-bottom:2px solid rgba(234,241,255,.70);
        transform:rotate(-45deg);
        transition:transform .18s ease;
      }
      .country[open] .chev{transform:rotate(45deg)}
      .country-count{
        font-size:11px;
        padding:4px 8px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.12);
        color:rgba(234,241,255,.70);
        background:rgba(255,255,255,.04);
        white-space:nowrap;
      }

      .country-sub{
        padding:8px 10px 10px;
        display:flex;
        flex-direction:column;
        gap:6px;
      }
      .league-item{
        display:flex;
        align-items:center;
        gap:10px;
        padding:9px 10px;
        border-radius:14px;
        border:1px solid transparent;
        background:rgba(255,255,255,.03);
        color:rgba(234,241,255,.72);
        cursor:pointer;
        min-height:var(--tap);
      }
      .league-item:hover{
        background:rgba(255,255,255,.06);
        border-color:rgba(255,255,255,.08);
        color:rgba(234,241,255,.92);
      }
      .league-pill{
        margin-left:auto;
        font-size:11px;
        padding:4px 8px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.10);
        color:rgba(234,241,255,.60);
        background:rgba(255,255,255,.03);
      }

      /* ======= CONTEÚDO PRINCIPAL ======= */
      .main{
        padding:14px 14px 22px;
        overflow:auto;
        min-width:0;
      }

      .subbar{
        height:var(--subbar-h);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:10px 12px;
        border:1px solid var(--line);
        border-radius:18px;
        background:linear-gradient(180deg, rgba(12,27,53,.72), rgba(12,27,53,.52));
        box-shadow:var(--shadow);
        min-width:0;
      }

      .subbar-left{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:240px;
      }
      .subbar-right{
        display:flex;
        align-items:center;
        gap:10px;
        justify-content:flex-end;
        min-width:240px;
      }

      /* Dropdown responsivo para filtros (mobile) */
      .filters-dropdown{
        display:block;
        border:1px solid var(--line);
        background:rgba(255,255,255,.04);
        border-radius:16px;
        padding:8px;
        min-width:0;
      }
      .filters-dropdown > summary{
        list-style:none;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:8px 10px;
        border-radius:14px;
        border:1px solid rgba(255,255,255,.08);
        background:rgba(255,255,255,.04);
        color:rgba(234,241,255,.88);
        user-select:none;
        min-height:var(--tap);
      }
      .filters-dropdown > summary::-webkit-details-marker{display:none}
      .filters-dropdown > summary:hover{
        background:rgba(255,255,255,.06);
        border-color:rgba(255,255,255,.10);
      }
      .filters-dropdown .summary-left{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
      }
      .filters-dropdown .summary-left span{
        font-weight:800;
        letter-spacing:.2px;
        font-size:12px;
      }
      .filters-dropdown .summary-right{
        display:flex;
        align-items:center;
        gap:10px;
        color:rgba(234,241,255,.70);
        font-size:12px;
      }
      .filters-dropdown .filters-body{
        display:none;
        padding:10px 6px 6px;
      }
      .filters-dropdown[open] .filters-body{
        display:flex;
        flex-direction:column;
        gap:10px;
      }

      /* Desktop: mantém filtros visíveis e mostra o botão "Filtros" também */
      @media (min-width: 561px){
        .filters-dropdown{
          border:0;
          background:transparent;
          padding:0;

          display:flex;
          align-items:center;
          justify-content:flex-end;
          gap:10px;
        }

        .filters-dropdown > summary{
          display:flex;
        }

        .filters-dropdown > summary .summary-right{
          display:none;
        }

        .filters-dropdown .filters-body{
          display:flex !important;
          flex-direction:row;
          flex-wrap:wrap;
          gap:10px;
          padding:0;
          justify-content:flex-end;
          align-items:center;
        }
      }

      .panel{
        margin-top:12px;
        border:1px solid var(--line);
        border-radius:18px;
        background:linear-gradient(180deg, rgba(12,27,53,.68), rgba(11,23,48,.54));
        box-shadow:var(--shadow);
        overflow:hidden;
      }

      .panel-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px 14px;
        border-bottom:1px solid var(--line);
        gap:10px;
      }
      .panel-head .title{
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
      }
      .panel-head .title .mark{
        width:10px;height:10px;border-radius:999px;
        background:var(--blue);
        box-shadow:0 0 0 6px rgba(42,117,255,.12);
        flex:0 0 auto;
      }
      .panel-head h3{
        margin:0;
        font-size:14px;
        letter-spacing:.2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:flex;
        align-items:center;
        gap:10px;
      }

      .select{
        display:flex;
        align-items:center;
        gap:10px;
        padding:9px 10px;
        border-radius:12px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.05);
        color:var(--muted);
        font-size:12px;
        min-height:var(--tap);
      }
      .select .label{
        display:inline-flex;
        align-items:center;
        gap:8px;
        white-space:nowrap;
      }
      .select select{
        border:0;
        outline:0;
        background:transparent;
        color:var(--txt);
        font-size:12px;
        margin-left:auto;
      }
      .select select option{
        background:var(--bg-2);
        color:var(--txt);
      }
      .select select optgroup{
        background:var(--bg-2);
        color:var(--txt);
      }

      /* ======= LISTA DE JOGOS ======= */
      .games{
        padding:10px;
        display:flex;
        flex-direction:column;
        gap:10px;
      }

      .game{
        border:1px solid rgba(255,255,255,.08);
        background:rgba(7,13,24,.30);
        border-radius:16px;
        overflow:hidden;
      }
      .game-top{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 12px 10px;
        border-bottom:1px solid rgba(255,255,255,.06);
        min-width:0;
      }
      .league{
        display:flex;
        align-items:center;
        gap:10px;
        color:var(--muted);
        font-size:12px;
        min-width:0;
      }
      .league span:last-child{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .league .flag{
        width:22px;height:22px;border-radius:8px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        flex:0 0 auto;
      }
      .status{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:12px;
        color:var(--muted);
        white-space:nowrap;
        flex-wrap:wrap;
        justify-content:flex-end;
      }
      .live-chip{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:5px 10px;
        border-radius:999px;
        border:1px solid rgba(255,77,94,.35);
        color:#ffd7dc;
        background:rgba(255,77,94,.12);
      }
      .live-chip .dot{
        width:8px;height:8px;border-radius:999px;
        background:var(--red);
        box-shadow:0 0 0 5px rgba(255,77,94,.12);
      }
      .time-chip{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:6px 10px;
        border-radius:999px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.04);
        color:var(--muted);
      }

      .game-mid{
        display:grid;
        grid-template-columns: 1.1fr 1fr;
        gap:10px;
        padding:12px;
        min-width:0;
      }
      .teams{
        display:flex;
        flex-direction:column;
        gap:10px;
        min-width:0;
      }
      .teamrow{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
      }
      .teamname{
        display:flex;
        align-items:center;
        gap:10px;
        font-weight:700;
        letter-spacing:.2px;
        min-width:0;
      }
      .teamname span:last-child{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .shirt{
        width:22px;height:22px;border-radius:8px;
        border:1px solid var(--line);
        background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
        flex:0 0 auto;
      }
      .teamcrest{
        width:24px;
        height:24px;
        border-radius:8px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        object-fit:contain;
        padding:2px;
        flex:0 0 auto;
      }
      .score{
        min-width:32px;
        text-align:right;
        font-weight:800;
        color:var(--txt);
      }
      .meta{
        color:var(--muted);
        font-size:12px;
        margin-top:2px;
      }

      .markets{
        display:flex;
        flex-direction:column;
        gap:10px;
        min-width:0;
      }
      .market-title{
        display:flex;
        align-items:center;
        justify-content:space-between;
        color:var(--muted);
        font-size:12px;
        gap:8px;
        flex-wrap:wrap;
      }
      .odds{
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap:8px;
        min-width:0;
      }
      .odd{
        border:1px solid rgba(255,255,255,.10);
        background:rgba(255,255,255,.05);
        border-radius:14px;
        padding:10px 10px;
        cursor:pointer;
        display:flex;
        flex-direction:column;
        gap:6px;
        transition:transform .06s ease, border-color .2s ease, background .2s ease;
        min-height:54px;
        min-width:0;
      }
      .odd:hover{
        background:rgba(255,255,255,.08);
        border-color:rgba(42,117,255,.32);
      }
      .odd:active{transform:translateY(1px)}
      .odd .name{
        color:var(--muted);
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .odd .value{
        font-weight:900;
        font-size:14px;
        letter-spacing:.2px;
      }
      .odd.selected{
        border-color:rgba(43,212,255,.45);
        background:linear-gradient(135deg, rgba(43,212,255,.16), rgba(42,117,255,.10));
      }

      .game-foot{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:10px 12px;
        border-top:1px solid rgba(255,255,255,.06);
        color:var(--muted);
        font-size:12px;
        flex-wrap:wrap;
      }
      .link{
        color:rgba(43,212,255,.92);
        cursor:pointer;
        display:inline-flex;
        align-items:center;
        gap:8px;
        min-height:var(--tap);
      }
      .link:hover{text-decoration:underline}

      /* ======= SIDEBAR DIREITA ======= */
      .right{
        border-left:1px solid var(--line);
        background:linear-gradient(180deg, rgba(13,26,51,.84), rgba(10,19,38,.70));
        padding:14px 12px;
        overflow:auto;
      }

      .right-head{
        display:none;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:10px 10px 12px;
        border-bottom:1px solid var(--line);
        margin:-14px -12px 12px;
        background:linear-gradient(180deg, rgba(10,19,38,.92), rgba(10,19,38,.72));
        position:sticky;
        top:0;
        z-index:1;
        backdrop-filter: blur(10px);
      }
      .right-head strong{
        font-size:13px;
        letter-spacing:.2px;
        display:flex;
        align-items:center;
        gap:8px;
      }
      .right-head .muted{color:var(--muted); font-size:12px}

      .card{
        border:1px solid var(--line);
        border-radius:18px;
        background:linear-gradient(180deg, rgba(12,27,53,.70), rgba(11,23,48,.55));
        box-shadow:var(--shadow);
        overflow:hidden;
        margin-bottom:12px;
      }
      .card-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:12px 14px;
        border-bottom:1px solid var(--line);
        gap:10px;
      }
      .card-head h4{
        margin:0;
        font-size:13px;
        letter-spacing:.2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:flex;
        align-items:center;
        gap:10px;
      }
      .card-body{padding:12px 14px}

      .empty{
        padding:14px;
        color:var(--muted);
        font-size:12px;
        line-height:1.5;
        text-align:left;
      }

      .betslip{
        display:flex;
        flex-direction:column;
        gap:10px;
      }
      .betslip-row{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        color:var(--muted);
        font-size:12px;
        flex-wrap:wrap;
      }
      .betslip-row strong{color:var(--txt); font-size:12px}
      .money{
        display:flex;
        gap:8px;
        align-items:center;
      }
      .money input{
        width:140px;
        padding:10px 10px;
        border-radius:12px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.05);
        color:var(--txt);
        outline:none;
        min-height:var(--tap);
      }
      .money input:focus{border-color:rgba(42,117,255,.40)}
      .hint{
        color:var(--muted-2);
        font-size:11px;
        line-height:1.35;
      }

      .popular{
        display:flex;
        flex-direction:column;
        gap:8px;
      }
      .popular-item{
        border:1px solid rgba(255,255,255,.08);
        background:rgba(7,13,24,.28);
        border-radius:16px;
        padding:10px 10px;
        display:flex;
        gap:10px;
        align-items:center;
        min-width:0;
      }
      .popular-item .mini{
        width:26px;height:26px;border-radius:10px;
        border:1px solid var(--line);
        background:rgba(255,255,255,.06);
        flex:0 0 auto;
      }
      .popular-item .text{
        display:flex;
        flex-direction:column;
        gap:2px;
        flex:1;
        min-width:0;
      }
      .popular-item .text strong{
        font-size:12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .popular-item .text span{
        font-size:11px;
        color:var(--muted);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .finished-accordion{
        border:1px solid var(--line);
        border-radius:14px;
        background:rgba(7,13,24,.18);
      }
      .finished-accordion > summary{
        list-style:none;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:10px 12px;
        color:var(--txt);
        font-size:13px;
      }
      .finished-accordion > summary::-webkit-details-marker{display:none}

      .betslip-fab{
        position:fixed;
        right:16px;
        bottom:16px;
        z-index:96;
        border:1px solid rgba(255,255,255,.16);
        background:linear-gradient(135deg, rgba(42,117,255,.94), rgba(43,212,255,.84));
        color:#fff;
        border-radius:999px;
        min-height:48px;
        padding:0 16px;
        display:inline-flex;
        align-items:center;
        gap:8px;
        box-shadow:0 16px 38px rgba(0,0,0,.45);
        cursor:pointer;
      }
      .betslip-fab-badge{
        min-width:20px;
        height:20px;
        border-radius:999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:11px;
        font-weight:800;
        background:rgba(7,13,24,.82);
        border:1px solid rgba(255,255,255,.22);
      }

      /* ======= RESPONSIVO ======= */
      @media (max-width: 1200px){
        :root{ --w-left:260px; --w-right:300px; }
      }

      /* Tablet e abaixo: conteúdo ocupa 100% e barras laterais viram drawers */
      @media (max-width: 1060px){
        .app{grid-template-columns: 1fr;}

        /* Mostrar botões mobile */
        .mobile-only{display:inline-flex}
        .desktop-only{display:none}

        /* Barras laterais como drawers */
        .sidebar{
          position:fixed;
          top:var(--topbar-h);
          bottom:0;
          z-index:80;
          padding:14px 12px;
          box-shadow:0 20px 60px rgba(0,0,0,.55);
          overflow:auto;
          transition:transform .22s ease;
        }

        .sidebar{
          left:0;
          width:var(--drawer-w-left);
          transform:translateX(-105%);
          border-right:1px solid rgba(255,255,255,.10);
        }
        .sidebar-head{display:flex}

        /* Conteúdo principal em largura total */
        .main{padding:12px; padding-bottom:22px}

        /* Planos de fundo controlados pelos checkboxes */
        #toggleLeft:checked ~ .backdrop-left{display:block}
        #toggleLeft:checked ~ .app .sidebar{transform:translateX(0)}
      }

      @media (max-width: 560px){
        .topbar{
          padding:0 calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
        }
        .topbar-center{display:none}
        .brand{min-width:auto}
        .topbar-actions{min-width:auto}

        .subbar{
          height:auto;
          padding:10px;
          flex-wrap:wrap;
          gap:10px;
        }
        .subbar-left, .subbar-right{
          min-width:auto;
          width:100%;
          justify-content:space-between;
          gap:10px;
        }
        .pill{flex:1; justify-content:space-between}

        .panel-head{
          flex-direction:column;
          align-items:stretch;
          gap:12px;
        }

        .game-top{
          flex-direction:column;
          align-items:flex-start;
          gap:10px;
        }
        .status{
          width:100%;
          justify-content:flex-start;
        }

        .odds{grid-template-columns:1fr}
        .game-mid{grid-template-columns:1fr}

        .betslip-fab{
          right:12px;
          bottom:12px;
          width:calc(100vw - 24px);
          justify-content:center;
        }
      }