:root{
  --bg:#0a0b0e; --panel:#11131a; --panel-2:#141824; --line:#232a3b;
  --ink:#f4f6fb; --muted:#9aa4b2; --acc:#F3BA2F; --acc-2:#ffd54d;
  --radius:18px; --shadow:0 18px 80px rgba(0,0,0,.45)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(800px 600px at 10% 0%,rgba(243,186,47,.08),transparent 60%),
    radial-gradient(600px 600px at 100% 100%,rgba(243,186,47,.06),transparent 60%),
    linear-gradient(180deg,#0a0b0e,#06070a);
  color:var(--ink);
  font:14px/1.45 Inter,system-ui,Segoe UI,Roboto,Arial
}
a{color:inherit;text-decoration:none}

/* header */
.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:rgba(10,12,18,.5);
  backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid var(--line)
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.brand-title{font-size:18px}
.brand-logo{
  width:30px; height:30px; border-radius:8px; object-fit:cover;
  box-shadow:0 0 14px rgba(243,186,47,.35)
}

/* tabs */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  -webkit-appearance:none; appearance:none;
  padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2); color:var(--ink); font-weight:800; cursor:pointer
}
.tab[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--acc)}

/* buttons */
.actions{display:flex; gap:8px}
.btn{
  -webkit-appearance:none; appearance:none;
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-weight:800; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(243,186,47,.18)}
.btn.primary{background:linear-gradient(180deg,var(--acc-2),var(--acc)); color:#0d0c08; border-color:#caa42a}
.btn.ghost{background:var(--panel-2)}

/* hero */
.hero{
  position:relative; margin:12px 16px 0; border-radius:16px; overflow:hidden;
  border:1px solid #1f2736; background:#0f1218; box-shadow:var(--shadow)
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('banner.jpg') center/cover no-repeat; opacity:.28
}
.hero-content{position:relative; padding:24px}
.hero-content h1{margin:0 0 6px; font-size:28px}
.lead{color:var(--muted)}
.hero-cta{display:flex; gap:8px; margin-top:10px}

/* layout + panels */
.grid{display:grid; gap:16px; padding:16px; grid-template-columns:1fr 360px}
@media (max-width:1100px){ .grid{grid-template-columns:1fr} }
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:linear-gradient(180deg, rgba(243,186,47,.06), transparent)}
.kicker{color:var(--acc); font-weight:900}
.headline{font-size:20px; font-weight:900}
.stats{display:flex; gap:14px; flex-wrap:wrap}
.stat{display:grid; gap:4px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2)}
.stat b{font-size:16px}

/* live bar */
.live{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:14px}
.progress{height:12px; min-width:280px; border:1px solid var(--line); border-radius:999px; background:#0d1016; overflow:hidden}
.progress>.bar{height:100%; width:0%; background:linear-gradient(90deg,#F3BA2F,#ffe082)}
.controls{display:flex; gap:8px; flex-wrap:wrap}

/* bingo grids */
.bingo-wrap{display:grid; gap:10px; padding:14px}
.split{display:grid; grid-template-columns:1fr 360px; gap:16px}
@media (max-width:1100px){ .split{grid-template-columns:1fr} }
.cards{display:grid; gap:14px; grid-template-columns:repeat(3, minmax(220px,1fr))}
@media (max-width:1200px){ .cards{grid-template-columns:repeat(2, minmax(220px,1fr))} }
@media (max-width:720px){ .cards{grid-template-columns:1fr} }
.card{background:linear-gradient(180deg,#0f131b,#0c1017); border:1px solid var(--line); border-radius:14px; padding:10px; display:grid; gap:8px}
.card-head{display:flex; align-items:center; justify-content:space-between; font-weight:800}
.grid5{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.cell{position:relative; aspect-ratio:1/1; display:grid; place-items:center; border:1px solid #222a3a; border-radius:10px; background:#0b0f16; font-weight:900}
.cell.hit{background:#13210c; border-color:#254021; color:#aaffc4}
.cell.free{background:#241d0b; color:#ffe082}

.side{display:grid; grid-template-rows:auto auto 1fr; gap:12px; padding:12px}
.list{padding:12px; display:grid; gap:8px; max-height:420px; overflow:auto}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#0d1118}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}

/* toast */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#11141c; border:1px solid var(--line); padding:10px 14px; border-radius:12px;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* numbers board */
.draw-board{padding:12px; display:grid; grid-template-columns:repeat(15, 1fr); gap:6px}

/* small tweaks */
@media (max-width:520px){
  .hero-content h1{font-size:22px}
  .panel-head{flex-direction:column; align-items:flex-start; gap:6px}
}