/*
ChromaBet Global Theme CSS
Brand: Futuristic neon-spectrum glow inspired by provided image
Author: Akcoder
Usage on pages:
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;
/* Safe area insets for notched devices */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
/* Dynamic header height including safe-top */
--cb-header-base: 68px;
--cb-header-height: calc(var(--cb-header-base) + var(--safe-top));
/* Explicit palette requested for popups */
--chromabet-cyan: #00ffff;
--chromabet-purple: #8b5cf6;
--chromabet-pink: #ec4899;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
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:calc(68px + var(--safe-bottom))}
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-langbox{display:flex;align-items:center;gap:8px;border:1px solid var(--cb-border);background:rgba(0,0,0,.28);border-radius:12px;padding:6px 8px;position:relative;z-index:2001}
.cb-langbox select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:rgba(10,10,26,.95);border:1px solid var(--cb-border);border-radius:8px;color:var(--cb-text);padding:6px 24px 6px 8px;min-width:130px;outline:none;line-height:1.2;pointer-events:auto}
.cb-langbox select:focus{box-shadow:var(--cb-glow);border-color:var(--cb-accent)}
.cb-langbox select option{background:rgba(10,10,26,.98);color:#fff}
.cb-header .cb-langbox #cb-langname{font-weight:800;margin:0 8px}
.cb-header .cb-langbox select{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:0;border:0;background:transparent;padding:0;min-width:0;z-index:2}
/* Floating variant injected by footer JS */
.cb-langbox.cb-langbox-float{position:fixed;top:8px;right:12px;z-index:3000}
.cb-flag{width:24px;height:16px;border-radius:3px;object-fit:cover}
.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,.18);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,.18);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,.03);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,.06)}
.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}
/* Responsive adjustments for Support/Customer Service */
@media(max-width:768px){
.support-grid{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr}
.cb-list-row{padding:12px}
}
@media(max-width:480px){
.cb-list-row{padding:12px}
.opt-item{padding:12px 14px}
.panel-title{font-size:1.05rem}
}
/* 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;padding-bottom:var(--safe-bottom)!important}
.m-bottom-inner{display:grid;grid-template-columns:repeat(5,1fr);max-width:700px;margin:0 auto;padding-bottom:calc(8px + var(--safe-bottom))}
.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}
}
/* Jalwa-style micro breakpoints for small phones */
@media (max-width: 414px){
.cb-container,.cb-container-lg{padding-inline:10px}
.cb-card{padding:16px}
.cb-title{font-size:1.6rem}
.wallet-hero{padding:14px}
.wallet-balance{font-size:2.2rem}
.cb-list-row{padding:10px 12px}
.m-bottom-link{font-size:.76rem}
.m-bottom-link .bn-icon{width:20px;height:20px}
.cb-table thead th,.cb-table tbody td{padding:10px}
.lang-grid{grid-template-columns:repeat(2,1fr)}
/* Standalone pages common tweaks */
.wrap{padding-left:10px;padding-right:10px}
.modebtn{height:74px}
.img-btn .btn-img{height:54px}
.pid{word-break:break-word;overflow-wrap:anywhere}
}
@media (max-width: 390px){
.cb-card{padding:14px}
.cb-title{font-size:1.5rem}
.wallet-balance{font-size:2rem}
.amount-grid{grid-template-columns:repeat(3,1fr)}
.pay-methods{grid-template-columns:repeat(3,1fr);gap:6px}
.m-features{gap:8px}
.m-feature img{width:26px;height:26px}
.m-bottom-link{padding:8px 6px}
.m-bottom-link .bn-icon{width:19px;height:19px}
.cb-table thead th,.cb-table tbody td{padding:8px}
.modebtn{height:70px}
.img-btn .btn-img{height:50px}
}
@media (max-width: 375px){
.cb-card{padding:12px}
.cb-title{font-size:1.4rem}
.wallet-balance{font-size:1.8rem}
.m-quick-card{padding:10px}
.m-feature{padding:8px}
.m-features{gap:8px}
.m-feature .label{font-size:.8rem}
.cb-form-row{grid-template-columns:1fr}
.cb-input,.cb-select,.cb-textarea,.form-input{padding:10px 12px}
.cb-table thead th,.cb-table tbody td{padding:7px}
.modebtn{height:66px}
.img-btn .btn-img{height:46px}
}
@media (max-width: 360px){
.cb-title{font-size:1.35rem}
.wallet-balance{font-size:1.7rem}
.m-bottom-link .bn-icon{width:18px;height:18px}
.m-bottom-link{font-size:.72rem}
.cb-table thead th,.cb-table tbody td{padding:6px}
.cb-list-row{padding:10px}
}
/* Force mobile-first layout across all widths */
.cb-nav,.nav-links,.chromabet-nav-links{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:calc(var(--cb-header-height) + 20px)!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:var(--cb-header-height);background:transparent!important;border-bottom:none!important;padding:0!important;padding-top:var(--safe-top)!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;min-height:var(--cb-header-height);padding-top:var(--safe-top)!important}
.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}
/* Unify widths for common standalone sections (desktop shows mobile column) */
.wrap,
.wallet,
.wallet-bar,
.notice,
.tabs,
.top-tiles,
.panel,
.bet-row,
.balls,
.size-toggle,
.amount-row,
.tabs2,
.history,
.coupon,
.modes,
.chart-wrap,
.chart-header,
.chart-list,
.chart-stats,
.chart-pager,
#tab-history,
#tab-chart,
#tab-mine,
.history-container,
.page-container,
.leaderboard-container,
.profile-container,
.support-container,
.promotions-container,
.chromabet-login-container,
.chromabet-register-container{
max-width:min(430px,100vw)!important;
margin-left:auto;
margin-right:auto;
}
/* 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 */