/*
  ChromaBet Global Theme CSS
  Brand: Futuristic neon-spectrum glow inspired by provided image
  Author: Akcoder
  Usage on pages: <link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="css/chromabet-ui.css">

  Index
  01. Variables & Reset
  02. Layout primitives
  03. Header / Navigation / Footer
  04. Typography
  05. Buttons & Badges
  06. Forms
  07. Tables & Lists
  08. Components (tabs, accordion, modal, toast, dropdown)
  09. Widgets (stats, progress, timeline)
  10. Background FX (hex, orb, particles)
  11. Utilities (spacing, display, flex, sizing, border, shadows)
  12. Page presets (wallet, support, leaderboard, home cards)
  13. Responsive rules
*/

/* 01. Variables & Reset */
:root{
  --cb-primary: linear-gradient(135deg,#00ffff,#0080ff,#8000ff,#ff0080,#ff0000);
  --cb-bg: linear-gradient(135deg,#0a0a1a,#1a1a2e,#16213e,#0f3460);
  --cb-surface: rgba(255,255,255,.05);
  --cb-surface-2: rgba(255,255,255,.08);
  --cb-surface-3: rgba(255,255,255,.12);
  --cb-text:#fff;
  --cb-muted:rgba(255,255,255,.7);
  --cb-accent:#00ffff;
  --cb-success:#00ff88;
  --cb-danger:#ff4757;
  --cb-warning:#ffa726;
  --cb-info:#43b7ff;
  --cb-border:rgba(0,255,255,.3);
  --cb-border-soft:rgba(255,255,255,.18);
  --cb-glow:0 0 20px rgba(0,255,255,.6);
  --cb-shadow:0 14px 40px rgba(0,255,255,.18);
  --cb-radius:14px;
  --cb-radius-lg:20px;
  --cb-radius-sm:10px;
  --cb-tr:.25s ease;
  --cb-space:4px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Exo 2',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;color:var(--cb-text);background:var(--cb-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;padding-bottom:68px}
img{max-width:100%;height:auto;display:inline-block}
button,input,select,textarea{font:inherit;color:inherit}

/* 02. Layout primitives */
.cb-container{max-width:430px;margin-inline:auto;padding-inline:16px}
.cb-container-lg{max-width:1400px;margin-inline:auto;padding-inline:20px}
.cb-section{padding:32px 0}
.cb-section-lg{padding:48px 0}
.cb-row{display:grid;gap:16px}
.cb-row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cb-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cb-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.cb-card{position:relative;background:var(--cb-surface);border:1px solid var(--cb-border);border-radius:var(--cb-radius-lg);padding:20px;backdrop-filter:blur(10px);transition:transform var(--cb-tr),box-shadow var(--cb-tr),border-color var(--cb-tr);overflow:hidden}
.cb-card::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--cb-radius-lg) + 2px);background:var(--cb-primary);opacity:.18;z-index:-1}
.cb-card:hover{transform:translateY(-4px);box-shadow:var(--cb-shadow);border-color:var(--cb-accent)}
.cb-card .cb-card{background:rgba(0,0,0,.22);border:1px solid var(--cb-border-soft);border-radius:12px;box-shadow:none;overflow:hidden;padding:16px}
.cb-card .cb-card::before{display:none}
.cb-card .cb-card:hover{transform:none;box-shadow:none;border-color:var(--cb-border-soft)}
.cb-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cb-card-title{font-family:'Orbitron',monospace;font-size:1.15rem;background:var(--cb-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cb-card-subtitle{color:var(--cb-muted);font-size:.95rem}

/* 03. Header / Navigation / Footer */
.cb-header{position:sticky;top:0;z-index:1501;background:transparent;backdrop-filter:none;border-bottom:none;overflow:visible;box-shadow:none;min-height:0;height:auto}
.cb-header::before{content:"";display:none}
.cb-header::after{content:"";display:none}
.cb-header > *{position:relative;z-index:1}
.cb-header-topcap{display:none}
.cb-header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.cb-header .cb-header-inner{display:flex!important;align-items:center;justify-content:center;min-height:68px;height:auto;width:min(430px,100vw);margin:0 auto;padding:10px 12px!important;border-left:none;border-right:none;border-bottom:1px solid var(--cb-border);background:rgba(10,10,26,.92)!important;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-image:none!important;background-origin:initial!important}
.cb-header .cb-nav,.cb-header .cb-userbar{display:none!important}
.cb-logo{font-family:'Orbitron',monospace;font-weight:900;font-size:1.6rem;background:var(--cb-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:var(--cb-glow);cursor:pointer;transition:transform var(--cb-tr),filter var(--cb-tr)}
.cb-logo:hover{transform:scale(1.04);filter:brightness(1.15)}
.cb-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cb-nav a{color:var(--cb-text);text-decoration:none;padding:8px 12px;border-radius:22px;border:1px solid transparent;transition:border-color var(--cb-tr),box-shadow var(--cb-tr),transform var(--cb-tr)}
.cb-nav a:hover,.cb-nav a.active{border-color:var(--cb-accent);box-shadow:var(--cb-glow);transform:translateY(-2px)}
.cb-userbar{display:none;align-items:center;gap:10px}
.cb-balance{border:1px solid var(--cb-accent);border-radius:18px;padding:6px 12px;background:rgba(0,255,255,.12);font-weight:800;font-family:'Orbitron',monospace}
.cb-footer{margin-top:40px;border-top:1px solid var(--cb-border);background:rgba(10,10,26,.82);backdrop-filter:blur(8px)}
.cb-footer-inner{max-width:1200px;margin:0 auto;padding:18px 16px;color:var(--cb-muted);font-size:.95rem;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* 04. Typography */
.cb-title{font-family:'Orbitron',monospace;font-size:2rem;font-weight:900;background:var(--cb-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:10px 0 16px}
.cb-subtitle{color:var(--cb-muted);margin-bottom:8px}
.cb-text-muted{color:var(--cb-muted)}
.cb-text-accent{color:var(--cb-accent)}
.cb-text-success{color:var(--cb-success)}
.cb-text-danger{color:var(--cb-danger)}
.cb-text-warning{color:var(--cb-warning)}
.cb-text-info{color:var(--cb-info)}
.small{font-size:.875rem}
.xs{font-size:.78rem}
.cb-gradient-text{background:var(--cb-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 05. Buttons & Badges */
.cb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:24px;border:none;cursor:pointer;color:#fff;font-weight:800;background:var(--cb-primary);transition:transform var(--cb-tr),box-shadow var(--cb-tr),filter var(--cb-tr);text-decoration:none}
.cb-btn:hover{transform:translateY(-2px);box-shadow:var(--cb-shadow)}
.cb-btn:active{transform:translateY(0);filter:brightness(.95)}
.cb-btn.pressed{transform:translateY(0) scale(.98);filter:brightness(.95)}
.cb-btn-secondary{background:rgba(255,255,255,.12);border:1px solid var(--cb-border)}
.cb-btn-outline{background:transparent;border:1px solid var(--cb-accent);color:var(--cb-text)}
.cb-btn-success{background:linear-gradient(135deg,#00ff88,#00c06a)}
.cb-btn-danger{background:linear-gradient(135deg,#ff6b6b,#ee5a52)}
.cb-btn-warning{background:linear-gradient(135deg,#ffd166,#f6a623);color:#222}
.cb-btn-info{background:linear-gradient(135deg,#43b7ff,#2a9dff)}
.cb-btn-sm{padding:7px 12px;border-radius:18px;font-weight:700}
.cb-btn-lg{padding:14px 22px;border-radius:28px;font-size:1.05rem}
.cb-btn-block{display:flex;width:100%}
.cb-icon-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--cb-primary);border:none;cursor:pointer;transition:var(--cb-tr)}
.cb-icon-btn:hover{transform:scale(1.06);box-shadow:var(--cb-shadow)}
.cb-icon-btn.pressed{transform:scale(.95);filter:brightness(.95)}
.cb-badge{display:inline-block;border-radius:999px;padding:4px 10px;border:1px solid var(--cb-border);background:rgba(255,255,255,.08);color:var(--cb-text);font-weight:800;font-size:.8rem}
.cb-badge-success{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.5);color:var(--cb-success)}
.cb-badge-danger{background:rgba(255,71,87,.12);border-color:rgba(255,71,87,.5);color:var(--cb-danger)}
.cb-badge-warning{background:rgba(255,167,38,.12);border-color:rgba(255,167,38,.5);color:var(--cb-warning)}
.cb-badge-info{background:rgba(67,183,255,.12);border-color:rgba(67,183,255,.5);color:var(--cb-info)}

/* 06. Forms */
.cb-form{display:grid;gap:14px}
.cb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.cb-form-row{grid-template-columns:1fr}}
.cb-label{display:block;margin-bottom:6px;color:rgba(255,255,255,.9);font-weight:700}
.cb-input,.cb-select,.cb-textarea{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--cb-border);background:rgba(0,0,0,.28);color:var(--cb-text);transition:border-color var(--cb-tr),box-shadow var(--cb-tr)}
.cb-textarea{min-height:120px;resize:vertical}
.cb-input:focus,.cb-select:focus,.cb-textarea:focus{outline:none;border-color:var(--cb-accent);box-shadow:var(--cb-glow)}
.form-input{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--cb-border);background:rgba(0,0,0,.28);color:var(--cb-text);transition:border-color var(--cb-tr),box-shadow var(--cb-tr)}
.form-input:focus{outline:none;border-color:var(--cb-accent);box-shadow:var(--cb-glow)}
textarea.form-input{min-height:110px;resize:vertical}
input[type=file].form-input{padding:10px 12px;line-height:1.2}
input[type=file].form-input::file-selector-button{background:rgba(255,255,255,.12);border:1px solid var(--cb-border);border-radius:10px;color:var(--cb-text);padding:8px 12px;margin-right:12px;cursor:pointer;transition:filter var(--cb-tr),box-shadow var(--cb-tr)}
input[type=file].form-input::-webkit-file-upload-button{background:rgba(255,255,255,.12);border:1px solid var(--cb-border);border-radius:10px;color:var(--cb-text);padding:8px 12px;margin-right:12px;cursor:pointer;transition:filter var(--cb-tr),box-shadow var(--cb-tr)}
input[type=file].form-input:hover::file-selector-button,
input[type=file].form-input:hover::-webkit-file-upload-button{filter:brightness(1.08);box-shadow:var(--cb-shadow)}
.cb-input-group{display:flex;align-items:stretch;border:2px solid var(--cb-border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.28)}
.cb-input-group>.cb-input{border:none;background:transparent}
.cb-input-addon{display:inline-flex;align-items:center;padding:0 12px;border-right:2px solid var(--cb-border);color:var(--cb-muted)}
.cb-help{font-size:.86rem;color:var(--cb-muted)}
.cb-error{border-color:rgba(255,71,87,.65)!important;box-shadow:0 0 0 3px rgba(255,71,87,.18)}
.cb-error-text{color:var(--cb-danger);font-size:.86rem}
.cb-switch{position:relative;width:56px;height:30px;border:2px solid var(--cb-border);border-radius:30px;background:rgba(255,255,255,.12);cursor:pointer;transition:var(--cb-tr)}
.cb-switch::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;transition:var(--cb-tr)}
.cb-switch.active{background:linear-gradient(135deg,#00c06a,#00ff88);border-color:rgba(0,255,136,.5)}
.cb-switch.active::after{left:28px}

/* 07. Tables & Lists */
.cb-table{width:100%;border-collapse:collapse;border:1px solid var(--cb-border);border-radius:var(--cb-radius);overflow:hidden;background:rgba(0,0,0,.22)}
.cb-table thead th{text-align:left;padding:12px;font-weight:800;color:var(--cb-accent);border-bottom:1px solid var(--cb-border);background:rgba(255,255,255,.06)}
.cb-table tbody td{padding:12px;border-bottom:1px solid var(--cb-border-soft);color:var(--cb-text)}
.cb-table tbody tr:hover{background:rgba(255,255,255,.05)}
.cb-table .right{text-align:right}
.cb-list-group{display:grid;gap:10px}
.cb-list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid var(--cb-border);background:rgba(0,0,0,.24);border-radius:12px}
.cb-list{list-style:none;display:grid;gap:10px;padding-left:0}
.cb-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--cb-border);background:rgba(0,0,0,.25);border-radius:12px}
.cb-list-item .meta{color:var(--cb-muted);font-size:.9rem}

/* 08. Components */
/* Tabs */
.cb-tabs{display:flex;gap:8px;border-bottom:1px solid var(--cb-border);margin-bottom:12px}
.cb-tab{padding:10px 14px;border:1px solid transparent;border-radius:12px 12px 0 0;cursor:pointer;color:var(--cb-text)}
.cb-tab.active{border-color:var(--cb-accent);background:rgba(0,255,255,.08)}
/* Accordion */
.cb-accordion{border:1px solid var(--cb-border);border-radius:12px;overflow:hidden}
.cb-acc-item+.cb-acc-item{border-top:1px solid var(--cb-border)}
.cb-acc-header{padding:12px 14px;cursor:pointer;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}
.cb-acc-body{padding:12px 14px;display:none;background:rgba(0,0,0,.22)}
.cb-acc-item.open .cb-acc-body{display:block}
/* Modal */
.cb-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:2000}
.cb-modal{width:min(560px,92vw);background:rgba(10,10,26,.96);border:1px solid var(--cb-border);border-radius:16px;padding:16px;box-shadow:var(--cb-shadow)}
.cb-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cb-modal-title{font-family:'Orbitron',monospace;background:var(--cb-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.2rem}
.cb-modal-body{max-height:60vh;overflow:auto}
.cb-modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.cb-modal-backdrop.show{display:flex}
/* Toast */
.cb-toast{position:fixed;right:16px;bottom:16px;display:grid;gap:10px;z-index:2200}
.cb-toast-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--cb-border);background:rgba(0,0,0,.7);color:var(--cb-text);box-shadow:var(--cb-shadow)}
/* Dropdown */
.cb-dropdown{position:relative}
.cb-dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:rgba(10,10,26,.98);border:1px solid var(--cb-border);border-radius:12px;padding:8px;display:none}
.cb-dropdown.open .cb-dropdown-menu{display:block}
.cb-dropdown-item{padding:8px 10px;border-radius:8px;color:var(--cb-text);text-decoration:none;display:block}
.cb-dropdown-item:hover{background:rgba(255,255,255,.08)}

/* 09. Widgets */
.cb-stat{text-align:center;padding:16px;background:rgba(0,0,0,.25);border:1px solid var(--cb-border);border-radius:12px}
.cb-stat .value{font-family:'Orbitron',monospace;font-size:1.6rem;color:var(--cb-accent)}
.cb-stat .label{color:var(--cb-muted);margin-top:6px;font-size:.92rem}
.cb-progress{height:10px;background:rgba(255,255,255,.16);border-radius:999px;overflow:hidden;border:1px solid var(--cb-border)}
.cb-progress>.bar{height:100%;background:var(--cb-primary);width:0;transition:width .5s ease}
.cb-timeline{position:relative;padding-left:20px}
.cb-timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.2)}
.cb-tl-item{position:relative;padding:6px 0 6px 14px}
.cb-tl-item::before{content:"";position:absolute;left:-1px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--cb-accent);box-shadow:0 0 0 3px rgba(0,255,255,.18)}

/* 10. Background FX */
.cb-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.cb-hex{position:absolute;inset:0;background-image:radial-gradient(circle at 25% 25%,rgba(0,255,255,.12) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(128,0,255,.12) 0%,transparent 50%);background-size:100px 100px;animation:cbHex 20s ease-in-out infinite}
.cb-orb{position:absolute;top:50%;left:50%;translate:-50% -50%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,255,.28) 0%,rgba(128,0,255,.2) 35%,rgba(255,0,128,.12) 60%,transparent 80%);box-shadow:var(--cb-glow);animation:cbOrb 4s ease-in-out infinite}
.cb-particles{position:absolute;inset:0}
.cb-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cb-accent);box-shadow:0 0 10px currentColor;animation:cbParticle 18s linear infinite}
@keyframes cbHex{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes cbOrb{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.65}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.84}}
@keyframes cbParticle{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-120px) translateX(80px);opacity:0}}

