/* RONBET Stage 3 UX — visual-only redesign of the Stage 2 frontend. */
:root {
  color-scheme:dark;
  --bg:#090f16; --surface:#121c27; --surface2:#192635; --surface3:#253448;
  --line:#283647; --muted:#a3b1c2; --text:#f1f5f9;
  --gold:#efbd68; --green:#b2ed7b; --red:#ff908c;
  --side:214px; --right:308px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font:14px/1.5 Inter,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--text)}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.65}
h1,h2,h3,p{margin-top:0}
.page-shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--right);min-height:100vh;max-width:1980px;margin:auto}
.sidebar{background:#0d1620;border-right:1px solid var(--line);height:100vh;position:sticky;top:0;display:flex;flex-direction:column;z-index:11;padding:25px 13px 17px}
.brand{display:flex;align-items:center;gap:11px;padding:0 10px 28px}
.brand-symbol{width:39px;height:39px;flex:none;display:grid;place-items:center;border:1px solid #efbe63;background:linear-gradient(140deg,#f6d28c,#bd8641);color:#181b1a;border-radius:11px;font-size:17px;font-weight:1000;font-style:italic;position:relative}
.brand-symbol span{width:7px;height:7px;position:absolute;top:-3px;right:-3px;background:var(--green);border-radius:50%}
.brand-title{font-size:22px;font-weight:950;letter-spacing:-1.1px;line-height:1.1}
.brand-title>span{color:var(--gold)}
.brand-title small{display:block;font-size:9px;color:#96aabc;letter-spacing:1.35px;margin-top:5px;font-weight:750}
.sidebar-group-label,.panel-label{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#7c90a3;margin:14px 12px 12px}
.side-nav{display:flex;flex-direction:column;gap:5px}
.nav-item{width:100%;background:transparent;border:1px solid transparent;border-radius:9px;color:#b2bdc9;font-weight:650;text-align:left;display:flex;gap:12px;align-items:center;padding:11px 12px;min-height:44px;transition:.16s}
.nav-item>span:first-child{font-size:17px;width:21px;text-align:center;color:#899eaf}
.nav-item:hover{background:#1a2633;color:white}
.nav-item.active{background:#22362c;border-color:#395b38;color:#e1ffcc;box-shadow:inset 3px 0 var(--green)}
.nav-item.active>span:first-child{color:var(--green)}
.nav-dot{margin-left:auto;width:6px;height:6px;background:var(--green);border-radius:50%}
.sidebar-bottom{margin-top:auto;background:#14202b;border:1px solid var(--line);padding:14px;border-radius:12px}
.sidebar-bottom .panel-label{margin:0 0 5px;color:var(--green)}
.sidebar-bottom p{margin:0 0 11px;font-size:11px;color:#afb9c5;line-height:1.6}
.reset-button{background:none;color:var(--gold);border:0;padding:0;text-align:left;font-size:11px;font-weight:750}
.main-area{min-width:0;display:flex;flex-direction:column}
.topbar{height:68px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;padding:0 26px;border-bottom:1px solid var(--line);background:#0c141eea;backdrop-filter:blur(15px);z-index:9}
.top-left,.top-right{display:flex;align-items:center;gap:13px;min-width:0}
.breadcrumb{font-weight:650;font-size:12px;color:#98a9bb;white-space:nowrap}
.breadcrumb span{color:#53657a;margin:0 9px}.breadcrumb strong{color:#e4eaf1}
.beta-badge{border:1px solid #3d503b;border-radius:7px;color:#d3ecbd;background:#1d2a21;font-size:10px;font-weight:800;letter-spacing:.65px;padding:7px 9px;white-space:nowrap}
.pulse{display:inline-block;background:var(--green);height:6px;width:6px;margin-right:6px;border-radius:50%}
.balance-chip{display:flex;align-items:center;gap:6px;border:1px solid #395063;background:#182633;border-radius:8px;padding:5px 10px;font-weight:850;white-space:nowrap}
.balance-chip img{width:23px;height:23px;object-fit:contain}.balance-chip small{color:var(--gold);font-size:11px}
.user-chip{min-width:44px;height:37px;border:1px solid #4b6559;border-radius:9px;padding:0 9px;background:#263a2d;color:#e1f8ce;font-size:12px;font-weight:800}
.mobile-menu{display:none;background:transparent;border:0;color:var(--text);font-size:20px}
main{padding:23px 25px 52px;flex:1;min-width:0}.view{display:none}.view.active-view{display:block}
.eyebrow{color:var(--green);font-size:10px;letter-spacing:1.45px;font-weight:850}.eyebrow.muted{color:#a2b0bb}
.hero{border:1px solid #2b4537;background:radial-gradient(circle at 90% 40%,#2c4535 0,transparent 36%),linear-gradient(110deg,#17271f,#101d22);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;margin-bottom:13px;min-height:194px;overflow:hidden}
.hero-text{max-width:550px}.hero h1{font-size:clamp(23px,2.35vw,32px);letter-spacing:-1.1px;line-height:1.18;margin:10px 0 9px;font-weight:850}
.hero h1 em{color:var(--gold);font-style:normal}.hero p{color:#b7cabe;font-size:12px;line-height:1.6;max-width:490px;margin-bottom:13px}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px;font-weight:850;font-size:12px;border-radius:8px}
.primary-button{background:var(--green);border:1px solid #ceff9f;color:#172118}.primary-button:hover{background:#cdffa3}.ghost-button{background:#ffffff06;border:1px solid #52665b;color:#e3f1e1}.ghost-button:hover{background:#ffffff10}
.hero-art{flex:0 0 160px;align-self:stretch;display:grid;align-items:center}.hero-tile{border:1px solid #4d6647;background:#142a2180;border-radius:14px;padding:18px;display:grid;gap:3px}
.hero-tile strong{font-size:38px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}.hero-tile span{font-size:10px;font-weight:900;letter-spacing:1px;line-height:1.5;color:#d2e3c8}.hero-tile-line{height:1px;background:#4b614c;margin:9px 0}.hero-tile small{font-size:10px;color:#a9bbae}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:23px 0 11px}.section-heading h2{font-size:20px;line-height:1.2;letter-spacing:-.6px;margin:5px 0 0}.section-heading.secondary-heading{margin:25px 0 12px}
.soft-tag{font-size:9px;letter-spacing:.5px;color:var(--green);border:1px solid #42613f;border-radius:4px;margin-left:7px;padding:3px 6px;vertical-align:middle}
.text-link{border:0;background:none;color:var(--green);font-weight:850;font-size:12px;padding:4px;white-space:nowrap}
.fixture-grid{display:grid;grid-template-columns:1fr;gap:8px}
.fixture{display:grid;grid-template-columns:minmax(105px,128px) minmax(160px,1fr) minmax(210px,248px);gap:16px;align-items:center;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 15px;transition:border-color .13s}
.fixture:hover{border-color:#526374}.fixture-top{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;min-width:0;font-weight:750}
.fixture-meta{display:flex;align-items:center;gap:5px;color:#dee5ec;font-size:10px;letter-spacing:.15px;line-height:1.3}.fixture-marker{color:var(--green);font-size:11px}.fixture-date{color:#8da2b2;font-size:10px;line-height:1.3}
.fixture-teams{display:grid;gap:5px;min-width:0;margin:0}.team,.team:last-child{width:100%;display:flex;align-items:center;gap:9px;justify-content:flex-start;text-align:left;font-weight:800;font-size:12px;min-width:0}.team:last-child{flex-direction:row-reverse;justify-content:flex-end}
.team-logo{width:27px;height:27px;min-width:27px;display:grid;place-items:center;border:1px solid #3b5063;border-radius:7px;background:#1f3441;color:#b7dfd1;font-size:10px;font-weight:800}
.team:last-child .team-logo{background:#33281f;color:#ead1ac}.versus{display:none}
.odds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.odds button{display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:center;min-height:48px;border:1px solid #3d4c5a;background:#1c2a37;color:var(--text);border-radius:7px}
.odds button small{font-size:10px;color:#91a1b1}.odds button b{font-size:13px}.odds button:hover{border-color:var(--green)}.odds button.selected{background:#2a432d;border-color:var(--green);box-shadow:inset 0 0 0 1px #b2ed7b50}.odds button.selected b{color:var(--green)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:10px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 14px}.stat-label{font-size:10px;color:#a5b4c1;font-weight:700;margin-bottom:6px}.stat-number{font-size:22px;font-weight:850;line-height:1.2;font-variant-numeric:tabular-nums}.stat-number small{font-size:11px;color:var(--gold)}
.stat-foot,.stat-action{font-size:10px;color:#a5b4c1;margin-top:7px}.stat-foot.green{color:var(--green)}.stat-action{background:none;padding:0;border:0;color:var(--green);font-weight:850}.stat-action:disabled{color:#9ca6ac}
.cup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cup-card{border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden}.cup-strip{height:3px;background:var(--green)}.cup-card.medium .cup-strip{background:var(--gold)}.cup-card.hard .cup-strip{background:#e7a199}
.cup-inner{padding:15px}.cup-head{display:flex;justify-content:space-between;align-items:center}.cup-icon{font-size:19px}.cup-type{font-weight:800;font-size:9px;letter-spacing:.75px;color:#b6c3cc}.cup-card h3{font-size:15px;margin:11px 0 6px}.cup-card p{font-size:12px;min-height:36px;line-height:1.55;color:#b0c0ce;margin:0}.cup-bottom{display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:1px solid var(--line);padding-top:12px;margin-top:13px}.cup-bottom strong{font-size:11px}.cup-bottom button{border:1px solid #4c6752;border-radius:7px;background:#233b2c;padding:7px 8px;color:#d7f9c8;font-size:10px;font-weight:800}.cup-bottom button:disabled{border-color:var(--line);color:#a3b3bd;background:#253240}
.page-heading{margin:9px 0 20px}.page-heading h1{font-size:31px;letter-spacing:-1.1px;margin:7px 0 10px}.page-heading p{max-width:660px;color:#b0bfcc;line-height:1.65;font-size:13px}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin:19px 0 18px}.filter{background:#1a2936;border:1px solid #394a5b;border-radius:7px;color:#d4dde6;padding:9px 12px;font-weight:700;font-size:12px}.filter.active{background:#2d462d;color:#e9ffd9;border-color:#6b9658}
.info-banner,.foot-note{border:1px solid #3a4d44;background:#16261f;color:#c1d2c5;border-radius:9px;padding:13px 16px;margin:19px 0;font-size:12px;line-height:1.65}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.how-grid>div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}.how-grid strong{color:var(--gold);font-size:19px}.how-grid h3{font-size:14px;margin:9px 0 5px}.how-grid p{color:var(--muted);font-size:12px;margin:0}
.premium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.premium-card{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:11px}.premium-card.featured{border-color:#ad8c57;background:#22271f}.plan-name{font-size:11px;font-weight:900;color:#d6e3e5}.premium-card .price{font-size:32px;font-weight:850;letter-spacing:-1px;margin:15px 0 8px}.premium-card p{font-size:12px;color:var(--muted);line-height:1.6;min-height:50px}.premium-card button{width:100%;padding:10px;border:1px solid #506273;border-radius:8px;background:#233343;color:#d4e1e9;font-weight:700}
.history-wrap{display:grid;gap:10px}.history-card{border:1px solid var(--line);background:var(--surface);padding:17px;border-radius:10px}.history-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.history-card p{margin:12px 0;color:#bbcad5}.history-card small{color:var(--muted)}.pending{font-size:10px;color:var(--gold);font-weight:850}.empty-history{padding:28px;border:1px dashed #46596c;border-radius:10px;color:var(--muted);text-align:center}
.slip-sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;border-left:1px solid var(--line);background:#101a26;display:flex;flex-direction:column;padding:23px 18px;z-index:10}
.slip-head{border-bottom:1px solid var(--line);padding-bottom:17px;display:flex;align-items:center;justify-content:space-between}.slip-head h2{font-size:19px;margin:5px 0 0}.slip-close{display:none}
.slip-items{flex:1;min-height:0;padding:15px 0;overflow-y:auto}.slip-empty{border:1px dashed #3e5362;border-radius:10px;text-align:center;padding:23px 12px;margin-top:1px}.slip-empty .emoji{font-size:25px;display:block;margin-bottom:3px}.slip-empty p{color:#afbecc;font-size:12px;line-height:1.6;margin:0}
.slip-choice{border:1px solid #344658;background:#1a2836;border-radius:8px;padding:12px;margin-bottom:8px}.slip-choice-header{display:flex;align-items:start;justify-content:space-between;gap:7px;font-size:12px}.slip-choice-header button{background:none;border:0;color:#afbdc8;font-size:20px;line-height:1}.slip-choice-detail{color:var(--green);margin-top:6px;font-size:12px;font-weight:750}
.slip-controls{border-top:1px solid var(--line);padding-top:17px}.slip-row{display:flex;align-items:center;justify-content:space-between;gap:9px;color:#b6c5d1;font-size:12px;margin-bottom:14px}.slip-row strong{color:white;font-size:14px}.slip-row.potential strong{color:var(--green);font-size:18px}
.stake-label{display:block;color:#c2cbd5;font-size:12px;margin-bottom:8px}.slip-controls input{width:100%;padding:12px;border:1px solid #52677a;border-radius:8px;background:#1d2c3b;color:white;margin-bottom:15px}.place-button{width:100%;font-size:13px;padding:12px}.slip-disclaimer{color:#9babb8;font-size:10px;line-height:1.6;margin:13px 0 0}
.site-footer{padding:15px 25px;border-top:1px solid var(--line);color:#8fa1b1;display:flex;justify-content:space-between;gap:10px;font-size:11px}
.toast{position:fixed;right:28px;bottom:24px;z-index:100;max-width:370px;padding:14px 18px;background:#23382b;border:1px solid #7ba260;border-radius:10px;color:#e8ffdf;box-shadow:0 16px 35px #000a;opacity:0;transform:translateY(15px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translateY(0)}
/* Account modal: visual changes only; Stage 2 handlers and validation remain intact. */
.account-button{font-weight:850}.auth-dialog{border:1px solid #485b68;border-radius:14px;background:#111d29;color:#f1f5f9;box-shadow:0 25px 80px #000c;padding:25px;width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto}
.auth-dialog::backdrop{background:#050a10bb;backdrop-filter:blur(4px)}.auth-top{display:flex;justify-content:space-between;align-items:start}.auth-top h2{font-size:25px;margin:7px 0}.auth-close{border:1px solid var(--line);border-radius:8px;color:white;background:#26384a;font-size:22px;width:34px;height:34px}
.auth-note,.auth-foot{color:#b0c0ce;font-size:12px;line-height:1.6}.auth-tabs{display:flex;gap:10px;margin:22px 0 14px}.auth-tab{flex:1;border:1px solid #43566b;border-radius:8px;background:#203044;color:#dfebf6;padding:10px;font-weight:800}.auth-tab.selected{border-color:var(--green);background:#29432d;color:#ebffdf}.auth-form{display:grid;gap:12px}.auth-form[hidden],#auth-signed-in[hidden],#auth-signed-out[hidden]{display:none!important}.auth-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.auth-form input:not([type="checkbox"]){width:100%;padding:11px;border:1px solid #52677a;border-radius:8px;background:#1b2a39;color:white;font-size:14px}.auth-form .auth-checkbox{display:flex;align-items:center;gap:9px}.auth-form .primary-button{justify-content:center}.auth-error{padding:10px;color:#ffe3e3;background:#482727;border:1px solid #e57d7d;border-radius:8px;font-size:12px}.auth-logout{border:1px solid #52677a;border-radius:8px;background:#253646;color:white;padding:11px 14px;margin-top:12px}
.mobile-ticket-toggle,.slip-backdrop{display:none}
@media(max-width:1430px){:root{--side:196px;--right:280px}main{padding:22px 18px}.topbar{padding:0 18px}.fixture{grid-template-columns:110px minmax(140px,1fr) 200px;gap:10px;padding:10px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1090px){:root{--side:180px;--right:265px}.hero-art{display:none}.fixture{grid-template-columns:minmax(110px,1fr) 208px}.fixture-top{grid-column:1/-1;flex-direction:row;justify-content:space-between}.fixture-teams{grid-column:1}.odds{grid-column:2}.cup-grid{grid-template-columns:1fr}}
@media(max-width:850px){.page-shell{display:block}.sidebar{position:fixed;left:-270px;width:248px;transition:left .2s;box-shadow:15px 0 40px #0008}.sidebar.open{left:0}.mobile-menu{display:block}.topbar{min-height:60px;height:60px}.top-right{gap:7px}.beta-badge{display:none}.main-area{min-width:0}main{padding:17px 15px 65px}.fixture{grid-template-columns:minmax(0,1fr) minmax(185px,240px)}.fixture-top{grid-column:1/-1}.hero{padding:20px}.slip-sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;max-height:min(82vh,720px);height:auto;transform:translateY(105%);transition:transform .2s;z-index:31;border:1px solid #3c5162;border-radius:15px 15px 0 0;box-shadow:0 -25px 60px #0009;overflow:auto;padding:18px 18px 20px}.slip-items{flex:none;max-height:38vh;overflow:auto}.slip-close{display:block;width:32px;height:32px;border:1px solid var(--line);color:white;background:#1c2a39;border-radius:8px;font-size:22px}.mobile-ticket-toggle{display:flex;align-items:center;gap:9px;position:fixed;right:16px;bottom:16px;z-index:28;border-radius:30px;border:1px solid #d4ffad;background:var(--green);color:#1a271d;font-size:13px;font-weight:900;box-shadow:0 8px 26px #0009;padding:13px 20px}.mobile-ticket-toggle span{border-radius:50%;background:#244228;color:white;padding:1px 7px}.slip-backdrop{position:fixed;inset:0;background:#0009;z-index:29}.slip-open .slip-backdrop{display:block}.slip-open .slip-sidebar{transform:translateY(0)}.site-footer{padding:15px;flex-wrap:wrap}}
@media(max-width:570px){.topbar{padding:0 12px}.breadcrumb{font-size:11px}.balance-chip{padding:4px 6px}.balance-chip img{width:20px;height:20px}.user-chip{min-width:42px;padding:0 6px}.hero h1{font-size:26px;letter-spacing:-.8px}.hero{min-height:0}.hero-actions{flex-wrap:wrap}.section-heading h2{font-size:18px}.fixture{grid-template-columns:1fr;gap:10px;padding:12px}.fixture-top,.fixture-teams,.odds{grid-column:auto}.fixture-teams{grid-template-columns:1fr 1fr;gap:6px}.team{font-size:11px}.team:last-child{flex-direction:row;justify-content:flex-end;text-align:right}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cup-grid,.premium-grid,.how-grid{grid-template-columns:1fr}.page-heading h1{font-size:28px}.section-heading{align-items:center}.site-footer{font-size:10px}}