@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap";:root{color:#eff4ff;font-synthesis:none;text-rendering:optimizelegibility;--bg:#0b1220;--panel:#111b2c;--panel-2:#162238;--line:#b1c5eb21;--muted:#8493af;--green:#58e5a1;--blue:#74a7ff;--purple:#b28cff;--orange:#f2a65a;background:#0b1220;font-family:Noto Sans Thai,DM Sans,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 65% 5%, #2e589d29, transparent 28rem), var(--bg);min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}.app-shell{min-height:100vh;padding-bottom:72px}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:10;background:#0b1220db;justify-content:space-between;align-items:center;gap:28px;height:78px;padding:0 5.5vw;display:flex;position:sticky;top:0}.brand{cursor:pointer;align-items:center;gap:11px;min-width:180px;display:flex}.brand-mark{background:var(--green);color:#0e1b22;border-radius:11px;place-items:center;width:34px;height:34px;font-family:DM Sans;font-size:22px;font-weight:800;display:grid;box-shadow:0 0 20px #58e5a147}.brand-mark.large{width:48px;height:48px;margin-bottom:22px;font-size:28px}.brand strong{letter-spacing:-.03em;font-family:DM Sans;font-size:20px;display:block}.brand small{color:var(--muted);letter-spacing:.18em;margin-top:-1px;font:700 8px DM Sans;display:block}.main-nav{align-items:center;gap:7px;display:flex}.nav-item{color:var(--muted);background:0 0;border-radius:8px;padding:9px 15px;font-size:13px;transition:all .2s}.nav-item:hover,.nav-item.active{color:#fff;background:#74a7ff1a}.nav-item.active{color:var(--green)}.topbar-actions{align-items:center;gap:12px;display:flex}.balance-chip{color:#fff;border:1px solid var(--line);text-align:left;background:#ffffff0d;border-radius:10px;align-items:center;gap:9px;padding:7px 12px;display:flex}.wallet-icon{width:28px;height:28px;color:var(--green);background:#58e5a11a;border-radius:8px;place-items:center;font-weight:700;display:grid}.balance-chip small,.balance-chip strong{display:block}.balance-chip small{color:var(--muted);font-size:10px}.balance-chip strong{font-size:13px}.avatar{color:#fff;background:#304466;border:2px solid #50668e;border-radius:50%;width:34px;height:34px;font-size:11px;font-weight:700}.page-content{width:min(1180px,89vw);margin:0 auto}.demo-banner{color:#c7b89f;background:#f2a65a12;border:1px solid #f2a65a40;border-radius:8px;margin:20px 0 0;padding:9px 14px;font-size:11px}.demo-banner span{color:var(--orange);letter-spacing:.1em;margin-right:10px;font-weight:800}.hero{justify-content:space-between;align-items:center;min-height:330px;padding:72px 7vw 44px;display:flex;position:relative;overflow:hidden}.hero:before{content:"";filter:blur(72px);background:#3366b62e;border-radius:50%;width:420px;height:420px;position:absolute;top:-180px;right:13%}.eyebrow{color:var(--green);letter-spacing:.17em;margin-bottom:12px;font:700 10px DM Sans}.hero h1{letter-spacing:-.055em;margin:0;font-size:clamp(35px,5vw,62px);line-height:1.05;position:relative}.hero h1 em{color:var(--green);font-style:normal}.hero p{color:var(--muted);margin:20px 0 25px;font-size:14px;line-height:1.8}.primary-button,.confirm-button{color:#081720;background:var(--green);border-radius:8px;padding:12px 18px;font-weight:800;box-shadow:0 10px 24px #58e5a124}.primary-button span,.confirm-button span{margin-left:25px;font-size:18px}.hero-orbit{width:280px;height:230px;margin-right:8%;position:relative}.hero-ball{background:linear-gradient(145deg,#496c99,#142239 70%);border-radius:50%;place-items:center;width:116px;height:116px;font-size:53px;display:grid;position:absolute;top:42px;left:70px;transform:rotate(-18deg);box-shadow:0 0 0 18px #537ab40f,0 25px 80px #355c9880}.orbit-line{border:1px solid #74a7ff38;border-radius:50%;width:330px;height:100px;position:absolute;top:80px;left:-10px;transform:rotate(-24deg)}.stats-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:65px;display:grid}.stat-card{border:1px solid var(--line);background:#111b2cb8;border-radius:12px;align-items:center;gap:13px;padding:17px 20px;display:flex}.stat-icon{border-radius:10px;place-items:center;width:35px;height:35px;font-size:18px;font-weight:800;display:grid}.stat-icon.green{color:var(--green);background:#58e5a11a}.stat-icon.blue{color:var(--blue);background:#74a7ff1f}.stat-icon.purple{color:var(--purple);background:#b28cff1c}.stat-card strong,.stat-card span{display:block}.stat-card strong{font:700 20px DM Sans}.stat-card span:last-child{color:var(--muted);margin-top:2px;font-size:11px}.matches-section{padding-bottom:40px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:24px;display:flex}.section-heading h2,.section-heading h3{letter-spacing:-.04em;margin:0;font-size:25px}.section-heading h3{font-size:19px}.filter-button,.secondary-button{color:#dfe8f9;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 13px}.filter-button span{color:var(--muted);margin-left:15px}.tabs{gap:7px;margin-bottom:19px;display:flex}.tab{color:var(--muted);background:0 0;border-bottom:2px solid #0000;padding:8px 14px;font-size:12px}.tab.active{color:var(--green);border-color:var(--green)}.match-list{grid-template-columns:repeat(3,1fr);gap:15px;display:grid}.match-card{border:1px solid var(--line);background:linear-gradient(145deg,#162238e6,#0f192ae6);border-radius:13px;padding:18px;transition:transform .2s,border .2s}.match-card:hover{border-color:#74a7ff59;transform:translateY(-3px)}.match-card-head{justify-content:space-between;align-items:center;display:flex}.league-label{color:var(--muted);font-size:11px}.match-time,.live-badge{color:var(--blue);font:700 10px DM Sans}.live-badge{color:#ff8e7d}.teams{justify-content:space-between;align-items:center;margin:24px 0 18px;display:flex}.team{text-align:center;flex-direction:column;align-items:center;gap:8px;max-width:100px;display:flex}.team strong{font-size:12px;line-height:1.3}.team-badge{width:44px;height:44px;color:var(--blue);background:#74a7ff21;border:1px solid #74a7ff3d;border-radius:50%;place-items:center;font:700 11px DM Sans;display:grid}.away .team-badge{color:var(--purple);background:#b28cff1c;border-color:#b28cff3d}.vs{color:var(--muted);font:700 10px DM Sans}.odds-row{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.odd-button{color:var(--muted);background:#ffffff0a;border:1px solid #0000;border-radius:6px;flex-direction:column;align-items:center;gap:4px;padding:8px 3px;display:flex}.odd-button:hover{color:var(--green);background:#58e5a114;border-color:#58e5a166}.odd-button span{font-size:9px}.odd-button strong{color:#fff;font:700 14px DM Sans}.betslip{z-index:8;background:#111b2cf7;border:1px solid #74a7ff42;border-radius:14px;width:290px;position:fixed;bottom:24px;right:24px;overflow:hidden;box-shadow:0 20px 60px #0006}.betslip-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;padding:18px 18px 15px;display:flex}.betslip-head h3{margin:0;font-size:18px}.betslip-head h3 span{width:19px;height:19px;color:var(--bg);background:var(--green);vertical-align:2px;border-radius:50%;place-items:center;margin-left:4px;font:700 11px DM Sans;display:inline-grid}.slip-status{color:var(--green);background:#58e5a11a;border-radius:5px;padding:5px 7px;font-size:10px}.empty-slip{text-align:center;color:var(--muted);padding:35px 15px 38px}.empty-icon{width:38px;height:38px;color:var(--blue);border:1px dashed #516581;border-radius:50%;place-items:center;margin:0 auto 13px;font-size:22px;display:grid}.empty-slip strong{color:#dae6fa;font-size:13px;display:block}.empty-slip p{margin:7px 0 0;font-size:11px;line-height:1.6}.slip-items{max-height:190px;padding:2px 15px;overflow:auto}.slip-item{border-bottom:1px solid var(--line);justify-content:space-between;gap:12px;padding:12px 0;display:flex}.slip-item strong,.slip-item small{display:block}.slip-item strong{font-size:11px}.slip-item small{color:var(--muted);margin-top:3px;font-size:9px}.slip-odd{align-items:start;gap:7px;display:flex}.slip-odd strong{color:var(--green);font:700 14px DM Sans}.slip-odd button{color:var(--muted);background:0 0;font-size:17px;line-height:1}.slip-summary{padding:13px 15px}.slip-summary>div{color:var(--muted);justify-content:space-between;align-items:center;margin:7px 0;font-size:11px;display:flex}.slip-summary strong{color:#fff;font-family:DM Sans}.stake-input{color:var(--green);background:#ffffff0d;border-radius:5px;align-items:center;padding:5px 7px;display:flex}.stake-input input{color:#fff;text-align:right;background:0 0;border:0;outline:0;width:62px;font-weight:700}.payout{border-top:1px solid var(--line);padding-top:10px}.payout strong{color:var(--green);font-size:16px}.confirm-button{width:calc(100% - 30px);margin:0 15px 5px}.slip-note{color:var(--muted);text-align:center;margin:9px 0 13px;font-size:9px}.panel-page{min-height:620px;padding:62px 0 90px}.page-title{justify-content:space-between;align-items:end;margin-bottom:30px;display:flex}.page-title h1{letter-spacing:-.05em;margin:0;font-size:36px}.page-title p{color:var(--muted);margin:7px 0 0;font-size:13px}.wallet-hero{background:linear-gradient(110deg,#1d4f4b8c,#111b2ccc);border:1px solid #58e5a138;border-radius:16px;padding:35px}.wallet-hero span,.wallet-hero small{color:#a9c9c2;font-size:12px;display:block}.wallet-hero strong{margin:11px 0;font:700 42px DM Sans;display:block}.wallet-hero small{color:var(--muted)}.wallet-actions{gap:10px;margin:18px 0 50px;display:flex}.wallet-actions button{color:#e8f2ff;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px 18px}.wallet-actions button:first-child{color:var(--green)}.wallet-actions small{color:var(--muted);margin-left:5px}.compact{margin-bottom:14px}.compact h2{font-size:18px}.transaction-list,.admin-card,.history-table{border:1px solid var(--line);background:#111b2cb3;border-radius:12px;overflow:hidden}.transaction-list>div{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:15px 18px;display:flex}.transaction-list>div:last-child{border-bottom:0}.transaction-list>div>div{flex:1}.transaction-list strong,.transaction-list small{display:block}.transaction-list strong{font-size:12px}.transaction-list small{color:var(--muted);font-size:10px}.transaction-list b{font:700 13px DM Sans}.transaction-icon{border-radius:50%;place-items:center;width:30px;height:30px;display:grid}.transaction-icon.green{color:var(--green);background:#58e5a11a}.transaction-icon.orange{color:var(--orange);background:#f2a65a1a}.positive{color:var(--green)}.history-head,.history-row{grid-template-columns:2fr .7fr .8fr .7fr;align-items:center;gap:20px;padding:14px 18px;display:grid}.history-head{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line);font-size:10px}.history-row{border-bottom:1px solid var(--line);font-size:12px}.history-row:last-child{border-bottom:0}.history-row>div strong,.history-row>div span,.history-row>div small{display:block}.history-row>div span{color:#c4d2e8;margin-top:3px}.history-row>div small{color:var(--muted);margin-top:3px;font-size:10px}.status{border-radius:5px;width:max-content;padding:5px 8px;font-size:10px}.status.won{color:var(--green);background:#58e5a11a}.status.lost{color:#ff8e7d;background:#ff8e7d1a}.status.pending{color:var(--orange);background:#f2a65a1a}.admin-grid{grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:25px;display:grid}.admin-metric{border:1px solid var(--line);background:#111b2cb3;border-radius:12px;padding:19px}.admin-metric span,.admin-metric strong,.admin-metric small{display:block}.admin-metric span{color:var(--muted);font-size:11px}.admin-metric strong{margin:9px 0 5px;font:700 25px DM Sans}.admin-metric small{font-size:10px}.warning-text{color:var(--orange)}.admin-card{padding:19px}.admin-row{border-top:1px solid var(--line);align-items:center;gap:14px;padding:15px 0;display:flex}.admin-row>div{flex:1}.admin-row strong,.admin-row small{display:block}.admin-row strong{font-size:12px}.admin-row small{color:var(--muted);margin-top:3px;font-size:10px}.open-badge{color:var(--green);background:#58e5a11a;border-radius:5px;padding:5px 8px;font-size:10px}.icon-button{color:var(--blue);background:0 0;font-size:18px}.toast{z-index:20;color:#103429;background:#e9fff4;border-radius:9px;padding:12px 18px;font-size:12px;font-weight:700;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #0000004d}.footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;z-index:7;background:#070c16f0;padding:13px;font-size:10px;position:fixed;bottom:0;left:0;right:0}.modal-backdrop{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#03070ec2;place-items:center;display:grid;position:fixed;inset:0}.login-modal{border:1px solid var(--line);background:#111b2c;border-radius:15px;width:min(390px,90vw);padding:31px;position:relative;box-shadow:0 25px 90px #0000008c}.modal-close{color:var(--muted);background:0 0;font-size:22px;position:absolute;top:15px;right:17px}.login-modal h2{margin:0;font-size:25px}.login-modal p{color:var(--muted);font-size:12px;line-height:1.6}.login-modal label{color:#b8c5da;margin:17px 0;font-size:11px;display:block}.login-modal input{color:#fff;border:1px solid var(--line);background:#0c1626;border-radius:7px;outline:none;width:100%;margin-top:7px;padding:11px;display:block}.login-modal input:focus{border-color:var(--green)}.login-modal .confirm-button{width:100%;margin:10px 0}.modal-note{color:var(--muted);text-align:center;font-size:10px;display:block}@media (width<=900px){.topbar{padding:0 4vw}.main-nav{display:none}.hero{padding-left:2vw;padding-right:2vw}.hero-orbit{margin-right:0;transform:scale(.82)}.match-list{grid-template-columns:1fr 1fr}.betslip{width:min(600px,89vw);margin:0 auto 35px;position:relative;bottom:auto;right:auto}.footer{position:relative}.app-shell{padding-bottom:0}}@media (width<=600px){.topbar{height:67px}.brand{min-width:auto}.brand small{display:none}.balance-chip{padding:5px 8px}.balance-chip strong{font-size:11px}.hero{align-items:start;min-height:430px;padding-top:58px}.hero-orbit{opacity:.8;position:absolute;bottom:12px;right:-45px;transform:scale(.7)}.stats-grid,.match-list,.admin-grid{grid-template-columns:1fr}.stats-grid{margin-bottom:45px}.section-heading{align-items:start;gap:10px}.history-head{display:none}.history-row{grid-template-columns:1fr auto;gap:8px}.history-row>span{text-align:right}.history-row>.status{justify-self:end}.page-title{flex-direction:column;align-items:start;gap:17px}.page-title h1{font-size:30px}.wallet-hero strong{font-size:34px}.demo-banner{font-size:10px}.demo-banner span{margin-bottom:4px;display:block}.topbar-actions{gap:7px}}.notification-button{color:#b5c4dc;background:0 0;border-radius:9px;width:32px;height:32px;font-size:21px;position:relative}.notification-button:hover{color:var(--green);background:#58e5a114}.notification-button span{color:#091721;background:var(--orange);border-radius:10px;place-items:center;min-width:15px;height:15px;padding:0 3px;font:700 9px DM Sans;display:grid;position:absolute;top:-3px;right:-4px}.score-block{flex-direction:column;align-items:center;gap:5px;display:flex}.score-block strong{color:#fff;font:700 17px DM Sans}.bet-mode-tabs{background:#ffffff0a;border-radius:7px;grid-template-columns:1fr 1fr;gap:5px;margin:12px 15px 5px;padding:4px;display:grid}.bet-mode-tabs button{color:var(--muted);background:0 0;border-radius:5px;padding:7px;font:700 10px DM Sans}.bet-mode-tabs button.active{color:var(--bg);background:var(--green)}.bet-mode-tabs small{margin-left:3px;font-size:7px}.risk-metrics{margin-top:-10px}.risk-row{border-top:1px solid var(--line);align-items:center;gap:14px;padding:13px 0;display:flex}.risk-row>div{flex:1}.risk-row strong,.risk-row small{display:block}.risk-row strong{font:700 11px DM Sans}.risk-row small{color:var(--muted);margin-top:3px;font-size:10px}.risk-high,.risk-medium{border-radius:5px;padding:5px 8px;font:700 9px DM Sans}.risk-high{color:#ff9b88;background:#ff8e7d1f}.risk-medium{color:var(--orange);background:#f2a65a1a}.inline-form{background:#74a7ff0f;border:1px solid #74a7ff3d;border-radius:12px;align-items:end;gap:15px;margin-top:20px;padding:18px;display:flex}.inline-form>div:first-child{flex:1}.inline-form strong,.inline-form small{display:block}.inline-form strong{font-size:13px}.inline-form small{color:var(--muted);margin-top:4px;font-size:10px}.inline-form label{color:var(--muted);font-size:10px}.inline-form input{color:#fff;border:1px solid var(--line);background:#0c1626;border-radius:7px;outline:none;width:110px;margin-top:5px;padding:9px;display:block}.inline-actions{gap:7px;display:flex}.inline-actions .primary-button,.inline-actions .secondary-button{padding:9px 12px;font-size:11px}.notification-list{border:1px solid var(--line);background:#111b2cb3;border-radius:12px;overflow:hidden}.notification-row{border-bottom:1px solid var(--line);align-items:start;gap:13px;padding:18px;display:flex}.notification-row:last-child{border-bottom:0}.notification-row>div{flex:1}.notification-icon{border-radius:9px;place-items:center;width:33px;height:33px;font-weight:700;display:grid}.notification-icon.odds{color:var(--blue);background:#74a7ff1c}.notification-icon.success{color:var(--green);background:#58e5a11a}.notification-icon.user{color:var(--purple);background:#b28cff1a}.notification-row strong{font-size:12px}.notification-row p{color:#bdc9dc;margin:5px 0;font-size:11px}.notification-row small{color:var(--muted);font-size:10px}.unread-dot{background:var(--green);width:7px;height:7px;box-shadow:0 0 8px var(--green);border-radius:50%;margin-top:7px}.empty-notifications{text-align:center;color:var(--muted);padding:65px 20px}.empty-notifications>div{width:42px;height:42px;color:var(--green);background:#58e5a11a;border-radius:50%;place-items:center;margin:0 auto 12px;display:grid}.empty-notifications strong{color:#dae6fa;font-size:13px;display:block}.empty-notifications p{font-size:11px}@media (width<=600px){.inline-form{flex-direction:column;align-items:stretch}.inline-form input{width:100%}.inline-actions{justify-content:end}.notification-button{width:26px}.score-block strong{font-size:14px}}