/* BetBook CPO UI · capa visual final sobre el frontend funcional existente. */
:root{
  --bb-green:#57d92b;
  --bb-green-2:#8df06b;
  --bb-ink:#07090b;
  --bb-card:#12171c;
  --bb-card-2:#171e24;
  --bb-line:#273039;
}

.app{max-width:1280px!important;padding-bottom:110px!important}
.topbar{padding-top:14px!important;padding-bottom:14px!important;margin-bottom:14px!important}
.brand{font-size:20px!important}
.brand .mark{height:34px!important}

.bb-legacy-tabs{display:none!important}

.bb-primary-nav{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:6px;margin:0 0 20px;background:#0f1418;border:1px solid var(--bb-line);
  border-radius:16px;position:sticky;top:70px;z-index:24;box-shadow:0 12px 32px rgba(0,0,0,.18)
}
.bb-primary-nav button{
  min-height:54px;border:0;border-radius:11px;background:transparent;color:#8f9aa5;
  font-weight:780;letter-spacing:.06em;font-size:13px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:9px;transition:.16s ease
}
.bb-primary-nav button:hover:not(:disabled){background:#182027;color:#fff}
.bb-primary-nav button.on{background:var(--bb-green);color:#071007;box-shadow:0 7px 22px rgba(87,217,43,.18)}
.bb-primary-nav button:disabled{opacity:.3;cursor:not-allowed}
.bb-nav-icon{font-size:17px;line-height:1}

.bb-home-hero{margin:4px 0 18px}
.bb-home-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}
.bb-home-heading h1,.bb-view-intro h1{font-size:30px;line-height:1.05;letter-spacing:-.045em;margin:3px 0 0}
.bb-kicker{font-size:10.5px;color:var(--bb-green);font-weight:800;letter-spacing:.16em}
.bb-home-tools{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.bb-tool{
  border:1px solid var(--bb-line);background:var(--bb-card);color:#dfe5ea;border-radius:10px;
  padding:8px 11px;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12px
}
.bb-tool:hover{border-color:#43505d;background:var(--bb-card-2)}
.bb-tool span{color:var(--bb-green);font-size:15px}.bb-tool b{font-weight:680}

.bb-hero-dynamic{display:grid;grid-template-columns:1.12fr .88fr;gap:14px}
.bb-hero-card{
  background:linear-gradient(145deg,#151b20,#101418);border:1px solid var(--bb-line);border-radius:18px;
  padding:17px;min-height:190px;box-shadow:0 16px 36px rgba(0,0,0,.16)
}
.bb-live-card{background:radial-gradient(circle at 88% 0%,rgba(87,217,43,.11),transparent 42%),linear-gradient(145deg,#151b20,#101418)}
.bb-hero-title{display:flex;align-items:center;gap:9px;margin-bottom:13px;font-size:15px}
.bb-live-badge{font-size:10px;letter-spacing:.11em;background:#e84f55;color:#fff;border-radius:99px;padding:4px 8px;font-weight:850}
.bb-ball{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(87,217,43,.13);color:var(--bb-green);font-weight:850}
.bb-live-list,.bb-draw-list{display:grid;gap:7px}
.bb-live-row{display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;padding:9px 10px;border-radius:10px;background:#0d1115;border:1px solid #202830}
.bb-live-dot{width:7px;height:7px;border-radius:50%;background:#ef5057;box-shadow:0 0 0 4px rgba(239,80,87,.1)}
.bb-live-teams{min-width:0;display:flex;align-items:center;gap:7px;font-size:12.5px;overflow:hidden}
.bb-live-teams b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bb-live-teams span{color:#65717d;font-size:10px}
.bb-live-time{font-size:11px;color:#7e8995;white-space:nowrap}
.bb-draw{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 10px;border-bottom:1px solid #222a32}
.bb-draw:last-child{border-bottom:0}
.bb-draw div{min-width:0}.bb-draw span{display:block;font-size:11.5px;color:#a2abb5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bb-draw small{font-size:10px;color:#596570}
.bb-draw strong{font-family:var(--mono);letter-spacing:.14em;color:var(--bb-green);font-size:19px;white-space:nowrap}
.bb-link-btn{margin-top:12px;padding:7px 0;border:0;background:none;color:var(--bb-green);font-size:12px;font-weight:720;cursor:pointer}
.bb-empty-mini,.bb-skeleton{padding:22px 8px;color:#65717d;font-size:12.5px;text-align:center}

.bb-view-intro{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin:2px 0 16px;
  padding:17px 18px;border:1px solid var(--bb-line);border-radius:16px;
  background:linear-gradient(135deg,#12181d,#0e1216)
}
.bb-view-intro.compact{padding:14px 16px}
.bb-view-intro p{margin:6px 0 0;color:#818d98;font-size:12.5px}
.bb-view-intro .btn{min-height:40px}
.bb-intro-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.card{box-shadow:0 12px 30px rgba(0,0,0,.10)}
.game{border-radius:13px!important;background:#0c1014!important}
.game-head{background:#11171c}
.cell[data-price]{transition:transform .12s,border-color .12s,background .12s}
.cell[data-price]:hover{transform:translateY(-1px);border-color:var(--bb-green)!important;background:rgba(87,217,43,.08)!important}
.tag.won{color:var(--bb-green)!important}
.btn:not(.line):not(.ghost):not(.danger):not(.warn){background:var(--bb-green)!important;color:#071007!important}

@media(max-width:760px){
  .bb-primary-nav{top:61px;gap:5px;margin-bottom:14px}
  .bb-primary-nav button{min-height:48px;font-size:11.5px;letter-spacing:.04em;gap:5px}
  .bb-home-heading{align-items:flex-start;flex-direction:column}.bb-home-tools{justify-content:flex-start}
  .bb-home-heading h1,.bb-view-intro h1{font-size:25px}
  .bb-hero-dynamic{grid-template-columns:1fr}
  .bb-view-intro{align-items:flex-start;flex-direction:column}.bb-intro-actions{justify-content:flex-start}
  .bb-tool{padding:7px 9px}
}

@media(max-width:420px){
  .bb-nav-icon{display:none}.bb-primary-nav button{font-size:11px}
  .bb-home-tools{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.bb-tool{justify-content:center;min-width:0}.bb-tool span{display:none}
  .bb-live-teams{display:grid;gap:1px}.bb-live-teams span{display:none}
}