/* ================================================
   TOREXWAFE - Modern Light Blue Theme
   Glassmorphism + Gradient + Smooth Animations
   ================================================ */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;min-height:100dvh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* --- Design Tokens --- */
:root{
  --bg:#0f1117;--bg2:#1a1d2e;--bg3:#232738;--bg4:#2c3044;
  --text:#e8eaed;--text2:#b0b3b8;--text3:#6b7280;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.12);
  --input:#1a1d2e;
  --accent:#3b82f6;--accent-hover:#60a5fa;--accent-light:#1e3a5f;
  --accent-glow:rgba(59,130,246,.32);
  --danger:#ef4444;--warning:#f59e0b;--success:#10b981;--info:#3b82f6;
  --gold:#ffb300;
  --radius-sm:8px;--radius:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 6px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:0 10px 25px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.25);
  --shadow-xl:0 20px 40px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.3);
  --shadow-glow:0 0 20px var(--accent-glow);
  --glass:rgba(15,17,23,.85);
  --glass-border:rgba(255,255,255,.1);
  --transition:all .25s cubic-bezier(.4,0,.2,1);
  --transition-fast:all .15s ease;
  --transition-slow:all .4s cubic-bezier(.4,0,.2,1);
  --nav-h:72px;--header-h:110px;
}
html.light{
  --bg:#ffffff;--bg2:#f8f9fa;--bg3:#f0f4f8;--bg4:#eef1f6;
  --text:#1a1a1a;--text2:#4a4a4a;--text3:#7a7a7a;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.12);
  --input:#ffffff;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px rgba(0,0,0,.05),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 10px 25px rgba(0,0,0,.08),0 4px 10px rgba(0,0,0,.05);
  --shadow-xl:0 20px 40px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.06);
  --glass:rgba(255,255,255,.85);
  --glass-border:rgba(255,255,255,.3);
}
html.dark{
  --bg:#0f1117;--bg2:#1a1d2e;--bg3:#232738;--bg4:#2c3044;
  --text:#e8eaed;--text2:#b0b3b8;--text3:#6b7280;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.12);
  --input:#1a1d2e;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 4px 6px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:0 10px 25px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.25);
  --shadow-xl:0 20px 40px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.3);
  --glass:rgba(15,17,23,.85);
  --glass-border:rgba(255,255,255,.1);
}

/* --- Accent Color Themes --- */
/* Blue */
:root, html, html.light[data-accent="blue"] {
  --accent:#1e88e5;--accent-hover:#1565c0;--accent-light:#bbdef9;--accent-glow:rgba(30,136,229,.28);
}
html.dark, html.dark[data-accent="blue"] {
  --accent:#3b82f6;--accent-hover:#60a5fa;--accent-light:#1e3a5f;--accent-glow:rgba(59,130,246,.32);
}

/* Emerald */
html[data-accent="emerald"], html.light[data-accent="emerald"] {
  --accent:#10b981;--accent-hover:#059669;--accent-light:#a7f3d0;--accent-glow:rgba(16,185,129,.28);
}
html.dark[data-accent="emerald"] {
  --accent:#10b981;--accent-hover:#34d399;--accent-light:#064e3b;--accent-glow:rgba(16,185,129,.32);
}

/* Purple */
html[data-accent="purple"], html.light[data-accent="purple"] {
  --accent:#8b5cf6;--accent-hover:#7c3aed;--accent-light:#ddd6fe;--accent-glow:rgba(139,92,246,.28);
}
html.dark[data-accent="purple"] {
  --accent:#a855f7;--accent-hover:#c084fc;--accent-light:#3b0764;--accent-glow:rgba(168,85,247,.32);
}

/* Amber / Gold */
html[data-accent="amber"], html.light[data-accent="amber"] {
  --accent:#f59e0b;--accent-hover:#d97706;--accent-light:#fde68a;--accent-glow:rgba(245,158,11,.28);
}
html.dark[data-accent="amber"] {
  --accent:#fbbf24;--accent-hover:#fcd34d;--accent-light:#451a03;--accent-glow:rgba(251,191,36,.32);
}

/* Cyan */
html[data-accent="cyan"], html.light[data-accent="cyan"] {
  --accent:#06b6d4;--accent-hover:#0891b2;--accent-light:#cffafe;--accent-glow:rgba(6,182,212,.28);
}
html.dark[data-accent="cyan"] {
  --accent:#22d3ee;--accent-hover:#67e8f9;--accent-light:#164e63;--accent-glow:rgba(34,211,238,.32);
}

/* Rose */
html[data-accent="rose"], html.light[data-accent="rose"] {
  --accent:#f43f5e;--accent-hover:#e11d48;--accent-light:#fecdd3;--accent-glow:rgba(244,63,94,.28);
}
html.dark[data-accent="rose"] {
  --accent:#fb7185;--accent-hover:#fda4af;--accent-light:#4c0519;--accent-glow:rgba(251,113,133,.32);
}

/* --- Boot Screen --- */
#app-boot{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .3s ease,visibility .3s ease;animation:autoHideBoot .8s forwards}
@keyframes autoHideBoot{0%{opacity:1;visibility:visible}70%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
#app-boot.hide{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
#app-boot .boot-logo{width:64px;height:64px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;box-shadow:0 8px 32px var(--accent-glow)}
#app-boot .boot-spinner{width:32px;height:32px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- App Shell --- */
.app-shell{min-height:100dvh;padding-bottom:calc(var(--nav-h) + 20px);background:var(--bg)}
.app-shell.no-nav{padding-bottom:0}
.page-content{max-width:480px;margin:0 auto;padding:16px}

/* --- Header --- */
.tw-header{position:relative;z-index:100;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.tw-header .marquee-wrap{background:linear-gradient(90deg,var(--accent),var(--accent-hover),var(--accent));color:#fff;font-size:12px;font-weight:600;padding:6px 0;overflow:hidden;white-space:nowrap}
.tw-header .marquee-wrap span{display:inline-block;animation:marquee 20s linear infinite}
@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.tw-header .brand-bar{display:flex;align-items:center;gap:10px;padding:10px 16px}
.tw-header .brand-mark{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px var(--accent-glow)}
.tw-header .brand-text{display:flex;flex-direction:column}
.tw-header .brand-name{font-weight:700;font-size:15px;letter-spacing:.5px}
.tw-header .brand-tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;color:var(--text2);margin-top:-2px}
.tw-header .action-bar{display:flex;align-items:center;gap:6px;padding:0 16px 10px}
.tw-header .action-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);transition:var(--transition);font-size:14px}
.tw-header .action-btn:hover,.tw-header .action-btn:active{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}
.lang-select{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:6px 8px;font-size:12px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:var(--transition)}
.lang-select:focus{border-color:var(--accent);outline:none}

/* --- Modern Language Trigger Buttons --- */
.header-lang-btn{display:flex;align-items:center;gap:7px;height:36px;padding:0 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;transition:var(--transition);white-space:nowrap}
.header-lang-btn:hover,.header-lang-btn:active{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);transform:translateY(-1px);background:var(--bg4)}
.header-lang-btn .lang-flag{display:flex;align-items:center;line-height:1}
.header-lang-btn .lang-code{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap}
.header-lang-btn .lang-arrow{font-size:9px;color:var(--text3);transition:var(--transition);margin-left:2px}
.header-lang-btn:hover .lang-arrow{color:var(--accent)}
.flag-svg{display:inline-block;vertical-align:middle;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.25)}

.modern-lang-btn{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;background:var(--bg2);border:1.5px solid var(--border2);border-radius:var(--radius-full);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition)}
.modern-lang-btn:hover{border-color:var(--accent);box-shadow:0 0 18px var(--accent-glow);transform:translateY(-2px);background:var(--bg3)}
.modern-lang-btn .lang-icon-badge{color:var(--accent);font-size:15px;display:flex;align-items:center}
.modern-lang-btn .lang-btn-text{display:flex;align-items:center;gap:6px}
.modern-lang-btn .lang-chevron{font-size:11px;color:var(--text3);margin-left:2px;transition:var(--transition)}
.modern-lang-btn:hover .lang-chevron{color:var(--accent);transform:translateY(-2px)}

/* --- Language Bottom Sheet (Full Width Sheet) --- */
.lang-bottom-sheet-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.lang-bottom-sheet-backdrop.active{opacity:1;pointer-events:auto}
.lang-bottom-sheet{width:100%;max-width:540px;margin:0 auto;background:var(--bg2);border-top-left-radius:24px;border-top-right-radius:24px;border-top:1.5px solid var(--border2);border-left:1px solid var(--border);border-right:1px solid var(--border);padding:14px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.4);transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.lang-bottom-sheet-backdrop.active .lang-bottom-sheet{transform:translateY(0)}
.sheet-handle-bar{width:44px;height:4px;background:var(--border2);border-radius:4px;margin:0 auto 14px}
.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.sheet-title{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.sheet-close-btn{width:32px;height:32px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);font-size:14px}
.sheet-close-btn:hover{background:var(--bg4);color:var(--text);transform:rotate(90deg)}
.sheet-content{display:flex;flex-direction:column;gap:10px}
.lang-sheet-option{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg3);border:1.5px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s ease}
.lang-sheet-option:hover{border-color:var(--accent);background:var(--bg4);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
.lang-sheet-option.selected{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 20px var(--accent-glow)}
.lang-sheet-flag{font-size:26px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.lang-sheet-info{flex:1}
.lang-sheet-name{font-size:15px;font-weight:700;color:var(--text)}
.lang-sheet-sub{font-size:11px;color:var(--text3);font-weight:500;margin-top:1px}
.lang-sheet-check{font-size:20px;color:var(--accent)}
.lang-sheet-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2)}

/* --- Bottom Nav --- */
.tw-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid rgba(0,0,0,.06);height:var(--nav-h);display:flex;align-items:center;justify-content:space-around;padding:0 8px;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 30px rgba(0,0,0,.06)}
.tw-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 14px;border-radius:var(--radius-lg);transition:var(--transition);color:var(--text3);font-size:10px;font-weight:500;text-decoration:none;position:relative;overflow:hidden}
.tw-nav a::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:var(--accent-glow);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease}
.tw-nav a:hover{color:var(--accent)}
.tw-nav a:hover::before{width:80px;height:80px}
.tw-nav a .nav-icon{font-size:20px;transition:var(--transition);position:relative;z-index:1}
.tw-nav a:hover .nav-icon{transform:translateY(-2px) scale(1.1)}
.tw-nav a.active{color:var(--accent);background:var(--accent-glow)}
.tw-nav a.active .nav-icon{transform:translateY(-2px) scale(1.15);filter:drop-shadow(0 2px 6px var(--accent-glow))}
.tw-nav a.active::after{content:'';position:absolute;top:6px;width:20px;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:var(--radius-full)}
.tw-nav a .nav-label{position:relative;z-index:1;transition:var(--transition)}
.tw-nav a.active .nav-label{font-weight:700;color:var(--accent)}
.tw-nav .nav-center{position:relative;top:-20px}
.tw-nav .nav-center a{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.5) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.5) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1.5px solid rgba(59,130,246,0.55);box-shadow:0 4px 20px rgba(0,0,0,0.45),0 0 0 4px rgba(59,130,246,0.2),inset 0 1px 2px rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;font-size:22px;padding:0;transition:var(--transition)}
.tw-nav .nav-center a:hover{transform:scale(1.1) translateY(-2px);border-color:#60a5fa;box-shadow:0 8px 28px rgba(59,130,246,0.55),0 0 0 4px rgba(59,130,246,0.3),inset 0 1px 2px rgba(255,255,255,0.35)}
.tw-nav .nav-center a:active{transform:scale(.95)}
.tw-nav .nav-center a .nav-label{display:none}
.nav-center-logo{width:36px;height:36px;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));transition:transform .2s ease}
.tw-nav .nav-center a:hover .nav-center-logo{transform:scale(1.1)}
.tw-nav .nav-center::after{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:40px;height:40px;background:radial-gradient(circle,var(--accent-glow),transparent 70%);border-radius:50%;pointer-events:none;animation:centerGlow 3s ease-in-out infinite}
@keyframes centerGlow{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.2)}}

/* --- Cards --- */
.tw-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:var(--transition);position:relative;overflow:hidden}
.tw-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.5),transparent);pointer-events:none;opacity:0;transition:var(--transition)}
.tw-card:hover{border-color:var(--border2);box-shadow:var(--shadow-md)}
.tw-card:hover::before{opacity:1}
.tw-card-sm{padding:14px;border-radius:var(--radius)}
.tw-card-flat{background:transparent;border:none;padding:0}
.tw-card-accent{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-glow),transparent);box-shadow:0 4px 20px var(--accent-glow)}