/* 11. Utilities */
.m-0{margin:0!important}.mt-0{margin-top:0!important}.me-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ms-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}
.mt-1{margin-top:calc(var(--cb-space)*1)!important}.mt-2{margin-top:calc(var(--cb-space)*2)!important}.mt-3{margin-top:calc(var(--cb-space)*3)!important}.mt-4{margin-top:calc(var(--cb-space)*4)!important}.mt-5{margin-top:calc(var(--cb-space)*5)!important}.mt-6{margin-top:calc(var(--cb-space)*6)!important}.mt-7{margin-top:calc(var(--cb-space)*7)!important}.mt-8{margin-top:calc(var(--cb-space)*8)!important}.mt-9{margin-top:calc(var(--cb-space)*9)!important}.mt-10{margin-top:calc(var(--cb-space)*10)!important}.mt-11{margin-top:calc(var(--cb-space)*11)!important}.mt-12{margin-top:calc(var(--cb-space)*12)!important}
.mb-1{margin-bottom:calc(var(--cb-space)*1)!important}.mb-2{margin-bottom:calc(var(--cb-space)*2)!important}.mb-3{margin-bottom:calc(var(--cb-space)*3)!important}.mb-4{margin-bottom:calc(var(--cb-space)*4)!important}.mb-5{margin-bottom:calc(var(--cb-space)*5)!important}.mb-6{margin-bottom:calc(var(--cb-space)*6)!important}.mb-7{margin-bottom:calc(var(--cb-space)*7)!important}.mb-8{margin-bottom:calc(var(--cb-space)*8)!important}.mb-9{margin-bottom:calc(var(--cb-space)*9)!important}.mb-10{margin-bottom:calc(var(--cb-space)*10)!important}.mb-11{margin-bottom:calc(var(--cb-space)*11)!important}.mb-12{margin-bottom:calc(var(--cb-space)*12)!important}
.ms-1{margin-left:calc(var(--cb-space)*1)!important}.ms-2{margin-left:calc(var(--cb-space)*2)!important}.ms-3{margin-left:calc(var(--cb-space)*3)!important}.ms-4{margin-left:calc(var(--cb-space)*4)!important}.ms-5{margin-left:calc(var(--cb-space)*5)!important}.ms-6{margin-left:calc(var(--cb-space)*6)!important}.ms-7{margin-left:calc(var(--cb-space)*7)!important}.ms-8{margin-left:calc(var(--cb-space)*8)!important}.ms-9{margin-left:calc(var(--cb-space)*9)!important}.ms-10{margin-left:calc(var(--cb-space)*10)!important}.ms-11{margin-left:calc(var(--cb-space)*11)!important}.ms-12{margin-left:calc(var(--cb-space)*12)!important}
.me-1{margin-right:calc(var(--cb-space)*1)!important}.me-2{margin-right:calc(var(--cb-space)*2)!important}.me-3{margin-right:calc(var(--cb-space)*3)!important}.me-4{margin-right:calc(var(--cb-space)*4)!important}.me-5{margin-right:calc(var(--cb-space)*5)!important}.me-6{margin-right:calc(var(--cb-space)*6)!important}.me-7{margin-right:calc(var(--cb-space)*7)!important}.me-8{margin-right:calc(var(--cb-space)*8)!important}.me-9{margin-right:calc(var(--cb-space)*9)!important}.me-10{margin-right:calc(var(--cb-space)*10)!important}.me-11{margin-right:calc(var(--cb-space)*11)!important}.me-12{margin-right:calc(var(--cb-space)*12)!important}
.mx-1{margin-left:calc(var(--cb-space)*1)!important;margin-right:calc(var(--cb-space)*1)!important}.mx-2{margin-left:calc(var(--cb-space)*2)!important;margin-right:calc(var(--cb-space)*2)!important}.mx-3{margin-left:calc(var(--cb-space)*3)!important;margin-right:calc(var(--cb-space)*3)!important}.mx-4{margin-left:calc(var(--cb-space)*4)!important;margin-right:calc(var(--cb-space)*4)!important}.mx-5{margin-left:calc(var(--cb-space)*5)!important;margin-right:calc(var(--cb-space)*5)!important}.mx-6{margin-left:calc(var(--cb-space)*6)!important;margin-right:calc(var(--cb-space)*6)!important}.mx-7{margin-left:calc(var(--cb-space)*7)!important;margin-right:calc(var(--cb-space)*7)!important}.mx-8{margin-left:calc(var(--cb-space)*8)!important;margin-right:calc(var(--cb-space)*8)!important}.mx-9{margin-left:calc(var(--cb-space)*9)!important;margin-right:calc(var(--cb-space)*9)!important}.mx-10{margin-left:calc(var(--cb-space)*10)!important;margin-right:calc(var(--cb-space)*10)!important}.mx-11{margin-left:calc(var(--cb-space)*11)!important;margin-right:calc(var(--cb-space)*11)!important}.mx-12{margin-left:calc(var(--cb-space)*12)!important;margin-right:calc(var(--cb-space)*12)!important}
.my-1{margin-top:calc(var(--cb-space)*1)!important;margin-bottom:calc(var(--cb-space)*1)!important}.my-2{margin-top:calc(var(--cb-space)*2)!important;margin-bottom:calc(var(--cb-space)*2)!important}.my-3{margin-top:calc(var(--cb-space)*3)!important;margin-bottom:calc(var(--cb-space)*3)!important}.my-4{margin-top:calc(var(--cb-space)*4)!important;margin-bottom:calc(var(--cb-space)*4)!important}.my-5{margin-top:calc(var(--cb-space)*5)!important;margin-bottom:calc(var(--cb-space)*5)!important}.my-6{margin-top:calc(var(--cb-space)*6)!important;margin-bottom:calc(var(--cb-space)*6)!important}.my-7{margin-top:calc(var(--cb-space)*7)!important;margin-bottom:calc(var(--cb-space)*7)!important}.my-8{margin-top:calc(var(--cb-space)*8)!important;margin-bottom:calc(var(--cb-space)*8)!important}.my-9{margin-top:calc(var(--cb-space)*9)!important;margin-bottom:calc(var(--cb-space)*9)!important}.my-10{margin-top:calc(var(--cb-space)*10)!important;margin-bottom:calc(var(--cb-space)*10)!important}.my-11{margin-top:calc(var(--cb-space)*11)!important;margin-bottom:calc(var(--cb-space)*11)!important}.my-12{margin-top:calc(var(--cb-space)*12)!important;margin-bottom:calc(var(--cb-space)*12)!important}
.p-0{padding:0!important}.pt-0{padding-top:0!important}.pe-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.ps-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}
.pt-1{padding-top:calc(var(--cb-space)*1)!important}.pt-2{padding-top:calc(var(--cb-space)*2)!important}.pt-3{padding-top:calc(var(--cb-space)*3)!important}.pt-4{padding-top:calc(var(--cb-space)*4)!important}.pt-5{padding-top:calc(var(--cb-space)*5)!important}.pt-6{padding-top:calc(var(--cb-space)*6)!important}.pt-7{padding-top:calc(var(--cb-space)*7)!important}.pt-8{padding-top:calc(var(--cb-space)*8)!important}.pt-9{padding-top:calc(var(--cb-space)*9)!important}.pt-10{padding-top:calc(var(--cb-space)*10)!important}.pt-11{padding-top:calc(var(--cb-space)*11)!important}.pt-12{padding-top:calc(var(--cb-space)*12)!important}
.pb-1{padding-bottom:calc(var(--cb-space)*1)!important}.pb-2{padding-bottom:calc(var(--cb-space)*2)!important}.pb-3{padding-bottom:calc(var(--cb-space)*3)!important}.pb-4{padding-bottom:calc(var(--cb-space)*4)!important}.pb-5{padding-bottom:calc(var(--cb-space)*5)!important}.pb-6{padding-bottom:calc(var(--cb-space)*6)!important}.pb-7{padding-bottom:calc(var(--cb-space)*7)!important}.pb-8{padding-bottom:calc(var(--cb-space)*8)!important}.pb-9{padding-bottom:calc(var(--cb-space)*9)!important}.pb-10{padding-bottom:calc(var(--cb-space)*10)!important}.pb-11{padding-bottom:calc(var(--cb-space)*11)!important}.pb-12{padding-bottom:calc(var(--cb-space)*12)!important}
.ps-1{padding-left:calc(var(--cb-space)*1)!important}.ps-2{padding-left:calc(var(--cb-space)*2)!important}.ps-3{padding-left:calc(var(--cb-space)*3)!important}.ps-4{padding-left:calc(var(--cb-space)*4)!important}.ps-5{padding-left:calc(var(--cb-space)*5)!important}.ps-6{padding-left:calc(var(--cb-space)*6)!important}.ps-7{padding-left:calc(var(--cb-space)*7)!important}.ps-8{padding-left:calc(var(--cb-space)*8)!important}.ps-9{padding-left:calc(var(--cb-space)*9)!important}.ps-10{padding-left:calc(var(--cb-space)*10)!important}.ps-11{padding-left:calc(var(--cb-space)*11)!important}.ps-12{padding-left:calc(var(--cb-space)*12)!important}
.pe-1{padding-right:calc(var(--cb-space)*1)!important}.pe-2{padding-right:calc(var(--cb-space)*2)!important}.pe-3{padding-right:calc(var(--cb-space)*3)!important}.pe-4{padding-right:calc(var(--cb-space)*4)!important}.pe-5{padding-right:calc(var(--cb-space)*5)!important}.pe-6{padding-right:calc(var(--cb-space)*6)!important}.pe-7{padding-right:calc(var(--cb-space)*7)!important}.pe-8{padding-right:calc(var(--cb-space)*8)!important}.pe-9{padding-right:calc(var(--cb-space)*9)!important}.pe-10{padding-right:calc(var(--cb-space)*10)!important}.pe-11{padding-right:calc(var(--cb-space)*11)!important}.pe-12{padding-right:calc(var(--cb-space)*12)!important}
.p-1{padding:calc(var(--cb-space)*1)!important}.p-2{padding:calc(var(--cb-space)*2)!important}.p-3{padding:calc(var(--cb-space)*3)!important}.p-4{padding:calc(var(--cb-space)*4)!important}.p-5{padding:calc(var(--cb-space)*5)!important}.p-6{padding:calc(var(--cb-space)*6)!important}.p-7{padding:calc(var(--cb-space)*7)!important}.p-8{padding:calc(var(--cb-space)*8)!important}.p-9{padding:calc(var(--cb-space)*9)!important}.p-10{padding:calc(var(--cb-space)*10)!important}.p-11{padding:calc(var(--cb-space)*11)!important}.p-12{padding:calc(var(--cb-space)*12)!important}
.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-flex{display:flex!important}.d-grid{display:grid!important}
.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}
.gap-1{gap:4px!important}.gap-2{gap:8px!important}.gap-3{gap:12px!important}.gap-4{gap:16px!important}.gap-5{gap:20px!important}.gap-6{gap:24px!important}
.w-100{width:100%!important}.h-100{height:100%!important}.min-h-100vh{min-height:100vh!important}
.rounded{border-radius:12px!important}.rounded-sm{border-radius:8px!important}.rounded-lg{border-radius:18px!important}.border{border:1px solid var(--cb-border)!important}.border-0{border:0!important}
.shadow{box-shadow:var(--cb-shadow)!important}
.text-center{text-align:center!important}.text-right{text-align:right!important}.text-left{text-align:left!important}
.cb-surface-gradient{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--cb-border);border-radius:var(--cb-radius)}
.cb-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(0,255,255,.14);border:1px solid var(--cb-border);font-family:'Orbitron',monospace;font-size:.92rem}
.inline-icon{width:18px;height:18px;vertical-align:middle;margin-right:6px;object-fit:contain}
.icon-24{width:24px;height:24px}.icon-32{width:32px;height:32px}

