@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================================
   ROOT VARIABLES - Light Theme
   ========================================================= */
:root{
  --bg:#f4f8ff;
  --bg2:#edf5ff;
  --surface:#ffffff;
  --surface2:#f9fcff;
  --glass:rgba(255,255,255,.82);
  --line:#dce8f5;
  --line-strong:#a8d6ea;
  --text:#102033;
  --muted:#62748a;
  --muted2:#8a9aaa;
  --cyan:#08b8df;
  --cyan2:#31d9ff;
  --blue:#2563eb;
  --red:#ef244d;
  --red2:#ff617d;
  --gold:#f5b740;
  --green:#17b77a;
  --purple:#7d5cff;
  --shadow:0 18px 55px rgba(26,50,84,.14);
  --shadow-soft:0 10px 30px rgba(31,64,105,.10);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================
   RESET & BASE STYLES
   ========================================================= */
*{box-sizing:border-box;min-width:0;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;overflow-x:hidden;background:#edf1f7}
body{font-family:var(--font-body);color:var(--text);font-size:12px;line-height:1.36;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)}
.ui-icon{width:17px;height:17px;flex:0 0 auto;filter:drop-shadow(0 4px 10px rgba(8,184,223,.12))}

/* =========================================================
   APP BACKGROUND & PHONE SHELL
   ========================================================= */
.app-bg{min-height:100vh;background:linear-gradient(180deg,#ecf2fa 0%,#f8fbff 100%)}
.phone-shell{width:min(100vw,430px);max-width:430px;min-height:100dvh;margin:0 auto;position:relative;overflow:hidden;padding-bottom:84px;background:radial-gradient(circle at 8% -4%,rgba(49,217,255,.25),transparent 32%),radial-gradient(circle at 92% 4%,rgba(255,97,125,.16),transparent 28%),linear-gradient(180deg,#f9fcff 0%,#eef6ff 45%,#f7fbff 100%);box-shadow:0 0 0 1px rgba(10,40,70,.06),0 30px 100px rgba(31,47,70,.15);isolation:isolate}
.phone-shell:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(16,32,51,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,32,51,.025) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 44%,transparent 96%)}
.phone-shell:after{content:"";position:absolute;inset:-18% -32%;z-index:-2;background:conic-gradient(from 180deg at 50% 28%,rgba(49,217,255,.16),rgba(255,97,125,.10),rgba(245,183,64,.10),rgba(49,217,255,.16));animation:ambientSpin 22s linear infinite;filter:blur(10px)}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes ambientSpin{to{transform:rotate(360deg)}}
@keyframes riseIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,36,77,.32),0 0 16px rgba(239,36,77,.18)}50%{box-shadow:0 0 0 7px rgba(239,36,77,0),0 0 25px rgba(239,36,77,.32)}}
@keyframes sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes chromaFloat{0%,100%{filter:hue-rotate(0deg) saturate(1.02)}50%{filter:hue-rotate(16deg) saturate(1.15)}}

/* =========================================================
   TOPBAR & HEADER
   ========================================================= */
