:root{
 --bg:#0b0f10;--bg2:#0e1416;--panel:#11181c;--panel2:#0f161a;
 --text:#eef6f7;--muted:#8aa0a6;--line:rgba(255,255,255,.09);
 --shadow:0 18px 45px rgba(0,0,0,.38);--r:16px;--r2:12px;
 --accent:#00ff88;--accent2:#00d874;--warn:#ffb020;--bad:#ff4d6d;
 --soft:rgba(255,255,255,.04);--chip:rgba(0,255,136,.12);--chipLine:rgba(0,255,136,.25);
 --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
 --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
[data-theme="light"]{
 --bg:#f6f8fa;--bg2:#f0f3f6;--panel:#fff;--panel2:#fff;
 --text:#0c1214;--muted:#5e6b73;--line:rgba(16,24,40,.10);
 --shadow:0 16px 40px rgba(15,23,42,.10);--soft:rgba(15,23,42,.04);
 --chip:rgba(0,214,116,.10);--chipLine:rgba(0,214,116,.20);
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--text);
 background:
 radial-gradient(1200px 700px at 20% 0%, rgba(0,255,136,.12), transparent 55%),
 radial-gradient(900px 600px at 70% 20%, rgba(0,140,255,.10), transparent 55%),
 linear-gradient(180deg,var(--bg),var(--bg2));
}
a{color:inherit;text-decoration:none}
.app{min-height:100vh;display:grid;grid-template-columns:280px 1fr}
.main{padding:26px}
.container{max-width:1180px;margin:0 auto}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px 14px;border-left:none; border-right:1px solid var(--line);
 background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 14px}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
 background:linear-gradient(135deg,var(--accent),#00c0ff);color:#00120a;box-shadow:0 10px 25px rgba(0,255,136,.20)}
.nav{display:flex;flex-direction:column;gap:8px;padding:8px 6px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid transparent;
 color:rgba(255,255,255,.78);transition:.15s}
[data-theme="light"] .nav a{color:rgba(12,18,20,.75)}
.nav a:hover{background:var(--soft);border-color:var(--line)}
.nav a.active{background:linear-gradient(135deg,rgba(0,255,136,.18),rgba(0,255,136,.07));
 border-color:rgba(0,255,136,.20);color:var(--text)}
.icon{width:18px;height:18px;opacity:.92}
.chev{margin-left:auto;opacity:.55}
.bottom{position:absolute;left:14px;right:14px;bottom:14px}
.toggle{width:100%;display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:12px;
 border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;transition:.15s}
.toggle:hover{box-shadow:var(--shadow)}
.toggle .dot{width:10px;height:10px;border-radius:999px;background:var(--accent);
 box-shadow:0 0 0 6px rgba(0,255,136,.12);margin-left:auto}
.header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.hgroup h1{margin:0;font-size:44px;letter-spacing:-.02em}
.hgroup p{margin:6px 0 0;color:var(--muted);max-width:66ch}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));
 border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
[data-theme="light"] .card{background:var(--panel)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;
 border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:rgba(0,255,136,.35);color:#02140b;font-weight:800}
.btn.small{padding:9px 12px;border-radius:10px;font-size:13px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
 background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.22);color:rgba(0,255,136,.95);font-weight:700;font-size:12px}
.select{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
 background:var(--panel);color:var(--text);min-width:180px}
.select select{border:0;background:transparent;color:inherit;outline:0;width:100%;appearance:none}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}
.section-title h2{margin:0;font-size:18px;display:flex;align-items:center;gap:10px}
.link{color:rgba(0,255,136,.92);font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px}
.muted{color:var(--muted)}
.banner{padding:26px;background:
 radial-gradient(1000px 520px at 10% 10%, rgba(0,255,136,.20), transparent 58%),
 radial-gradient(900px 520px at 70% 20%, rgba(0,140,255,.10), transparent 60%)}
.actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:210px;gap:10px;overflow:auto;padding:12px 6px 6px}
.match-mini{padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--soft)}
.mini-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:8px}
.mini-minute{padding:4px 8px;border-radius:999px;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.20);
 color:var(--warn);font-weight:800}