/* 12. Page presets */
/* Wallet */
.wallet-hero{text-align:center;padding:18px;border:1px solid var(--cb-border);border-radius:16px;background:rgba(0,0,0,.28);margin-bottom:16px}
.wallet-balance{font-family:'Orbitron',monospace;font-size:2.6rem;color:var(--cb-success);text-shadow:0 0 20px rgba(0,255,136,.6)}
.wallet-hero .label{color:var(--cb-accent);margin-bottom:6px;font-weight:800}
.wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.wallet-actions .cb-btn{width:100%}
.wallet-form{border:1px solid var(--cb-border);border-radius:16px;background:rgba(0,0,0,.22);padding:16px}
.wallet-form .title{text-align:center;color:var(--cb-accent);font-weight:800;margin-bottom:10px}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.amount-grid .chip{padding:10px;text-align:center;border:1px solid var(--cb-border);border-radius:10px;background:rgba(0,0,0,.3);cursor:pointer;transition:var(--cb-tr)}
.amount-grid .chip:hover{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}
.amount-grid .chip:active,.amount-grid .chip.pressed{transform:scale(.98)}
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay-method{padding:12px;text-align:center;border:2px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.26);cursor:pointer;transition:var(--cb-tr)}
.pay-method:hover,.pay-method.active{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}
.pay-method:active,.pay-method.pressed{transform:scale(.98);filter:brightness(.96)}
.txn-list .txn{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px;border:1px solid var(--cb-border);background:rgba(0,0,0,.24);border-radius:12px}
.txn .type{font-weight:800}
.txn .amount{font-family:'Orbitron',monospace;font-weight:800}
.txn .date{color:var(--cb-muted);font-size:.9rem}
.txn .status-pending{color:var(--cb-warning)}
.txn .status-completed{color:var(--cb-success)}
.txn .status-failed{color:var(--cb-danger)}
/* Support */
.support-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.support-panel{position:relative;background:rgba(0,0,0,.22);backdrop-filter:blur(8px);border:1px solid var(--cb-border);border-radius:16px;padding:16px}
.support-panel::before{content:"";position:absolute;inset:-2px;border-radius:18px;background:var(--cb-primary);opacity:.18;z-index:-1}
.panel-title{color:var(--cb-accent);font-weight:800;text-align:center;margin-bottom:12px;font-size:1.18rem}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.contact-card{text-align:center;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.30);padding:14px;cursor:pointer;transition:var(--cb-tr)}
.contact-card:hover{border-color:var(--cb-accent);transform:translateY(-2px);box-shadow:var(--cb-shadow)}
.contact-card:active,.contact-card.pressed{transform:translateY(0) scale(.99)}
.contact-card .desc{color:var(--cb-muted);font-size:.92rem}
.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--cb-border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.22)}
.faq-q{padding:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:800}
.faq-a{padding:0 14px 14px;display:none;color:rgba(255,255,255,.9);line-height:1.6}
.faq-item.open .faq-a{display:block}
/* Support Options */
.support-options{background:rgba(255,255,255,.05);border:1px solid var(--cb-border);border-radius:16px;margin-bottom:16px}
.support-options .opt-title{padding:12px 16px;color:var(--cb-accent);font-weight:800;border-bottom:1px solid var(--cb-border)}
.opt-list{list-style:none;padding:0;margin:0}
.opt-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;transition:var(--cb-tr);text-decoration:none;color:inherit}
.opt-item:hover{background:rgba(0,255,255,.08)}
.opt-item:active{transform:scale(.99)}
.opt-left{display:flex;align-items:center;gap:12px}
.opt-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);font-size:18px}
.opt-text{font-weight:700}
.opt-arrow{opacity:.7}
/* Leaderboard */
.lb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.lb-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--cb-border);background:rgba(0,0,0,.28);border-radius:12px}
.lb-name{font-weight:800}
.lb-win{color:var(--cb-success);font-family:'Orbitron',monospace}
/* Home game cards */
.game-card{position:relative;overflow:hidden}
.game-card .status{position:absolute;right:16px;top:16px;padding:6px 10px;border-radius:12px;font-weight:800;font-size:.8rem;color:#fff}
.game-card .status.live{background:var(--cb-success);animation:pulse 2s infinite}
.game-card .status.wait{background:var(--cb-warning)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.75}}
.icon-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.icon-tile{text-align:center;border:1px solid var(--cb-border);background:rgba(0,0,0,.28);border-radius:12px;padding:16px;cursor:pointer;transition:var(--cb-tr)}
.icon-tile:hover{transform:translateY(-2px);border-color:var(--cb-accent);box-shadow:var(--cb-shadow)}
.icon-tile .label{margin-top:8px;color:var(--cb-muted)}
/* Agency (Promotion Center) compact layout */
.agency{padding:16px!important}
.agency .cb-row.justify-between{align-items:flex-start}
.agency .cb-title{font-size:1.6rem;margin:6px 0 8px}
.agency .cb-row-2{gap:12px}
.agency .cb-card{padding:12px;border-radius:14px}
.agency .cb-card-header{margin-bottom:8px}
.agency .cb-card-title{font-size:1rem}
.agency .cb-stat{padding:10px;border-radius:10px}
.agency .cb-stat .value{font-size:1.2rem}
.agency .cb-stat .label{font-size:.86rem;line-height:1.25}
.agency .cb-btn{padding:8px 12px;border-radius:18px}
@media(max-width:420px){
  .agency{padding:14px!important}
  .agency .cb-title{font-size:1.45rem}
  .agency .cb-row-2{gap:10px}
}
/* Toast theme variants */
.toast-success{border-color:rgba(0,255,136,.5)!important;color:var(--cb-success)!important}
.toast-danger{border-color:rgba(255,71,87,.5)!important;color:var(--cb-danger)!important}
.toast-info{border-color:rgba(67,183,255,.5)!important;color:var(--cb-info)!important}
/* Pagination */
.cb-pagination{display:flex;align-items:center;gap:8px}
.cb-page{padding:8px 12px;border-radius:10px;border:1px solid var(--cb-border);background:rgba(0,0,0,.25);color:var(--cb-text);cursor:pointer;transition:var(--cb-tr)}
.cb-page:hover{border-color:var(--cb-accent);box-shadow:var(--cb-glow)}
.cb-page.active{background:rgba(0,255,255,.12);border-color:var(--cb-accent)}

/* Interactive image buttons (global) */
.img-btn{display:inline-block;cursor:pointer}
.img-btn .btn-img{transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;display:block}
.img-btn:hover .btn-img,.img-btn:focus-visible .btn-img{transform:translateY(-1px) scale(1.04);filter:brightness(1.06) saturate(1.05);box-shadow:0 8px 20px rgba(0,255,255,.25),0 2px 8px rgba(0,0,0,.35)}
.img-btn:active .btn-img,.img-btn.pressed .btn-img{transform:scale(.97);filter:brightness(.95);box-shadow:0 2px 10px rgba(0,0,0,.45) inset,0 1px 4px rgba(0,0,0,.3)}

/* Circle icon buttons (e.g., Wingo refresh) */
.icon-btn{transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.icon-btn:hover{transform:translateY(-1px) scale(1.06);filter:brightness(1.08);box-shadow:var(--cb-shadow)}
.icon-btn:active,.icon-btn.pressed{transform:scale(.95);filter:brightness(.95);box-shadow:0 2px 10px rgba(0,0,0,.45) inset}

/* Bottom nav icons */
.m-bottom-link .bn-icon{transition:transform .12s ease,filter .12s ease}
.m-bottom-link:hover .bn-icon{transform:translateY(-1px) scale(1.05);filter:brightness(1.08)}
.m-bottom-link:active .bn-icon,.m-bottom-link.pressed .bn-icon{transform:scale(.96);filter:brightness(.95)}

/* Mode buttons with images */
.modebtn img{transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
.modebtn:hover img{transform:translateY(-2px) scale(1.04);filter:brightness(1.06);box-shadow:0 8px 22px rgba(0,255,255,.25)}
.modebtn:active img,.modebtn.pressed img{transform:scale(.98);filter:brightness(.95)}

/* Container-level hover for mode buttons (overrides inline img transforms safely) */
.modebtn{transition:transform .14s ease, filter .14s ease, box-shadow .14s ease}
.modebtn:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.06);box-shadow:0 6px 18px rgba(0,255,255,.18)}
.modebtn:active,.modebtn.pressed{transform:scale(.98);filter:brightness(.95)}

/* Wingo number balls */
.balls .ball{transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.balls .ball:hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.08) saturate(1.05);box-shadow:0 8px 24px rgba(0,255,255,.25),0 2px 8px rgba(0,0,0,.35)}
.balls .ball:active,.balls .ball.pressed{transform:scale(.96);filter:brightness(.95);box-shadow:0 2px 10px rgba(0,0,0,.45) inset,0 1px 4px rgba(0,0,0,.3)}

/* 13. Extended Theme: Utilities, Components, Presets (Chunk 2) */