/* --- Buttons --- */
.tw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:14px;transition:var(--transition);border:none;cursor:pointer;width:100%;position:relative;overflow:hidden}
.tw-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:var(--transition)}
.tw-btn:hover::after{opacity:1}
.tw-btn:active{transform:scale(.97)}
.tw-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;box-shadow:0 4px 15px var(--accent-glow)}
.tw-btn-primary:hover{box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-1px)}
.tw-btn-primary:active{transform:translateY(0) scale(.97)}
.tw-btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border)}
.tw-btn-secondary:hover{border-color:var(--accent);background:var(--bg4)}
.tw-btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.tw-btn-outline:hover{background:var(--accent-glow)}
.tw-btn-danger{background:linear-gradient(135deg,var(--danger),#dc2626);color:#fff;box-shadow:0 4px 15px rgba(239,68,68,.25)}
.tw-btn-danger:hover{box-shadow:0 6px 20px rgba(239,68,68,.35);transform:translateY(-1px)}
.tw-btn-sm{padding:8px 16px;font-size:12px;border-radius:var(--radius-sm)}
.tw-btn-icon{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;padding:0 !important;border-radius:var(--radius-sm);display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;text-align:center;box-sizing:border-box}
.tw-btn-icon i,.tw-btn-icon svg{display:inline-flex;align-items:center;justify-content:center;line-height:1;margin:0 auto;font-size:15px}
.page-back-btn{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;color:var(--text);font-size:14px;transition:var(--transition);text-decoration:none;box-sizing:border-box}
.page-back-btn i,.page-back-btn svg{display:inline-flex;align-items:center;justify-content:center;line-height:1;margin:0 auto}
.page-back-btn:hover{background:var(--bg4);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.tw-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

/* --- Inputs --- */
.tw-input-group{display:flex;flex-direction:column;gap:6px}
.tw-input-group label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.tw-input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;color:var(--text);font-size:14px;transition:var(--transition);outline:none}
.tw-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.tw-input::placeholder{color:var(--text3)}
.tw-input-error{border-color:var(--danger)!important}
.tw-error-text{font-size:12px;color:var(--danger);margin-top:2px}
.tw-input-wrap{position:relative;display:flex;align-items:center}
.tw-input-wrap .tw-input{padding-right:44px}
.tw-input-wrap .input-icon{position:absolute;right:12px;color:var(--text3);cursor:pointer;font-size:16px;transition:var(--transition)}
.tw-input-wrap .input-icon:hover{color:var(--accent)}

/* --- Tabs --- */
.tw-tabs{display:flex;background:var(--bg3);border-radius:var(--radius);padding:4px;gap:4px}
.tw-tab{flex:1;padding:10px;text-align:center;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text3);transition:var(--transition);cursor:pointer;border:none;background:none}
.tw-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;box-shadow:0 2px 8px var(--accent-glow)}
.tw-tab:not(.active):hover{color:var(--text);background:rgba(30,136,229,.06)}

/* --- Badges --- */
.tw-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600}
.tw-badge-accent{background:rgba(30,136,229,.12);color:var(--accent)}
.tw-badge-warning{background:rgba(245,158,11,.12);color:var(--warning)}
.tw-badge-danger{background:rgba(239,68,68,.12);color:var(--danger)}
.tw-badge-info{background:rgba(30,136,229,.12);color:var(--info)}
.tw-badge-gold{background:rgba(255,179,0,.12);color:var(--gold)}

/* --- Hero --- */
.tw-hero{text-align:center;padding:32px 16px;position:relative;overflow:hidden}
.tw-hero::before{content:'';position:absolute;top:-40%;left:-20%;width:140%;height:140%;background:radial-gradient(circle,rgba(30,136,229,.08),transparent 60%);pointer-events:none}
.tw-hero::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(30,136,229,.06),transparent 70%);pointer-events:none;animation:heroPulse 4s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
.tw-hero .hero-kicker{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.tw-hero .hero-value{font-size:36px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--accent),#1565c0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tw-hero .hero-label{font-size:13px;color:var(--text2);margin-top:4px}
.tw-hero .hero-value.green{background:linear-gradient(135deg,var(--accent),#1565c0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tw-hero .hero-value.gold{background:linear-gradient(135deg,var(--gold),#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* --- Grid --- */
.tw-grid{display:grid;gap:12px}
.tw-grid-2{grid-template-columns:repeat(2,1fr)}
.tw-grid-3{grid-template-columns:repeat(3,1fr)}
.tw-grid-4{grid-template-columns:repeat(4,1fr)}
.tw-grid-5{grid-template-columns:repeat(5,1fr)}

/* --- Stat Card --- */
.tw-stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
.tw-stat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.4),transparent);pointer-events:none}
.tw-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border2)}
.tw-stat .stat-value{font-size:18px;font-weight:700}
.tw-stat .stat-label{font-size:11px;color:var(--text3);margin-top:2px}

/* --- List --- */
.tw-list{display:flex;flex-direction:column;gap:8px}
.tw-list-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition);position:relative;overflow:hidden}
.tw-list-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);pointer-events:none;opacity:0;transition:var(--transition)}
.tw-list-item:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-1px)}
.tw-list-item:hover::before{opacity:1}
.tw-list-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:var(--transition)}
.tw-list-item:hover .tw-list-icon{transform:scale(1.05)}
.tw-list-icon.green{background:rgba(30,136,229,.1);color:var(--accent)}
.tw-list-icon.blue{background:rgba(59,130,246,.1);color:var(--info)}
.tw-list-icon.amber{background:rgba(245,158,11,.1);color:var(--warning)}
.tw-list-icon.red{background:rgba(239,68,68,.1);color:var(--danger)}
.tw-list-body{flex:1;min-width:0}
.tw-list-title{font-size:14px;font-weight:600}
.tw-list-sub{font-size:12px;color:var(--text3);margin-top:2px}
.tw-list-right{text-align:right;flex-shrink:0}
.tw-list-amount{font-size:14px;font-weight:700}
.tw-list-amount.positive{color:var(--success)}
.tw-list-amount.negative{color:var(--danger)}
.tw-list-date{font-size:11px;color:var(--text3)}

/* --- Progress Bar --- */
.tw-progress{height:8px;background:var(--bg4);border-radius:var(--radius-full);overflow:hidden;position:relative}
.tw-progress::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.tw-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#42a5f5,var(--accent-light));border-radius:var(--radius-full);transition:width .8s cubic-bezier(.4,0,.2,1);position:relative}
.tw-progress-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}

/* --- Section --- */
.tw-section{margin-bottom:20px}
.tw-section-title{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.tw-section-title span{font-size:12px;color:var(--accent);font-weight:500;text-transform:none;letter-spacing:0}

/* --- Promo Card --- */
.tw-promo{border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;transition:var(--transition);cursor:pointer}
.tw-promo::before{content:'';position:absolute;inset:0;opacity:.15}
.tw-promo:hover{transform:translateY(-3px);box-shadow:var(--shadow-xl)}
.tw-promo:active{transform:translateY(-1px)}
.tw-promo-green{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.tw-promo-blue{background:linear-gradient(135deg,#1e3a5f,#1e88e5);color:#fff}
.tw-promo-gold{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.tw-promo .promo-kicker{font-size:11px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.tw-promo .promo-title{font-size:18px;font-weight:800;line-height:1.2}
.tw-promo .promo-desc{font-size:12px;opacity:.8;margin-top:4px}

/* --- Modal --- */
.tw-modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.tw-modal-overlay.active{opacity:1;pointer-events:auto}
.tw-modal{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;padding:24px;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.tw-modal-overlay.active .tw-modal{transform:translateY(0)}
.tw-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.tw-modal-title{font-size:18px;font-weight:700}
.tw-modal-close{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--transition)}
.tw-modal-close:hover{background:var(--danger);color:#fff}

/* --- Processing Modal --- */
.processing-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.processing-overlay.active{opacity:1;pointer-events:auto}
.processing-card{background:var(--bg);border-radius:var(--radius-xl);padding:40px 32px;width:90%;max-width:340px;text-align:center;box-shadow:var(--shadow-xl);transform:scale(.9);transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.processing-overlay.active .processing-card{transform:scale(1)}
.processing-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(30,136,229,.1),transparent,rgba(30,136,229,.1),transparent);animation:processingRotate 3s linear infinite}
@keyframes processingRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.processing-card .proc-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1565c0);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;margin:0 auto 20px;position:relative;z-index:1;box-shadow:0 8px 32px var(--accent-glow)}
.processing-card .proc-icon::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);animation:spin 1s linear infinite}
.processing-card .proc-title{font-size:18px;font-weight:700;margin-bottom:8px;position:relative;z-index:1}
.processing-card .proc-subtitle{font-size:13px;color:var(--text2);margin-bottom:24px;position:relative;z-index:1}
.processing-card .proc-progress{height:6px;background:var(--bg4);border-radius:var(--radius-full);overflow:hidden;margin-bottom:16px;position:relative;z-index:1}
.processing-card .proc-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#42a5f5);border-radius:var(--radius-full);width:0%;transition:width .1s linear;position:relative}
.processing-card .proc-progress-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 1s infinite}
.processing-card .proc-percent{font-size:24px;font-weight:800;color:var(--accent);margin-bottom:4px;position:relative;z-index:1}
.processing-card .proc-steps{position:relative;z-index:1;margin-top:20px}
.processing-card .proc-step{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;color:var(--text3);transition:var(--transition)}
.processing-card .proc-step.active{color:var(--accent);font-weight:600}
.processing-card .proc-step.done{color:var(--success)}
.processing-card .proc-step .step-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;background:var(--bg3);color:var(--text3);transition:var(--transition)}
.processing-card .proc-step.active .step-icon{background:var(--accent);color:#fff;animation:stepPulse 1s ease-in-out infinite}
.processing-card .proc-step.done .step-icon{background:var(--success);color:#fff}
@keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 6px transparent}}