.mini-team{display:flex;justify-content:space-between;font-weight:800;margin-top:10px}
.value-card{padding:14px}
.kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.value-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.value-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--chip);
 border:1px solid var(--chipLine);color:rgba(0,255,136,.95);font-weight:900;font-size:11px}
.value-card h3{margin:6px 0 0;font-size:16px}
.value-inner{margin-top:12px;padding:12px;border-radius:14px;background:var(--soft);border:1px solid var(--line)}
.value-pick{display:flex;align-items:center;gap:10px;font-weight:800}
.value-odds{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;color:var(--muted);font-size:12px}
.value-odds strong{display:block;margin-top:4px;color:var(--text);font-size:16px}
.value-odds .right{text-align:right}
.good{color:var(--accent);font-weight:900}
.value-bottom{margin-top:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.infobar{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,176,32,.18);
 background:linear-gradient(90deg,rgba(255,176,32,.10),rgba(255,176,32,.04));display:flex;gap:10px;align-items:center}
.dotw{width:10px;height:10px;border-radius:999px;background:var(--warn)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tab{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
 background:var(--panel2);color:var(--muted);cursor:pointer;user-select:none}
.tab.active{color:var(--text);border-color:rgba(0,255,136,.25);background:rgba(0,255,136,.10)}
.count{display:inline-grid;place-items:center;min-width:22px;padding:0 8px;height:18px;border-radius:999px;
 background:rgba(255,176,32,.15);border:1px solid rgba(255,176,32,.25);color:var(--warn);font-weight:900;font-size:11px}
.table-card{overflow:hidden}
.table-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;font-weight:900}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--muted);font-weight:800;font-size:12px}
.rankbar{display:inline-block;width:4px;height:18px;border-radius:99px;background:var(--accent);margin-left:10px;vertical-align:middle}
.form{display:flex;gap:6px}
.fc{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;border:1px solid var(--line);font-size:11px;font-weight:900}
.fc.w{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.22);color:rgba(0,255,136,.95)}
.fc.d{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.25);color:rgba(148,163,184,.95)}
.fc.l{background:rgba(255,77,109,.12);border-color:rgba(255,77,109,.22);color:rgba(255,77,109,.95)}
.num{font-family:var(--mono)}
.hero{padding:0;overflow:hidden}
.hero-img{height:280px;background:
 radial-gradient(900px 450px at 0% 20%, rgba(255,0,80,.35), transparent 55%),
 radial-gradient(900px 520px at 30% 30%, rgba(255,0,0,.25), transparent 60%),
 linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.1)),
 repeating-radial-gradient(circle at 65% 40%, rgba(255,0,90,.35) 0 6px, rgba(0,0,0,0) 7px 18px);
 position:relative}
.hero-content{position:absolute;left:22px;top:18px;max-width:520px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;
 background:rgba(0,255,136,.18);border:1px solid rgba(0,255,136,.25);font-weight:900;font-size:11px}
.stars{display:flex;gap:4px;align-items:center}
.star{width:14px;height:14px;color:#ffcc00}
.hero-content h2{margin:10px 0 6px;font-size:44px;letter-spacing:-.02em}
.hero-content ul{margin:12px 0 0;padding-left:18px;color:rgba(255,255,255,.82)}
.hero-cta{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;padding:0 16px}
.hero-cta .btn.primary{width:min(920px,100%);padding:16px 18px;border-radius:12px;text-transform:uppercase;letter-spacing:.08em}
.book-card{overflow:hidden}
.book-cover{height:210px;background:
 radial-gradient(800px 360px at 20% 40%, rgba(0,255,136,.18), transparent 55%),
 radial-gradient(800px 360px at 70% 40%, rgba(255,0,80,.18), transparent 55%),
 linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15))}
.book-body{padding:16px}
.book-head{display:flex;justify-content:space-between;align-items:center}
.book-bonus{font-size:34px;font-weight:900;letter-spacing:-.02em;margin-top:8px}
.check{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.82);margin-top:8px}
[data-theme="light"] .check{color:rgba(12,18,20,.82)}
.promo{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,255,136,.25);
 background:rgba(0,255,136,.10);font-size:12px;font-weight:900}