/* Color utilities */
.bg-surface{background:var(--cb-surface)!important}
.bg-surface-2{background:var(--cb-surface-2)!important}
.bg-surface-3{background:var(--cb-surface-3)!important}
.bg-accent{background:var(--cb-accent)!important;color:#06161a!important}
.bg-success{background:var(--cb-success)!important;color:#041a10!important}
.bg-danger{background:var(--cb-danger)!important}
.bg-warning{background:var(--cb-warning)!important;color:#1d1404!important}
.bg-info{background:var(--cb-info)!important}
.text-accent{color:var(--cb-accent)!important}
.text-success{color:var(--cb-success)!important}
.text-danger{color:var(--cb-danger)!important}
.text-warning{color:var(--cb-warning)!important}
.text-info{color:var(--cb-info)!important}
.text-muted{color:var(--cb-muted)!important}
.border-accent{border-color:var(--cb-accent)!important}
.border-soft{border-color:var(--cb-border-soft)!important}

/* Gradient helpers */
.gradient-primary{background:var(--cb-primary)!important}
.gradient-success{background:linear-gradient(135deg,#00ff88,#00c06a)!important}
.gradient-warning{background:linear-gradient(135deg,#ffd166,#f6a623)!important}
.gradient-danger{background:linear-gradient(135deg,#ff6b6b,#ee5a52)!important}
.gradient-info{background:linear-gradient(135deg,#43b7ff,#2a9dff)!important}

/* Radius helpers */
.radius-0{border-radius:0!important}
.radius-6{border-radius:6px!important}
.radius-8{border-radius:8px!important}
.radius-10{border-radius:10px!important}
.radius-12{border-radius:12px!important}
.radius-14{border-radius:14px!important}
.radius-16{border-radius:16px!important}
.radius-18{border-radius:18px!important}
.radius-20{border-radius:20px!important}
.radius-24{border-radius:24px!important}
.radius-pill{border-radius:999px!important}

/* Shadow helpers */
.shadow-soft{box-shadow:0 8px 24px rgba(0,255,255,.14)!important}
.shadow-md{box-shadow:0 10px 30px rgba(0,255,255,.2)!important}
.shadow-lg{box-shadow:0 18px 60px rgba(0,255,255,.24)!important}
.glow{box-shadow:var(--cb-glow)!important}

/* Opacity helpers */
.opacity-0{opacity:0!important}
.opacity-10{opacity:.1!important}
.opacity-20{opacity:.2!important}
.opacity-30{opacity:.3!important}
.opacity-40{opacity:.4!important}
.opacity-50{opacity:.5!important}
.opacity-60{opacity:.6!important}
.opacity-70{opacity:.7!important}
.opacity-80{opacity:.8!important}
.opacity-90{opacity:.9!important}
.opacity-100{opacity:1!important}

/* Z-index helpers */
.z-0{z-index:0!important}
.z-1{z-index:1!important}
.z-10{z-index:10!important}
.z-50{z-index:50!important}
.z-100{z-index:100!important}
.z-500{z-index:500!important}
.z-1000{z-index:1000!important}

/* Transform & transition helpers */
.transition{transition:all var(--cb-tr)!important}
.scale-95{transform:scale(.95)!important}
.scale-100{transform:scale(1)!important}
.scale-105{transform:scale(1.05)!important}
.rotate-0{transform:rotate(0)!important}
.rotate-1{transform:rotate(1deg)!important}
.translate-y-1{transform:translateY(1px)!important}
.translate-y--1{transform:translateY(-1px)!important}

/* Flexbox helpers */
.justify-start{justify-content:flex-start!important}
.justify-end{justify-content:flex-end!important}
.justify-around{justify-content:space-around!important}
.justify-evenly{justify-content:space-evenly!important}
.items-start{align-items:flex-start!important}
.items-end{align-items:flex-end!important}
.items-baseline{align-items:baseline!important}
.content-center{align-content:center!important}
.self-start{align-self:flex-start!important}
.self-end{align-self:flex-end!important}
.order-0{order:0!important}
.order-1{order:1!important}
.order-2{order:2!important}
.order-3{order:3!important}

/* Grid helpers */
.grid{display:grid!important}
.grid-cols-1{grid-template-columns:repeat(1,1fr)!important}
.grid-cols-2{grid-template-columns:repeat(2,1fr)!important}
.grid-cols-3{grid-template-columns:repeat(3,1fr)!important}
.grid-cols-4{grid-template-columns:repeat(4,1fr)!important}
.grid-cols-5{grid-template-columns:repeat(5,1fr)!important}
.grid-cols-6{grid-template-columns:repeat(6,1fr)!important}
.gap-0{gap:0!important}
.gap-8{gap:8px!important}
.gap-12{gap:12px!important}
.gap-16{gap:16px!important}
.gap-20{gap:20px!important}
.gap-24{gap:24px!important}
.col-span-2{grid-column:span 2!important}
.col-span-3{grid-column:span 3!important}
.row-span-2{grid-row:span 2!important}

/* Extended spacing 13–24 */
.mt-13{margin-top:calc(var(--cb-space)*13)!important}
.mt-14{margin-top:calc(var(--cb-space)*14)!important}
.mt-15{margin-top:calc(var(--cb-space)*15)!important}
.mt-16{margin-top:calc(var(--cb-space)*16)!important}
.mt-18{margin-top:calc(var(--cb-space)*18)!important}
.mt-20{margin-top:calc(var(--cb-space)*20)!important}
.mb-13{margin-bottom:calc(var(--cb-space)*13)!important}
.mb-14{margin-bottom:calc(var(--cb-space)*14)!important}
.mb-15{margin-bottom:calc(var(--cb-space)*15)!important}
.mb-16{margin-bottom:calc(var(--cb-space)*16)!important}
.mx-14{margin-left:calc(var(--cb-space)*14)!important;margin-right:calc(var(--cb-space)*14)!important}
.mx-16{margin-left:calc(var(--cb-space)*16)!important;margin-right:calc(var(--cb-space)*16)!important}
.px-14{padding-left:calc(var(--cb-space)*14)!important;padding-right:calc(var(--cb-space)*14)!important}
.px-16{padding-left:calc(var(--cb-space)*16)!important;padding-right:calc(var(--cb-space)*16)!important}
.py-14{padding-top:calc(var(--cb-space)*14)!important;padding-bottom:calc(var(--cb-space)*14)!important}
.py-16{padding-top:calc(var(--cb-space)*16)!important;padding-bottom:calc(var(--cb-space)*16)!important}

/* Sizes */
.w-25{width:25%!important}
.w-33{width:33.3333%!important}
.w-50{width:50%!important}
.w-66{width:66.6667%!important}
.w-75{width:75%!important}
.w-auto{width:auto!important}
.h-25{height:25%!important}
.h-50{height:50%!important}
.h-75{height:75%!important}
.min-h-50vh{min-height:50vh!important}
.min-h-60vh{min-height:60vh!important}
.min-h-80vh{min-height:80vh!important}

/* Breadcrumbs */
.cb-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--cb-muted);font-size:.95rem}
.cb-breadcrumb a{color:var(--cb-text);text-decoration:none;padding:6px 10px;border-radius:10px;border:1px solid transparent}
.cb-breadcrumb a:hover{border-color:var(--cb-accent)}
.cb-breadcrumb .sep{opacity:.6}

/* Mobile visibility helpers */
.hide-on-mobile{display:none!important}
.show-on-mobile{display:block!important}

/* Mobile Home Layout (phones) */
.m-home{display:block}
.m-section{border:1px solid var(--cb-border);border-radius:16px;background:rgba(255,255,255,.06);padding:12px;margin-bottom:12px}
.m-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-quick-card{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid var(--cb-border);text-decoration:none;color:var(--cb-text)}
.m-quick-card .icon{width:32px;height:32px}
.m-quick-card .title{font-weight:800}
.m-tip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid var(--cb-border)}
.m-tip .pill{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--cb-border);font-weight:800}
.m-wallet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--cb-border)}
.m-wallet .balance{font-family:'Orbitron',monospace;font-weight:900;color:var(--cb-success)}
.m-wallet .actions{display:flex;gap:8px}
.m-features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.m-feature{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--cb-border);background:rgba(0,0,0,.22);border-radius:12px;text-decoration:none;color:var(--cb-text)}
.m-feature img{width:28px;height:28px}
.m-feature .label{font-size:.86rem}

/* Mobile Bottom Navigation */
.m-bottom-nav{position:fixed;left:0;right:0;bottom:0;background:transparent!important;backdrop-filter:blur(10px);border-top:none!important;z-index:1200}
.m-bottom-inner{display:grid;grid-template-columns:repeat(5,1fr);max-width:700px;margin:0 auto}
.m-bottom-link{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;text-decoration:none;color:var(--cb-text);font-size:.8rem}
.m-bottom-link .bn-icon{width:22px;height:22px}
.m-bottom-link.active{color:var(--cb-accent)}

/* Global responsive adjustments */
@media(max-width:1024px){
  .cb-row-4{grid-template-columns:repeat(3,1fr)}
  .cb-row-3{grid-template-columns:repeat(2,1fr)}
  /* Tablet: make home games grid two columns */
  .chromabet-games-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:768px){
  .cb-container,.cb-container-lg{padding-inline:12px}
  .cb-row-4,.cb-row-3,.cb-row-2{grid-template-columns:1fr}
  /* Hide desktop nav variants on phones */
  .cb-nav,.cb-userbar,.chromabet-nav,.chromabet-user-panel,.nav-links,.chromabet-nav-links{display:none!important}
  .cb-header-inner{justify-content:space-between}
  .chromabet-header{padding:10px 12px!important}
  .cb-logo,.chromabet-logo{font-size:1.4rem!important}
  /* Ensure content clears fixed headers and has compact padding */
  .chromabet-main{margin-top:88px!important;padding:12px!important}
  /* Collapse common grids */
  .chromabet-games-grid{grid-template-columns:1fr!important}
  .support-grid,.contact-grid,.lb-grid,.promo-grid{grid-template-columns:1fr!important}
  /* Tables become scrollable on small screens */
  .cb-table{display:block;overflow:auto;white-space:nowrap}
}

/* Force mobile-first layout across all widths */
.cb-nav,.nav-links,.chromabet-nav-links{display:none!important}
/* Hide full desktop headers entirely */
.chromabet-header,.cb-header{display:none!important}
.cb-logo,.chromabet-logo{font-size:1.4rem!important}
/* Center main content column to ~430px like mobile */
.chromabet-main,.cb-container,.cb-container-lg,.container{max-width:none!important;width:min(430px,100vw)!important;margin-left:auto;margin-right:auto}
.wallet-container,.game-container{grid-template-columns:1fr!important;max-width:430px!important;margin-left:auto;margin-right:auto}
/* Space under the slim mobile header */
.chromabet-main{margin-top:88px!important}
/* Standardize banner height to mobile */
.chromabet-carousel .carousel-slide img{height:160px!important;object-fit:cover}

/* Reinstate a slim mobile header bar with side borders (overrides the hide rule above) */
/* Homepage header fixed to viewport; compact bar */
.chromabet-header{display:block!important;position:fixed!important;top:0;left:0;right:0;z-index:1100;height:68px;background:transparent!important;border-bottom:none!important;padding:0!important}
/* Other pages: keep sticky behavior; compact bar */
.cb-header{display:block!important;position:sticky;top:0;z-index:1100;background:none!important;backdrop-filter:none!important;border-bottom:none!important;overflow:visible}
.cb-header-inner,.chromabet-nav,.header-content{max-width:none!important;width:min(430px,100vw)!important;box-sizing:border-box;margin:0 auto;border-left:none;border-right:none;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background:transparent!important;backdrop-filter:none!important;overflow:visible;border-bottom:none!important}
.cb-header-inner{padding:0!important;min-height:68px;display:block!important;align-items:center}
.chromabet-nav{min-height:68px;display:flex!important;align-items:center;justify-content:space-between;padding:10px 12px!important;background:rgba(10,10,26,.92)!important;border-bottom:1px solid var(--cb-border)!important;border-bottom-left-radius:12px;border-bottom-right-radius:12px}

/* Header bar style matches footer/bottom nav inner */
.cb-header{position:sticky;top:0}
.cb-header::before{content:none!important}
.cb-header::after{content:none!important}
.cb-header-inner{position:relative;z-index:1}
.cb-header-inner::before{content:none!important}

/* Footer framed like mobile panel */
.footer-mini{max-width:none;margin:0 auto;width:min(430px,100vw);box-sizing:border-box;padding:8px 12px;border-left:none;border-right:none;border-top:1px solid var(--cb-border);background:rgba(10,10,26,.88);color:var(--cb-muted);overflow:hidden;border-bottom-left-radius:12px;border-bottom-right-radius:12px}

/* Bottom nav: center inner with side borders and rounded top */
.m-bottom-inner{max-width:none!important;width:min(430px,100vw)!important;box-sizing:border-box;margin:0 auto;border-left:none;border-right:none;border-top:1px solid var(--cb-border);background:rgba(10,10,26,.92);border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden}

/* Ensure only brand + user actions are visible (hide link groups) */
.chromabet-nav{display:flex!important;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cb-nav{display:none!important}
.nav-links,.chromabet-nav-links{display:none!important}
.cb-userbar,.chromabet-user-panel{display:none!important}
.cb-nav a,.nav-links a,.chromabet-nav-link,.chromabet-nav-links a{padding:6px 10px}
.header-content{border-bottom:none}
.cb-header-inner,.header-content{position:relative;border-radius:0}
.cb-header-inner::after,.header-content::after{content:none!important}
/* Remove any banner artwork from header (image will be on nav) */
.chromabet-header{background:none!important}
/* Ensure the header is flush to the very top: no extra shading or top strip */
.chromabet-header{overflow:visible}
.chromabet-header{height:68px;min-height:68px}
.chromabet-header::before{content:"";display:none}
.chromabet-header > *{position:relative;z-index:1}
.chromabet-header .chromabet-nav-links,.chromabet-header .chromabet-user-panel{display:none!important}
@media (max-width: 768px){
  .chromabet-header{height:68px;min-height:68px}
  .cb-header{min-height:68px;height:auto}
}
/* Ensure any page adding home-header-bg image does not leak */
.home-header-bg{background:none!important}

/* Vertical frame lines across the full page to unify header, content, footer, and bottom nav */
body::before{content:"";position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(430px,100vw);border-left:1px solid var(--cb-border-soft);border-right:1px solid var(--cb-border-soft);pointer-events:none;z-index:900;border-radius:0}
/* Top shading strip to blend viewport edge with header on all pages */
/* Removed global top shading; handled locally by header topcap */
body::after{content:none}
/* Use only the global frame for side borders */
.cb-header-inner,.header-content,.footer-mini,.m-bottom-inner{border-left:none!important;border-right:none!important}

/* List group */
.cb-list-group{border:1px solid var(--cb-border);border-radius:12px;overflow:hidden}
.cb-list-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(0,0,0,.25)}
.cb-list-row+.cb-list-row{border-top:1px solid var(--cb-border-soft)}
.cb-list-row:hover{background:rgba(255,255,255,.06)}

/* Tooltips */
.cb-tooltip{position:relative}
.cb-tooltip:hover .cb-tooltip-content{opacity:1;visibility:visible;transform:translateY(-4px)}
.cb-tooltip-content{position:absolute;left:50%;transform:translate(-50%,0);bottom:calc(100% + 8px);background:rgba(10,10,26,.95);border:1px solid var(--cb-border);padding:8px 10px;border-radius:10px;opacity:0;visibility:hidden;transition:var(--cb-tr);white-space:nowrap;z-index:100}

/* Drawer / Offcanvas */
.cb-drawer{position:fixed;top:0;right:-420px;width:min(420px,92vw);height:100vh;background:rgba(10,10,26,.98);border-left:1px solid var(--cb-border);box-shadow:var(--cb-shadow);transition:right var(--cb-tr);z-index:1200;display:flex;flex-direction:column}
.cb-drawer.open{right:0}
.cb-drawer-header{padding:14px;border-bottom:1px solid var(--cb-border);display:flex;align-items:center;justify-content:space-between}
.cb-drawer-body{padding:14px;overflow:auto}

/* Skeleton & Shimmer */
.skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.08);border-radius:10px}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);animation:skeleton 1.6s infinite}
@keyframes skeleton{100%{transform:translateX(100%)}}

/* Stepper */
.cb-steps{display:flex;gap:16px;align-items:center}
.cb-step{display:flex;align-items:center;gap:8px}
.cb-step .num{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--cb-border);background:rgba(255,255,255,.06);font-weight:800}
.cb-step.active .num{border-color:var(--cb-accent);box-shadow:0 0 0 3px rgba(0,255,255,.18)}