/* --- Toast --- */
.tw-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);z-index:300;padding:12px 20px;border-radius:var(--radius);font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);transition:transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;max-width:90%;text-align:center;backdrop-filter:blur(10px)}
.tw-toast.show{transform:translateX(-50%) translateY(0)}
.tw-toast-success{background:linear-gradient(135deg,var(--success),#059669);color:#fff}
.tw-toast-error{background:linear-gradient(135deg,var(--danger),#dc2626);color:#fff}
.tw-toast-info{background:linear-gradient(135deg,var(--accent),#1565c0);color:#fff}

/* --- Accordion --- */
.tw-accordion-item{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px;transition:var(--transition)}
.tw-accordion-item:hover{border-color:var(--border2)}
.tw-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg2);cursor:pointer;font-weight:600;font-size:14px;transition:var(--transition)}
.tw-accordion-header:hover{background:var(--bg3)}
.tw-accordion-header .arrow{transition:transform .2s ease;font-size:12px}
.tw-accordion-item.open .accordion-arrow{transform:rotate(180deg)}
.tw-accordion-body{padding:0 16px;max-height:0;overflow:hidden;transition:all .3s ease;background:var(--bg3)}
.tw-accordion-item.open .tw-accordion-body{max-height:500px;padding:14px 16px}

/* --- Wheel --- */
.tw-wheel-container{position:relative;width:280px;height:280px;margin:0 auto}
.tw-wheel{width:100%;height:100%;border-radius:50%;background:conic-gradient(from 0deg,#1e88e5,#1565c0,#bbdef9,#1e88e5,#1565c0);border:6px solid var(--accent);display:flex;align-items:center;justify-content:center;transition:transform 4s cubic-bezier(.17,.67,.12,.99);box-shadow:0 8px 32px var(--accent-glow)}
.tw-wheel::after{content:'';position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid var(--accent);z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.tw-wheel-center{width:64px;height:64px;background:var(--bg2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--accent);border:3px solid var(--accent);box-shadow:var(--shadow)}

/* --- Crypto Ticker --- */
.tw-ticker{display:flex;gap:12px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.tw-ticker::-webkit-scrollbar{display:none}
.tw-ticker-item{flex-shrink:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;min-width:120px;transition:var(--transition);position:relative;overflow:hidden}
.tw-ticker-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent);pointer-events:none}
.tw-ticker-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border2)}
.tw-ticker-item .ticker-symbol{font-size:12px;font-weight:700;color:var(--text2)}
.tw-ticker-item .ticker-price{font-size:15px;font-weight:800;margin-top:2px}
.tw-ticker-item .ticker-change{font-size:11px;font-weight:600;margin-top:2px}
.tw-ticker-item .ticker-change.up{color:var(--success)}
.tw-ticker-item .ticker-change.down{color:var(--danger)}

/* --- Coin Rain --- */
.coin-rain{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:var(--rain-opacity,0)}
.coin-rain span{position:absolute;font-size:18px;animation:coinFall linear infinite;opacity:.5}
@keyframes coinFall{0%{transform:translateY(-20px) rotate(0deg);opacity:0}10%{opacity:.5}90%{opacity:.5}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* --- Pulse Glow --- */
.pulse-glow{animation:pulseGlow 2s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 4px 15px var(--accent-glow)}50%{box-shadow:0 4px 25px rgba(30,136,229,.4),0 0 40px rgba(30,136,229,.2)}}

/* --- Floating Action --- */
.tw-fab{position:fixed;bottom:calc(var(--nav-h) + 16px);right:16px;z-index:90;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1565c0);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--shadow-glow);transition:var(--transition)}
.tw-fab:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(30,136,229,.4)}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

/* --- Utility --- */
.text-center{text-align:center}
.text-accent{color:var(--accent)}
.text-muted{color:var(--text2)}
.text-dim{color:var(--text3)}
.text-sm{font-size:12px}
.text-xs{font-size:11px}
.text-lg{font-size:18px}
.text-xl{font-size:24px}
.font-bold{font-weight:700}
.font-black{font-weight:900}
.font-display{font-family:'Cormorant Garamond',serif}
.mt-1{margin-top:4px}
.mt-2{margin-top:8px}
.mt-3{margin-top:12px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mb-1{margin-bottom:4px}
.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.gap-1{gap:4px}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.w-full{width:100%}
.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relative{position:relative}
.rounded{border-radius:var(--radius)}
.border{border:1px solid var(--border)}
.bg-accent{background:var(--accent);color:#fff}
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* --- Skeleton --- */
.tw-skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:skeleton 1.5s infinite;border-radius:var(--radius)}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --- Phone Input --- */
.intl-tel-input{width:100%}
.intl-tel-input .iti__selected-flag{background:var(--bg3);border-radius:var(--radius-sm);padding:0 8px}
.intl-tel-input input{width:100%;background:var(--input);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px 12px 70px;color:var(--text);font-size:14px}

/* --- Success Checkmark --- */
.success-check{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--success),#059669);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:successPop .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px rgba(16,185,129,.3)}
.success-check i{font-size:36px;color:#fff}
@keyframes successPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}

/* --- Responsive --- */
@media(min-width:481px){
  .app-shell{max-width:480px;margin:0 auto}
}

/* ================================================
   DARK MODE OVERRIDES
   ================================================ */
html.dark body{background:var(--bg);color:var(--text)}
html.dark .tw-header{background:rgba(15,17,23,.9);border-bottom-color:rgba(255,255,255,.06)}
html.dark .tw-header .brand-name{color:var(--text)}
html.dark .tw-header .brand-tagline{color:var(--text3)}
html.dark .tw-header .action-btn{background:var(--bg3);border-color:rgba(255,255,255,.06)}
html.dark .tw-header .action-btn:hover{background:var(--accent);border-color:var(--accent)}
html.dark .lang-select{background:var(--bg3);border-color:rgba(255,255,255,.06);color:var(--text)}
html.dark .tw-nav{background:rgba(15,17,23,.9);border-top-color:rgba(255,255,255,.06);box-shadow:0 -4px 30px rgba(0,0,0,.3)}
html.dark .tw-nav a{color:var(--text3)}
html.dark .tw-nav a:hover{color:var(--accent)}
html.dark .tw-nav a.active{color:var(--accent);background:rgba(66,165,245,.1)}
html.dark .tw-nav .nav-center a{background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.5) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.5) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1.5px solid rgba(59,130,246,0.55);box-shadow:0 4px 20px rgba(0,0,0,0.45),0 0 0 4px rgba(59,130,246,0.2),inset 0 1px 2px rgba(255,255,255,0.25)}
html.dark .tw-card{background:var(--bg2);border-color:rgba(255,255,255,.06)}
html.dark .tw-card:hover{border-color:rgba(255,255,255,.12)}
html.dark .tw-stat{background:var(--bg2);border-color:rgba(255,255,255,.06)}
html.dark .tw-stat:hover{border-color:rgba(255,255,255,.12)}
html.dark .tw-list-item{background:var(--bg2);border-color:rgba(255,255,255,.06)}
html.dark .tw-list-item:hover{border-color:rgba(255,255,255,.12)}
html.dark .tw-list-icon.green{background:rgba(66,165,245,.12);color:var(--accent)}
html.dark .tw-list-icon.blue{background:rgba(66,165,245,.12);color:var(--info)}
html.dark .tw-list-icon.amber{background:rgba(245,158,11,.12);color:var(--warning)}
html.dark .tw-list-icon.red{background:rgba(239,68,68,.12);color:var(--danger)}
html.dark .tw-list-amount.positive{color:var(--success)}
html.dark .tw-btn-primary{background:linear-gradient(135deg,var(--accent),#1e88e5);box-shadow:0 4px 15px var(--accent-glow)}
html.dark .tw-btn-primary:hover{box-shadow:0 6px 20px rgba(66,165,245,.4)}
html.dark .tw-btn-secondary{background:var(--bg3);border-color:rgba(255,255,255,.06);color:var(--text)}
html.dark .tw-btn-secondary:hover{border-color:var(--accent);background:var(--bg4)}
html.dark .tw-btn-danger{background:linear-gradient(135deg,var(--danger),#dc2626);box-shadow:0 4px 15px rgba(239,68,68,.3)}
html.dark .tw-input{background:var(--input);border-color:rgba(255,255,255,.06);color:var(--text)}
html.dark .tw-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
html.dark .tw-tabs{background:var(--bg3)}
html.dark .tw-tab{color:var(--text3)}
html.dark .tw-tab.active{background:linear-gradient(135deg,var(--accent),#1e88e5);color:#fff}
html.dark .tw-accordion-item{border-color:rgba(255,255,255,.06)}
html.dark .tw-accordion-header{background:var(--bg2);color:var(--text)}
html.dark .tw-accordion-body{background:var(--bg3)}
html.dark .tw-promo-green{background:linear-gradient(135deg,#064e3b,#059669)}
html.dark .tw-promo-blue{background:linear-gradient(135deg,#1e3a5f,#1e88e5)}
html.dark .tw-promo-gold{background:linear-gradient(135deg,#783500,#d97706)}
html.dark .tw-progress{background:var(--bg4)}
html.dark .tw-ticker-item{background:var(--bg2);border-color:rgba(255,255,255,.06)}
html.dark .tw-ticker-item:hover{border-color:rgba(255,255,255,.12)}
html.dark .processing-card{background:var(--bg2);box-shadow:0 20px 60px rgba(0,0,0,.5)}
html.dark .processing-card .proc-title{color:var(--text)}
html.dark .processing-card .proc-subtitle{color:var(--text3)}
html.dark .processing-card .proc-step{color:var(--text3)}
html.dark .processing-card .proc-step.active{color:var(--accent)}
html.dark .processing-card .proc-step.done{color:var(--success)}
html.dark .tw-toast{box-shadow:0 10px 30px rgba(0,0,0,.4)}
html.dark .coin-rain span{opacity:.3}
html.dark ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
html.dark .brand-mark{box-shadow:0 2px 8px var(--accent-glow)}

/* --- Modern Language Button & Bottom Sheet Modal --- */
.modern-lang-btn{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.15);outline:none}
.modern-lang-btn:hover{border-color:var(--accent);background:var(--bg3);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}
.modern-lang-btn .lang-icon-badge{width:22px;height:22px;border-radius:50%;background:rgba(59,130,246,.15);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--accent)}
.modern-lang-btn .lang-chevron{font-size:11px;color:var(--text3);transition:transform .2s ease}
.modern-lang-btn:hover .lang-chevron{transform:translateY(-2px);color:var(--accent)}

.header-lang-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:18px;color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}
.header-lang-btn:hover{border-color:var(--accent);background:var(--bg3)}

.lang-bottom-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.lang-bottom-sheet-backdrop.active{opacity:1;pointer-events:auto}

.lang-bottom-sheet{width:100%;max-width:480px;background:var(--bg2);border:1px solid var(--border);border-bottom:none;border-radius:24px 24px 0 0;padding:16px 20px 32px;transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 -10px 40px rgba(0,0,0,.5);max-height:85vh;overflow-y:auto}
.lang-bottom-sheet-backdrop.active .lang-bottom-sheet{transform:translateY(0)}

.sheet-handle-bar{width:40px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto 16px}
.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.sheet-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text)}
.sheet-close-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s ease}
.sheet-close-btn:hover{color:var(--text);border-color:var(--accent);background:var(--bg4)}

.sheet-content{display:flex;flex-direction:column;gap:10px}
.lang-sheet-option{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s ease}
.lang-sheet-option:hover{border-color:var(--accent);background:var(--bg3);transform:translateX(2px)}
.lang-sheet-option.selected{border-color:var(--accent);background:rgba(59,130,246,.08);box-shadow:0 0 16px var(--accent-glow)}

.lang-sheet-flag{font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.lang-sheet-info{flex:1}
.lang-sheet-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.lang-sheet-sub{font-size:11px;color:var(--text3);font-weight:500}

.lang-sheet-check{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--accent)}
.lang-sheet-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);transition:border-color .2s}
.lang-sheet-option:hover .lang-sheet-radio{border-color:var(--accent)}

/* --- Profile Page Custom Redesign (Image Reference) --- */
.profile-ticker-bar{position:relative;display:flex;align-items:center;gap:10px;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.3) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.3) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:20px;padding:6px 14px;margin-bottom:16px;overflow:hidden;font-size:12px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.profile-ticker-bar::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:10px 10px;opacity:0.4;pointer-events:none;z-index:1}
.profile-ticker-bar>*{position:relative;z-index:2}
.profile-ticker-badge{background:linear-gradient(90deg,#1d4ed8,#2563eb);color:#ffffff;font-weight:800;font-size:10px;padding:3px 10px;border-radius:12px;white-space:nowrap;display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.25);box-shadow:0 2px 8px rgba(37,99,235,0.4)}
.profile-ticker-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cbd5e1;font-weight:500}

.profile-brand-box{text-align:center;margin-bottom:14px}
.profile-brand-title{font-size:22px;font-weight:800;letter-spacing:1px;color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px}
.profile-brand-title .brand-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:900}
.profile-brand-italic{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;color:var(--accent);font-size:22px;border-left:1.5px solid var(--border2);padding-left:8px;margin-left:4px}
.profile-brand-sub{font-size:10px;letter-spacing:2px;color:var(--text3);font-weight:600;margin-top:2px;text-transform:uppercase}

.profile-actions-strip{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:6px 16px;margin:0 auto 18px;width:fit-content;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.profile-strip-btn{width:34px;height:34px;border-radius:50%;background:transparent;border:none;color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:all .2s ease;text-decoration:none}
.profile-strip-btn:hover{color:var(--accent);background:var(--bg3);transform:scale(1.1)}
.profile-strip-btn.whatsapp{color:#25d366}

.profile-hero-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:24px;padding:20px;margin-bottom:14px;display:flex;gap:18px;align-items:flex-start;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);overflow:hidden}
.profile-hero-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.profile-hero-card>*{position:relative;z-index:2}
.profile-avatar-wrapper{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.profile-avatar-circle{width:76px;height:76px;border-radius:50%;background:rgba(59,130,246,.2);border:2.5px solid #60a5fa;color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;position:relative;box-shadow:0 0 20px rgba(59,130,246,0.5),inset 0 1px 2px rgba(255,255,255,0.3)}
.profile-cam-badge{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:#1e293b;color:#60a5fa;border:2px solid #091326;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.5)}
.profile-rank-pill{margin-top:10px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;font-weight:800;font-size:11px;padding:4px 12px;border-radius:14px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(245,158,11,.4)}

.profile-details-list{flex:1;min-width:0}
.profile-display-name{font-size:20px;font-weight:800;color:#ffffff;margin-bottom:8px;line-height:1.2}
.profile-info-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;margin-bottom:6px;line-height:1.3}
.profile-info-item .info-label{color:#93c5fd;font-weight:600;white-space:nowrap}
.profile-info-item .info-val{font-weight:700;color:#ffffff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-inline-btn{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,0.35);color:#60a5fa;border-radius:6px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:all .15s ease;margin-left:4px;flex-shrink:0}
.profile-inline-btn:hover{background:var(--accent);color:#fff;transform:scale(1.1);box-shadow:0 0 8px rgba(59,130,246,0.6)}

.profile-tri-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.profile-mini-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;justify-content:center}
.profile-mini-label{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}
.profile-mini-val-row{display:flex;align-items:center;justify-content:space-between;gap:4px}
.profile-mini-val{font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.profile-stats-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);overflow:hidden}
.profile-stats-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.profile-stats-2x2{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profile-stat-box{background:rgba(15,23,42,0.65);border:1px solid rgba(59,130,246,0.25);border-radius:14px;padding:12px 14px;backdrop-filter:blur(8px)}
.profile-stat-box .stat-sub{font-size:11.5px;color:#93c5fd;font-weight:600;margin-bottom:3px}
.profile-stat-box .stat-num{font-size:18px;font-weight:900;color:#ffffff;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.profile-stat-box .stat-num.highlight{color:#60a5fa;text-shadow:0 0 10px rgba(96,165,250,0.6)}

.profile-balance-box{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;padding:18px 20px;margin-bottom:18px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);overflow:hidden}
.profile-balance-box::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.profile-balance-box>*{position:relative;z-index:2}
.profile-balance-label{font-size:11px;font-weight:800;color:#93c5fd;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:4px}
.profile-balance-amount{font-size:30px;font-weight:900;color:#ffffff;line-height:1.2;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,0.6)}
.profile-fund-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:linear-gradient(90deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);border:1px solid rgba(255,255,255,0.25);color:#ffffff;border-radius:20px;font-size:12px;font-weight:800;text-decoration:none;transition:all .2s ease;box-shadow:0 4px 14px rgba(37,99,235,0.45)}
.profile-fund-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.6);color:#ffffff}

/* 5 Quick Circular Buttons Row */
.profile-5actions-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:6px}
.profile-5act-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;flex:1;min-width:0}
.profile-5act-icon{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.35) 0%,transparent 60%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1.5px solid rgba(59,130,246,0.4);color:#60a5fa;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s ease;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,0.15)}
.profile-5act-item:hover .profile-5act-icon{border-color:#60a5fa;transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px rgba(59,130,246,0.5);color:#ffffff}
.profile-5act-label{font-size:11px;font-weight:700;color:#cbd5e1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.profile-5act-item:hover .profile-5act-label{color:#ffffff}

/* Settings Section */
.profile-settings-heading{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:1.5px;margin-bottom:10px;text-transform:uppercase}
.profile-settings-card{position:relative;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.35) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.35) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:22px;overflow:hidden;margin-bottom:18px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.12)}
.profile-settings-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:10px 10px;opacity:0.5;pointer-events:none;z-index:1}
.profile-settings-row{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid rgba(59,130,246,0.2);text-decoration:none;color:#ffffff;transition:all .2s ease;cursor:pointer}
.profile-settings-row:last-child{border-bottom:none}
.profile-settings-row:hover{background:rgba(59,130,246,0.15)}
.profile-settings-left{display:flex;align-items:center;gap:14px;min-width:0}
.profile-row-icon{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.profile-row-icon.purple{background:rgba(168,85,247,.15);color:#c084fc}
.profile-row-icon.orange{background:rgba(249,115,22,.15);color:#fb923c}
.profile-row-icon.green{background:rgba(59,130,246,.15);color:#60a5fa}
.profile-row-icon.blue{background:rgba(59,130,246,.15);color:#60a5fa}
.profile-row-icon.yellow{background:rgba(234,179,8,.15);color:#facc15}
.profile-row-icon.cyan{background:rgba(6,182,212,.15);color:#22d3ee}
.profile-row-icon.pink{background:rgba(236,72,153,.15);color:#f472b6}
.profile-row-title{font-size:14px;font-weight:700;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-settings-right{display:flex;align-items:center;gap:8px;font-size:13px;color:#94a3b8;flex-shrink:0}
.profile-settings-right .sub-text{font-size:12px;color:#93c5fd;font-weight:600}
.profile-settings-right .chevron{font-size:12px;color:#60a5fa}

/* Light Theme Overrides for Menu / Profile Page */
html.light .profile-ticker-bar{background:#ffffff;border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.06)}
html.light .profile-ticker-bar::before,html.light .profile-hero-card::before,html.light .profile-stats-card::before,html.light .profile-balance-box::before,html.light .profile-settings-card::before,html.light .wallet-card-item::before{display:none}
html.light .profile-ticker-badge{background:rgba(59,130,246,.15);color:var(--accent);border:1px solid rgba(59,130,246,.25);box-shadow:none}
html.light .profile-ticker-text{color:var(--text2)}
html.light .profile-hero-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.06)}
html.light .profile-avatar-circle{background:rgba(59,130,246,.12);border:2.5px solid var(--accent);color:var(--accent);box-shadow:0 4px 16px var(--accent-glow)}
html.light .profile-cam-badge{background:#374151;color:#fff;border:2px solid #ffffff}
html.light .profile-display-name{color:var(--text)}
html.light .profile-info-item{color:var(--text2)}
html.light .profile-info-item .info-label{color:var(--text3)}
html.light .profile-info-item .info-val{color:var(--text)}
html.light .profile-inline-btn{background:rgba(59,130,246,.1);border:none;color:var(--accent);box-shadow:none}
html.light .profile-stats-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .profile-stat-box{background:var(--bg3);border:1px solid var(--border);backdrop-filter:none}
html.light .profile-stat-box .stat-sub{color:var(--text3)}
html.light .profile-stat-box .stat-num{color:var(--text);text-shadow:none}
html.light .profile-stat-box .stat-num.highlight{color:var(--accent);text-shadow:none}
html.light .profile-balance-box{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .profile-balance-label{color:var(--accent)}
html.light .profile-balance-amount{color:var(--text);text-shadow:none}
html.light .profile-fund-btn{background:rgba(59,130,246,.12);color:var(--accent);border:1px solid rgba(59,130,246,.3);box-shadow:none}
html.light .profile-5act-icon{background:rgba(59,130,246,.1);border:1.5px solid var(--border);color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.06)}
html.light .profile-5act-label{color:var(--text2)}
html.light .profile-settings-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.06)}
html.light .profile-settings-row{border-bottom:1px solid var(--border);color:var(--text)}
html.light .profile-settings-row:hover{background:var(--bg3)}
html.light .profile-row-title{color:var(--text)}
html.light .profile-settings-right{color:var(--text3)}
html.light .profile-settings-right .sub-text{color:var(--text3)}
html.light .profile-settings-right .chevron{color:var(--text3)}

/* Notification Badge & Pill */
.notif-btn{position:relative}
.notif-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;border-radius:10px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid var(--bg2);box-shadow:0 2px 8px rgba(239,68,68,.5);pointer-events:none;z-index:2;line-height:1}
.notif-pill-tag{background:rgba(239,68,68,.12);color:var(--danger);font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;border:1px solid rgba(239,68,68,.25)}

/* Notifications Page Styles */
.notif-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.notif-empty-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%) !important;border:1px solid rgba(59,130,246,0.45) !important;border-radius:24px !important;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15) !important;overflow:hidden}
.notif-empty-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.notif-empty-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}
.notif-empty-card>*{position:relative;z-index:2}
.notif-item{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;overflow:hidden;transition:all .25s ease;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15)}
.notif-item::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.notif-item::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}
.notif-item>*{position:relative;z-index:2}
.notif-item:hover{border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 8px 28px rgba(59,130,246,0.45),inset 0 1px 2px rgba(255,255,255,.3)}
.notif-item.unread{border-left:4px solid #60a5fa;border-color:rgba(96,165,250,0.6);background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.55) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.55) 0%,transparent 55%),linear-gradient(145deg,#0d1a38 0%,#071126 50%,#112650 100%)}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:12px}
.notif-header-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.notif-type-icon{width:38px;height:38px;border-radius:12px;background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.3);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.notif-type-icon.unread{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(59,130,246,.5)}
.notif-title-wrap{min-width:0;flex:1}
.notif-title-row{display:flex;align-items:center;gap:8px}
.notif-item-title{font-size:14px;font-weight:700;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-item.unread .notif-item-title{font-weight:800;color:#ffffff;text-shadow:0 0 8px rgba(96,165,250,0.5)}
.notif-unread-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;flex-shrink:0;box-shadow:0 0 6px #ef4444}
.notif-item-time{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#93c5fd;background:rgba(59,130,246,0.14);border:1px solid rgba(59,130,246,0.3);border-radius:8px;padding:3px 8px;margin-top:4px;width:fit-content}
.notif-item-time i{color:#60a5fa;font-size:10px}
.notif-chevron{font-size:12px;color:#60a5fa;transition:transform .3s ease;flex-shrink:0}
.notif-item.open .notif-chevron{transform:rotate(90deg);color:#93c5fd}
.notif-body{padding:0 16px 16px;font-size:13px;color:#cbd5e1;line-height:1.6;border-top:1px solid rgba(59,130,246,0.2);margin-top:2px;padding-top:12px;display:none}
.notif-item.open .notif-body{display:block;animation:fadeDown .25s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Light mode overrides for notifications */
html.light .notif-item{background:var(--bg2);border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .notif-item::before,html.light .notif-item::after{display:none}
html.light .notif-item.unread{border-left:4px solid var(--accent);background:linear-gradient(90deg,rgba(59,130,246,.08),var(--bg2));border-color:var(--border)}
html.light .notif-item-title{color:var(--text)}
html.light .notif-item.unread .notif-item-title{color:var(--text);text-shadow:none}
html.light .notif-item-time{color:var(--text3);background:rgba(0,0,0,0.04);border:1px solid var(--border)}
html.light .notif-item-time i{color:var(--text3)}
html.light .notif-chevron{color:var(--text3)}
html.light .notif-body{color:var(--text2);border-top:1px dashed var(--border)}

/* Activity Page Styles */
.activity-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.activity-stat-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:18px;padding:16px 14px;box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.15);overflow:hidden}
.activity-stat-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.activity-stat-card>*{position:relative;z-index:2}
.activity-stat-label{font-size:10.5px;font-weight:700;color:#93c5fd;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.activity-stat-val{font-size:18px;font-weight:800;color:#ffffff;font-family:'JetBrains Mono',monospace;line-height:1.2}
.activity-stat-val.highlight{color:#60a5fa}

.activity-tabs-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(15,23,42,0.6);border:1px solid rgba(59,130,246,0.25);border-radius:14px;padding:4px;margin-bottom:18px}
.activity-tab-btn{display:flex;align-items:center;justify-content:center;padding:10px 6px;border-radius:10px;font-size:12px;font-weight:700;color:#94a3b8;cursor:pointer;transition:all .2s ease;text-align:center;background:transparent;border:none}
.activity-tab-btn.active{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#ffffff;box-shadow:0 2px 10px rgba(59,130,246,0.4)}

.activity-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.activity-card-item{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;padding:16px 18px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);transition:all .25s ease;overflow:hidden}
.activity-card-item::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.activity-card-item::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}
.activity-card-item>*{position:relative;z-index:2}
.activity-card-item:hover{border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 8px 28px rgba(59,130,246,0.45),inset 0 1px 2px rgba(255,255,255,.3)}

.activity-card-main{display:flex;align-items:center;justify-content:space-between;gap:12px}
.activity-item-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.activity-icon-wrap{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.activity-icon-wrap.deposit{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.3)}
.activity-icon-wrap.withdrawal{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.3)}
.activity-icon-wrap.earning{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.3)}
.activity-icon-wrap.commission{background:rgba(139,92,246,0.15);color:#a78bfa;border:1px solid rgba(139,92,246,0.3)}
.activity-icon-wrap.bonus{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.3)}

.activity-info-wrap{min-width:0;flex:1}
.activity-title{font-size:14px;font-weight:700;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-desc{font-size:11.5px;color:#94a3b8;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-time-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#93c5fd;background:rgba(59,130,246,0.14);border:1px solid rgba(59,130,246,0.3);border-radius:6px;padding:2px 7px;margin-top:4px}
.activity-time-pill i{font-size:9px;color:#60a5fa}

.activity-item-right{text-align:right;flex-shrink:0}
.activity-amt{font-size:14px;font-weight:800;font-family:'JetBrains Mono',monospace;letter-spacing:-.3px}
.activity-amt.positive{color:#34d399}
.activity-amt.negative{color:#f87171}
.activity-curr{font-size:10px;font-weight:700;color:#93c5fd;margin-left:2px}
.activity-status-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;margin-top:4px;border:1px solid transparent}
.activity-status-badge.completed{color:#93c5fd;background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.4)}
.activity-status-badge.pending{color:#fbbf24;background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.35)}
.activity-status-badge.rejected{color:#f87171;background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35)}

/* Light mode overrides for activity */
html.light .activity-stat-card{background:var(--bg2);border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .activity-stat-card::before{display:none}
html.light .activity-stat-label{color:var(--text3)}
html.light .activity-stat-val{color:var(--text)}
html.light .activity-tabs-bar{background:var(--bg2);border:1px solid var(--border)}
html.light .activity-tab-btn{color:var(--text3)}
html.light .activity-tab-btn.active{background:var(--accent);color:#fff}
html.light .activity-card-item{background:var(--bg2);border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .activity-card-item::before,html.light .activity-card-item::after{display:none}
html.light .activity-title{color:var(--text)}
html.light .activity-desc{color:var(--text3)}
html.light .activity-time-pill{color:var(--text3);background:rgba(0,0,0,0.04);border:1px solid var(--border)}
html.light .activity-time-pill i{color:var(--text3)}

/* Wallet Management Styles */
.wallet-card-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.wallet-card-item{position:relative;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.35) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.35) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:20px;padding:16px 18px;box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.12);transition:all .2s ease;overflow:hidden}
.wallet-card-item::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:10px 10px;opacity:0.5;pointer-events:none;z-index:1}
.wallet-card-item>*{position:relative;z-index:2}
.wallet-card-item:hover{border-color:#60a5fa;box-shadow:0 6px 20px rgba(59,130,246,0.35)}
.wallet-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wallet-net-info{display:flex;align-items:center;gap:10px}
.wallet-net-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wallet-net-icon svg{width:100%;height:100%;object-fit:contain;border-radius:50%}
.wallet-net-title{font-size:15px;font-weight:700;color:#ffffff;line-height:1.2}
.wallet-net-sub{font-size:11px;color:#93c5fd;font-weight:500}
.wallet-delete-btn{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:5px 10px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:all .2s ease}
.wallet-delete-btn:hover{background:var(--danger);color:#fff}
.wallet-address-box{background:rgba(15,23,42,0.65);border:1px solid rgba(59,130,246,0.25);border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:#ffffff;word-break:break-all}
.wallet-copy-btn{background:transparent;border:none;color:#60a5fa;font-size:14px;cursor:pointer;padding:4px 6px;flex-shrink:0;transition:transform .15s ease}
.wallet-copy-btn:hover{transform:scale(1.15);color:#93c5fd}

html.light .wallet-card-item{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .wallet-card-item::before{display:none}
html.light .wallet-net-title{color:var(--text)}
html.light .wallet-net-sub{color:var(--text3)}
html.light .wallet-address-box{background:var(--bg3);border:1px solid var(--border);color:var(--text)}
html.light .wallet-copy-btn{color:var(--accent)}
html.light .wallet-delete-btn{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid rgba(239,68,68,.25)}

/* Network Selector Grid */
.net-select-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-bottom:16px}
.net-select-opt{position:relative;cursor:pointer}
.net-select-opt input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.net-select-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;background:var(--bg3);border:2px solid var(--border);border-radius:16px;transition:all .2s ease;text-align:center}
.net-select-box .net-icon-wrap{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.net-select-box .net-icon-wrap svg{width:100%;height:100%;border-radius:50%}
.net-select-box .net-opt-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.2;transition:color .2s ease}
.net-select-box .net-opt-badge{font-size:9px;color:var(--text3);font-weight:600;text-transform:uppercase;transition:color .2s ease}
.net-select-opt input[type="radio"]:checked + .net-select-box{border-color:var(--accent);background:rgba(59,130,246,.15);box-shadow:0 0 16px var(--accent-glow);transform:translateY(-2px)}
.net-select-opt input[type="radio"]:checked + .net-select-box .net-opt-name{color:#1e40af;font-weight:800}
.net-select-opt input[type="radio"]:checked + .net-select-box .net-opt-badge{color:#1d4ed8;font-weight:700}
.net-select-opt.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

/* Avatar Modal & Components */
.avatar-modal-box{max-width:440px}
.avatar-modal-body{display:flex;flex-direction:column;align-items:center;gap:16px}
.avatar-preview-wrap{display:flex;justify-content:center;margin-bottom:4px}
.avatar-preview-circle{width:96px;height:96px;border-radius:50%;background:rgba(59,130,246,.12);border:3px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;box-shadow:0 6px 24px var(--accent-glow);transition:all .3s ease}
.avatar-dropzone{width:100%;background:var(--bg3);border:2px dashed var(--border2);border-radius:18px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .2s ease;text-align:center}
.avatar-dropzone:hover{border-color:var(--accent);background:var(--bg4);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
.avatar-upload-icon{font-size:28px;color:var(--accent);margin-bottom:2px}
.avatar-upload-title{font-size:14px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;max-width:90%}
.avatar-upload-sub{font-size:11px;color:var(--text3);font-weight:500}
.avatar-rules-box{width:100%;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:14px 16px}
.avatar-rules-head{font-size:12px;font-weight:800;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.5px}
.avatar-rules-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text2)}
.avatar-rules-list li{display:flex;align-items:center;gap:8px}
.avatar-actions-grid{width:100%;display:flex;flex-direction:column;gap:8px}

/* --- Quant / Task Page Styles (Reference Skeleton) --- */
.task-page-header{margin-bottom:18px}
.task-header-kicker{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.task-header-title{font-size:26px;font-weight:900;color:var(--text);line-height:1.1;margin-bottom:4px}
.task-header-subtitle{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1.2px;text-transform:uppercase}

/* --- Team Page Skeleton Styles (Reference Layout) --- */
.team-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.team-header-kicker{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:2px}
.team-header-title{font-size:28px;font-weight:900;color:var(--text);line-height:1.1;margin:0}
.team-header-action-badge{width:36px;height:36px;border-radius:50%;background:var(--bg2);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.08)}

.team-main-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:24px;padding:22px 20px;margin-bottom:22px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);text-align:center;overflow:hidden}
.team-main-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.team-main-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}
.team-top-stats-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid rgba(59,130,246,0.25)}
.team-top-stat-box .stat-num{font-size:24px;font-weight:900;color:#ffffff;line-height:1.1;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,0.6)}
.team-top-stat-box .stat-num.highlight{color:#60a5fa;text-shadow:0 0 12px rgba(96,165,250,0.7)}
.team-top-stat-box .stat-lbl{font-size:11.5px;color:#93c5fd;font-weight:700;letter-spacing:0.3px}

.team-ref-code-display{position:relative;z-index:2;font-size:28px;font-weight:900;color:#60a5fa;letter-spacing:1.5px;margin-bottom:6px;cursor:pointer;transition:transform .2s ease;display:inline-block;text-shadow:0 0 14px rgba(96,165,250,0.7)}
.team-ref-code-display:hover{transform:scale(1.04)}
.team-ref-url-display{position:relative;z-index:2;font-size:11px;color:#94a3b8;word-break:break-all;margin-bottom:18px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.team-card-actions{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px}
.team-copy-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;background:linear-gradient(90deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);border:1px solid rgba(255,255,255,0.25);border-radius:14px;color:#ffffff;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s ease;width:100%;box-shadow:0 4px 16px rgba(37,99,235,0.45)}
.team-copy-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(59,130,246,0.6);color:#ffffff}
.team-view-list-btn{display:flex;align-items:center;justify-content:center;padding:12px 18px;background:rgba(59,130,246,0.12);border:1.5px solid rgba(59,130,246,0.45);border-radius:14px;color:#60a5fa;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s ease;width:100%}
.team-view-list-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 18px var(--accent-glow)}

.team-section-heading{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}

.team-gen-cards-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.team-gen-card{position:relative;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.35) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.35) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:20px;padding:16px 18px;box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.12);transition:all .2s ease;overflow:hidden}
.team-gen-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:10px 10px;opacity:0.5;pointer-events:none;z-index:1}
.team-gen-card:hover{border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.35)}
.team-gen-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.team-gen-title{font-size:13px;font-weight:800;color:#60a5fa;display:flex;align-items:center;gap:6px;text-shadow:0 0 8px rgba(96,165,250,0.5)}
.team-gen-list-btn{background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.4);color:#93c5fd;font-size:12px;font-weight:700;cursor:pointer;padding:4px 12px;border-radius:8px;transition:all .15s ease}
.team-gen-list-btn:hover{color:#ffffff;background:var(--accent);border-color:var(--accent)}

.team-gen-stats-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:8px}
.team-gen-stat-col{display:flex;flex-direction:column;gap:4px}
.team-gen-stat-col .gen-stat-lbl{font-size:11px;color:#93c5fd;font-weight:600}
.team-gen-stat-col .gen-stat-val{font-size:18px;font-weight:900;color:#ffffff}
.team-gen-stat-col .gen-stat-val.highlight{color:#60a5fa;text-shadow:0 0 8px rgba(96,165,250,0.6)}

/* Light Theme Overrides for Team Page */
html.light .team-main-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.06)}
html.light .team-main-card::before,html.light .team-main-card::after,html.light .team-gen-card::before{display:none}
html.light .team-top-stats-grid{border-bottom:1px solid var(--border)}
html.light .team-top-stat-box .stat-num{color:#0f172a;text-shadow:none}
html.light .team-top-stat-box .stat-num.highlight{color:var(--accent);text-shadow:none}
html.light .team-top-stat-box .stat-lbl{color:#64748b}
html.light .team-ref-code-display{color:var(--accent);text-shadow:none}
html.light .team-ref-url-display{color:#64748b}
html.light .team-copy-btn{background:var(--bg3);border:1.5px solid var(--border2);color:var(--text2);box-shadow:none}
html.light .team-copy-btn:hover{border-color:var(--accent);color:var(--text);background:var(--bg4)}
html.light .team-view-list-btn{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.05));border:1.5px solid rgba(16,185,129,.3);color:var(--accent);box-shadow:none}
html.light .team-view-list-btn:hover{background:var(--accent);color:#fff}
html.light .team-gen-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .team-gen-title{color:var(--accent);text-shadow:none}
html.light .team-gen-list-btn{background:transparent;border:none;color:var(--text2)}
html.light .team-gen-list-btn:hover{color:var(--accent);background:var(--bg3)}
html.light .team-gen-stat-col .gen-stat-lbl{color:var(--text3)}
html.light .team-gen-stat-col .gen-stat-val{color:#0f172a}
html.light .team-gen-stat-col .gen-stat-val.highlight{color:var(--accent);text-shadow:none}

/* Team Modal & Items */
.team-modal-box{max-width:480px}
.team-modal-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
.team-tab-btn{flex:1;padding:8px 12px;border-radius:12px;font-size:12px;font-weight:700;background:var(--bg3);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .2s ease;white-space:nowrap;text-align:center}
.team-tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.team-modal-body{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.team-member-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:14px}
.team-member-avatar{width:36px;height:36px;border-radius:50%;background:rgba(59,130,246,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.team-member-info{flex:1;min-width:0}
.team-member-name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-member-date{font-size:10px;color:var(--text3);margin-top:2px}
.team-member-balance .balance-badge{font-size:11px;font-weight:700;color:var(--accent);background:rgba(59,130,246,.1);padding:4px 8px;border-radius:8px}
.team-empty-state{text-align:center;padding:32px 16px;color:var(--text3)}
.team-empty-state i{font-size:36px;margin-bottom:8px;opacity:.5}
.team-empty-state p{font-size:13px;margin:0}

/* --- Assets Page Skeleton Styles (Reference Layout) --- */
.assets-ticker-bar{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:10px 14px;margin-bottom:18px;overflow:hidden}
.assets-ticker-bar .ticker-badge{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--accent);background:rgba(59,130,246,.12);padding:4px 8px;border-radius:8px;flex-shrink:0;text-transform:uppercase}
.assets-ticker-bar .ticker-text{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.assets-alert-box{padding:12px 16px;border-radius:14px;margin-bottom:16px;font-size:13px;display:flex;align-items:center;gap:8px}
.assets-alert-box.danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--danger)}
.assets-alert-box.success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--success)}

.assets-main-balance-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:24px;padding:26px 20px;margin-bottom:16px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);text-align:left;overflow:hidden}
.assets-main-balance-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.assets-main-balance-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}
.assets-main-balance-card .balance-card-kicker{position:relative;z-index:2;font-size:11px;font-weight:800;color:#93c5fd;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,0.6)}
.assets-main-balance-card .balance-card-amount{position:relative;z-index:2;font-size:38px;font-weight:900;color:#ffffff;line-height:1.05;margin-bottom:4px;letter-spacing:-.5px;text-shadow:0 2px 10px rgba(0,0,0,0.7),0 0 20px rgba(59,130,246,0.4)}
.assets-main-balance-card .balance-card-currency{position:relative;z-index:2;font-size:14px;font-weight:800;color:#60a5fa;letter-spacing:1px;text-shadow:0 0 8px rgba(96,165,250,0.6)}

.assets-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.assets-action-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.4) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.4) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:16px;font-size:13px;font-weight:800;color:#ffffff;cursor:pointer;transition:all .25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 16px rgba(0,0,0,0.35),inset 0 1px 1px rgba(255,255,255,0.15)}
.assets-action-btn::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:10px 10px;opacity:0.5;pointer-events:none;z-index:1}
.assets-action-btn i,
.assets-action-btn span{position:relative;z-index:2}
.assets-action-btn i{font-size:14px;color:#60a5fa;transition:transform .2s ease}
.assets-action-btn:hover{border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,130,246,0.45),inset 0 1px 2px rgba(255,255,255,0.3);color:#ffffff}
.assets-action-btn:hover i{transform:scale(1.15);color:#93c5fd;filter:drop-shadow(0 0 6px rgba(96,165,250,0.8))}

.assets-section-title{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}

.assets-history-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;padding:16px 18px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);overflow:hidden}
.assets-history-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.assets-history-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}

.history-table-header{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr 1fr;font-size:11px;font-weight:800;color:#93c5fd;text-transform:uppercase;letter-spacing:.8px;padding-bottom:12px;border-bottom:1px solid rgba(59,130,246,0.25)}
.history-table-header .col-amount{text-align:center}
.history-table-header .col-status{text-align:right}

.history-rows-list{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding-top:14px}
.history-row-item{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center}
.history-row-item .col-type .tx-title{font-size:13px;font-weight:700;color:#ffffff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-row-item .col-type .tx-date{font-size:11px;color:#94a3b8;margin-top:2px}

.history-row-item .col-amount{text-align:center}
.history-row-item .col-amount .tx-amt{font-size:13px;font-weight:800}
.history-row-item .col-amount .tx-amt.positive{color:#60a5fa}
.history-row-item .col-amount .tx-amt.negative{color:#f87171}
.history-row-item .col-amount .tx-curr{font-size:10px;color:#93c5fd;font-weight:700}

.history-row-item .col-status{text-align:right}
.history-row-item .col-status .status-badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;border:1px solid transparent}
.history-row-item .col-status .status-badge.completed{color:#93c5fd;background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.4)}
.history-row-item .col-status .status-badge.pending{color:#fbbf24;background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.35)}
.history-row-item .col-status .status-badge.danger{color:#f87171;background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35)}

/* Light mode overrides for assets */
html.light .assets-main-balance-card{background:var(--bg2);border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .assets-main-balance-card::before,
html.light .assets-main-balance-card::after{display:none}
html.light .assets-main-balance-card .balance-card-kicker{color:var(--text3);text-shadow:none}
html.light .assets-main-balance-card .balance-card-amount{color:var(--text);text-shadow:none}
html.light .assets-main-balance-card .balance-card-currency{color:var(--accent);text-shadow:none}

html.light .assets-action-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .assets-action-btn::before{display:none}
html.light .assets-action-btn i{color:var(--accent)}

html.light .assets-history-card{background:var(--bg2);border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .assets-history-card::before,
html.light .assets-history-card::after{display:none}
html.light .history-table-header{color:var(--text3);border-bottom:1px solid var(--border)}
html.light .history-row-item .col-type .tx-title{color:var(--text)}
html.light .history-row-item .col-type .tx-date{color:var(--text3)}
html.light .history-row-item .col-amount .tx-amt.positive{color:var(--accent)}
html.light .history-row-item .col-amount .tx-amt.negative{color:var(--danger)}
html.light .history-row-item .col-amount .tx-curr{color:var(--accent)}
html.light .history-row-item .col-status .status-badge.completed{color:var(--accent);background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.25)}
html.light .history-row-item .col-status .status-badge.pending{color:var(--warning);background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25)}
html.light .history-row-item .col-status .status-badge.danger{color:var(--danger);background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25)}

/* Assets Modals */
.assets-modal-box{max-width:460px}
.assets-modal-body{display:flex;flex-direction:column;gap:16px}
.deposit-net-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.deposit-net-pill{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border-radius:12px;font-size:12px;font-weight:700;background:var(--bg3);border:1.5px solid var(--border);color:var(--text2);cursor:pointer;transition:all .2s ease}
.deposit-net-pill.active{background:rgba(59,130,246,.12);border-color:var(--accent);color:var(--text);box-shadow:0 2px 10px var(--accent-glow)}

.deposit-address-card{background:var(--bg3);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.deposit-address-card .dep-card-label{font-size:11px;color:var(--text3);font-weight:600}
.deposit-address-card .dep-card-addr{font-size:12px;font-weight:700;color:var(--text);word-break:break-all;font-family:monospace;background:var(--bg4);padding:8px 12px;border-radius:10px;width:100%}

.deposit-notice-card{display:flex;align-items:flex-start;gap:8px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:14px;padding:12px 14px;font-size:12px;color:var(--warning);line-height:1.4}
.withdraw-fee-box{display:flex;justify-content:space-between;font-size:13px;padding:12px;background:var(--bg3);border-radius:var(--radius);border:1px solid var(--border);color:var(--text2)}

/* Install Modal Sheet */
.install-modal-sheet{max-width:440px}
.install-modal-content{display:flex;flex-direction:column;gap:14px;padding:16px 20px 20px}
.install-brand-card{display:flex;align-items:center;gap:14px;background:var(--bg3);border:1px solid var(--border);padding:14px 16px;border-radius:16px}
.install-app-icon-wrap{width:56px;height:56px;border-radius:14px;background:var(--bg2);display:flex;align-items:center;justify-content:center;border:1px solid var(--border);flex-shrink:0;box-shadow:0 4px 14px var(--accent-glow)}
.install-app-icon{width:42px;height:42px;object-fit:contain}
.install-app-name{font-size:17px;font-weight:800;color:var(--text);letter-spacing:.5px}
.install-app-desc{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.35}

.install-features-list{display:flex;flex-direction:column;gap:10px}
.install-feat-item{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);padding:10px 14px;border-radius:12px}
.install-feat-item .feat-icon{width:32px;height:32px;border-radius:10px;background:rgba(59,130,246,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.install-feat-item .feat-title{font-size:13px;font-weight:700;color:var(--text)}
.install-feat-item .feat-sub{font-size:11px;color:var(--text3);margin-top:2px}

.install-ios-guide{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.install-ios-guide .guide-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--text)}
.install-ios-guide .guide-step-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text2);line-height:1.4}
.install-ios-guide .step-num{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}

.install-modal-actions{margin-top:4px}
.install-primary-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;font-size:14px;font-weight:700;border-radius:14px}

/* Custom Network Dropdown for Withdraw */
.custom-net-dropdown{position:relative;width:100%}
.custom-net-trigger{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s ease}
.custom-net-trigger:hover, .custom-net-dropdown.open .custom-net-trigger{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.custom-net-trigger .trigger-left{display:flex;align-items:center;gap:10px}
.custom-net-trigger .net-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
.custom-net-trigger .net-name{font-size:13px;color:var(--text)}
.custom-net-trigger .net-arrow{font-size:12px;color:var(--text3);transition:transform .2s ease}
.custom-net-dropdown.open .custom-net-trigger .net-arrow{transform:rotate(180deg)}

.custom-net-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 35px rgba(0,0,0,0.55);z-index:100;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;max-height:260px;overflow-y:auto}
.custom-net-dropdown.open .custom-net-menu{opacity:1;visibility:visible;transform:translateY(0)}
.net-option-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;transition:background .15s ease;border-bottom:1px solid rgba(255,255,255,0.03)}
.net-option-item:last-child{border-bottom:none}
.net-option-item:hover{background:var(--bg3)}
.net-option-item .opt-left{display:flex;align-items:center;gap:10px}
.net-option-item .net-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0}
.net-option-item .opt-name{font-size:13px;font-weight:700;color:var(--text)}
.net-option-item .opt-sub{font-size:10px;color:var(--text3);margin-top:1px}
.readonly-wallet-input{background:var(--bg3) !important;color:var(--text) !important;cursor:not-allowed !important;opacity:0.92;font-family:monospace;font-size:12px;letter-spacing:.3px}

/* Deposit QR Code */
.deposit-qr-wrap{display:flex;justify-content:center;align-items:center;padding:4px 0 6px}
.qr-box{background:#ffffff;padding:8px;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,0.35);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.25)}
.qr-box img{width:140px;height:140px;display:block;border-radius:6px}

/* --- Task / Quantization Page Styles --- */
.task-page-header{margin-bottom:18px;text-align:left}
.task-header-kicker{font-size:11px;font-weight:800;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.task-header-title{font-size:26px;font-weight:900;color:var(--text);margin:0 0 2px;letter-spacing:-.5px}
.task-header-subtitle{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:1px;text-transform:uppercase}

.task-ranks-section{margin-bottom:16px}
.task-section-kicker{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.task-rank-pills-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.task-rank-pills-row::-webkit-scrollbar{display:none}
.task-rank-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .2s ease;flex-shrink:0}
.task-rank-pill:hover{border-color:var(--accent);color:var(--text);background:var(--bg3)}
.task-rank-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 14px var(--accent-glow)}
.task-rank-pill.my-rank{border-color:var(--accent)}
.task-rank-pill .my-rank-badge{width:14px;height:14px;border-radius:50%;background:#fff;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:900}

.task-stats-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;padding:16px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);overflow:hidden}
.task-stats-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.task-stat-item{position:relative;z-index:2;background:rgba(15,23,42,0.65);border:1px solid rgba(59,130,246,0.25);border-radius:14px;padding:12px 14px;backdrop-filter:blur(8px)}
.task-stat-item .stat-label{font-size:11px;font-weight:700;color:#93c5fd;margin-bottom:4px;letter-spacing:.3px}
.task-stat-item .stat-value{font-size:18px;font-weight:900;color:#ffffff;letter-spacing:-.3px;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.task-stat-item .stat-value.highlight{color:#60a5fa;text-shadow:0 0 10px rgba(96,165,250,0.6)}

.task-user-rank-section{margin-bottom:16px}
.task-user-rank-kicker{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase}
.task-user-rank-title{font-size:11px;font-weight:800;color:var(--text3);letter-spacing:1.2px;text-transform:uppercase;margin:2px 0 8px}
.task-user-rank-box{position:relative;display:flex;align-items:center;justify-content:space-between;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.35) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.35) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.4);border-radius:16px;padding:14px 18px;box-shadow:0 4px 18px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.12);overflow:hidden}
.task-user-rank-box::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:10px 10px;opacity:0.5;pointer-events:none;z-index:1}
.task-user-rank-box>*{position:relative;z-index:2}
.task-user-rank-box .rank-name{font-size:18px;font-weight:900;color:#ffffff;letter-spacing:.5px}
.task-user-rank-box .rank-icon-badge{width:36px;height:36px;border-radius:10px;background:rgba(59,130,246,0.2);border:1px solid rgba(59,130,246,0.4);color:#60a5fa;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 10px rgba(59,130,246,0.3)}

.task-action-card{position:relative;background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45);border-radius:20px;padding:20px 18px;margin-bottom:20px;box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.15);text-align:center;overflow:hidden}
.task-action-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.task-action-card>*{position:relative;z-index:2}
.task-action-title{font-size:15px;font-weight:800;color:#ffffff;margin-bottom:12px;letter-spacing:.3px;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.task-action-progress-track{width:100%;height:10px;background:rgba(15,23,42,0.8);border-radius:10px;overflow:hidden;margin-bottom:12px;border:1px solid rgba(59,130,246,0.3)}
.task-action-progress-fill{height:100%;background:linear-gradient(90deg,#2563eb,#38bdf8);border-radius:10px;transition:width .3s ease;box-shadow:0 0 10px rgba(56,189,248,0.5)}
.task-action-notice{font-size:11.5px;color:#94a3b8;margin-bottom:16px;line-height:1.4}

.task-btn{width:100%;padding:14px 18px;font-size:14px;font-weight:800;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s ease;background:linear-gradient(90deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);border:1px solid rgba(255,255,255,0.25);color:#ffffff;box-shadow:0 4px 16px rgba(37,99,235,0.45)}
.task-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(59,130,246,0.6);color:#ffffff}
.task-btn.task-btn-completed{background:#1e293b !important;color:#64748b !important;border:1px solid rgba(255,255,255,0.1) !important;opacity:.8 !important;cursor:not-allowed !important;box-shadow:none !important}
.task-btn.task-btn-disabled{background:#1e293b !important;color:#64748b !important;border:1px solid rgba(255,255,255,0.08) !important;opacity:.7 !important;cursor:not-allowed !important;box-shadow:none !important}
.task-btn.running{opacity:.85;cursor:wait}
.task-btn.done{background:linear-gradient(135deg,#10b981,#059669) !important;border-color:rgba(16,185,129,0.5) !important;color:#fff !important;box-shadow:0 4px 16px rgba(16,185,129,0.4) !important}

.task-rank-cards-list{display:flex;flex-direction:column;gap:12px}
.task-rank-detail-card{position:relative;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.35) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.35) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:18px;padding:16px 18px;box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 1px rgba(255,255,255,.12);transition:all .25s ease;overflow:hidden}
.task-rank-detail-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:10px 10px;opacity:0.5;pointer-events:none;z-index:1}
.task-rank-detail-card>*{position:relative;z-index:2}
.task-rank-detail-card:hover{border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.35)}
.task-rank-detail-card.is-my-level{border:1.5px solid #3b82f6;box-shadow:0 0 20px rgba(59,130,246,0.4),inset 0 1px 1px rgba(255,255,255,0.2)}
.task-rank-detail-card .rank-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(59,130,246,0.25)}
.task-rank-detail-card .rank-card-badge{font-size:15px;font-weight:900;color:#ffffff;letter-spacing:.5px}
.task-rank-detail-card .rank-card-rate{font-size:12px;font-weight:800;color:#60a5fa;background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.3);padding:4px 10px;border-radius:10px}
.my-active-level-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#ffffff;background:linear-gradient(90deg,#2563eb,#3b82f6);padding:3px 8px;border-radius:8px;text-transform:uppercase}

.task-rank-detail-card .rank-card-specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;background:rgba(15,23,42,0.6);border:1px solid rgba(59,130,246,0.2);border-radius:12px;padding:10px}
.task-rank-detail-card .spec-col{display:flex;flex-direction:column}
.task-rank-detail-card .spec-kicker{font-size:10px;font-weight:700;color:#93c5fd;margin-bottom:2px}
.task-rank-detail-card .spec-val{font-size:12px;font-weight:800;color:#ffffff}
.task-rank-detail-card .spec-val.highlight{color:#60a5fa;text-shadow:0 0 8px rgba(96,165,250,0.5)}

.task-rank-detail-card .rank-card-reqs{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:#94a3b8;background:rgba(15,23,42,0.6);padding:8px 12px;border-radius:10px;border:1px solid rgba(59,130,246,0.2);line-height:1.4}
.task-rank-detail-card .rank-card-reqs .req-label{color:#93c5fd;font-weight:700;flex-shrink:0}
.task-rank-detail-card .rank-card-reqs .req-val{color:#e2e8f0;font-weight:600}

/* Light Theme Overrides for Task Page */
html.light .task-stats-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .task-stats-card::before,html.light .task-user-rank-box::before,html.light .task-action-card::before,html.light .task-rank-detail-card::before{display:none}
html.light .task-stat-item{background:var(--bg3);border:1px solid var(--border);backdrop-filter:none}
html.light .task-stat-item .stat-label{color:var(--text3)}
html.light .task-stat-item .stat-value{color:var(--text);text-shadow:none}
html.light .task-stat-item .stat-value.highlight{color:var(--accent);text-shadow:none}
html.light .task-user-rank-box{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .task-user-rank-box .rank-name{color:var(--text)}
html.light .task-user-rank-box .rank-icon-badge{background:rgba(59,130,246,.12);border:none;color:var(--accent);box-shadow:none}
html.light .task-action-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.08)}
html.light .task-action-title{color:var(--text);text-shadow:none}
html.light .task-action-progress-track{background:var(--bg3);border:1px solid var(--border)}
html.light .task-action-progress-fill{background:linear-gradient(90deg,var(--accent),#60a5fa);box-shadow:none}
html.light .task-action-notice{color:var(--text3)}
html.light .task-btn{background:linear-gradient(135deg,var(--accent),var(--accent-hover));border:none;box-shadow:0 4px 15px var(--accent-glow)}
html.light .task-btn:not(:disabled):hover{box-shadow:0 6px 20px var(--accent-glow)}
html.light .task-btn.task-btn-completed{background:#e2e8f0 !important;color:#94a3b8 !important;border:1px solid #cbd5e1 !important}
html.light .task-btn.task-btn-disabled{background:#f1f5f9 !important;color:#94a3b8 !important;border:1px solid #e2e8f0 !important}
html.light .task-rank-detail-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.light .task-rank-detail-card:hover{border-color:var(--accent);box-shadow:0 6px 20px var(--accent-glow)}
html.light .task-rank-detail-card.is-my-level{border-color:var(--accent);background:linear-gradient(180deg,rgba(59,130,246,0.06),#ffffff);box-shadow:0 0 16px var(--accent-glow)}
html.light .task-rank-detail-card .rank-card-head{border-bottom:1px solid var(--border)}
html.light .task-rank-detail-card .rank-card-badge{color:var(--text)}
html.light .task-rank-detail-card .rank-card-rate{color:var(--accent);background:rgba(59,130,246,.12);border:none}
html.light .task-rank-detail-card .rank-card-specs{background:var(--bg3);border:none}
html.light .task-rank-detail-card .spec-kicker{color:var(--text3)}
html.light .task-rank-detail-card .spec-val{color:var(--text)}
html.light .task-rank-detail-card .spec-val.highlight{color:var(--accent);text-shadow:none}
html.light .task-rank-detail-card .rank-card-reqs{background:var(--bg3);border:1px solid var(--border);color:var(--text2)}
html.light .task-rank-detail-card .rank-card-reqs .req-label{color:var(--text3)}
html.light .task-rank-detail-card .rank-card-reqs .req-val{color:var(--text)}

/* --- Team Members Dedicated Page Styles --- */
.team-members-summary-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:16px 18px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.tm-stat-box{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column}
.tm-stat-box .tm-stat-num{font-size:18px;font-weight:900;color:var(--text);letter-spacing:-.3px}
.tm-stat-box .tm-stat-num.highlight{color:var(--accent)}
.tm-stat-box .tm-stat-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-top:2px}

.tm-search-wrap{position:relative;width:100%}
.tm-search-wrap .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px}
.tm-search-input{width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:14px;padding:12px 38px 12px 40px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s}
.tm-search-input:focus{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.tm-search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:4px}

.tm-filter-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--bg2);padding:4px;border-radius:14px;border:1px solid var(--border)}
.tm-tab-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;background:transparent;border:none;border-radius:10px;color:var(--text3);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s ease}
.tm-tab-btn:hover{color:var(--text);background:var(--bg3)}
.tm-tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}
.tm-tab-btn .tm-count-pill{font-size:10px;opacity:.85;font-weight:800}

.tm-members-list{display:flex;flex-direction:column;gap:10px}
.tm-member-card{display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:14px 16px;transition:all .2s ease;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.tm-member-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px var(--accent-glow)}
.tm-card-left{display:flex;align-items:center;gap:12px;min-width:0}
.tm-avatar{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;flex-shrink:0}
.tm-avatar-gen-1{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.tm-avatar-gen-2{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.tm-avatar-gen-3{background:linear-gradient(135deg,#10b981,#047857)}

.tm-user-details{display:flex;flex-direction:column;min-width:0}
.tm-user-name-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.tm-user-name{font-size:14px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-gen-badge{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;flex-shrink:0}
.tm-gen-badge.gen-1{background:rgba(59,130,246,.15);color:var(--accent)}
.tm-gen-badge.gen-2{background:rgba(139,92,246,.15);color:#a78bfa}
.tm-gen-badge.gen-3{background:rgba(16,185,129,.15);color:#34d399}

.tm-user-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text3)}
.tm-user-meta span{display:flex;align-items:center;gap:4px}

.tm-card-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;flex-shrink:0;text-align:right;white-space:nowrap}
.tm-balance-amount{font-size:13px;font-weight:800;color:var(--text);line-height:1.2;display:inline-flex;align-items:baseline;justify-content:flex-end;gap:3px;white-space:nowrap}
.tm-balance-amount .tm-curr{font-size:11px;color:var(--text3);font-weight:700}
.tm-earnings-amount{font-size:13px;font-weight:800;color:#10b981;line-height:1.2;display:inline-flex;align-items:baseline;justify-content:flex-end;gap:3px;white-space:nowrap}
.tm-earnings-amount .tm-curr{font-size:11px;color:var(--text3);font-weight:700}
.tm-status-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px}
.tm-status-pill.valid{background:rgba(16,185,129,.12);color:var(--success);border:1px solid rgba(16,185,129,.25)}
.tm-status-pill.reg{background:rgba(156,163,175,.12);color:var(--text3);border:1px solid rgba(156,163,175,.2)}

.tm-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;background:var(--bg2);border:1px solid var(--border);border-radius:18px}
.tm-empty-state .empty-icon{font-size:36px;color:var(--text3);margin-bottom:10px;opacity:.6}
.tm-empty-state .empty-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:4px}
.tm-empty-state .empty-desc{font-size:12px;color:var(--text3);max-width:260px}

/* ==========================================================================
   HOMEPAGE SKELETON & AESTHETICS (PRESERVED PALETTE)
   ========================================================================== */
.home-page-container{padding-bottom:90px}

/* Top Image-Only Banner Slider with Oval Corners */
.home-banner-slider-wrap{background:var(--bg2);border:1.5px solid var(--accent);border-radius:24px;padding:0;box-shadow:0 6px 24px var(--accent-glow);margin-bottom:6px;position:relative;overflow:hidden}
.home-banner-slider{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:22px}
.home-banner-slide{display:none;width:100%;height:100%;position:relative;animation:fadeIn .35s ease}
.home-banner-slide.active{display:block}
.home-banner-slide a{display:block;width:100%;height:100%}
.home-banner-slide .banner-img{width:100%;height:100%;object-fit:fill;display:block;border-radius:22px}

.home-slider-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 16px}
.slider-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.25);cursor:pointer;transition:all .25s ease}
.slider-dot.active{width:18px;border-radius:6px;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}

/* Announcement Ticker Pill Bar */
.home-announcement-pill{display:flex;align-items:center;gap:10px;padding:6px 12px;background:linear-gradient(90deg,var(--bg2),var(--bg3));border:1.5px solid var(--accent);border-radius:999px;box-shadow:0 0 14px var(--accent-glow);margin-bottom:16px}
.home-wheel-badge{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ec4899);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0;box-shadow:0 0 8px rgba(245,158,11,0.5);text-decoration:none}
.home-wheel-badge .wheel-spin-icon{animation:spin 12s linear infinite}
.home-ticker-marquee{flex:1;overflow:hidden;white-space:nowrap;position:relative}
.home-ticker-text{display:inline-block;padding-left:100%;font-size:12px;font-weight:600;color:var(--text);animation:marquee 22s linear infinite}
.home-ticker-arrow{color:var(--accent);font-size:12px;flex-shrink:0;padding-right:4px;text-decoration:none}

/* 3x2 Quick Action Grid - Dark/Light Theme Adaptive */
.home-action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.home-action-btn{position:relative;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.3) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.3) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:14px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;text-decoration:none;color:#ffffff;font-size:12px;font-weight:700;transition:all .2s ease;box-shadow:0 4px 14px rgba(0,0,0,0.35),inset 0 1px 1px rgba(255,255,255,0.12);overflow:hidden}
.home-action-btn::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.1) 1px,transparent 1px);background-size:8px 8px;opacity:0.45;pointer-events:none;z-index:1}
.home-action-btn>*{position:relative;z-index:2}
.home-action-btn:hover{border-color:#60a5fa;transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.4),inset 0 1px 2px rgba(255,255,255,0.2);color:#ffffff}
.home-action-icon{font-size:22px;color:#60a5fa;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.home-action-btn:hover .home-action-icon{transform:scale(1.1);filter:drop-shadow(0 0 8px var(--accent-glow))}

html.light .home-action-btn{background:#ffffff;border:1px solid rgba(59,130,246,0.2);color:#1e293b;box-shadow:0 4px 14px rgba(0,0,0,0.06)}
html.light .home-action-btn::before{display:none}
html.light .home-action-btn:hover{background:#f8fafc;color:#0f172a;border-color:var(--accent)}
html.light .home-action-icon{color:var(--accent)}

/* Section Header Pill */
.home-section-block{margin-bottom:22px}
.home-section-header-pill{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:linear-gradient(90deg,rgba(59,130,246,0.2),rgba(59,130,246,0.06));border:1.5px solid var(--accent);border-radius:999px;box-shadow:0 0 14px var(--accent-glow);margin-bottom:12px}
.section-header-left{display:flex;align-items:center;gap:10px}
.section-icon-stack{display:flex;align-items:center;gap:4px;font-size:15px}
.section-icon-stack .cal-icon{color:var(--accent)}
.section-icon-stack .coins-icon{color:#fbbf24}
.section-title-neon{font-size:14px;font-weight:800;color:var(--accent);text-shadow:0 0 10px var(--accent-glow);letter-spacing:.3px}
.section-header-arrow{color:var(--accent);font-size:12px}

/* Benefits Grid - Pure CSS Web3 Deep Navy & Blue Cyber Theme */
.home-benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-benefit-card{position:relative;border-radius:16px;padding:10px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden;box-sizing:border-box;gap:6px;width:100%;transition:all .25s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 16px rgba(0,0,0,0.4),inset 0 1px 1px rgba(255,255,255,0.15)}
.home-benefit-card.card-quant{background:radial-gradient(circle at 85% 15%,rgba(59,130,246,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(30,64,175,0.45) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.45)}
.home-benefit-card.card-quant:hover{border-color:#60a5fa;box-shadow:0 8px 28px rgba(59,130,246,0.45),inset 0 1px 2px rgba(255,255,255,0.3);transform:translateY(-2px)}
.home-benefit-card.card-invest{background:radial-gradient(circle at 85% 15%,rgba(37,99,235,0.45) 0%,transparent 60%),radial-gradient(circle at 15% 85%,rgba(56,189,248,0.35) 0%,transparent 55%),linear-gradient(145deg,#061124 0%,#030814 50%,#0a1835 100%);border:1px solid rgba(37,99,235,0.45)}
.home-benefit-card.card-invest:hover{border-color:#38bdf8;box-shadow:0 8px 28px rgba(37,99,235,0.45),inset 0 1px 2px rgba(255,255,255,0.3);transform:translateY(-2px)}
.home-benefit-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:12px 12px;opacity:0.6;pointer-events:none;z-index:1}
.home-benefit-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,transparent 70%);pointer-events:none;z-index:1}
.benefit-card-title{position:relative;z-index:2;font-size:12px;font-weight:800;color:#ffffff;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;text-shadow:0 2px 6px rgba(0,0,0,0.6);letter-spacing:.2px;margin:0}
.benefit-title-icon{font-size:11px}
.card-quant .benefit-title-icon{color:#60a5fa}
.card-invest .benefit-title-icon{color:#38bdf8}
.benefit-card-visual{position:relative;z-index:2;width:100%;height:38px;display:flex;align-items:center;justify-content:center;margin:2px 0}
.benefit-orb-container{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.benefit-orb-ring-outer{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,0.35);animation:spin 18s linear infinite}
.card-quant .benefit-orb-ring-outer{border-color:rgba(96,165,250,0.45)}
.card-invest .benefit-orb-ring-outer{border-color:rgba(56,189,248,0.45)}
.benefit-orb-glow{width:28px;height:28px;border-radius:50%;transition:all .3s ease}
.card-quant .benefit-orb-glow{background:radial-gradient(circle,rgba(96,165,250,0.75) 0%,rgba(37,99,235,0.35) 55%,transparent 100%);box-shadow:0 0 14px rgba(59,130,246,0.6)}
.card-invest .benefit-orb-glow{background:radial-gradient(circle,rgba(56,189,248,0.75) 0%,rgba(30,58,138,0.4) 55%,transparent 100%);box-shadow:0 0 14px rgba(37,99,235,0.6)}
.benefit-ai-badge{position:absolute;border-radius:6px;padding:2px 6px;border:1px solid rgba(255,255,255,0.9);backdrop-filter:blur(4px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.card-quant .benefit-ai-badge{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 2px 10px rgba(37,99,235,0.6)}
.benefit-ai-badge .ai-txt{font-size:10px;font-weight:900;color:#ffffff;letter-spacing:.5px}
.benefit-ai-badge .plus-sup{font-size:8px;color:#fbbf24;font-weight:900}
.benefit-bag-badge{position:absolute;border-radius:7px;padding:3px 7px;border:1px solid rgba(255,255,255,0.9);backdrop-filter:blur(4px);background:linear-gradient(135deg,#1e40af 0%,#2563eb 50%,#38bdf8 100%);box-shadow:0 2px 10px rgba(30,64,175,0.6);display:inline-flex;align-items:center;justify-content:center}
.benefit-bag-badge .bag-icon{font-size:12px;color:#ffffff;filter:drop-shadow(0 0 4px rgba(255,255,255,0.7))}
.benefit-action-pill-btn{position:relative;z-index:2;width:100%;padding:5px 8px;border-radius:999px;color:#ffffff;font-size:11px;font-weight:800;text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid rgba(255,255,255,0.25);transition:all .2s ease;margin-top:2px}
.card-quant .benefit-action-pill-btn{background:linear-gradient(90deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);box-shadow:0 3px 12px rgba(37,99,235,0.45)}
.card-invest .benefit-action-pill-btn{background:linear-gradient(90deg,#1e40af 0%,#2563eb 50%,#0284c7 100%);box-shadow:0 3px 12px rgba(30,64,175,0.45)}
.benefit-action-pill-btn:hover{transform:scale(1.02);color:#ffffff;box-shadow:0 4px 16px rgba(59,130,246,0.6)}

html.light .home-benefit-card.card-quant,html.light .home-benefit-card.card-invest{background:#ffffff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,0.06)}
html.light .home-benefit-card::before,html.light .home-benefit-card::after{display:none}
html.light .benefit-card-title{color:#0f172a;text-shadow:none}

/* Real-time Quotes List */
.home-quotes-list{display:flex;flex-direction:column;gap:8px}
.home-quote-card{position:relative;display:flex;align-items:center;justify-content:space-between;background:radial-gradient(circle at 90% 10%,rgba(59,130,246,0.3) 0%,transparent 60%),radial-gradient(circle at 10% 90%,rgba(30,64,175,0.3) 0%,transparent 55%),linear-gradient(145deg,#091326 0%,#050b17 50%,#0d1e3d 100%);border:1px solid rgba(59,130,246,0.35);border-radius:16px;padding:12px 14px;box-shadow:0 4px 16px rgba(0,0,0,0.3),inset 0 1px 1px rgba(255,255,255,0.1);overflow:hidden;transition:all .2s ease}
.home-quote-card::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.08) 1px,transparent 1px);background-size:10px 10px;opacity:0.45;pointer-events:none;z-index:1}
.home-quote-card>*{position:relative;z-index:2}
.home-quote-card:hover{border-color:#60a5fa;transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,130,246,0.35)}
.quote-card-left{display:flex;align-items:center;gap:10px;min-width:85px}
.quote-coin-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.quote-coin-icon.btc{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 0 10px rgba(245,158,11,0.4)}
.quote-coin-icon.eth{background:linear-gradient(135deg,#627eea,#3b82f6);color:#fff;box-shadow:0 0 10px rgba(98,126,234,0.4)}
.quote-coin-icon.trx{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 0 10px rgba(239,68,68,0.4)}
.quote-coin-icon.sol{background:linear-gradient(135deg,#14f195,#9945ff);color:#fff;box-shadow:0 0 10px rgba(20,241,149,0.4)}
.quote-coin-icon.bnb{background:linear-gradient(135deg,#f3ba2f,#d49a0a);color:#fff;box-shadow:0 0 10px rgba(243,186,47,0.4)}
.quote-coin-icon.xrp{background:linear-gradient(135deg,#23292f,#00aae4);color:#fff;box-shadow:0 0 10px rgba(0,170,228,0.4)}
.quote-coin-icon.doge{background:linear-gradient(135deg,#c2a633,#9e801b);color:#fff;box-shadow:0 0 10px rgba(194,166,51,0.4)}
.quote-coin-icon.ada{background:linear-gradient(135deg,#0033ad,#2563eb);color:#fff;box-shadow:0 0 10px rgba(0,51,173,0.4)}
.quote-coin-icon.avax{background:linear-gradient(135deg,#e84142,#b81b1c);color:#fff;box-shadow:0 0 10px rgba(232,65,66,0.4)}
.quote-coin-icon.link{background:linear-gradient(135deg,#375bd2,#1d4ed8);color:#fff;box-shadow:0 0 10px rgba(55,91,210,0.4)}
.quote-pair-info{display:flex;align-items:baseline;gap:2px}
.pair-symbol{font-size:13px;font-weight:800;color:#ffffff}
.pair-quote{font-size:11px;font-weight:700;color:#93c5fd}
.quote-card-center{display:flex;flex-direction:column;align-items:flex-end;flex:1;padding-right:12px}
.quote-price-val{font-size:13px;font-weight:800;color:#60a5fa;letter-spacing:.2px;text-shadow:0 0 8px rgba(96,165,250,0.5)}
.quote-usd-vol{font-size:10px;font-weight:600;color:#94a3b8}
.quote-card-right{flex-shrink:0}
.quote-change-badge{min-width:68px;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;text-align:center}
.quote-change-badge.positive{background:linear-gradient(90deg,var(--accent),#2563eb);color:#ffffff;box-shadow:0 0 10px var(--accent-glow)}
.quote-change-badge.negative{background:linear-gradient(90deg,#ef4444,#b91c1c);color:#ffffff;box-shadow:0 0 10px rgba(239,68,68,0.3)}

html.light .home-quote-card{background:#ffffff;border:1px solid var(--border);box-shadow:0 3px 12px rgba(0,0,0,0.06)}
html.light .home-quote-card::before{display:none}
html.light .pair-symbol{color:#0f172a}
html.light .pair-quote{color:var(--text3)}
html.light .quote-price-val{color:var(--accent);text-shadow:none}
html.light .quote-usd-vol{color:var(--text3)}

/* Floating Customer Support Widget */
.home-floating-support-btn{position:fixed;right:14px;bottom:84px;z-index:90;text-decoration:none}
.support-avatar-wrap{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1d4ed8);border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 4px 16px var(--accent-glow);position:relative}
.support-pulse-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);animation:pulse-ring 2s cubic-bezier(0.215,0.61,0.355,1) infinite;pointer-events:none}
@keyframes pulse-ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* Withdrawal Rules Box */
.withdraw-rules-box {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.withdraw-rules-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.withdraw-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.4;
  margin-bottom: 6px;
}
.withdraw-rule-item:last-child {
  margin-bottom: 0;
}
.rule-bullet {
  font-size: 11px;
  margin-top: 1px;
  flex-shrink: 0;
}
.rule-bullet .fa-check { color: #10b981; }
.rule-bullet .fa-circle-exclamation { color: #f59e0b; }
.rule-bullet .fa-arrow-down-to-bracket { color: var(--accent); }

/* Introduction Page Styles - Adaptive Dark & Light Theme */
.introduction-page-container {
  padding-bottom: 24px;
}
.intro-hero-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  margin-bottom: 20px;
  overflow: hidden;
}
.intro-hero-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.intro-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: var(--accent-hover);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 12px;
}
.intro-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.intro-hero-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text2);
  margin-bottom: 12px;
}
.intro-hero-text strong {
  color: var(--text);
}
.intro-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), var(--border2));
  margin: 12px 0;
}
.intro-hero-subtext {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text2);
}
.intro-hero-subtext strong {
  color: var(--text);
}
.intro-section-block {
  margin-bottom: 22px;
}
.intro-section-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.intro-sec-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.intro-sec-icon.upgrade {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.intro-sec-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.intro-sec-subtitle {
  font-size: 11.5px;
  color: var(--text3);
}
.intro-levels-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro-level-card {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.intro-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.intro-level-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid;
  background: rgba(59, 130, 246, 0.08);
  font-size: 12px;
}
.intro-rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(90deg, var(--accent), #2563eb);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  box-shadow: 0 0 10px var(--accent-glow);
}
.intro-level-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.intro-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.intro-data-row .data-label {
  color: var(--text3);
  font-weight: 600;
}
.intro-data-row .data-val.highlight {
  color: var(--text);
  font-weight: 800;
}
.intro-data-row .data-val.req-val {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  max-width: 65%;
}
.intro-upgrade-card {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
  border: 1px solid rgba(59, 130, 246, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.intro-step-item.highlight {
  background: linear-gradient(180deg, var(--bg2) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}
.step-num-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
  border: 1.5px solid var(--accent);
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-num-pill.gold {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #fbbf24;
}
.step-content {
  flex: 1;
}
.step-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.step-title.gold {
  color: #fbbf24;
}
.step-desc {
  font-size: 11.5px;
  color: var(--text2);
  font-weight: 600;
  line-height: 1.4;
}
.intro-vision-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, var(--bg2) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 18px;
  padding: 18px 16px;
  text-align: center;
}
.vision-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 10px;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.vision-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}
.vision-text {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 12px;
}
.vision-slogan {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-hover);
  letter-spacing: 0.2px;
}

/* Light Mode Overrides for Introduction */
html.light .intro-hero-card,
html.light .intro-level-card,
html.light .intro-step-item {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
html.light .intro-step-item.highlight {
  background: #ffffff;
  border-color: rgba(245, 158, 11, 0.55);
}
html.light .intro-level-pill {
  background: #f8fafc;
}
html.light .intro-hero-title,
html.light .intro-hero-text strong,
html.light .intro-hero-subtext strong,
html.light .step-title,
html.light .intro-data-row .data-val.highlight {
  color: #0f172a;
}
html.light .intro-hero-text,
html.light .intro-hero-subtext,
html.light .step-desc,
html.light .intro-data-row .data-val.req-val {
  color: #334155;
}
html.light .intro-data-row .data-label {
  color: #64748b;
}
html.light .step-title.gold {
  color: #d97706;
}
html.light .step-num-pill.gold {
  border-color: #d97706;
  color: #d97706;
}

/* ==========================================
   NOTIFICATIONS & ACTIVITY PAGE STYLES (CYBER THEME)
   ========================================== */

/* Notifications Page */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.notif-item {
  position: relative;
  background: radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.45) 0%, transparent 60%),
              radial-gradient(circle at 15% 85%, rgba(30, 64, 175, 0.45) 0%, transparent 55%),
              linear-gradient(145deg, #091326 0%, #050b17 50%, #0d1e3d 100%);
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
}
.notif-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}
.notif-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.notif-item > * {
  position: relative;
  z-index: 2;
}
.notif-item:hover {
  border-color: #60a5fa;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(59, 130, 246, 0.45);
}
.notif-item.unread {
  border-color: rgba(96, 165, 250, 0.7);
  background: radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.55) 0%, transparent 60%),
              radial-gradient(circle at 15% 85%, rgba(30, 64, 175, 0.55) 0%, transparent 55%),
              linear-gradient(145deg, #0d1e3d 0%, #081226 50%, #11264e 100%);
}
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.notif-type-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.notif-type-icon.unread {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}
.notif-title-wrap {
  flex: 1;
  min-width: 0;
}
.notif-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 8px #60a5fa;
  flex-shrink: 0;
}
.notif-item-time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.notif-chevron {
  font-size: 12px;
  color: #93c5fd;
  transition: transform 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0;
}
.notif-item.open .notif-chevron {
  transform: rotate(90deg);
}
.notif-body {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.55;
}
.notif-item.open .notif-body {
  display: block;
}

/* ==========================================
   ACTIVITY PAGE STYLES
   ========================================== */
.activity-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.activity-stat-card {
  position: relative !important;
  background: radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.45) 0%, transparent 60%),
              radial-gradient(circle at 15% 85%, rgba(30, 64, 175, 0.45) 0%, transparent 55%),
              linear-gradient(145deg, #091326 0%, #050b17 50%, #0d1e3d 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.activity-stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}
.activity-stat-card > * {
  position: relative;
  z-index: 2;
}
.activity-stat-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #93c5fd !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.activity-stat-val {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
.activity-stat-val.highlight {
  color: #60a5fa !important;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.6) !important;
}

/* Activity Filter Tabs Bar */
.activity-tabs-bar {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  overflow-x: auto !important;
}
.activity-tab-btn {
  flex: 1 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.activity-tab-btn.active {
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5) !important;
}

/* Activity List & Card Items */
.activity-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.activity-card-item {
  position: relative !important;
  background: radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.45) 0%, transparent 60%),
              radial-gradient(circle at 15% 85%, rgba(30, 64, 175, 0.45) 0%, transparent 55%),
              linear-gradient(145deg, #091326 0%, #050b17 50%, #0d1e3d 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}
.activity-card-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}
.activity-card-item::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.activity-card-item > * {
  position: relative;
  z-index: 2;
}
.activity-card-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.activity-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.activity-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.activity-icon-wrap.earning {
  background: rgba(59, 130, 246, 0.2) !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
  color: #60a5fa !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}
.activity-icon-wrap.deposit {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}
.activity-icon-wrap.withdrawal {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #f87171 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}
.activity-icon-wrap.commission {
  background: rgba(139, 92, 246, 0.2) !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
  color: #a78bfa !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
}
.activity-icon-wrap.bonus {
  background: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

.activity-info-wrap {
  flex: 1 !important;
  min-width: 0 !important;
}
.activity-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-bottom: 2px !important;
}
.activity-desc {
  font-size: 11px !important;
  color: #93c5fd !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-bottom: 3px !important;
}
.activity-time-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  color: #94a3b8 !important;
}

.activity-item-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}
.activity-amt {
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  white-space: nowrap !important;
}
.activity-amt.positive {
  color: #60a5fa !important;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5) !important;
}
.activity-amt.negative {
  color: #f87171 !important;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.4) !important;
}
.activity-curr {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #93c5fd !important;
}
.activity-status-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}
.activity-status-badge.completed {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, 0.18) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}
.activity-status-badge.pending {
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.activity-status-badge.rejected {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

/* Light mode overrides for activity & notifications */
html.light .notif-item,
html.light .activity-stat-card,
html.light .activity-card-item {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}
html.light .notif-item::before,
html.light .notif-item::after,
html.light .activity-stat-card::before,
html.light .activity-card-item::before,
html.light .activity-card-item::after {
  display: none !important;
}
html.light .notif-item-title,
html.light .activity-stat-val,
html.light .activity-title {
  color: #0f172a !important;
  text-shadow: none !important;
}
html.light .notif-item-time,
html.light .activity-time-pill,
html.light .activity-desc {
  color: #64748b !important;
}
html.light .activity-stat-label,
html.light .activity-curr {
  color: var(--accent) !important;
}
html.light .activity-stat-val.highlight,
html.light .activity-amt.positive {
  color: var(--accent) !important;
  text-shadow: none !important;
}
html.light .activity-tabs-bar {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}