.promos{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.tiny{margin-top:10px;color:var(--muted);font-size:11px;text-align:center}
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-size:12px}
.chip small{color:var(--muted);font-weight:700}
.note{margin-top:18px;color:var(--muted);font-size:12px;text-align:right;opacity:.85}
/* -----------------------
   Responsive: Tablet + Mobile Drawer (RIGHT)
------------------------*/

/* Topbar is hidden on desktop */
.m-topbar{display:none}

/* Overlay hidden by default */
.overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index:60;
}

/* Drawer header hidden on desktop */
.drawer-head{display:none}

/* Icon button used in topbar/drawer */
.icon-btn{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}
.icon-btn:hover{box-shadow:var(--shadow)}
.icon-btn .i{width:20px;height:20px}

/* Mobile brand in topbar */
.m-brand{display:flex;align-items:center;gap:10px}
.m-brand .name{font-weight:900}

/* When sidebar open (mobile) */
body.sidebar-open{overflow:hidden}
body.sidebar-open .overlay{display:block}

/* Tablet and down */
@media (max-width: 1060px){

  /* layout becomes single column */
  .app{grid-template-columns:1fr}
  .main{padding:18px; padding-top:74px;} /* space for fixed topbar */

  /* show topbar */
  .m-topbar{
    display:flex;
    position:fixed;
    top:0; left:0; right:0;
    height:64px;
    padding:10px 12px;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    z-index:70;

    background:rgba(0,0,0,.55);
    border-bottom:1px solid var(--line);
    backdrop-filter: blur(12px);
  }
  [data-theme="light"] .m-topbar{
    background:rgba(246,248,250,.85);
  }

  /* sidebar becomes off-canvas drawer on the RIGHT */
  .sidebar{
    position:fixed;
    top:0; 
    bottom:0;
    left:0;
    width:min(86vw, 340px);
    height:100vh;
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index:80;
    border-right:none;
    border-left:1px solid var(--line);
    padding:14px;
  }

  /* open state */
  body.sidebar-open .sidebar{
    transform: translateX(0);
  }

  /* drawer header visible on mobile */
  .drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 6px 10px;
    margin-bottom:6px;
    border-bottom:1px solid var(--line);
  }

  .drawer-brand{
    display:flex;
    align-items:center;
    gap:10px;
  }

  /* hide duplicated desktop brand (optional) */
  .sidebar .brand{display:none;}

  /* move bottom toggle nicely */
  .bottom{
    position:sticky;
    left:auto; right:auto; bottom:0;
    margin-top:14px;
    padding-top:12px;
    background:linear-gradient(180deg, transparent, var(--panel) 40%);
  }

  /* grids */
  .cols-3{grid-template-columns:1fr}
  .cols-4{grid-template-columns:1fr 1fr}
  .hgroup h1{font-size:36px}
}

/* Phone */
@media (max-width: 640px){
  .cols-4{grid-template-columns:1fr}
  .hgroup h1{font-size:34px}
  .sidebar{width:min(92vw, 360px)}
}
/* =========================
   Theme toggle positioning
   ========================= */

/* По default (desktop) */
.theme-toggle{ display:none; }   /* горният бутон скрит */
.bottom{ display:block; }        /* долният бутон видим */

/* Mobile / Tablet */
@media (max-width: 1060px){
  /* горният бутон се показва */
  .theme-toggle{
    display:inline-flex;
  }

  /* долният бутон се скрива */
  .bottom{
    display:none;
  }

  [data-theme="light"] .nav a{color:white; text-shadow: 0 0 2px rgba(0,0,0,.2);}
  .nav a.active{
    color:white; text-shadow: 0 0 2px rgba(0,0,0,.2);
    }
}

.copyright{
  display: flex;
  justify-content: center;   /* хоризонтално по средата */
  align-items: center;
  margin-top: 24px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}