/* Table variants */
.cb-table.striped tbody tr:nth-child(2n){background:rgba(255,255,255,.04)}
.cb-table.compact thead th,.cb-table.compact tbody td{padding:8px}
.cb-table.hover tbody tr{transition:background var(--cb-tr)}
.cb-table.hover tbody tr:hover{background:rgba(255,255,255,.06)}
.table-responsive{overflow-x:auto;border-radius:12px;border:1px solid var(--cb-border)}

/* Forms: segmented controls & tags */
.cb-segment{display:inline-flex;border:1px solid var(--cb-border);border-radius:12px;overflow:hidden}
.cb-segment .seg{padding:8px 12px;cursor:pointer;background:rgba(0,0,0,.25)}
.cb-segment .seg.active{background:rgba(0,255,255,.12);border-left:1px solid var(--cb-accent)}
.cb-tags{display:flex;flex-wrap:wrap;gap:8px}
.cb-tag{padding:6px 10px;border-radius:999px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}

/* Notifications center */
.cb-notice{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:12px;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22)}
.cb-notice .title{font-weight:800}
.cb-notice .time{color:var(--cb-muted);font-size:.86rem}

/* Timeline Advanced */
.cb-tl-adv{position:relative;padding-left:26px}
.cb-tl-adv::before{content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.16)}
.cb-tl-adv .item{position:relative;padding:10px 0 10px 10px}
.cb-tl-adv .item::before{content:"";position:absolute;left:5px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--cb-accent);box-shadow:0 0 0 3px rgba(0,255,255,.16)}

/* Promo banners */
.cb-banner{position:relative;overflow:hidden;border:1px solid var(--cb-border);border-radius:16px;background:rgba(255,255,255,.06)}
.cb-banner .content{position:relative;padding:18px}
.cb-banner .shine{position:absolute;inset:0;background:linear-gradient(45deg,transparent,rgba(255,255,255,.06),transparent);transform:translateX(-100%);animation:bannerShine 2.6s infinite}
@keyframes bannerShine{100%{transform:translateX(100%)}}

/* VIP badges */
.vip-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}
.vip-badge .star{color:#ffd700}
.vip-badge.vip1{border-color:#8ef}
.vip-badge.vip5{border-color:#c8f}
.vip-badge.vip10{border-color:#f88}

/* Home header background alignment (no image now) */
.home-header-bg{background:none!important}

/* Wallet specific additions */
.wallet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wallet-stat{padding:12px;text-align:center;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22)}
.wallet-stat .val{font-family:'Orbitron',monospace;color:var(--cb-accent);font-size:1.2rem}

/* Support ticket list */
.ticket-list{display:grid;gap:10px}
.ticket{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22)}
.ticket .id{font-family:'Orbitron',monospace;color:var(--cb-info)}
.ticket .status-open{color:var(--cb-warning)}
.ticket .status-resolved{color:var(--cb-success)}

/* Activity (Daily Sign-in) */
.signin-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.signin-day{padding:12px;text-align:center;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22)}
.signin-day.active{border-color:var(--cb-success);box-shadow:0 0 0 3px rgba(0,255,136,.18)}

/* Promotion pages */
.promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.promo-card{border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.22);padding:14px;display:grid;gap:8px}
.promo-card .amount{font-family:'Orbitron',monospace;color:var(--cb-success)}

/* Settings & Language */
.setting-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--cb-border);background:rgba(0,0,0,.22);padding:12px;border-radius:12px}
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lang-tile{text-align:center;border:1px solid var(--cb-border);border-radius:12px;padding:12px;background:rgba(0,0,0,.22);cursor:pointer}
.lang-tile.active{border-color:var(--cb-accent)}

/* Customer service & messages */
.cs-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cs-tile{border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.26);padding:14px;text-align:center;cursor:pointer}
.msg-list{display:grid;gap:10px}
.msg-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:12px;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22)}
.msg-item .avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--cb-border)}

/* Records & filters */
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22);padding:10px}
.filter-bar .field{min-width:180px}

/* Bottom nav (mobile) */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:rgba(10,10,26,.92);border-top:1px solid var(--cb-border);backdrop-filter:blur(10px);z-index:900}
.bottom-nav .inner{max-width:1200px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;justify-content:space-around}
.bottom-nav a{color:var(--cb-text);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.85rem}
.bottom-nav a.active{color:var(--cb-accent)}


/* 14.Theme:  (Typography, Animations, Layout helpers, Components) */

/* Typography scale */
.fs-10{font-size:10px!important}
.fs-11{font-size:11px!important}
.fs-12{font-size:12px!important}
.fs-13{font-size:13px!important}
.fs-14{font-size:14px!important}
.fs-15{font-size:15px!important}
.fs-16{font-size:16px!important}
.fs-18{font-size:18px!important}
.fs-20{font-size:20px!important}
.fs-22{font-size:22px!important}
.fs-24{font-size:24px!important}
.fs-28{font-size:28px!important}
.fs-32{font-size:32px!important}
.fs-36{font-size:36px!important}
.fs-40{font-size:40px!important}
.fs-48{font-size:48px!important}

/* Font weights */
.fw-300{font-weight:300!important}
.fw-400{font-weight:400!important}
.fw-500{font-weight:500!important}
.fw-600{font-weight:600!important}
.fw-700{font-weight:700!important}
.fw-800{font-weight:800!important}
.fw-900{font-weight:900!important}

/* Letter spacing */
.ls-0{letter-spacing:0!important}
.ls-1{letter-spacing:.02em!important}
.ls-2{letter-spacing:.04em!important}
.ls-3{letter-spacing:.06em!important}
.ls-4{letter-spacing:.08em!important}
.ls-5{letter-spacing:.1em!important}

/* Line height */
.lh-1{line-height:1!important}
.lh-110{line-height:1.1!important}
.lh-120{line-height:1.2!important}
.lh-140{line-height:1.4!important}
.lh-160{line-height:1.6!important}
.lh-180{line-height:1.8!important}

/* Border width */
.border-0{border-width:0!important}
.border-1{border-width:1px!important;border-style:solid;border-color:var(--cb-border)!important}
.border-2{border-width:2px!important;border-style:solid;border-color:var(--cb-border)!important}
.border-3{border-width:3px!important;border-style:solid;border-color:var(--cb-border)!important}
.border-4{border-width:4px!important;border-style:solid;border-color:var(--cb-border)!important}

/* Outline helpers */
.outline-none{outline:none!important}
.outline-accent{outline:2px solid var(--cb-accent)!important}
.ring{box-shadow:0 0 0 3px rgba(0,255,255,.18)!important}
.ring-success{box-shadow:0 0 0 3px rgba(0,255,136,.18)!important}
.ring-danger{box-shadow:0 0 0 3px rgba(255,71,87,.18)!important}

/* Positioning */
.pos-relative{position:relative!important}
.pos-absolute{position:absolute!important}
.pos-fixed{position:fixed!important}
.top-0{top:0!important}
.right-0{right:0!important}
.bottom-0{bottom:0!important}
.left-0{left:0!important}
.inset-0{top:0!important;right:0!important;bottom:0!important;left:0!important}

/* Overflow & cursor */
.overflow-hidden{overflow:hidden!important}
.overflow-auto{overflow:auto!important}
.overflow-x-auto{overflow-x:auto!important}
.overflow-y-auto{overflow-y:auto!important}
.cursor-pointer{cursor:pointer!important}
.cursor-default{cursor:default!important}

/* 12-column grid helpers */
.grid-cols-7{grid-template-columns:repeat(7,1fr)!important}
.grid-cols-8{grid-template-columns:repeat(8,1fr)!important}
.grid-cols-9{grid-template-columns:repeat(9,1fr)!important}
.grid-cols-10{grid-template-columns:repeat(10,1fr)!important}
.grid-cols-11{grid-template-columns:repeat(11,1fr)!important}
.grid-cols-12{grid-template-columns:repeat(12,1fr)!important}
.col-span-4{grid-column:span 4!important}
.col-span-5{grid-column:span 5!important}
.col-span-6{grid-column:span 6!important}
.col-span-7{grid-column:span 7!important}
.col-span-8{grid-column:span 8!important}
.col-span-9{grid-column:span 9!important}
.col-span-10{grid-column:span 10!important}
.col-span-11{grid-column:span 11!important}
.col-span-12{grid-column:span 12!important}

/* Gap extensions */
.gap-28{gap:28px!important}
.gap-32{gap:32px!important}
.gap-40{gap:40px!important}
.gap-48{gap:48px!important}
.gap-56{gap:56px!important}
.gap-64{gap:64px!important}

/* Spacing 21–32 (margins & paddings) */
.mt-21{margin-top:calc(var(--cb-space)*21)!important}
.mt-24{margin-top:calc(var(--cb-space)*24)!important}
.mt-28{margin-top:calc(var(--cb-space)*28)!important}
.mt-32{margin-top:calc(var(--cb-space)*32)!important}
.mb-21{margin-bottom:calc(var(--cb-space)*21)!important}
.mb-24{margin-bottom:calc(var(--cb-space)*24)!important}
.mb-28{margin-bottom:calc(var(--cb-space)*28)!important}
.mb-32{margin-bottom:calc(var(--cb-space)*32)!important}
.pt-21{padding-top:calc(var(--cb-space)*21)!important}
.pt-24{padding-top:calc(var(--cb-space)*24)!important}
.pt-28{padding-top:calc(var(--cb-space)*28)!important}
.pt-32{padding-top:calc(var(--cb-space)*32)!important}
.pb-21{padding-bottom:calc(var(--cb-space)*21)!important}
.pb-24{padding-bottom:calc(var(--cb-space)*24)!important}
.pb-28{padding-bottom:calc(var(--cb-space)*28)!important}
.pb-32{padding-bottom:calc(var(--cb-space)*32)!important}
.px-21{padding-left:calc(var(--cb-space)*21)!important;padding-right:calc(var(--cb-space)*21)!important}
.px-24{padding-left:calc(var(--cb-space)*24)!important;padding-right:calc(var(--cb-space)*24)!important}
.px-28{padding-left:calc(var(--cb-space)*28)!important;padding-right:calc(var(--cb-space)*28)!important}
.px-32{padding-left:calc(var(--cb-space)*32)!important;padding-right:calc(var(--cb-space)*32)!important}
.py-21{padding-top:calc(var(--cb-space)*21)!important;padding-bottom:calc(var(--cb-space)*21)!important}
.py-24{padding-top:calc(var(--cb-space)*24)!important;padding-bottom:calc(var(--cb-space)*24)!important}
.py-28{padding-top:calc(var(--cb-space)*28)!important;padding-bottom:calc(var(--cb-space)*28)!important}
.py-32{padding-top:calc(var(--cb-space)*32)!important;padding-bottom:calc(var(--cb-space)*32)!important}

/* Animations */
@keyframes cbSpin{to{transform:rotate(360deg)}}
@keyframes cbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cbPing{0%{transform:scale(1);opacity:.9}75%,100%{transform:scale(1.5);opacity:0}}
@keyframes cbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.anim-spin{animation:cbSpin 1s linear infinite}
.anim-bounce{animation:cbBounce 1.4s ease-in-out infinite}
.anim-ping{position:relative}
.anim-ping::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--cb-accent);animation:cbPing 1.4s ease-out infinite}
.anim-float{animation:cbFloat 3s ease-in-out infinite}

/* Avatars */
.avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--cb-border);background:rgba(0,0,0,.2);display:inline-flex;align-items:center;justify-content:center}
.avatar-sm{width:32px;height:32px}
.avatar-lg{width:64px;height:64px}
.avatar-group{display:flex;align-items:center}
.avatar-group .avatar{margin-left:-8px;border:2px solid rgba(10,10,26,.92)}

/* Alerts */
.cb-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--cb-border);background:rgba(0,0,0,.28)}
.cb-alert .icon{width:20px;height:20px}
.cb-alert.success{border-color:rgba(0,255,136,.5);background:rgba(0,255,136,.08)}
.cb-alert.danger{border-color:rgba(255,71,87,.5);background:rgba(255,71,87,.08)}
.cb-alert.warning{border-color:rgba(255,167,38,.5);background:rgba(255,167,38,.08)}
.cb-alert.info{border-color:rgba(67,183,255,.5);background:rgba(67,183,255,.08)}

/* Tabs underline style */
.cb-tabs.underline{border-bottom:1px solid var(--cb-border);gap:16px}
.cb-tabs.underline .cb-tab{border:0;border-radius:0;padding:10px 4px;position:relative}
.cb-tabs.underline .cb-tab.active{background:transparent}
.cb-tabs.underline .cb-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cb-accent)}

/* Button variants */
.cb-btn-ghost{background:transparent;border:1px dashed var(--cb-border);color:var(--cb-text)}
.cb-btn-ghost:hover{border-style:solid;box-shadow:var(--cb-glow)}

/* Drawer (left) */
.cb-drawer.left{right:auto;left:-420px;border-left:0;border-right:1px solid var(--cb-border)}
.cb-drawer.left.open{left:0}

/* Bottom sheet modal */
.cb-sheet{position:fixed;left:0;right:0;bottom:-100%;background:rgba(10,10,26,.98);border-top:1px solid var(--cb-border);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.4);transition:bottom var(--cb-tr);z-index:1300}
.cb-sheet.open{bottom:0}
.cb-sheet .handle{width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);margin:8px auto}