.topbar{height:58px;padding:8px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));backdrop-filter:blur(20px);border-bottom:1px solid rgba(173,200,224,.55)}
.brand{display:flex;align-items:center;gap:9px;font:800 10px/1 var(--font-display);text-transform:uppercase;letter-spacing:.15em;color:#14243a;white-space:nowrap}
.brand-mark{height:34px;min-width:76px;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(8,184,223,.28);background:linear-gradient(135deg,#fff,rgba(230,248,255,.90));box-shadow:inset 0 0 18px rgba(8,184,223,.08),0 7px 18px rgba(31,64,105,.08)}
.brand img{height:23px;max-width:88px;display:block}
.top-actions{display:flex;align-items:center;gap:7px}
.icon-btn,.wallet-pill{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.icon-btn{height:36px;width:36px;display:grid;place-items:center;border-radius:14px;color:var(--cyan);background:#fff;border:1px solid rgba(8,184,223,.22);box-shadow:0 8px 18px rgba(31,64,105,.08)}
.icon-btn:hover,.icon-btn:focus-visible{transform:translateY(-1px);border-color:rgba(8,184,223,.45);box-shadow:0 12px 26px rgba(8,184,223,.13)}
.wallet-pill{height:36px;display:flex;align-items:center;gap:6px;padding:0 11px;border-radius:999px;border:1px solid rgba(8,184,223,.24);background:linear-gradient(180deg,#fff,#eefbff);color:#087d99;font-weight:900;font-size:11.5px;letter-spacing:.01em;box-shadow:0 8px 18px rgba(31,64,105,.08)}
.wallet-pill .ui-icon{width:16px;height:16px}
.wallet-pill:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(8,184,223,.13)}

/* =========================================================
   MAIN CONTENT & FLASH MESSAGES
   ========================================================= */
.app-main{padding:10px 11px 14px;animation:riseIn .45s ease both}
.flash{margin:10px 12px;border-radius:16px;padding:10px 12px;font-weight:800;border:1px solid}
.flash.ok{background:#e9fff6;border-color:#b8f1dc;color:#08754c}
.flash.bad{background:#fff0f3;border-color:#ffc6d1;color:#b11234}

/* =========================================================
   NOTICE RIBBON & TICKER
   ========================================================= */
.notice-ribbon,.ticker{height:34px;border-radius:15px;padding:0 10px;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;background:linear-gradient(90deg,#fff0f4,#eafaff,#fff6e1);border:1px solid rgba(8,184,223,.18);color:#1f5165;font:800 8.8px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;box-shadow:var(--shadow-soft)}
.notice-ribbon span,.ticker span{overflow:hidden;text-overflow:ellipsis}
.notice-ribbon .ui-icon,.ticker .ui-icon{width:15px;height:15px;color:var(--red);animation:livePulse 1.8s ease-in-out infinite}

/* =========================================================
   HOME HERO SECTION
   ========================================================= */
.home-hero{position:relative;overflow:hidden;min-height:120px;margin:10px 0 10px;padding:15px;border-radius:24px;border:1px solid rgba(8,184,223,.20);background-size:cover;background-position:center;display:flex;justify-content:space-between;gap:12px;box-shadow:var(--shadow)}
.home-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(243,251,255,.84) 55%,rgba(49,217,255,.24) 100%);pointer-events:none}
.home-hero:after{content:"";position:absolute;right:-44px;bottom:-58px;width:165px;height:165px;border-radius:50%;background:conic-gradient(from 210deg,rgba(49,217,255,.08),rgba(49,217,255,.36),rgba(255,97,125,.18),rgba(245,183,64,.18),rgba(49,217,255,.08));opacity:.85;animation:ambientSpin 18s linear infinite}
.home-hero-copy,.hero-brand-chip{position:relative;z-index:1}
.hero-kicker{display:inline-flex;margin-bottom:7px;padding:5px 8px;border-radius:999px;background:#eafaff;color:#06758f;border:1px solid rgba(8,184,223,.18);font-weight:900;font-size:8px;letter-spacing:.13em}
.home-hero h1{margin:0;font:800 23px/1.05 var(--font-display);letter-spacing:-.03em;color:#102033}
.home-hero p{margin:7px 0 0;max-width:235px;color:#506579;font-size:10.5px;font-weight:700}
.hero-brand-chip{align-self:flex-start;display:flex;align-items:center;gap:5px;padding:7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgba(31,64,105,.08);color:#41566f;font-size:8px;font-weight:900;white-space:nowrap}
.hero-brand-chip .ui-icon{color:var(--green);width:14px;height:14px}

/* =========================================================
   WALLET ACTIONS
   ========================================================= */
.wallet-actions-inline{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.wallet-action{position:relative;overflow:hidden;height:48px;border-radius:17px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:1000;font-size:12px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-soft)}
.wallet-action:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent);transform:translateX(-130%)}
.wallet-action:hover:before,.wallet-action:focus-visible:before{animation:sheen .72s ease}
.wallet-action:hover,.wallet-action:focus-visible{transform:translateY(-2px);filter:saturate(1.08)}
.deposit-action{background:linear-gradient(135deg,#1bcdf4 0%,#6beaff 100%);color:#03202b}
.withdraw-action{background:linear-gradient(135deg,#10233d 0%,#233f67 100%);color:#fff;border-color:rgba(16,35,61,.18)}
.wallet-action .ui-icon{width:19px;height:19px}
.profile-wallet-actions{margin-top:-4px}

/* =========================================================
   HOME ACTION ROW
   ========================================================= */
.home-action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.home-action-row a{min-height:64px;border-radius:18px;padding:10px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;transition:.18s ease}
.home-action-row a:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.home-action-row .ui-icon{color:var(--cyan);width:19px;height:19px}
.home-action-row b{font-size:11px;color:#15283e}
.home-action-row small{font-size:9px;color:var(--muted)}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 6px}
.section-head-row a{display:flex;align-items:center;gap:3px;color:#0b83a1;font-weight:900;font-size:10px}
.section-head-row .ui-icon{width:13px;height:13px}
.section-title{font:800 12.5px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;margin:14px 0 8px;color:#15283e}
.empty{border:1px dashed #bed0e2;border-radius:18px;background:rgba(255,255,255,.64);color:#708397;padding:18px;text-align:center;font-weight:800}

/* =========================================================
   MATCH CARDS
   ========================================================= */
.match-card{position:relative;overflow:hidden;margin:9px 0;padding:11px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(247,252,255,.92));border:1px solid rgba(189,209,229,.85);box-shadow:var(--shadow-soft);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.match-card:hover{transform:translateY(-2px);border-color:rgba(8,184,223,.30);box-shadow:0 16px 38px rgba(31,64,105,.13)}
.match-card.is-live{border-color:rgba(239,36,77,.32);box-shadow:0 14px 38px rgba(239,36,77,.10)}
.match-top{display:flex;align-items:center;gap:7px}
.pulse-dot{width:8px;height:8px;border-radius:999px;background:var(--cyan);box-shadow:0 0 0 4px rgba(8,184,223,.10)}
.red-dot{background:var(--red);animation:livePulse 1.7s ease-in-out infinite}
.match-top b{font:800 9.6px/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#183049;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-top em{margin-left:auto;font-style:normal;font-weight:1000;font-size:7.5px;padding:5px 7px;border-radius:999px;background:#eafaff;color:#087d99;border:1px solid rgba(8,184,223,.18)}
.match-top .status-live{background:#fff0f3;color:#c31136;border-color:#ffc4cf;animation:livePulse 1.8s ease-in-out infinite}
.match-top .status-upcoming{background:#eef6ff;color:#2162b7}
.match-body{display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;gap:8px;padding:13px 0 9px}
.team{text-align:center;display:grid;place-items:center;gap:6px}
.team img{width:43px;height:43px;border-radius:17px;background:linear-gradient(180deg,#fff,#eef8ff);border:1px solid var(--line);box-shadow:inset 0 0 18px rgba(8,184,223,.06),0 8px 16px rgba(31,64,105,.08);padding:7px}
.team span{font-weight:1000;font-size:10px;text-transform:uppercase;color:#132940}
.vs{text-align:center;color:#0a9ec1;font:800 12px/1.2 var(--font-display)}
.vs small{font:900 9px/1 var(--font-body);color:#315470}
.match-foot{display:grid;grid-template-columns:1fr 1fr 104px;gap:7px;align-items:center}
.match-foot span{min-height:43px;border-radius:14px;background:#f6faff;border:1px solid var(--line);padding:7px;color:#687b8f;font-size:8.5px;font-weight:800}
.match-foot span .ui-icon{width:14px;height:14px;vertical-align:-3px;color:#69849b}
.match-foot b{font-size:9.6px;color:#0f2338}
.match-foot a{height:43px;border-radius:14px;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#1bcdf4,#70ecff);color:#03202b;font-weight:1000;font-size:9.4px;transition:.18s ease;box-shadow:0 9px 20px rgba(8,184,223,.18)}
.match-foot a:hover{transform:translateY(-2px)}

/* =========================================================
   PAGE HEADER
   ========================================================= */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 0 10px}
.page-head h2{margin:0;display:flex;align-items:center;gap:7px;font:800 18px/1.1 var(--font-display);letter-spacing:-.02em;color:#102033}
.page-head span,.page-head a{border-radius:999px;padding:8px 10px;background:#fff;border:1px solid var(--line);color:#0a83a0;font-weight:1000;box-shadow:var(--shadow-soft);font-size:10px}

/* =========================================================
   TABS
   ========================================================= */
.tabs{display:flex;gap:6px;overflow:auto;padding:3px 0 8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs button{border:1px solid var(--line);background:#fff;color:#61758b;border-radius:999px;padding:9px 12px;font-weight:900;font-size:10px;white-space:nowrap;transition:.18s ease}
.tabs .active,.tabs a.active,.tabs button.active{background:linear-gradient(135deg,#1bcdf4,#65e8ff);border-color:#aeefff;color:#052333;box-shadow:0 8px 20px rgba(8,184,223,.15)}

/* =========================================================
   PANEL CARDS & FORMS
   ========================================================= */
.panel-card,.glow-card{background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow-soft);border-radius:22px;padding:12px}
.form-stack{display:grid;gap:10px}
.form-stack input,.form-stack select,.form-stack textarea,input,select,textarea{width:100%;border:1px solid #d8e5f2;background:#fff;color:var(--text);outline:none;border-radius:15px;padding:12px 12px;font-weight:750;transition:.18s ease}
.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,input:focus,select:focus,textarea:focus{border-color:rgba(8,184,223,.55);box-shadow:0 0 0 4px rgba(8,184,223,.10)}
.field-title{display:flex;align-items:center;gap:6px;color:#4e6176;font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}
.field-title .ui-icon{width:14px;height:14px;color:var(--cyan)}

/* =========================================================
   BUTTONS
   ========================================================= */
.primary-btn,.secondary-btn,.chat-send button,.inline-form button{position:relative;overflow:hidden;border:0;border-radius:15px;background:linear-gradient(135deg,#18c9f0,#74ecff);color:#052333;font-weight:1000;padding:12px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;box-shadow:0 10px 22px rgba(8,184,223,.16)}
.primary-btn:before,.secondary-btn:before,.chat-send button:before,.inline-form button:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);transform:translateX(-130%)}
.primary-btn:hover:before,.secondary-btn:hover:before,.chat-send button:hover:before,.inline-form button:hover:before{animation:sheen .7s ease}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
.secondary-btn{background:#fff;color:#0a83a0;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.full-btn{width:100%;margin-top:2px}

/* =========================================================
   MATCH DETAIL PAGE
   ========================================================= */
.match-detail{display:grid;gap:10px}
.banner-img{width:100%;height:108px;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:#fff}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.detail-head h2{margin:0;font:800 18px/1.1 var(--font-display);letter-spacing:-.02em}
.detail-head p{margin:4px 0 0;font-size:10px}
.status-chip{border-radius:999px;padding:6px 8px;background:#eafaff;color:#087d99;border:1px solid rgba(8,184,223,.18);font-size:8px;font-weight:1000}
.status-chip.status-live{background:#fff0f3;color:#c31136;border-color:#ffc4cf;animation:livePulse 1.8s ease-in-out infinite}
.score-box{display:grid;grid-template-columns:1fr 48px 1fr;gap:8px;align-items:center;border-radius:22px;border:1px solid var(--line);background:#fff;padding:10px;box-shadow:var(--shadow-soft)}
.score-box>div{text-align:center}
.score-box img{width:48px;height:48px;border-radius:18px;padding:7px;background:#f3faff;border:1px solid var(--line)}
.score-box b{display:block;margin-top:5px;font-size:11px}
.score-box small{color:var(--muted);font-weight:800}
.score-box>span{text-align:center;color:var(--cyan);font:800 15px/1 var(--font-display)}
.rate-card{border-radius:20px;border:1px solid rgba(8,184,223,.18);background:linear-gradient(135deg,#fff,#eafaff);padding:13px;text-align:center;box-shadow:var(--shadow-soft)}
.rate-card span,.rate-card small{display:block;color:#63768a;font-weight:800}
.rate-card strong{display:block;color:#0a9ec1;font:800 32px/1 var(--font-display)}
.side-select{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-select label{cursor:pointer}
.side-select input,.segmented-tabs input{position:absolute;opacity:0;pointer-events:none}
.side-select span{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:15px;border:1px solid var(--line);background:#fff;font-weight:1000;text-align:center;transition:.18s ease}
.side-select input:checked+span{background:linear-gradient(135deg,#e4faff,#eef6ff);border-color:rgba(8,184,223,.55);color:#08677e;box-shadow:inset 0 0 0 1px rgba(8,184,223,.18)}
.quick-amounts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.quick-amounts button{border:1px solid var(--line);border-radius:12px;background:#fff;color:#315470;padding:9px 3px;font-size:9.4px;font-weight:1000;transition:.18s ease}
.quick-amounts button:hover{transform:translateY(-2px);border-color:rgba(8,184,223,.45);background:#eafaff}
.bet-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.bet-preview>div{border:1px solid var(--line);background:#f8fbff;border-radius:13px;padding:8px 4px;text-align:center}
.bet-preview small{display:block;color:#718397;font-size:7.6px;text-transform:uppercase;letter-spacing:.08em}
.bet-preview b{display:block;color:#102033;font-size:9.3px}

/* =========================================================
   PROFILE PAGE
   ========================================================= */
.profile-hero-91{position:relative;overflow:hidden;border-radius:24px;padding:13px;background:linear-gradient(135deg,#ffffff 0%,#eafaff 58%,#fff6e7 100%);border:1px solid rgba(8,184,223,.18);box-shadow:var(--shadow)}
.profile-topline{display:flex;align-items:center;gap:10px}
.avatar-ring{width:58px;height:58px;border-radius:21px;display:grid;place-items:center;background:linear-gradient(135deg,#ffffff,#e7faff);border:1px solid rgba(8,184,223,.22);box-shadow:inset 0 0 22px rgba(8,184,223,.08),0 9px 20px rgba(31,64,105,.08)}
.avatar-ring img{max-width:50px;max-height:38px}
.profile-identity{flex:1}
.profile-identity h2{font:800 17px/1.1 var(--font-display);margin:0 0 3px;color:#102033}
.profile-identity p{margin:0;color:#607489;font-size:10.5px;font-weight:800}
.mini-edit{height:34px;border-radius:999px;padding:0 9px;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);color:#0a83a0;font-weight:1000;transition:.18s ease}
.mini-edit:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.mini-edit .ui-icon{width:14px;height:14px}
.profile-balance-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.profile-balance-strip>div{border-radius:18px;padding:10px;background:rgba(255,255,255,.78);border:1px solid rgba(168,214,234,.52)}
.profile-balance-strip small{display:block;color:#63778d;font-weight:900;font-size:8px;text-transform:uppercase;letter-spacing:.09em}
.profile-balance-strip b{display:block;margin-top:3px;color:#0b91af;font:800 18px/1 var(--font-display)}
.wallet-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:9px 0}
.wallet-breakdown>div{border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.86);padding:8px 5px;text-align:center;box-shadow:0 6px 14px rgba(31,64,105,.05)}
.wallet-breakdown small{display:block;color:#72869a;font-size:7.8px;text-transform:uppercase;letter-spacing:.05em;font-weight:900}
.wallet-breakdown b{font-size:9.6px;color:#102033}
.profile-shortcuts-91{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}
.profile-shortcuts-91 a{min-height:76px;border-radius:18px;padding:8px 4px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;transition:.18s ease;box-shadow:var(--shadow-soft)}
.profile-shortcuts-91 a:hover{transform:translateY(-2px);border-color:rgba(8,184,223,.34)}
.profile-shortcuts-91 .ui-icon{width:22px;height:22px;color:var(--cyan)}
.profile-shortcuts-91 b{font-size:10px}
.profile-shortcuts-91 small{font-size:7.6px;color:#8193a6}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.panel-title-row h3{display:flex;align-items:center;gap:7px;margin:0;font:800 14px/1.1 var(--font-display)}
.panel-title-row span{color:#7b8da1;font-size:9px;font-weight:900}
.profile-panel{margin:10px 0}
.menu-list{display:grid;gap:7px;margin:10px 0}
.menu-list a{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;font-weight:900;box-shadow:var(--shadow-soft);transition:.18s ease}
.menu-list a:hover{transform:translateY(-2px);border-color:rgba(8,184,223,.30)}
.menu-list span{display:flex;align-items:center;gap:8px}
.logout-row{color:#c31136!important}

/* =========================================================
   PAYMENT & DEPOSIT/WITHDRAW
   ========================================================= */
.payment-hero{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0 10px;padding:13px;border:1px solid rgba(8,184,223,.20);border-radius:22px;background:linear-gradient(135deg,#fff,#eafaff);box-shadow:var(--shadow-soft)}
.payment-hero small{display:block;color:#607489;text-transform:uppercase;letter-spacing:.15em;font-size:8.5px;font-weight:1000}
.payment-hero b{display:block;margin:4px 0;color:#102033;font-size:14px}
.payment-hero span{font-size:10px;color:#687b90}
.payment-hero i{width:46px;height:46px;border-radius:17px;display:grid;place-items:center;font-style:normal;background:linear-gradient(135deg,#18c9f0,#74ecff);color:#052333;box-shadow:0 14px 30px rgba(8,184,223,.16);animation:floaty 3s ease-in-out infinite}
.payment-hero .ui-icon{width:24px;height:24px}
.segmented-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;border:1px solid var(--line);background:#f5faff}
.segmented-tabs span{height:39px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;color:#65788c;font-weight:1000;font-size:11px;transition:.18s ease}
.segmented-tabs input:checked+span{background:linear-gradient(135deg,#e3faff,#eff7ff);color:#08677e;box-shadow:inset 0 0 0 1px rgba(8,184,223,.30)}
.withdraw-pro-form [data-method-panel]{display:grid;gap:10px}
.txn{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0;padding:11px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)}
.txn b{font-size:11px}
.txn small{display:block;margin-top:3px;color:#71869a;font-size:9.3px}
.txn strong{font-size:12px}
.plus{color:var(--green)}
.minus{color:var(--red2)}
.status.ok{color:#08754c}
.status.bad{color:#c31136}
.status.warn{color:#986a08}
.notice{padding:12px;margin:8px 0;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.notice b{display:flex;align-items:center;gap:7px}
.notice p{margin:6px 0 0;color:#687b90}
.promo-card{padding:13px}
.inline-form{display:flex;gap:7px}
.inline-form input{flex:1}
.copy-text{font-weight:1000;color:#0a83a0}

/* =========================================================
   CHAT SECTION
   ========================================================= */
.chat-shell{min-height:calc(100dvh - 154px);display:flex;flex-direction:column;padding:9px}
.chat-box{flex:1;overflow:auto;padding:8px 2px 66px}
.chat-empty{display:grid;gap:6px;place-items:center;margin-top:38px;color:#667a90}
.chat-empty .ui-icon{width:38px;height:38px;color:var(--cyan)}
.bubble{max-width:82%;padding:9px 11px;margin:8px 0;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.bubble.me{margin-left:auto;background:linear-gradient(135deg,#e8fbff,#eef6ff);border-color:rgba(8,184,223,.22)}
.bubble.admin{background:#fff7f9}
.bubble p{margin:0}
.bubble small{display:block;margin-top:3px;color:#7d8fa2;font-size:8px}
.chat-send{position:sticky;bottom:84px;display:grid;grid-template-columns:1fr 44px;gap:6px;background:rgba(247,251,255,.74);backdrop-filter:blur(14px);padding-top:8px}
.chat-send button{height:44px;padding:0;border-radius:14px}
.chat-send button .ui-icon{width:20px;height:20px}

/* =========================================================
   AUTH SCREEN (LOGIN/REGISTER)
   ========================================================= */
.auth-screen{min-height:calc(100dvh - 84px);display:grid;place-items:center;padding:18px 6px}
.auth-card{width:100%;padding:22px 16px;text-align:center}
.auth-logo{height:52px;margin-bottom:10px}
.auth-card h1{font:800 28px/1 var(--font-display);margin:0 0 4px}
.auth-card p{margin:0 0 14px;color:#667a90}
.auth-links{display:flex;justify-content:space-between;margin-top:12px;color:#0a83a0;font-weight:1000}
.auth-links a{padding:6px}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,430px);height:72px;padding:6px 8px max(6px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(255,255,255,.88);backdrop-filter:blur(22px);border-top:1px solid rgba(173,200,224,.55);z-index:70}
.bottom-nav a{position:relative;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#75889c;font-weight:1000;font-size:9.2px;transition:transform .18s ease,color .18s ease,background .18s ease}
.bottom-nav a .ui-icon{width:19px;height:19px}
.bottom-nav a:hover{transform:translateY(-2px);color:#0a83a0}
.bottom-nav a.active{color:#0a9ec1;background:linear-gradient(180deg,#eafaff,rgba(234,250,255,.35))}
.bottom-nav a.active:before{content:"";position:absolute;top:4px;width:20px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--red));box-shadow:0 0 13px rgba(8,184,223,.34)}
.float-chat{position:fixed;left:calc(50% + min(100vw,430px)/2 - 66px);bottom:84px;z-index:71;width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#18c9f0 0%,#2563eb 55%,#ef244d 100%);box-shadow:0 18px 40px rgba(8,184,223,.22);animation:floaty 3s ease-in-out infinite}
.float-chat span{display:none}
.float-chat .ui-icon{color:#fff;width:22px;height:22px}

/* =========================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================= */
@media(max-width:380px){.home-hero{min-height:112px}.hero-brand-chip{display:none}.home-action-row{grid-template-columns:1fr 1fr 1fr}.wallet-breakdown,.profile-balance-strip{grid-template-columns:repeat(2,1fr)}.profile-shortcuts-91{grid-template-columns:repeat(2,1fr)}.bet-preview{grid-template-columns:repeat(2,1fr)}.match-foot{grid-template-columns:1fr 1fr}.match-foot a{grid-column:1/-1;height:34px}.notice-ribbon,.ticker{font-size:8px}.brand span:last-child{display:none}.inline-form{display:grid}.float-chat{right:14px;left:auto}}

/* =========================================================
   DARK MODE OVERRIDES
   ========================================================= */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   TELEGRAM BUTTON - ADD THIS STYLE
   ========================================================= */
.btn-telegram {
  background: #0088cc;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}

.btn-telegram:hover {
  background: #006699;
  transform: translateY(-2px);
  color: white;
}

.divider {
  text-align: center;
  margin: 20px 0;
  position: relative;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #ddd;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  background: white;
  padding: 0 12px;
  color: #999;
  font-size: 14px;
}

/* =========================================================
   MODERN LIGHT MULTI-COLOR THEME (v9)
   ========================================================= */
:root{
  --bg:#f6fbff;
  --bg2:#fff7fb;
  --surface:#ffffff;
  --surface2:#f8fcff;
  --glass:rgba(255,255,255,.76);
  --glass-strong:rgba(255,255,255,.92);
  --line:rgba(137,174,207,.28);
  --line-strong:rgba(29,209,255,.46);
  --text:#162135;
  --muted:#607086;
  --muted2:#8b9bad;
  --cyan:#00bde7;
  --cyan2:#5be9ff;
  --blue:#3366ff;
  --indigo:#665cff;
  --purple:#a855f7;
  --pink:#ff4ea3;
  --rose:#ff3b6b;
  --orange:#ff9a3d;
  --gold:#f5bf35;
  --green:#11c88a;
  --shadow:0 18px 46px rgba(67,94,130,.16);
  --shadow-soft:0 10px 28px rgba(67,94,130,.10);
  --glow-cyan:0 0 0 1px rgba(0,189,231,.16),0 16px 34px rgba(0,189,231,.15);
  --glow-pink:0 0 0 1px rgba(255,78,163,.16),0 16px 34px rgba(255,78,163,.14);
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
}
html,body{background:#eaf2fb!important;color:var(--text)!important;overflow-x:hidden!important;}
body{font-size:13px!important;line-height:1.42!important;letter-spacing:-0.005em!important;background:radial-gradient(circle at 8% 0%,rgba(91,233,255,.36),transparent 28%),radial-gradient(circle at 95% 6%,rgba(255,78,163,.26),transparent 26%),radial-gradient(circle at 18% 82%,rgba(102,92,255,.18),transparent 28%),linear-gradient(180deg,#f4fbff 0%,#fff8fc 42%,#f5f9ff 100%)!important;}
.app-bg{background:transparent!important;min-height:100vh!important;}
.phone-shell{background:radial-gradient(circle at 0% 0%,rgba(91,233,255,.46),transparent 28%),radial-gradient(circle at 92% 2%,rgba(255,78,163,.32),transparent 28%),radial-gradient(circle at 10% 42%,rgba(255,154,61,.17),transparent 25%),radial-gradient(circle at 92% 66%,rgba(102,92,255,.18),transparent 28%),linear-gradient(180deg,#f7fdff 0%,#fff8fd 48%,#f5fbff 100%)!important;color:var(--text)!important;box-shadow:0 0 0 1px rgba(86,123,164,.10),0 28px 90px rgba(52,77,105,.18)!important;overflow:hidden!important;}
.phone-shell:before{z-index:-2!important;background:linear-gradient(rgba(44,80,120,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(44,80,120,.035) 1px,transparent 1px),radial-gradient(circle at 18% 12%,rgba(0,189,231,.12),transparent 16%),radial-gradient(circle at 80% 8%,rgba(255,78,163,.14),transparent 18%);background-size:26px 26px,26px 26px,100% 100%,100% 100%!important;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 55%,transparent 100%)!important;}
.phone-shell:after{z-index:-3!important;inset:-12% -40%!important;background:conic-gradient(from 115deg at 50% 34%,rgba(91,233,255,.20),rgba(102,92,255,.14),rgba(255,78,163,.20),rgba(255,154,61,.12),rgba(17,200,138,.10),rgba(91,233,255,.20))!important;filter:blur(12px)!important;opacity:.9!important;}
.app-main{padding:10px 11px 16px!important;}
.ui-icon{stroke-width:2!important;filter:drop-shadow(0 6px 14px rgba(0,189,231,.16))!important;}
.topbar{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.66))!important;border-bottom:1px solid rgba(123,160,196,.22)!important;backdrop-filter:blur(20px) saturate(1.35)!important;box-shadow:0 10px 30px rgba(50,78,110,.06)!important;}
.brand{color:#152238!important;font-size:9.5px!important;letter-spacing:.18em!important;}
.brand-mark{border:1px solid rgba(0,189,231,.28)!important;background:linear-gradient(135deg,#ffffff 0%,#eefcff 55%,#fff0fa 100%)!important;box-shadow:inset 0 0 18px rgba(0,189,231,.10),0 10px 24px rgba(68,100,130,.10)!important;}
.icon-btn,.wallet-pill{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,252,255,.92),rgba(255,255,255,.90))!important;border:1px solid rgba(0,189,231,.28)!important;color:#087d9c!important;box-shadow:0 10px 24px rgba(67,94,130,.10),0 0 0 4px rgba(0,189,231,.045)!important;}
.wallet-pill{font-size:11px!important;font-weight:1000!important;}
.wallet-pill:hover,.icon-btn:hover{transform:translateY(-1px) scale(1.015)!important;box-shadow:0 16px 34px rgba(0,189,231,.16)!important;}
.notice-ribbon,.ticker,.live-ticker{height:33px!important;background:linear-gradient(100deg,rgba(255,255,255,.90),rgba(230,251,255,.86) 34%,rgba(255,241,250,.88) 70%,rgba(255,249,228,.88))!important;color:#146071!important;border:1px solid rgba(0,189,231,.20)!important;box-shadow:var(--shadow-soft)!important;}
.home-command-card,.home-hero,.payment-hero,.light-payment-hero,.deposit-hero,.profile-hero-dark,.panel-card,.dark-panel-card,.auth-card,.match-card,.promo-card,.rate-card,.detail-head,.bet-form,.pro-form-card,.chat-shell,.notice,.txn,.bubble,.glow-card{background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(242,252,255,.82) 48%,rgba(255,246,252,.84))!important;border:1px solid rgba(111,156,196,.25)!important;color:var(--text)!important;box-shadow:var(--shadow-soft)!important;backdrop-filter:blur(20px) saturate(1.25)!important;}
.home-command-card,.profile-hero-dark,.match-card,.panel-card,.auth-card,.chat-shell{position:relative;overflow:hidden!important;}
.home-command-card:before,.profile-hero-dark:before,.match-card:before,.panel-card:before,.auth-card:before,.chat-shell:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:radial-gradient(circle at 8% 0%,rgba(91,233,255,.24),transparent 30%),radial-gradient(circle at 98% 0%,rgba(255,78,163,.18),transparent 28%),linear-gradient(90deg,rgba(0,189,231,.12),rgba(102,92,255,.06),rgba(255,78,163,.11));opacity:.72;}
.home-command-card>* , .profile-hero-dark>* , .match-card>* , .panel-card>* , .auth-card>* , .chat-shell>*{position:relative;z-index:1;}
.home-command-card h1,.home-hero h1,.profile-identity-dark h2,.section-title,.panel-title-row h3,.auth-card h2,.page-head h2,.compact-page-head h2{color:#162135!important;font-family:var(--font-display)!important;letter-spacing:-.025em!important;}
.home-command-card h1{font-size:19px!important;line-height:1.05!important;margin:4px 0 5px!important;}
.home-command-card p,.home-hero p,.profile-identity-dark p,.panel-title-row span,.notice p,.txn small,.payment-hero span,.match-top b,.team span,.security-strip-dark p,.empty,.empty-light,.muted,small{color:var(--muted)!important;}
.hero-kicker{background:linear-gradient(135deg,#e7fbff,#fff0fa)!important;color:#087e9b!important;border:1px solid rgba(0,189,231,.20)!important;font-size:7.8px!important;}
.live-orb,.avatar-orbit{background:linear-gradient(135deg,#ffffff,#e8fbff 46%,#fff0fa)!important;border:1px solid rgba(0,189,231,.25)!important;box-shadow:0 0 0 5px rgba(0,189,231,.055),0 18px 38px rgba(0,189,231,.13)!important;color:#079abd!important;}
.wallet-actions-inline{gap:9px!important;}
.wallet-action{height:50px!important;border-radius:18px!important;color:#fff!important;font-size:11.5px!important;font-weight:1000!important;text-shadow:0 1px 8px rgba(0,0,0,.16)!important;box-shadow:0 18px 34px rgba(67,94,130,.15)!important;isolation:isolate;}
.wallet-action small{display:block!important;font-size:8.5px!important;font-weight:800!important;color:rgba(255,255,255,.82)!important;margin-left:3px!important;}
.deposit-action{background:radial-gradient(circle at 12% 25%,rgba(255,255,255,.38),transparent 30%),linear-gradient(135deg,#00c6ff 0%,#3366ff 52%,#a855f7 100%)!important;border-color:rgba(0,189,231,.36)!important;box-shadow:0 16px 38px rgba(51,102,255,.23),0 0 0 1px rgba(255,255,255,.20) inset!important;}
.withdraw-action{background:radial-gradient(circle at 14% 22%,rgba(255,255,255,.36),transparent 30%),linear-gradient(135deg,#ff4ea3 0%,#a855f7 46%,#ff9a3d 100%)!important;border-color:rgba(255,78,163,.35)!important;box-shadow:0 16px 38px rgba(255,78,163,.22),0 0 0 1px rgba(255,255,255,.20) inset!important;}
.wallet-action .ui-icon{color:#fff!important;filter:drop-shadow(0 7px 14px rgba(0,0,0,.22))!important;}
.home-action-row a,.profile-shortcuts-dark a,.score-box,.wallet-breakdown>div,.stats-grid>div,.quick-amounts button,.bet-preview>div,.side-select input+span,.method-tabs a,.segmented-tabs,.tab-panel,.withdraw-ledger-row{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(240,252,255,.78) 45%,rgba(255,245,252,.82))!important;border:1px solid rgba(111,156,196,.24)!important;color:var(--text)!important;box-shadow:0 10px 28px rgba(67,94,130,.10)!important;}
.profile-shortcuts-dark{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:10px 0!important;}
.profile-shortcuts-dark a{min-height:78px!important;border-radius:19px!important;padding:12px!important;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;}
.profile-shortcuts-dark a:nth-child(1){background:linear-gradient(135deg,#f7fdff,#e9f8ff)!important;border-color:rgba(0,189,231,.26)!important;}
.profile-shortcuts-dark a:nth-child(2){background:linear-gradient(135deg,#fffaff,#f5eaff)!important;border-color:rgba(168,85,247,.25)!important;}
.profile-shortcuts-dark a:nth-child(3){background:linear-gradient(135deg,#f7fffb,#eafff5)!important;border-color:rgba(17,200,138,.25)!important;}
.profile-shortcuts-dark a:nth-child(4){background:linear-gradient(135deg,#fffaf1,#fff1d8)!important;border-color:rgba(245,191,53,.28)!important;}
.profile-shortcuts-dark a:nth-child(5){background:linear-gradient(135deg,#f7fbff,#eef4ff)!important;border-color:rgba(51,102,255,.24)!important;}
.profile-shortcuts-dark a:nth-child(6){background:linear-gradient(135deg,#fff6f9,#ffeaf0)!important;border-color:rgba(255,59,107,.24)!important;}
.profile-shortcuts-dark a:hover,.home-action-row a:hover,.match-card:hover{transform:translateY(-2px)!important;box-shadow:0 16px 38px rgba(67,94,130,.14)!important;border-color:var(--line-strong)!important;}
.profile-shortcuts-dark b{color:#18243a!important;font-size:11px!important;font-weight:900!important;}
.profile-shortcuts-dark small{font-size:8.5px!important;color:#6e7f93!important;}
.profile-shortcuts-dark i{color:#8ba1b6!important;}
.shortcut-icon{width:31px!important;height:31px!important;border-radius:13px!important;display:grid!important;place-items:center!important;margin-bottom:8px!important;box-shadow:0 10px 24px rgba(67,94,130,.10)!important;}
.shortcut-icon .ui-icon{width:18px!important;height:18px!important;}
.shortcut-icon.blue,.shortcut-icon.cyan{background:#e6fbff!important;color:#00a6cc!important;}
.shortcut-icon.purple{background:#f4eaff!important;color:#9b45ff!important;}
.shortcut-icon.green{background:#eafff5!important;color:#0aa976!important;}
.shortcut-icon.gold{background:#fff4d9!important;color:#da8b00!important;}
.shortcut-icon.red{background:#ffecf2!important;color:#ff3b6b!important;}
.profile-topline-dark{gap:10px!important;align-items:center!important;}
.profile-identity-dark h2{font-size:18px!important;line-height:1.05!important;margin:0 0 4px!important;}
.profile-identity-dark p{font-size:9.5px!important;font-weight:800!important;}
.verify-chip{background:linear-gradient(135deg,#e8fff7,#ffffff)!important;color:#079163!important;border:1px solid rgba(17,200,138,.25)!important;font-size:8.5px!important;box-shadow:0 8px 18px rgba(17,200,138,.09)!important;}
.edit-pill-dark{background:linear-gradient(135deg,#ffffff,#eafaff)!important;border:1px solid rgba(0,189,231,.26)!important;color:#087e9b!important;box-shadow:0 10px 24px rgba(0,189,231,.09)!important;font-size:10px!important;}
.security-strip-dark{background:linear-gradient(135deg,#ffffff 0%,#eefcff 52%,#fff1fa 100%)!important;border:1px solid rgba(0,189,231,.22)!important;color:var(--text)!important;box-shadow:var(--shadow-soft)!important;}
.security-strip-dark>span{background:linear-gradient(135deg,#e8fbff,#fff0fa)!important;color:#00a9ce!important;}
.security-strip-dark b{color:#162135!important;font-size:11.2px!important;}
.match-card{border-radius:20px!important;background:radial-gradient(circle at 4% 0,rgba(255,59,107,.12),transparent 24%),radial-gradient(circle at 98% 0,rgba(0,189,231,.16),transparent 28%),linear-gradient(135deg,#ffffff,#f0fbff 52%,#fff8fc)!important;}
.match-card.is-live{border-color:rgba(255,59,107,.38)!important;box-shadow:0 12px 32px rgba(255,59,107,.10),0 0 0 1px rgba(255,59,107,.08)!important;}
.match-status,.status-chip,.badge{font-size:8.2px!important;font-weight:1000!important;letter-spacing:.07em!important;text-transform:uppercase!important;border-radius:999px!important;}
.status-live,.match-status.status-live{background:linear-gradient(135deg,#ff3b6b,#ff6a88)!important;color:#fff!important;box-shadow:0 0 18px rgba(255,59,107,.26)!important;animation:livePulse 1.8s ease-in-out infinite!important;}
.status-upcoming,.match-status.status-upcoming{background:#e8f7ff!important;color:#087e9b!important;}
.status-ended,.match-status.status-ended,.status-completed{background:#fff2df!important;color:#ad6300!important;}
.status-cancelled,.status-rejected{background:#fff0f3!important;color:#bf1739!important;}
.status-approved,.status-won,.status-success,.badge.ok,.ok{background:#e9fff6!important;color:#07865a!important;}
.team img{background:linear-gradient(135deg,#e8fbff,#fff0fa)!important;border:1px solid rgba(0,189,231,.22)!important;box-shadow:0 10px 22px rgba(67,94,130,.10)!important;}
.vs{color:#00a6cc!important;text-shadow:none!important;font-size:11px!important;}
.vs small,.compact-rate{color:#6a4cff!important;font-weight:1000!important;}
.match-foot{display:grid!important;grid-template-columns:1fr 1fr 104px!important;gap:8px!important;align-items:center!important;}
.match-foot span,.small-score{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(238,250,255,.78))!important;border-color:rgba(111,156,196,.22)!important;color:#65768a!important;min-height:48px!important;border-radius:14px!important;padding:6px 10px!important;font-size:10px!important;font-weight:800!important;display:flex!important;flex-direction:row !important;justify-content:center!important;align-items:flex-start!important;box-sizing:border-box!important;}
.match-foot span b{color:#162135!important;font-size:12.5px!important;font-weight:900!important;display:block!important;margin-top:2px!important;}
.match-foot span .ui-icon{width:13px!important;height:13px!important;display:inline-block!important;vertical-align:middle!important;margin-right:3px!important;color:#0b9ec1!important;}
.match-foot a{height:48px!important;border-radius:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:11px!important;font-weight:1000!important;box-sizing:border-box!important;}
.match-foot a,.primary-btn,.full-btn,.btn.primary,.bet-submit{background:linear-gradient(135deg,#00c6ff 0%,#3366ff 52%,#a855f7 100%)!important;color:#fff!important;border:0!important;box-shadow:0 16px 34px rgba(51,102,255,.20)!important;text-shadow:0 1px 8px rgba(0,0,0,.13)!important;}
.secondary-btn{background:linear-gradient(135deg,#fff,#effbff)!important;color:#087e9b!important;border:1px solid rgba(0,189,231,.25)!important;box-shadow:var(--shadow-soft)!important;}
button:hover,.primary-btn:hover,.full-btn:hover,.match-foot a:hover,.secondary-btn:hover{transform:translateY(-1px)!important;filter:saturate(1.08)!important;}
.form-stack input,.form-stack select,.form-stack textarea,input,select,textarea{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,252,255,.90))!important;color:#18243a!important;border:1px solid rgba(111,156,196,.28)!important;border-radius:15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 18px rgba(67,94,130,.06)!important;}
.form-stack input::placeholder,.form-stack textarea::placeholder,input::placeholder{color:#91a0b1!important;}
.form-stack input:focus,.form-stack textarea:focus,input:focus,select:focus,textarea:focus{outline:none!important;border-color:rgba(0,189,231,.52)!important;box-shadow:0 0 0 4px rgba(0,189,231,.11),0 10px 22px rgba(0,189,231,.07)!important;}
.segmented-tabs input:checked+span,.side-select input:checked+span,.method-tabs a.active,.tabs a.active,.filter a.active{background:linear-gradient(135deg,#00c6ff,#3366ff,#a855f7)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 12px 24px rgba(51,102,255,.18)!important;}
.quick-amounts button{color:#087e9b!important;font-weight:900!important;}
.quick-amounts button:hover{background:linear-gradient(135deg,#e8fbff,#fff0fa)!important;color:#6a4cff!important;}
.bet-preview b,.wallet-breakdown b,.score-box b,.txn b,.payment-hero b{color:#162135!important;}
.bet-preview span,.wallet-breakdown span,.score-box span{color:#697b8e!important;}
.plus{color:#08a871!important}
.minus{color:#ff3b6b!important}
.chat-box,.messages{background:rgba(255,255,255,.45)!important;border-color:rgba(111,156,196,.22)!important;}
.bubble{color:#162135!important;background:linear-gradient(135deg,#ffffff,#eefcff)!important;}
.bubble.me{background:linear-gradient(135deg,#00c6ff,#3366ff)!important;color:#fff!important;}
.bubble.me small{color:rgba(255,255,255,.82)!important;}
.chat-send{background:rgba(255,255,255,.80)!important;border-top:1px solid rgba(111,156,196,.22)!important;}
.float-chat{background:linear-gradient(135deg,#229ED9 0%,#2AABEE 100%)!important;color:#fff!important;box-shadow:0 16px 38px rgba(34,158,217,.32)!important;}
.bottom-nav{height:74px!important;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.94))!important;border-top:1px solid rgba(111,156,196,.24)!important;box-shadow:0 -16px 40px rgba(67,94,130,.10)!important;backdrop-filter:blur(22px) saturate(1.35)!important;}
.bottom-nav a{color:#7c8ca0!important;font-size:8.8px!important;font-weight:900!important;transition:transform .18s ease,color .18s ease,background .18s ease!important;}
.bottom-nav a .ui-icon{width:18px!important;height:18px!important;filter:none!important;}
.bottom-nav a:hover{transform:translateY(-2px)!important;color:#087e9b!important;}
.bottom-nav a.active{color:#0a92b5!important;background:linear-gradient(135deg,rgba(232,251,255,.92),rgba(255,240,250,.88))!important;box-shadow:0 12px 28px rgba(0,189,231,.12),inset 0 0 0 1px rgba(0,189,231,.20)!important;}
.bottom-nav a.active:before{background:linear-gradient(90deg,#00c6ff,#3366ff,#ff4ea3)!important;box-shadow:0 0 14px rgba(0,189,231,.36)!important;}
.auth-screen{background:transparent!important;}
.auth-card{border-radius:26px!important;box-shadow:var(--shadow)!important;}
.auth-logo{background:linear-gradient(135deg,#fff,#e8fbff,#fff0fa)!important;border-color:rgba(0,189,231,.24)!important;}
.auth-links a{color:#0a92b5!important;}
.table-scroll table,.compact-ledger{background:rgba(255,255,255,.84)!important;color:var(--text)!important;}
.table-scroll th{background:#f4fbff!important;color:#486071!important;}
.table-scroll td{border-color:rgba(111,156,196,.18)!important;color:#162135!important;}
.empty,.empty-light{background:rgba(255,255,255,.72)!important;border:1px dashed rgba(111,156,196,.33)!important;color:#6a7b8f!important;}
.deposit-action,.withdraw-action,.match-foot a,.primary-btn,.full-btn,.float-chat{animation:chromaFloat 6s ease-in-out infinite!important;}

/* =========================================================
   COMPACT LIVE TOSS MARKET HEADER (v10)
   ========================================================= */
.home-command-card{
  min-height:58px!important;
  margin:7px 0 8px!important;
  padding:8px 11px!important;
  border-radius:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  box-shadow:0 10px 26px rgba(67,94,130,.10)!important;
}
.home-command-card:before{
  background:radial-gradient(circle at 0% 0%,rgba(91,233,255,.20),transparent 28%),radial-gradient(circle at 100% 0%,rgba(255,78,163,.16),transparent 30%),linear-gradient(90deg,rgba(0,189,231,.09),rgba(102,92,255,.045),rgba(255,78,163,.08))!important;
}
.home-command-card .hero-kicker{
  margin:0 0 3px!important;
  padding:3px 6px!important;
  font-size:6.8px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
  border-radius:999px!important;
}
.home-command-card h1{
  font-size:14.2px!important;
  line-height:1.02!important;
  margin:0!important;
  letter-spacing:-.018em!important;
}
.home-command-card p{
  margin:3px 0 0!important;
  max-width:275px!important;
  font-size:8.2px!important;
  line-height:1.18!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.home-command-card .live-orb{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  border-radius:12px!important;
  box-shadow:0 0 0 4px rgba(0,189,231,.045),0 10px 22px rgba(0,189,231,.12)!important;
}
.home-command-card .live-orb .ui-icon{
  width:15px!important;
  height:15px!important;
}
.notice-ribbon.live-ticker{
  height:28px!important;
  border-radius:13px!important;
  padding:0 8px!important;
  margin-bottom:7px!important;
  font-size:7.5px!important;
  letter-spacing:.10em!important;
  box-shadow:0 8px 20px rgba(67,94,130,.08)!important;
}
.notice-ribbon.live-ticker .ui-icon{
  width:13px!important;
  height:13px!important;
}

/* =========================================================
   RESPONSIVE FOR COMPACT HEADER
   ========================================================= */
@media(max-width:380px){
  .home-command-card{min-height:54px!important;padding:8px 10px!important;border-radius:17px!important;}
  .home-command-card h1{font-size:13.2px!important;}
  .home-command-card p{max-width:230px!important;font-size:7.8px!important;}
  .home-command-card .live-orb{width:28px!important;height:28px!important;flex-basis:28px!important;}
}

/* =========================================================
   DARK MODE SUPPORT FOR AUTH
   ========================================================= */
@media (prefers-color-scheme: dark) {
  .auth-card {
    background: #1e1e1e;
  }
  .divider span {
    background: #1e1e1e;
    color: #666;
  }
  .divider::before,
  .divider::after {
    background: #404040;
  }
}
.foot-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}