/* Tooltips positions */
.tooltip-top .cb-tooltip-content{bottom:calc(100% + 8px);top:auto;left:50%;transform:translateX(-50%)}
.tooltip-bottom .cb-tooltip-content{top:calc(100% + 8px);bottom:auto;left:50%;transform:translateX(-50%)}
.tooltip-left .cb-tooltip-content{right:calc(100% + 8px);left:auto;top:50%;transform:translateY(-50%)}
.tooltip-right .cb-tooltip-content{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}

/* Collapsible */
.cb-collapse{border:1px solid var(--cb-border);border-radius:12px;overflow:hidden}
.cb-collapse .head{padding:12px 14px;background:rgba(255,255,255,.06);cursor:pointer}
.cb-collapse .body{padding:12px 14px;display:none;background:rgba(0,0,0,.22)}
.cb-collapse.open .body{display:block}

/* Radial progress using conic-gradient */
.cb-radial{--val:65;--size:80px;--thickness:10px;width:var(--size);height:var(--size);border-radius:50%;background:
  conic-gradient(var(--cb-accent) calc(var(--val)*1%),rgba(255,255,255,.12) 0);
  display:grid;place-items:center;position:relative}
.cb-radial::before{content:"";position:absolute;inset:calc(var(--thickness));background:rgba(0,0,0,.3);border-radius:50%}
.cb-radial .val{position:relative;font-family:'Orbitron',monospace}

/* Page Presets: All Games Grid */
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.game-tile{position:relative;border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.22);padding:12px;overflow:hidden;transition:var(--cb-tr)}
.game-tile:hover{transform:translateY(-2px);border-color:var(--cb-accent);box-shadow:var(--cb-shadow)}
.game-tile .name{font-weight:800}
.game-tile .meta{color:var(--cb-muted);font-size:.9rem}

/* Page Presets: Invitation & Commission */
.invite-card{border:1px solid var(--cb-border);border-radius:16px;background:rgba(0,0,0,.22);padding:16px}
.invite-link{display:flex;gap:10px;align-items:center;border:1px dashed var(--cb-border);padding:10px;border-radius:12px}
.commission-table .pos{font-family:'Orbitron',monospace;color:var(--cb-accent)}

/* Page Presets: TRX & Wingo shortcuts */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-action{border:1px solid var(--cb-border);border-radius:12px;padding:12px;text-align:center;background:rgba(0,0,0,.2);cursor:pointer}
.quick-action:hover{border-color:var(--cb-accent)}

/* Misc helpers */
.max-w-320{max-width:320px!important}
.max-w-480{max-width:480px!important}
.max-w-640{max-width:640px!important}
.max-w-800{max-width:800px!important}
.max-w-960{max-width:960px!important}
.max-w-1200{max-width:1200px!important}

/* Print minimal */
@media print{
  body{background:#000!important;color:#fff!important}
  .cb-bg,.bottom-nav{display:none!important}
  .cb-card,.cb-table{box-shadow:none!important}
}


/* 15. Theme:  (Accessibility, Advanced Components, Page Skins) */

/* Accessibility helpers */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.focus-outline:focus{outline:2px solid var(--cb-accent)!important;outline-offset:2px}
.no-select{-webkit-user-select:none;user-select:none}
.pointer-events-none{pointer-events:none!important}
.pointer-events-auto{pointer-events:auto!important}

/* Text utilities */
.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-break{word-break:break-word}
.word-break-all{word-break:break-all}
.text-uppercase{text-transform:uppercase!important}
.text-lowercase{text-transform:lowercase!important}
.text-capitalize{text-transform:capitalize!important}

/* Backdrop blur helpers */
.blur-4{backdrop-filter:blur(4px)}
.blur-8{backdrop-filter:blur(8px)}
.blur-12{backdrop-filter:blur(12px)}

/* Negative margins (compact layout tweaks) */
.-mt-1{margin-top:calc(var(--cb-space)*-1)!important}
.-mt-2{margin-top:calc(var(--cb-space)*-2)!important}
.-mb-1{margin-bottom:calc(var(--cb-space)*-1)!important}
.-mb-2{margin-bottom:calc(var(--cb-space)*-2)!important}
.-mx-1{margin-left:calc(var(--cb-space)*-1)!important;margin-right:calc(var(--cb-space)*-1)!important}
.-mx-2{margin-left:calc(var(--cb-space)*-2)!important;margin-right:calc(var(--cb-space)*-2)!important}

/* Border color variants */
.border-success{border-color:rgba(0,255,136,.5)!important}
.border-danger{border-color:rgba(255,71,87,.5)!important}
.border-warning{border-color:rgba(255,167,38,.5)!important}
.border-info{border-color:rgba(67,183,255,.5)!important}

/* Toolbar */
.cb-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22);padding:10px}
.cb-toolbar .cb-search{display:flex;align-items:center;gap:8px;border:1px solid var(--cb-border);border-radius:12px;padding:6px 10px;background:rgba(255,255,255,.06)}
.cb-toolbar .cb-search input{border:0;background:transparent;outline:none;color:var(--cb-text)}

/* Tabs: pills style */
.cb-tabs.pills{gap:8px;border-bottom:0}
.cb-tabs.pills .cb-tab{border-radius:999px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}
.cb-tabs.pills .cb-tab.active{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}

/* Breadcrumbs: filled */
.cb-breadcrumb.filled a{background:rgba(255,255,255,.06);border:1px solid var(--cb-border)}
.cb-breadcrumb.filled a.active{border-color:var(--cb-accent)}

/* Banners */
.cb-banner.success{border-color:rgba(0,255,136,.45);background:rgba(0,255,136,.12)}
.cb-banner.warning{border-color:rgba(255,167,38,.45);background:rgba(255,167,38,.12)}
.cb-banner.info{border-color:rgba(67,183,255,.45);background:rgba(67,183,255,.12)}

/* Loader overlay */
.cb-loader{position:fixed;inset:0;background:rgba(6,10,20,.62);display:none;align-items:center;justify-content:center;z-index:1500}
.cb-loader.show{display:flex}
.cb-loader .spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.18);border-top-color:var(--cb-accent);border-radius:50%;animation:cbSpin 1s linear infinite}

/* Tooltip arrow */
.cb-tooltip-content::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;border-width:6px;border-style:solid;border-color:rgba(10,10,26,.95) transparent transparent transparent}
.tooltip-bottom .cb-tooltip-content::after{top:-6px;bottom:auto;border-color:transparent transparent rgba(10,10,26,.95) transparent}
.tooltip-left .cb-tooltip-content::after{left:auto;right:-6px;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent rgba(10,10,26,.95)}
.tooltip-right .cb-tooltip-content::after{left:-6px;top:50%;transform:translateY(-50%);border-color:transparent rgba(10,10,26,.95) transparent transparent}

/* Table sortable */
.sortable thead th{cursor:pointer;position:relative}
.sortable thead th::after{content:"\25B4\25BE";position:absolute;right:8px;opacity:.4;font-size:.8em}
.sortable thead th.sorted-asc::after{content:"\25B4"}
.sortable thead th.sorted-desc::after{content:"\25BE"}

/* List group with icons */
.cb-list-row .icon{width:18px;height:18px;margin-right:8px;opacity:.85}

/* Wallet Tabs (Recharge/Withdraw/History) */
.wallet-tabs{display:flex;gap:10px;margin:12px 0;border-bottom:1px solid var(--cb-border)}
.wallet-tab{padding:10px 12px;border:1px solid transparent;border-radius:12px 12px 0 0;cursor:pointer;font-weight:800}
.wallet-tab.active{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}

/* Payment method skins (uses existing icons) */
.pay-skin{display:flex;align-items:center;gap:10px;border:2px solid var(--cb-border);border-radius:12px;padding:10px;background:rgba(0,0,0,.26);cursor:pointer}
.pay-skin:hover,.pay-skin.active{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}
.pay-skin .logo{width:28px;height:28px;background-size:contain;background-repeat:no-repeat;background-position:center}
.logo-upi{background-image:url('../assets/images/ui/payment_upi.png')}
.logo-gpay{background-image:url('../assets/images/ui/payment_gpay.png')}
.logo-phonepe{background-image:url('../assets/images/ui/payment_phonepe.png')}

/* Chat bubbles (messages/customer_service) */
.chat{display:grid;gap:10px}
.bubble{max-width:78%;padding:10px 12px;border-radius:16px;border:1px solid var(--cb-border);background:rgba(0,0,0,.22)}
.bubble.me{margin-left:auto;background:rgba(0,255,255,.12);border-color:var(--cb-accent)}
.bubble .meta{font-size:.8rem;color:var(--cb-muted);margin-top:6px}

/* VIP progress */
.vip-progress{height:12px;border:1px solid var(--cb-border);border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.vip-progress .bar{height:100%;background:linear-gradient(90deg,#8ef,#c8f,#f88);width:0}

/* Activity stamps */
.signin-stamp{height:64px;border-radius:12px;border:1px solid var(--cb-border);background:rgba(0,0,0,.22) url('../assets/images/ui/signin_day7_active_bg.png') center/cover no-repeat}

/* Promotion ratio widget */
.rebate-tile{padding:14px;border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.22);display:grid;gap:6px}
.rebate-tile .ratio{font-family:'Orbitron',monospace;color:var(--cb-success);font-size:1.2rem}

/* Icon mappings for game tiles */
.game-icon{width:38px;height:38px;background-size:contain;background-repeat:no-repeat;background-position:center}
.gi-parity{background-image:url('../assets/images/ui/icon_game_parity.png')}
.gi-fastparity{background-image:url('../assets/images/ui/icon_game_fastparity.png')}
.gi-dice{background-image:url('../assets/images/ui/icon_game_dice.png')}
.gi-roulette{background-image:url('../assets/images/ui/icon_game_roulette.png')}
.gi-plinko{background-image:url('../assets/images/ui/icon_game_plinko.png')}
.gi-mines{background-image:url('../assets/images/ui/icon_game_mines.png')}
.gi-slot{background-image:url('../assets/images/ui/icon_game_slot.png')}
.gi-aviator{background-image:url('../assets/images/ui/icon_game_aviator.png')}

/* Bottom nav icon skins (use available SVG assets) */
.bn-icon{width:24px;height:24px;background-size:contain;background-repeat:no-repeat;background-position:center}
.bn-home{background-image:url('../assets/images/ui/icon_home.svg')}
.bn-wallet{background-image:url('../assets/images/ui/icon_wallet.svg')}
.bn-wallet.active{background-image:url('../assets/images/ui/icon_wallet.svg')}
.bn-promo{background-image:url('../assets/images/ui/icon_promotion.svg')}
.bn-activity{background-image:url('../assets/images/ui/icon_activity.svg')}
.bn-main{background-image:url('../assets/images/ui/icon_games.svg')}
.bn-main.active{background-image:url('../assets/images/ui/icon_games.svg')}

/* Records status chips */
.status-chip{padding:6px 10px;border-radius:999px;border:1px solid var(--cb-border);display:inline-flex;align-items:center;gap:6px}
.status-pending-chip{border-color:rgba(255,167,38,.45);color:var(--cb-warning);background:rgba(255,167,38,.08)}
.status-success-chip{border-color:rgba(0,255,136,.45);color:var(--cb-success);background:rgba(0,255,136,.08)}
.status-failed-chip{border-color:rgba(255,71,87,.45);color:var(--cb-danger);background:rgba(255,71,87,.08)}

/* Numeric keypad (amount quick input) */
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.numpad .key{padding:12px;border:1px solid var(--cb-border);border-radius:10px;text-align:center;background:rgba(255,255,255,.06);cursor:pointer;transition:var(--cb-tr)}
.numpad .key:hover{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}

/* Toolbar filters */
.tool-filter{display:flex;gap:8px;align-items:center;border:1px solid var(--cb-border);border-radius:10px;padding:6px 8px;background:rgba(255,255,255,.06)}
.tool-filter .dot{width:8px;height:8px;border-radius:50%;background:var(--cb-accent)}

/* Card header actions */
.card-actions{display:flex;gap:8px;align-items:center}

/* Drawer scrim */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:1100}
.scrim.show{display:block}

/* Compact table rows */
.compact-rows tbody td{padding:8px}

/* Image wrappers */
.img-fit{object-fit:cover}
.img-contain{object-fit:contain}
.img-round{border-radius:12px}


/* 16.  Theme: (Advanced Forms, Buttons, Panels, Utilities) */

/* Buttons advanced */
.cb-btn-plain{background:rgba(255,255,255,.06);border:1px solid var(--cb-border);color:var(--cb-text)}
.cb-btn-plain:hover{border-color:var(--cb-accent);box-shadow:var(--cb-glow)}
.cb-btn-link{background:transparent;border:0;color:var(--cb-accent);padding:0}
.cb-btn-link:hover{filter:brightness(1.2)}
.cb-btn-square{border-radius:12px}
.cb-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}
.cb-btn-icon:hover{border-color:var(--cb-accent)}
.cb-btn.loading{position:relative;pointer-events:none}
.cb-btn.loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;right:10px;animation:cbSpin .8s linear infinite}

/* Checkbox & Radio */
.form-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.form-check input[type="checkbox"],.form-check input[type="radio"]{appearance:none;width:18px;height:18px;border:2px solid var(--cb-border);border-radius:4px;background:rgba(255,255,255,.04);position:relative;transition:var(--cb-tr)}
.form-check input[type="radio"]{border-radius:50%}
.form-check input[type="checkbox"]:checked{background:var(--cb-accent);border-color:var(--cb-accent)}
.form-check input[type="checkbox"]:checked::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:#071b1d;font-size:.9rem;font-weight:900}
.form-check input[type="radio"]:checked{border-color:var(--cb-accent)}
.form-check input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cb-accent)}
.form-check .label{color:var(--cb-text)}

/* Inputs with states */
.cb-field{display:grid;gap:6px}
.cb-input.success,.cb-select.success,.cb-textarea.success{border-color:rgba(0,255,136,.55);box-shadow:0 0 0 3px rgba(0,255,136,.18)}
.cb-input.danger,.cb-select.danger,.cb-textarea.danger{border-color:rgba(255,71,87,.65);box-shadow:0 0 0 3px rgba(255,71,87,.18)}
.cb-input.warning,.cb-select.warning,.cb-textarea.warning{border-color:rgba(255,167,38,.65);box-shadow:0 0 0 3px rgba(255,167,38,.18)}
.cb-field .feedback{font-size:.85rem}
.cb-field .feedback.success{color:var(--cb-success)}
.cb-field .feedback.danger{color:var(--cb-danger)}
.cb-field .feedback.warning{color:var(--cb-warning)}

/* Input with icon */
.cb-input-icon{position:relative}
.cb-input-icon .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.85}
.cb-input-icon .cb-input{padding-left:36px}

/* Chips & Tags variants */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--cb-accent)}
.chip.success{border-color:rgba(0,255,136,.5);color:var(--cb-success)}
.chip.danger{border-color:rgba(255,71,87,.5);color:var(--cb-danger)}
.chip.warning{border-color:rgba(255,167,38,.5);color:var(--cb-warning)}
.chip.info{border-color:rgba(67,183,255,.5);color:var(--cb-info)}
.tag{display:inline-block;padding:4px 8px;border-radius:8px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}

/* Skeleton rows */
.skeleton-line{height:12px;border-radius:8px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.skeleton-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);animation:skeleton 1.6s infinite}
.skeleton-line.w-100{width:100%}
.skeleton-line.w-80{width:80%}
.skeleton-line.w-60{width:60%}

/* Progress bars */
.cb-progress.striped>.bar{background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:1rem 1rem}
.cb-progress.animated>.bar{animation:progressMove 1s linear infinite}
@keyframes progressMove{0%{background-position:0 0}100%{background-position:1rem 0}}

/* Carousel basic */
.cb-carousel{position:relative;overflow:hidden;border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.22)}
.cb-carousel .track{display:flex;transition:transform .4s ease}
.cb-carousel .slide{min-width:100%;padding:14px}
.cb-carousel .nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.cb-carousel .btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}

/* Panels & Dividers */
.cb-panel{border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.22)}
.cb-panel .head{padding:12px 14px;border-bottom:1px solid var(--cb-border)}
.cb-panel .body{padding:14px}
.divider{height:1px;background:var(--cb-border-soft);border:none;margin:10px 0}
.hr{height:1px;background:var(--cb-border);opacity:.5;border:0}

/* Media rows */
.media-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.media-row .title{font-weight:800}
.media-row .subtitle{color:var(--cb-muted);font-size:.92rem}

/* Horizontal timeline */
.tl-h{display:flex;gap:20px;align-items:center}
.tl-h .point{width:10px;height:10px;border-radius:50%;background:var(--cb-accent);box-shadow:0 0 0 3px rgba(0,255,255,.18)}
.tl-h .bar{height:2px;background:rgba(255,255,255,.16);flex:1}

/* Grid auto-fit helpers */
.grid-auto-150{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.grid-auto-200{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.grid-auto-240{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* Negative spacing extensions */
.-mt-3{margin-top:calc(var(--cb-space)*-3)!important}
.-mt-4{margin-top:calc(var(--cb-space)*-4)!important}
.-mb-3{margin-bottom:calc(var(--cb-space)*-3)!important}
.-mb-4{margin-bottom:calc(var(--cb-space)*-4)!important}

/* Rotation & scale helpers */
.rotate-45{transform:rotate(45deg)!important}
.rotate--45{transform:rotate(-45deg)!important}
.scale-90{transform:scale(.9)!important}
.scale-110{transform:scale(1.10)!important}

/* Ring variants */
.ring-warning{box-shadow:0 0 0 3px rgba(255,167,38,.22)!important}
.ring-info{box-shadow:0 0 0 3px rgba(67,183,255,.22)!important}

/* Cards: outline & hover */
.card-outline{border:1px dashed var(--cb-border);border-radius:14px;background:rgba(255,255,255,.04)}
.card-hover:hover{transform:translateY(-2px);border-color:var(--cb-accent);box-shadow:var(--cb-shadow)}

/* Table responsive stack (mobile) */
@media(max-width:640px){
  .stack-table thead{display:none}
  .stack-table tr{display:block;border:1px solid var(--cb-border);border-radius:12px;margin-bottom:10px;background:rgba(0,0,0,.22)}
  .stack-table td{display:flex;justify-content:space-between;gap:10px;padding:10px;border-bottom:1px solid var(--cb-border-soft)}
  .stack-table td:last-child{border-bottom:0}
  .stack-table td::before{content:attr(data-label);color:var(--cb-muted)}
}

/* Page Skins: Wallet extended */
.wallet-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media(max-width:992px){.wallet-grid{grid-template-columns:1fr}}
.wallet-card{border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.24);padding:14px}
.wallet-card .caption{color:var(--cb-muted);font-size:.92rem}

/* Page Skins: Messages */
.chat-shell{display:grid;grid-template-columns:280px 1fr;gap:14px}
@media(max-width:992px){.chat-shell{grid-template-columns:1fr}}
.chat-sidebar{border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.2);padding:10px}
.chat-window{border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.2);display:flex;flex-direction:column}
.chat-window .messages{padding:12px;flex:1;overflow:auto}
.chat-window .composer{border-top:1px solid var(--cb-border);padding:10px;display:flex;gap:8px}

/* Page Skins: Promotions */
.promo-hero{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:992px){.promo-hero{grid-template-columns:1fr}}
.promo-cta{border:1px solid var(--cb-border);border-radius:14px;background:rgba(0,0,0,.22);padding:16px;display:grid;gap:10px}

/* Utilities: visibility */
.visible{visibility:visible!important}
.invisible{visibility:hidden!important}

/* Utilities: position center */
.center-abs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* Utilities: text shadows */
.text-glow{ text-shadow: 0 0 12px rgba(0,255,255,.6) }

/* Utilities: masks */
.mask-circle{ -webkit-mask-image:radial-gradient(circle, #000 60%, transparent 62%); mask-image:radial-gradient(circle, #000 60%, transparent 62%) }


  
 /* 17. Theme:  (Advanced Skins & Utilities) */
 
 /* Range slider */
 .cb-range{appearance:none;width:100%;height:4px;border-radius:999px;background:rgba(255,255,255,.18);outline:none}
 .cb-range::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cb-accent);box-shadow:0 0 0 3px rgba(0,255,255,.18)}
 .cb-range::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--cb-accent)}
 
 /* Custom select */
 .cb-select-wrap{position:relative}
 .cb-select-wrap::after{content:"\25BE";position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.8}
 
 /* Vertical tabs */
 .tabs-vertical{display:grid;grid-template-columns:200px 1fr;gap:14px}
 .tabs-vertical .tablist{display:grid;gap:8px}
 .tabs-vertical .tab{padding:10px;border:1px solid var(--cb-border);border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer}
 .tabs-vertical .tab.active{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}
 
 /* Ribbons */
 .ribbon{position:absolute;left:-6px;top:12px;background:var(--cb-accent);color:#071b1d;padding:4px 10px;border-radius:0 8px 8px 0;font-weight:800}
 .ribbon.warning{background:var(--cb-warning);color:#1d1404}
 .ribbon.success{background:var(--cb-success);color:#041a10}
 .ribbon.danger{background:var(--cb-danger)}
 .ribbon-corner{position:absolute;right:-10px;top:-10px;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:20px solid var(--cb-accent)}
 
 /* Alert banners */
 .alert-banner{display:flex;gap:10px;align-items:center;border:1px solid var(--cb-border);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.06)}
 .alert-banner.success{border-color:rgba(0,255,136,.45);background:rgba(0,255,136,.12)}
 .alert-banner.warning{border-color:rgba(255,167,38,.45);background:rgba(255,167,38,.12)}
 .alert-banner.danger{border-color:rgba(255,71,87,.45);background:rgba(255,71,87,.12)}
 .alert-banner .action{margin-left:auto}
 
 /* Avatar status */
 .avatar.status{position:relative}
 .avatar.status::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(10,10,26,.92);background:var(--cb-success)}
 .avatar.status.busy::after{background:var(--cb-danger)}
 .avatar.status.away::after{background:var(--cb-warning)}
 
 /* Tag cloud */
 .tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
 .tag-cloud .tag{font-size:.9rem}
 
 /* Toggle switch 2 */
 .cb-toggle{position:relative;display:inline-block;width:58px;height:28px}
 .cb-toggle input{display:none}
 .cb-toggle .track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);border:2px solid var(--cb-border)}
 .cb-toggle .thumb{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;transition:var(--cb-tr)}
 .cb-toggle input:checked + .track{background:rgba(0,255,255,.18);border-color:var(--cb-accent)}
 .cb-toggle input:checked ~ .thumb{left:32px}
 
 /* Gallery grid */
 .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
 .gallery .item{position:relative;border:1px solid var(--cb-border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.2)}
 .gallery .item img{display:block;width:100%;height:140px;object-fit:cover}
 .gallery .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.7));padding:8px;font-size:.9rem}
 @media(max-width:768px){.gallery{grid-template-columns:repeat(2,1fr)}}
 
 /* VIP ribbons */
 .vip-ribbon{position:absolute;top:0;left:0;padding:6px 10px;border-bottom-right-radius:12px;background:linear-gradient(90deg,#8ef,#c8f,#f88);font-weight:900}
 
 /* Counter list */
 .counter-list{counter-reset:cbcnt;list-style:none;padding-left:0;display:grid;gap:8px}
 .counter-list li{counter-increment:cbcnt;padding:8px 10px;border:1px solid var(--cb-border);border-radius:10px;background:rgba(255,255,255,.06)}
 .counter-list li::before{content:counter(cbcnt) ". ";color:var(--cb-accent);font-family:'Orbitron',monospace;margin-right:6px}
 
 /* KBD */
 kbd{background:rgba(255,255,255,.08);border:1px solid var(--cb-border);border-bottom-width:2px;border-radius:6px;padding:2px 6px;font-family:monospace}
 
 /* Input group buttons */
 .cb-input-group .btn-inside{border-left:2px solid var(--cb-border);background:rgba(255,255,255,.06);padding:0 10px;display:inline-flex;align-items:center}
 
 /* Code block */
 pre.cb-code{background:rgba(0,0,0,.3);border:1px solid var(--cb-border);border-radius:12px;padding:12px;overflow:auto}
 code{color:#d6eaff}
 
 /* Mini cards */
 .mini-card{padding:12px;border:1px solid var(--cb-border);border-radius:12px;background:rgba(255,255,255,.06)}
 
 /* Closable chips */
 .chip .close{width:16px;height:16px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid var(--cb-border);cursor:pointer}
 
 /* Vertical nav / sidebar */
 .vnav{display:grid;gap:8px}
 .vnav .link{padding:10px;border:1px solid var(--cb-border);border-radius:10px;background:rgba(255,255,255,.06);text-decoration:none;color:var(--cb-text)}
 .vnav .link.active,.vnav .link:hover{border-color:var(--cb-accent)}
 
 /* Stat bars */
 .statbar{height:10px;border:1px solid var(--cb-border);border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
 .statbar>.fill{height:100%;background:var(--cb-primary);width:0}
 
 /* Transactions table status pills */
 .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--cb-border)}
 .pill.pending{border-color:rgba(255,167,38,.5);color:var(--cb-warning);background:rgba(255,167,38,.08)}
 .pill.success{border-color:rgba(0,255,136,.5);color:var(--cb-success);background:rgba(0,255,136,.08)}
 .pill.failed{border-color:rgba(255,71,87,.5);color:var(--cb-danger);background:rgba(255,71,87,.08)}
 
 /* Notification bell pulse */
 .bell{position:relative}
 .bell::after{content:"";position:absolute;right:-2px;top:-2px;width:10px;height:10px;border-radius:50%;background:var(--cb-danger);box-shadow:0 0 0 0 rgba(255,71,87,.6);animation:bellPulse 2s infinite}
 @keyframes bellPulse{0%{box-shadow:0 0 0 0 rgba(255,71,87,.6)}70%{box-shadow:0 0 0 8px rgba(255,71,87,0)}100%{box-shadow:0 0 0 0 rgba(255,71,87,0)}}
 
 /* Shimmer variants */
 .shimmer-strong::after{animation-duration:1s}
 .shimmer-slow::after{animation-duration:2.6s}
 
 /* Gradient utilities */
 .grad-blue{background:linear-gradient(135deg,#00ffff,#0080ff)!important}
 .grad-violet{background:linear-gradient(135deg,#8000ff,#9c27b0)!important}
 .grad-red{background:linear-gradient(135deg,#ff4757,#ff3742)!important}
 
 /* More spacing */
 .mt-36{margin-top:calc(var(--cb-space)*36)!important}
 .mb-36{margin-bottom:calc(var(--cb-space)*36)!important}
 .pt-36{padding-top:calc(var(--cb-space)*36)!important}
 .pb-36{padding-bottom:calc(var(--cb-space)*36)!important}
 
 /* Sidebar shell */
 .sidebar-shell{display:grid;grid-template-columns:240px 1fr;gap:14px}
 @media(max-width:992px){.sidebar-shell{grid-template-columns:1fr}}
 .sidebar-box{border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22);padding:10px}
 
 
 /* 18.Theme:(Final Extensions) */
 
 /* Pricing cards */
 .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
 .price-card{position:relative;border:1px solid var(--cb-border);border-radius:16px;background:rgba(0,0,0,.22);padding:18px;display:grid;gap:8px}
 .price-card .plan{font-family:'Orbitron',monospace;font-weight:900}
 .price-card .amount{font-size:2rem;font-family:'Orbitron',monospace;color:var(--cb-accent)}
 .price-card .features{list-style:none;padding:0;margin:0;display:grid;gap:6px}
 .price-card .cta{margin-top:8px}
 .price-card.featured{border-color:var(--cb-accent);box-shadow:var(--cb-shadow)}
 
 /* Empty state */
 .empty{border:1px dashed var(--cb-border);border-radius:16px;background:rgba(255,255,255,.04);padding:24px;text-align:center;color:var(--cb-muted)}
 .empty .icon{font-size:2rem;margin-bottom:6px}
 
 /* Vertical Stepper */
 .vstep{position:relative;padding-left:22px}
 .vstep::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.16)}
 .vstep .s-item{position:relative;padding:8px 0}
 .vstep .s-item::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:12px;border-radius:50%;background:var(--cb-accent);box-shadow:0 0 0 3px rgba(0,255,255,.18)}
 
 /* Ribbons alt */
 .ribbon-alt{position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:8px;background:rgba(0,255,255,.12);border:1px solid var(--cb-accent);font-weight:800}
 
 /* Dashed boxes */
 .dashed{border:1px dashed var(--cb-border)!important;background:rgba(255,255,255,.04)!important}
 
 /* Gradient border helper */
 .grad-border{position:relative}
 .grad-border::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:var(--cb-primary);z-index:-1;opacity:.25}
 
 /* Advanced grids */
 .grid-hero{display:grid;grid-template-columns:2fr 1fr;gap:16px}
 .grid-3-2{display:grid;grid-template-columns:3fr 2fr;gap:14px}
 .grid-2-3{display:grid;grid-template-columns:2fr 3fr;gap:14px}
 .grid-1-2-1{display:grid;grid-template-columns:1fr 2fr 1fr;gap:14px}
 
 /* More spacing utilities */
 .mt-40{margin-top:calc(var(--cb-space)*40)!important}
 .mb-40{margin-bottom:calc(var(--cb-space)*40)!important}
 .pt-40{padding-top:calc(var(--cb-space)*40)!important}
 .pb-40{padding-bottom:calc(var(--cb-space)*40)!important}
 .px-40{padding-left:calc(var(--cb-space)*40)!important;padding-right:calc(var(--cb-space)*40)!important}
 .py-40{padding-top:calc(var(--cb-space)*40)!important;padding-bottom:calc(var(--cb-space)*40)!important}
 
 /* Width/height utilities */
 .w-120{width:120px!important}
 .w-160{width:160px!important}
 .w-200{width:200px!important}
 .h-120{height:120px!important}
 .h-160{height:160px!important}
 .h-200{height:200px!important}
 
 /* Badge advanced */
 .badge-outline{background:transparent;border:1px dashed var(--cb-border);color:var(--cb-text)}
 .badge-glow{box-shadow:var(--cb-glow)}
 .badge-dot{position:relative;padding-left:18px}
 .badge-dot::before{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--cb-accent)}
 
 /* Notification list */
 .notify-list{display:grid;gap:10px}
 .notify{display:grid;grid-template-columns:auto 1fr auto;gap:10px;border:1px solid var(--cb-border);border-radius:12px;background:rgba(0,0,0,.22);padding:10px}
 .notify .ttl{font-weight:800}
 .notify .time{color:var(--cb-muted);font-size:.86rem}
 
 /* Hero banner */
 .hero{position:relative;overflow:hidden;border:1px solid var(--cb-border);border-radius:16px;background:rgba(255,255,255,.06)}
 .hero .inner{position:relative;padding:24px}
 .hero .bg-wave{position:absolute;inset:0;background:radial-gradient(600px 200px at 10% 10%, rgba(0,255,255,.12), transparent), radial-gradient(600px 200px at 90% 80%, rgba(128,0,255,.12), transparent)}
 
 /* Sticky helpers */
 .sticky-top{position:sticky;top:0;z-index:50}
 .sticky-bottom{position:sticky;bottom:0;z-index:50}
 
 /* Footer mini */
 .footer-mini{border-top:1px solid var(--cb-border);padding:10px;color:var(--cb-muted);font-size:.92rem;text-align:center;background:rgba(10,10,26,.86)}
 
 /* Wave backgrounds */
 .wave-bg{background:radial-gradient(circle at 20% 20%, rgba(0,255,255,.12), transparent 40%),radial-gradient(circle at 80% 60%, rgba(128,0,255,.12), transparent 40%)}
 
 /* Print helpers */
 @media print{.no-print{display:none!important}}
 

 
 /* 19. Theme:  (Additional Presets & Helpers) */
 
 /* Button groups */
 .btn-group{display:inline-flex;border:1px solid var(--cb-border);border-radius:12px;overflow:hidden}
 .btn-group .btn{padding:8px 12px;background:rgba(255,255,255,.06);border-right:1px solid var(--cb-border)}
 .btn-group .btn:last-child{border-right:0}
 .btn-group .btn.active{background:rgba(0,255,255,.12)}
 
 /* Toggle buttons */
 .btn-toggle{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--cb-border);border-radius:12px;padding:6px 10px;background:rgba(255,255,255,.06)}
 .btn-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--cb-accent)}
 
 /* Key-value table */
 .kv{width:100%;border:1px solid var(--cb-border);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.22)}
 .kv-row{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:10px;border-bottom:1px solid var(--cb-border-soft)}
 .kv-row .key{color:var(--cb-muted)}
 .kv-row:last-child{border-bottom:0}
 
 /* Pills center */
 .pills-center{display:flex;justify-content:center;gap:8px}
 .pills-center .pill-item{padding:8px 12px;border:1px solid var(--cb-border);border-radius:999px;background:rgba(255,255,255,.06)}
 .pills-center .pill-item.active{border-color:var(--cb-accent);background:rgba(0,255,255,.12)}
 
 /* Panel gradient border */
 .panel-gb{position:relative;border:1px solid var(--cb-border);border-radius:16px;background:rgba(0,0,0,.22)}
 .panel-gb::before{content:"";position:absolute;inset:-2px;border-radius:18px;background:var(--cb-primary);opacity:.2;z-index:-1}
 
 /* Floating Action Button */
 .fab{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--cb-accent);color:#071b1d;font-weight:900;box-shadow:var(--cb-shadow);z-index:800}
 
 /* Offcanvas sheet small */
 .cb-sheet-sm{position:fixed;left:0;right:0;bottom:-60%;height:60%;background:rgba(10,10,26,.98);border-top:1px solid var(--cb-border);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.4);transition:bottom var(--cb-tr);z-index:1250}
 .cb-sheet-sm.open{bottom:0}
 
 /* Backdrop helpers */
 .backdrop-strong{backdrop-filter:blur(14px)}
 .backdrop-soft{backdrop-filter:blur(6px)}
 
 /* Width percentage helpers */
 .w-10p{width:10%!important}
 .w-20p{width:20%!important}
 .w-30p{width:30%!important}
 .w-40p{width:40%!important}
 .w-60p{width:60%!important}
 .w-70p{width:70%!important}
 .w-80p{width:80%!important}
 .w-90p{width:90%!important}
 
 /* Height fixed helpers */
 .h-48{height:48px!important}
 .h-64{height:64px!important}
 .h-96{height:96px!important}
 .h-128{height:128px!important}
 
 /* Not-allowed cursor */
 .cursor-not-allowed{cursor:not-allowed!important}
 
 /* Balanced text */
 .text-balance{text-wrap:balance}
 
 /* Grid auto columns */
 .grid-auto-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:10px}
 
 /* Check and cross lists */
 .list-check{list-style:none;padding-left:0;display:grid;gap:6px}
 .list-check li{display:flex;gap:8px;align-items:center}
 .list-check li::before{content:"";display:inline-block;width:16px;height:16px;background:url('../assets/images/ui/icon_check.png') center/contain no-repeat}
 .list-cross{list-style:none;padding-left:0;display:grid;gap:6px}
 .list-cross li{display:flex;gap:8px;align-items:center}
 .list-cross li::before{content:"";display:inline-block;width:16px;height:16px;background:url('../assets/images/ui/icon_close_gray.png') center/contain no-repeat}
 
 /* Advanced badges */
 .badge-pill{border-radius:999px;padding:6px 12px;border:1px solid var(--cb-border);background:rgba(255,255,255,.06)}
 .badge-glass{backdrop-filter:blur(10px);background:rgba(255,255,255,.08)}
 
 /* Result balls (alt) */
 .result-ball-alt{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.3);font-weight:800}
 .result-ball-red{background:linear-gradient(135deg,#ff4757,#ff3742);color:#fff}
 .result-ball-green{background:linear-gradient(135deg,#00ff88,#00e676);color:#fff}
 .result-ball-violet{background:linear-gradient(135deg,#8000ff,#9c27b0);color:#fff}
 
 /* Accordion arrows */
 .cb-acc-header .arrow{transition:transform var(--cb-tr)}
 .cb-acc-item.open .arrow{transform:rotate(90deg)}
 
 /* Breadcrumbs arrow variant */
 .cb-breadcrumb.arrow a{position:relative;padding-right:22px}
 .cb-breadcrumb.arrow a::after{content:"\203A";position:absolute;right:8px;opacity:.6}
 
 /* Back-to-top */
 .back-to-top{position:fixed;right:16px;bottom:80px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--cb-border);background:rgba(255,255,255,.06);backdrop-filter:blur(8px);z-index:850}
 
 /* Toast positions */
 .toast-top-left{position:fixed;left:16px;top:16px;z-index:2200}
 .toast-top-right{position:fixed;right:16px;top:16px;z-index:2200}
 .toast-bottom-left{position:fixed;left:16px;bottom:16px;z-index:2200}
 
 /* Loading bar top */
 .loading-bar{position:fixed;left:0;right:0;top:0;height:3px;background:var(--cb-accent);box-shadow:var(--cb-glow);transform-origin:left;transform:scaleX(0);z-index:1600}
 
 /* Header placeholder */
 .header-space{height:64px}
 
 /* Forms inline */
 .form-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
 
 /* CTA ribbon button */
 .cta-ribbon{position:relative;padding:10px 16px;border-radius:12px;background:var(--cb-primary);color:#fff}
 .cta-ribbon::after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.6}
 
 /* Separator with text */
 .sep-text{display:flex;align-items:center;gap:10px;color:var(--cb-muted)}
 .sep-text::before,.sep-text::after{content:"";flex:1;height:1px;background:var(--cb-border-soft)}
 
 /* Hero orb halo */
 .halo{position:relative}
 .halo::after{content:"";position:absolute;inset:-8px;border-radius:inherit;box-shadow:0 0 60px rgba(0,255,255,.3)}
 
 /* Menu header */
 .menu-header{display:flex;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid var(--cb-border)}
 
 /* List condensed */
 .list-condensed .cb-list-item{padding:8px}
 
 /* Compact form */
 .form-compact .cb-input,.form-compact .cb-select,.form-compact .cb-textarea{padding:8px 10px}
 
 /* Utility negative z-index */
 .z--1{z-index:-1!important}
 
 /* Utility translate X */
 .translate-x-2{transform:translateX(2px)!important}
 .translate-x--2{transform:translateX(-2px)!important}
 
 /* Utility rotate minor */
 .rotate-2{transform:rotate(2deg)!important}
 .rotate--2{transform:rotate(-2deg)!important}
 
 /* Utility outline offset */
 .outline-offset-2{outline-offset:2px}
 
 /* End Extended Chunk 8 */
 
 /* 13. Responsive rules */
@media(max-width:1024px){
  .cb-row-3{grid-template-columns:repeat(2,1fr)}
  .cb-row-4{grid-template-columns:repeat(2,1fr)}
  .cb-header-inner{padding:10px 12px}
  .cb-logo{font-size:1.4rem}
}
@media(max-width:768px){
  .cb-header-inner{flex-direction:column;align-items:stretch;gap:10px}
  .cb-userbar{justify-content:space-between}
  .support-grid{grid-template-columns:1fr}
  .lb-grid{grid-template-columns:1fr}
  .wallet-actions{grid-template-columns:1fr}
  .amount-grid{grid-template-columns:repeat(2,1fr)}
  .pay-methods{grid-template-columns:1fr}
  .cb-container{padding-inline:12px}
  .cb-card{padding:16px}
  .icon-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .cb-row-3,.cb-row-4{grid-template-columns:1fr}
  .cb-nav a{padding:7px 10px}
  .inline-icon{width:16px;height:16px}
  .cb-title{font-size:1.6rem}
}
@media(max-width:520px){
  .cb-nav{gap:6px}
  .cb-nav a{padding:6px 9px;font-size:.92rem}
  .cb-logo{font-size:1.25rem}
  .icon-row{grid-template-columns:repeat(2,1fr)}
}

/* Final header image override: removed; handled above */