Note 09/07/2026 10:42:58
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thẻ Ngân Hàng Cao Cấp - Genius Bank</title>
<style>
/* 📢 DÒNG CHỮ CHẠY TRÊN CÙNG (RUNNING ANNOUNCEMENT BANNER) */
.running-text-container {
width: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(15, 23, 42, 0.95) 50%, rgba(0, 0, 0, 0.9) 100%);
border-bottom: 1px solid rgba(0, 180, 216, 0.3);
box-shadow: 0 2px 15px rgba(0, 180, 216, 0.2);
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding: 8px 0;
}
.running-text {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: marquee 22s linear infinite;
font-size: 0.85rem;
font-weight: 700;
color: #00f5d4;
letter-spacing: 1px;
text-shadow: 0 0 8px rgba(0, 245, 212, 0.5);
}
.running-text-container:hover .running-text {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.running-text .highlight {
color: #ffb703;
text-shadow: 0 0 8px rgba(255, 183, 3, 0.6);
}
.running-text .badge-news {
background: #ff007f;
color: #fff;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
margin-right: 8px;
box-shadow: 0 0 8px rgba(255, 0, 127, 0.5);
}
/* CSS CHO LOADER */
.loader-overlay {
position: fixed;
inset: 0;
background: #000;
z-index: 10000;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease;
}
.loader-overlay .container {
width: 100vw;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.loader-overlay .container .box {
position: relative;
width: 7rem;
height: 7rem;
border-top: solid 3px #32afa9;
border-radius: 50%;
animation: rotate 2s infinite linear;
}
.loader-overlay .container .box:before,
.loader-overlay .container .box:after {
content: "";
position: absolute;
border-radius: 50%;
animation: rotate 2s infinite linear;
}
.loader-overlay .container .box:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top: solid 3px #f17362;
}
.loader-overlay .container .box:after {
top: 12px;
left: 12px;
right: 12px;
bottom: 12px;
border-top: solid 3px #7e0cf5;
animation: rotate 1s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* TẠO CÁC BIẾN MÀU SẮC MẶC ĐỊNH (THEME PLATINUM) */
:root {
--card-bg: linear-gradient(135deg, #101116 0%, #1c1e24 40%, #2a2e39 70%, #111215 100%);
--chip-bg: linear-gradient(135deg, #e0e0e0 0%, #b0b5bc 40%, #f5f5f7 70%, #90949c 100%);
--chip-border: #787c85;
--text-primary: #ffffff;
--text-accent: #f5f5f7;
--text-shadow: rgba(255, 255, 255, 0.25);
--card-border: rgba(255, 255, 255, 0.05);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.8);
}
/* CÁC THEME CARD */
.theme-vip1 {
--card-bg: linear-gradient(135deg, #2c3e50 0%, #bdc3c7 50%, #2c3e50 100%);
--chip-bg: linear-gradient(135deg, #ffffff 0%, #b0b5bc 100%);
--chip-border: #7f8c8d;
--text-primary: #ffffff;
--text-accent: #ecf0f1;
--text-shadow: rgba(255, 255, 255, 0.3);
--card-border: rgba(255, 255, 255, 0.2);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.1);
}
.theme-vip-gold {
--card-bg: linear-gradient(135deg, #0d0d0d 0%, #4d3d00 40%, #1a1400 70%, #000000 100%);
--chip-bg: linear-gradient(135deg, #ffd700 0%, #cca01a 40%, #ffdf4d 70%, #997300 100%);
--chip-border: #997300;
--text-primary: #ffeaa7;
--text-accent: #fdcb6e;
--text-shadow: rgba(253, 203, 110, 0.4);
--card-border: rgba(253, 203, 110, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(218, 165, 32, 0.3);
}
.theme-svip-card {
--chip-bg: linear-gradient(135deg, #00f5d4 0%, #7f00ff 50%, #ff007f 100%);
--chip-border: #7f00ff;
--text-primary: #ffffff;
--text-accent: #00f5d4;
--text-shadow: rgba(0, 245, 212, 0.5);
--card-border: rgba(255, 255, 255, 0.3);
background: linear-gradient(45deg, #0f0c20, #15002a, #2b0040, #001a2e) !important;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(127, 0, 255, 0.4) !important;
animation: svip-card-pulse 8s ease infinite alternate;
}
@keyframes svip-card-pulse {
0% {
border-color: rgba(127, 0, 255, 0.3);
}
50% {
border-color: rgba(255, 0, 127, 0.5);
}
100% {
border-color: rgba(0, 245, 212, 0.3);
}
}
.theme-emerald {
--card-bg: linear-gradient(135deg, #022c22 0%, #065f46 45%, #047857 70%, #022c22 100%);
--chip-bg: linear-gradient(135deg, #fef08a 0%, #ca8a04 50%, #fef08a 100%);
--chip-border: #ca8a04;
--text-primary: #ecfdf5;
--text-accent: #a7f3d0;
--text-shadow: rgba(167, 243, 208, 0.4);
--card-border: rgba(52, 211, 153, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(16, 185, 129, 0.3);
}
.theme-ruby {
--card-bg: linear-gradient(135deg, #450a0a 0%, #991b1b 45%, #7f1d1d 70%, #2a0808 100%);
--chip-bg: linear-gradient(135deg, #f3f4f6 0%, #9ca3af 50%, #ffffff 100%);
--chip-border: #d1d5db;
--text-primary: #fef2f2;
--text-accent: #fca5a5;
--text-shadow: rgba(252, 165, 165, 0.4);
--card-border: rgba(248, 113, 113, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(239, 68, 68, 0.35);
}
.theme-obsidian {
--card-bg: linear-gradient(135deg, #050505 0%, #171717 50%, #0a0a0a 100%);
--chip-bg: linear-gradient(135deg, #e5e7eb 0%, #6b7280 50%, #d1d5db 100%);
--chip-border: #4b5563;
--text-primary: #f9fafb;
--text-accent: #d1d5db;
--text-shadow: rgba(255, 255, 255, 0.2);
--card-border: rgba(255, 255, 255, 0.15);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 20px rgba(255, 255, 255, 0.08);
}
.theme-neon {
--card-bg: linear-gradient(135deg, #030712 0%, #1e1b4b 40%, #0284c7 80%, #030712 100%);
--chip-bg: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #c084fc 100%);
--chip-border: #38bdf8;
--text-primary: #ffffff;
--text-accent: #38bdf8;
--text-shadow: rgba(56, 189, 248, 0.6);
--card-border: rgba(56, 189, 248, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.4);
}
.theme-rosegold {
--card-bg: linear-gradient(135deg, #2a1b1e 0%, #6b3a42 45%, #b5717d 70%, #221316 100%);
--chip-bg: linear-gradient(135deg, #ffe4e6 0%, #fda4af 50%, #f43f5e 100%);
--chip-border: #fb7185;
--text-primary: #fff1f2;
--text-accent: #fecdd3;
--text-shadow: rgba(254, 205, 211, 0.5);
--card-border: rgba(251, 113, 133, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.85), 0 0 25px rgba(244, 63, 94, 0.25);
}
.theme-diamond {
--card-bg: linear-gradient(135deg, #0b132b 0%, #1c2541 40%, #3a506b 70%, #0b132b 100%);
--chip-bg: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
--chip-border: #38bdf8;
--text-primary: #ffffff;
--text-accent: #e0f2fe;
--text-shadow: rgba(56, 189, 248, 0.5);
--card-border: rgba(186, 230, 253, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(56, 189, 248, 0.35);
}
.theme-cosmic {
--card-bg: linear-gradient(135deg, #13002b 0%, #32004f 45%, #58007a 70%, #0d001a 100%);
--chip-bg: linear-gradient(135deg, #f0abfc 0%, #c084fc 50%, #e879f9 100%);
--chip-border: #d8b4fe;
--text-primary: #fae8ff;
--text-accent: #f0abfc;
--text-shadow: rgba(232, 121, 249, 0.5);
--card-border: rgba(216, 180, 254, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(192, 132, 252, 0.35);
}
.theme-copper {
--card-bg: linear-gradient(135deg, #1a0f0a 0%, #4a2818 45%, #2d1810 70%, #0f0805 100%);
--chip-bg: linear-gradient(135deg, #fed7aa 0%, #f97316 50%, #fdba74 100%);
--chip-border: #ea580c;
--text-primary: #fff7ed;
--text-accent: #ffedd5;
--text-shadow: rgba(249, 115, 22, 0.4);
--card-border: rgba(251, 146, 60, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 20px rgba(234, 88, 12, 0.3);
}
.theme-midnight {
--card-bg: linear-gradient(135deg, #09090b 0%, #18181b 40%, #27272a 70%, #09090b 100%);
--chip-bg: linear-gradient(135deg, #a855f7 0%, #7e22ce 50%, #c084fc 100%);
--chip-border: #9333ea;
--text-primary: #fafafa;
--text-accent: #c084fc;
--text-shadow: rgba(168, 85, 247, 0.5);
--card-border: rgba(168, 85, 247, 0.25);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 20px rgba(147, 51, 234, 0.25);
}
.theme-glow {
--card-bg: linear-gradient(135deg, #022020 0%, #053535 45%, #084c4d 70%, #011414 100%);
--chip-bg: linear-gradient(135deg, #a7f3d0 0%, #34d399 50%, #6ee7b7 100%);
--chip-border: #10b981;
--text-primary: #ecfdf5;
--text-accent: #6ee7b7;
--text-shadow: rgba(52, 211, 153, 0.6);
--card-border: rgba(52, 211, 153, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(16, 185, 129, 0.35);
}
.theme-aether {
--card-bg: linear-gradient(135deg, #0f172a 0%, #3b0764 45%, #1e1b4b 70%, #020617 100%);
--chip-bg: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #38bdf8 100%);
--chip-border: #6366f1;
--text-primary: #e0e7ff;
--text-accent: #a5b4fc;
--text-shadow: rgba(165, 180, 252, 0.6);
--card-border: rgba(129, 140, 248, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(99, 102, 241, 0.4);
}
.theme-magma {
--card-bg: linear-gradient(135deg, #2a0404 0%, #7f1d1d 40%, #b45309 75%, #180202 100%);
--chip-bg: linear-gradient(135deg, #fef08a 0%, #f97316 50%, #ef4444 100%);
--chip-border: #dc2626;
--text-primary: #fff7ed;
--text-accent: #fdba74;
--text-shadow: rgba(249, 115, 22, 0.6);
--card-border: rgba(248, 113, 113, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(239, 68, 68, 0.4);
}
.theme-frost {
--card-bg: linear-gradient(135deg, #061e29 0%, #083344 40%, #164e63 70%, #03131a 100%);
--chip-bg: linear-gradient(135deg, #ffffff 0%, #a5f3fc 50%, #67e8f9 100%);
--chip-border: #22d3ee;
--text-primary: #ecfeff;
--text-accent: #67e8f9;
--text-shadow: rgba(103, 232, 249, 0.6);
--card-border: rgba(165, 243, 252, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(6, 182, 212, 0.35);
}
.theme-sakura {
--card-bg: linear-gradient(135deg, #2b091e 0%, #701a4b 45%, #500732 75%, #180311 100%);
--chip-bg: linear-gradient(135deg, #fbcfe8 0%, #f472b6 50%, #e11d48 100%);
--chip-border: #f43f5e;
--text-primary: #fdf2f8;
--text-accent: #fbcfe8;
--text-shadow: rgba(244, 114, 182, 0.5);
--card-border: rgba(244, 114, 182, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(236, 72, 153, 0.35);
}
.theme-shadow {
--card-bg: linear-gradient(135deg, #030303 0%, #121212 50%, #050505 100%);
--chip-bg: linear-gradient(135deg, #52525b 0%, #27272a 50%, #3f3f46 100%);
--chip-border: #71717a;
--text-primary: #f4f4f5;
--text-accent: #a1a1aa;
--text-shadow: rgba(161, 161, 170, 0.3);
--card-border: rgba(255, 255, 255, 0.1);
--card-glow: 0 30px 60px rgba(0, 0, 0, 1), 0 0 15px rgba(255, 255, 255, 0.05);
}
.theme-cyberpunk {
--card-bg: linear-gradient(135deg, #18002e 0%, #2a004f 40%, #001f3f 75%, #050014 100%);
--chip-bg: linear-gradient(135deg, #ffea00 0%, #00f5d4 100%);
--chip-border: #ffea00;
--text-primary: #ffea00;
--text-accent: #00f5d4;
--text-shadow: rgba(255, 234, 0, 0.6);
--card-border: rgba(255, 234, 0, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 234, 0, 0.4);
}
.theme-atlantis {
--card-bg: linear-gradient(135deg, #00101d 0%, #002b49 45%, #00406c 70%, #000a14 100%);
--chip-bg: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 50%, #0284c7 100%);
--chip-border: #7dd3fc;
--text-primary: #f0f9ff;
--text-accent: #38bdf8;
--text-shadow: rgba(56, 189, 248, 0.6);
--card-border: rgba(56, 189, 248, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(2, 132, 199, 0.4);
}
.theme-supernova {
--card-bg: linear-gradient(135deg, #310014 0%, #70002b 40%, #a8103d 75%, #18000a 100%);
--chip-bg: linear-gradient(135deg, #ffb703 0%, #ff007f 100%);
--chip-border: #ff007f;
--text-primary: #fff0f5;
--text-accent: #ffb703;
--text-shadow: rgba(255, 0, 127, 0.6);
--card-border: rgba(255, 0, 127, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 0, 127, 0.4);
}
.theme-amethyst {
--card-bg: linear-gradient(135deg, #1e0036 0%, #3b0066 45%, #2a004a 75%, #10001f 100%);
--chip-bg: linear-gradient(135deg, #ffe066 0%, #fcc419 50%, #e67e22 100%);
--chip-border: #fcc419;
--text-primary: #f3e8ff;
--text-accent: #ffe066;
--text-shadow: rgba(252, 196, 25, 0.5);
--card-border: rgba(216, 180, 254, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(168, 85, 247, 0.35);
}
.theme-emerald-dark {
--card-bg: linear-gradient(135deg, #01140e 0%, #022e20 50%, #00140e 100%);
--chip-bg: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
--chip-border: #34d399;
--text-primary: #d1fae5;
--text-accent: #34d399;
--text-shadow: rgba(52, 211, 153, 0.5);
--card-border: rgba(52, 211, 153, 0.25);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 20px rgba(16, 185, 129, 0.25);
}
.theme-solaris {
--card-bg: linear-gradient(135deg, #3a1500 0%, #7c2d00 40%, #b45309 75%, #200b00 100%);
--chip-bg: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #f97316 100%);
--chip-border: #facc15;
--text-primary: #fefce8;
--text-accent: #fde047;
--text-shadow: rgba(250, 204, 21, 0.6);
--card-border: rgba(250, 204, 21, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(234, 88, 12, 0.4);
}
.theme-nebula {
--card-bg: linear-gradient(135deg, #17002c 0%, #3a005c 35%, #002b5c 75%, #080014 100%);
--chip-bg: linear-gradient(135deg, #38bdf8 0%, #f472b6 50%, #c084fc 100%);
--chip-border: #f472b6;
--text-primary: #f8fafc;
--text-accent: #f472b6;
--text-shadow: rgba(244, 114, 182, 0.6);
--card-border: rgba(192, 132, 252, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(192, 132, 252, 0.4);
}
.theme-titanium {
--card-bg: linear-gradient(135deg, #1e293b 0%, #334155 45%, #1e293b 70%, #0f172a 100%);
--chip-bg: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 50%, #94a3b8 100%);
--chip-border: #cbd5e1;
--text-primary: #f8fafc;
--text-accent: #cbd5e1;
--text-shadow: rgba(203, 213, 225, 0.4);
--card-border: rgba(203, 213, 225, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.85), 0 0 20px rgba(148, 163, 184, 0.2);
}
.theme-inferno {
--card-bg: linear-gradient(135deg, #280000 0%, #5c0000 45%, #3d0000 75%, #120000 100%);
--chip-bg: linear-gradient(135deg, #ff8c00 0%, #ff0000 100%);
--chip-border: #ff4500;
--text-primary: #fff5f5;
--text-accent: #ff6b6b;
--text-shadow: rgba(255, 107, 107, 0.6);
--card-border: rgba(255, 69, 0, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(255, 0, 0, 0.35);
}
.theme-matrix {
--card-bg: linear-gradient(135deg, #001100 0%, #002200 45%, #001100 75%, #000500 100%);
--chip-bg: linear-gradient(135deg, #00ff66 0%, #009933 100%);
--chip-border: #00ff66;
--text-primary: #00ff66;
--text-accent: #66ff99;
--text-shadow: rgba(0, 255, 102, 0.7);
--card-border: rgba(0, 255, 102, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(0, 255, 102, 0.35);
}
.theme-prism {
--card-bg: linear-gradient(135deg, #2b2e39 0%, #4a5568 35%, #2d3748 70%, #1a202c 100%);
--chip-bg: linear-gradient(135deg, #ffffff 0%, #e2e8f0 50%, #cbd5e1 100%);
--chip-border: #38bdf8;
--text-primary: #ffffff;
--text-accent: #38bdf8;
--text-shadow: rgba(56, 189, 248, 0.6);
--card-border: rgba(255, 255, 255, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.35), 0 0 15px rgba(244, 114, 182, 0.35);
}
.theme-galaxy-gold {
--card-bg: linear-gradient(135deg, #0d0614 0%, #22092c 40%, #3b1805 75%, #0a020d 100%);
--chip-bg: linear-gradient(135deg, #ffe066 0%, #fcc419 50%, #e67e22 100%);
--chip-border: #ffd700;
--text-primary: #fffbeb;
--text-accent: #fde047;
--text-shadow: rgba(253, 224, 71, 0.6);
--card-border: rgba(253, 224, 71, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 179, 8, 0.35), 0 0 15px rgba(168, 85, 247, 0.35);
}
.theme-admin {
--card-bg: linear-gradient(135deg, #0a0002 0%, #2b0008 40%, #590012 75%, #000000 100%);
--chip-bg: linear-gradient(135deg, #ff4d6d 0%, #c9184a 50%, #800f2f 100%);
--chip-border: #ff758f;
--text-primary: #ffffff;
--text-accent: #ffb3c1;
--text-shadow: rgba(255, 77, 109, 0.8);
--card-border: rgba(255, 77, 109, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 0, 54, 0.5);
}
.theme-owner {
--card-bg: linear-gradient(135deg, #000000 0%, #111111 25%, #1a1a24 50%, #0d0d12 75%, #000000 100%);
--chip-bg: linear-gradient(135deg, #ffffff 0%, #ffd700 50%, #b8860b 100%);
--chip-border: #ffd700;
--text-primary: #ffffff;
--text-accent: #00f5d4;
--text-shadow: rgba(0, 245, 212, 0.8);
--card-border: rgba(255, 215, 0, 0.6);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(255, 215, 0, 0.4), 0 0 15px rgba(0, 245, 212, 0.5);
}
.theme-system {
--card-bg: linear-gradient(135deg, #02111b 0%, #002333 45%, #003554 75%, #000814 100%);
--chip-bg: linear-gradient(135deg, #00f5d4 0%, #00b4d8 50%, #0077b6 100%);
--chip-border: #00f5d4;
--text-primary: #e0f2fe;
--text-accent: #00f5d4;
--text-shadow: rgba(0, 245, 212, 0.7);
--card-border: rgba(0, 245, 212, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 245, 212, 0.35);
}
.theme-phantom {
--card-bg: linear-gradient(135deg, #080313 0%, #1c0b36 45%, #2a0845 75%, #05010a 100%);
--chip-bg: linear-gradient(135deg, #d8b4fe 0%, #a855f7 50%, #00f5d4 100%);
--chip-border: #c084fc;
--text-primary: #f5f3ff;
--text-accent: #818cf8;
--text-shadow: rgba(168, 85, 247, 0.7);
--card-border: rgba(192, 132, 252, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.4), 0 0 15px rgba(0, 245, 212, 0.3);
}
.theme-sakura-cyber {
--card-bg: linear-gradient(135deg, #100018 0%, #3a0033 40%, #0d0c2b 75%, #05000c 100%);
--chip-bg: linear-gradient(135deg, #ff80bf 0%, #00f5d4 100%);
--chip-border: #ff00a0;
--text-primary: #ffffff;
--text-accent: #ff66cc;
--text-shadow: rgba(255, 102, 204, 0.8);
--card-border: rgba(255, 0, 160, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 0, 160, 0.4), 0 0 15px rgba(0, 245, 212, 0.4);
}
.theme-dragon {
--card-bg: linear-gradient(135deg, #1a0000 0%, #4a0000 40%, #800000 70%, #0a0000 100%);
--chip-bg: linear-gradient(135deg, #ffd700 0%, #ff8c00 50%, #ff0000 100%);
--chip-border: #ffd700;
--text-primary: #fff0f0;
--text-accent: #ffcc00;
--text-shadow: rgba(255, 204, 0, 0.8);
--card-border: rgba(255, 69, 0, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(255, 69, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3);
}
.theme-ocean-deep {
--card-bg: linear-gradient(135deg, #000b18 0%, #001f3f 40%, #003366 75%, #00050d 100%);
--chip-bg: linear-gradient(135deg, #00f5d4 0%, #00b4d8 50%, #0077b6 100%);
--chip-border: #00f5d4;
--text-primary: #e6f7ff;
--text-accent: #00f5d4;
--text-shadow: rgba(0, 245, 212, 0.7);
--card-border: rgba(0, 180, 216, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 180, 216, 0.4);
}
.theme-cyber-gold {
--card-bg: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 45%, #262626 75%, #050505 100%);
--chip-bg: linear-gradient(135deg, #ffee00 0%, #ffb703 100%);
--chip-border: #ffee00;
--text-primary: #ffffff;
--text-accent: #ffee00;
--text-shadow: rgba(255, 238, 0, 0.8);
--card-border: rgba(255, 238, 0, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 238, 0, 0.4);
}
.theme-galaxy-purple {
--card-bg: linear-gradient(135deg, #10002b 0%, #240046 40%, #3c096c 75%, #080016 100%);
--chip-bg: linear-gradient(135deg, #e0aaff 0%, #c77dff 50%, #7b2cbf 100%);
--chip-border: #e0aaff;
--text-primary: #f7eede;
--text-accent: #e0aaff;
--text-shadow: rgba(224, 170, 255, 0.7);
--card-border: rgba(199, 125, 255, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(157, 78, 221, 0.45);
}
/* 🌟 THEME CHRONO GOLD 🌟 */
.theme-chrono-gold {
--card-bg: linear-gradient(135deg, #120e03 0%, #302409 40%, #523e10 75%, #0a0802 100%);
--chip-bg: linear-gradient(135deg, #fff3c4 0%, #ffd700 50%, #d4af37 100%);
--chip-border: #ffe87c;
--text-primary: #fffdf0;
--text-accent: #ffd700;
--text-shadow: rgba(255, 215, 0, 0.8);
--card-border: rgba(255, 215, 0, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(212, 175, 55, 0.45);
}
/* 🌌 THEME MỚI BỔ SUNG: AETHERIA 🌌 */
.theme-aetheria {
--card-bg: linear-gradient(135deg, #090014 0%, #1d003b 35%, #42006f 70%, #080012 100%);
--chip-bg: linear-gradient(135deg, #00ffff 0%, #b829ff 50%, #ff007f 100%);
--chip-border: #00ffff;
--text-primary: #f8f0ff;
--text-accent: #00ffff;
--text-shadow: rgba(0, 255, 255, 0.8);
--card-border: rgba(184, 41, 255, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(184, 41, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
min-height: 100vh;
background: #060709;
padding: 65px 20px 40px 20px;
overflow-y: auto;
position: relative;
gap: 20px;
}
.card-container {
width: 100%;
max-width: 425px;
height: 270px;
perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
position: relative;
border-radius: 16px;
padding: 24px 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #ffffff;
overflow: hidden;
background: var(--card-bg);
border: 1px solid var(--card-border);
box-shadow: var(--card-glow);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card.locked {
filter: grayscale(1) brightness(0.4) !important;
border-color: rgba(239, 71, 111, 0.3) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9) !important;
animation: none !important;
}
.card.locked::after {
content: "CARD LOCKED";
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
color: #ef476f;
font-size: 2rem;
font-weight: 900;
letter-spacing: 4px;
z-index: 10;
backdrop-filter: blur(2px);
text-shadow: 0 0 15px rgba(239, 71, 111, 0.6);
pointer-events: none;
}
.card::before {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 30%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0) 100%);
transform: rotate(25deg);
animation: shimmer 6s infinite linear;
z-index: 1;
}
@keyframes shimmer {
0% {
left: -60%;
}
30% {
left: 140%;
}
100% {
left: 140%;
}
}
.card-overlay {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 0);
background-size: 8px 8px;
opacity: 0.7;
z-index: 1;
pointer-events: none;
}
.card>* {
position: relative;
z-index: 2;
}
.brand-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.bank-name {
font-size: 1.3rem;
font-weight: 900;
letter-spacing: 2.5px;
background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
background-size: 400% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-glow 5s linear infinite;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
@keyframes rainbow-glow {
0% {
background-position: 0% center;
}
100% {
background-position: 400% center;
}
}
.contactless {
display: flex;
gap: 3.5px;
align-items: center;
opacity: 0.7;
}
.contactless span {
display: block;
width: 2.5px;
background: #fff;
border-radius: 4px;
}
.contactless span:nth-child(1) {
height: 7px;
}
.contactless span:nth-child(2) {
height: 12px;
}
.contactless span:nth-child(3) {
height: 17px;
}
.contactless span:nth-child(4) {
height: 22px;
}
.mid-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 5px;
}
.chip {
width: 46px;
height: 36px;
background: var(--chip-bg);
border: 1px solid var(--chip-border);
border-radius: 6px;
position: relative;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 3px 7px rgba(0, 0, 0, 0.5);
transition: all 0.4s ease;
}
.chip::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 14px;
right: 14px;
border-left: 1px solid rgba(0, 0, 0, 0.25);
border-right: 1px solid rgba(0, 0, 0, 0.25);
}
.chip::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 11px;
bottom: 11px;
border-top: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.balances-wrapper {
display: flex;
flex-direction: column;
gap: 4px;
text-align: right;
}
.balance-box {
text-align: right;
}
.balance-label {
font-size: 0.55rem;
color: #888e95;
letter-spacing: 1.8px;
margin-bottom: 1px;
font-weight: 600;
}
.balance-value {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
letter-spacing: 0.5px;
font-family: 'Courier New', Courier, monospace;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
transition: color 0.4s ease;
}
.savings-value {
font-size: 1.05rem;
font-weight: 700;
color: #ff85a2;
letter-spacing: 0.5px;
font-family: 'Courier New', Courier, monospace;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.account-box {
display: flex;
flex-direction: column;
margin-top: 5px;
}
.account-label {
font-size: 0.5rem;
color: #888e95;
letter-spacing: 1.5px;
font-weight: 600;
margin-bottom: 1px;
}
.account-number {
font-size: 0.95rem;
font-weight: 700;
color: #e0e0e2;
letter-spacing: 1px;
font-family: 'Courier New', Courier, monospace;
}
.card-number {
font-size: 1.55rem;
letter-spacing: 4px;
margin-top: 2px;
font-family: 'Courier New', Courier, monospace;
font-weight: 700;
color: #f5f5f7;
text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.25), 1px 2px 4px rgba(0, 0, 0, 0.8);
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 5px;
width: 100%;
}
.footer-group {
display: flex;
flex-direction: column;
}
.label {
font-size: 0.55rem;
color: #888e95;
letter-spacing: 1.5px;
margin-bottom: 4px;
font-weight: 600;
}
.value {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
font-family: 'Courier New', Courier, monospace;
color: var(--text-accent);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 4px var(--text-shadow);
transition: all 0.4s ease;
}
.vip-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: 3px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
background: #4a4e56;
color: #fff;
transition: all 0.3s ease;
}
.vip-lv1 {
background: linear-gradient(135deg, #7f8c8d, #bdc3c7);
color: #fff;
}
.vip-lv2 {
background: linear-gradient(135deg, #f1c40f, #f39c12);
color: #000;
font-weight: 900;
border-color: #f39c12;
}
.vip-lv3 {
background: linear-gradient(135deg, #e67e22, #d35400);
color: #fff;
font-weight: 900;
}
.vip-svip {
background: linear-gradient(45deg, #ff007f, #7f00ff, #00f5d4, #ff007f);
background-size: 300% 300%;
animation: vip-rainbow 4s ease infinite;
color: #fff;
font-weight: 900;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 12px rgba(127, 0, 255, 0.5);
border-color: rgba(255, 255, 255, 0.3);
}
@keyframes vip-rainbow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.vip-emerald {
background: linear-gradient(135deg, #059669, #10b981);
color: #fff;
font-weight: 900;
border-color: #34d399;
}
.vip-ruby {
background: linear-gradient(135deg, #dc2626, #ef4444);
color: #fff;
font-weight: 900;
border-color: #f87171;
}
.vip-obsidian {
background: linear-gradient(135deg, #1f2937, #111827);
color: #f9fafb;
font-weight: 900;
border-color: #4b5563;
}
.vip-neon {
background: linear-gradient(135deg, #0284c7, #38bdf8);
color: #000;
font-weight: 900;
border-color: #7dd3fc;
}
.vip-rosegold {
background: linear-gradient(135deg, #e11d48, #fb7185);
color: #fff;
font-weight: 900;
border-color: #fecdd3;
}
.vip-diamond {
background: linear-gradient(135deg, #0284c7, #38bdf8);
color: #fff;
font-weight: 900;
border-color: #7dd3fc;
}
.vip-cosmic {
background: linear-gradient(135deg, #7e22ce, #c084fc);
color: #fff;
font-weight: 900;
border-color: #e879f9;
}
.vip-copper {
background: linear-gradient(135deg, #c2410c, #ea580c);
color: #fff;
font-weight: 900;
border-color: #fdba74;
}
.vip-midnight {
background: linear-gradient(135deg, #3f3f46, #52525b);
color: #c084fc;
font-weight: 900;
border-color: #a855f7;
}
.vip-glow {
background: linear-gradient(135deg, #047857, #10b981);
color: #000;
font-weight: 900;
border-color: #6ee7b7;
}
.vip-aether {
background: linear-gradient(135deg, #4c1d95, #6366f1);
color: #fff;
font-weight: 900;
border-color: #818cf8;
}
.vip-magma {
background: linear-gradient(135deg, #991b1b, #ea580c);
color: #fff;
font-weight: 900;
border-color: #f97316;
}
.vip-frost {
background: linear-gradient(135deg, #0e7490, #06b6d4);
color: #fff;
font-weight: 900;
border-color: #67e8f9;
}
.vip-sakura {
background: linear-gradient(135deg, #be123c, #fb7185);
color: #fff;
font-weight: 900;
border-color: #f472b6;
}
.vip-shadow {
background: linear-gradient(135deg, #18181b, #27272a);
color: #d4d4d8;
font-weight: 900;
border-color: #52525b;
}
.vip-cyberpunk {
background: linear-gradient(135deg, #ffea00, #00f5d4);
color: #000;
font-weight: 900;
border-color: #ffea00;
}
.vip-atlantis {
background: linear-gradient(135deg, #0284c7, #38bdf8);
color: #fff;
font-weight: 900;
border-color: #7dd3fc;
}
.vip-supernova {
background: linear-gradient(135deg, #ff007f, #ffb703);
color: #fff;
font-weight: 900;
border-color: #ff007f;
}
.vip-amethyst {
background: linear-gradient(135deg, #7e22ce, #fcc419);
color: #fff;
font-weight: 900;
border-color: #fcc419;
}
.vip-emerald-dark {
background: linear-gradient(135deg, #022e20, #059669);
color: #34d399;
font-weight: 900;
border-color: #34d399;
}
.vip-solaris {
background: linear-gradient(135deg, #d97706, #facc15);
color: #000;
font-weight: 900;
border-color: #facc15;
}
.vip-nebula {
background: linear-gradient(135deg, #c084fc, #f472b6);
color: #fff;
font-weight: 900;
border-color: #f472b6;
}
.vip-titanium {
background: linear-gradient(135deg, #475569, #cbd5e1);
color: #0f172a;
font-weight: 900;
border-color: #cbd5e1;
}
.vip-inferno {
background: linear-gradient(135deg, #991b1b, #ff4500);
color: #fff;
font-weight: 900;
border-color: #ff6b6b;
}
.vip-matrix {
background: linear-gradient(135deg, #003311, #00ff66);
color: #000;
font-weight: 900;
border-color: #00ff66;
}
.vip-prism {
background: linear-gradient(135deg, #e2e8f0, #38bdf8, #f472b6);
color: #000;
font-weight: 900;
border-color: #fff;
}
.vip-galaxy-gold {
background: linear-gradient(135deg, #7e22ce, #fde047);
color: #fff;
font-weight: 900;
border-color: #fde047;
}
.vip-admin {
background: linear-gradient(135deg, #ff0036, #80001a);
color: #ffffff;
font-weight: 900;
border-color: #ff4d6d;
box-shadow: 0 0 10px rgba(255, 0, 54, 0.6);
}
.vip-owner {
background: linear-gradient(135deg, #ffd700, #b8860b, #00f5d4);
color: #000000;
font-weight: 900;
border-color: #ffffff;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}
.vip-system {
background: linear-gradient(135deg, #00f5d4, #0077b6);
color: #000000;
font-weight: 900;
border-color: #00f5d4;
box-shadow: 0 0 10px rgba(0, 245, 212, 0.6);
}
.vip-phantom {
background: linear-gradient(135deg, #a855f7, #3b0764, #00f5d4);
color: #ffffff;
font-weight: 900;
border-color: #c084fc;
box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}
.vip-sakura-cyber {
background: linear-gradient(135deg, #ff00a0, #7a0099, #00f5d4);
color: #ffffff;
font-weight: 900;
border-color: #ff66cc;
box-shadow: 0 0 12px rgba(255, 0, 160, 0.7);
}
.vip-dragon {
background: linear-gradient(135deg, #ff0000, #ff8c00, #ffd700);
color: #000000;
font-weight: 900;
border-color: #ffd700;
box-shadow: 0 0 12px rgba(255, 140, 0, 0.8);
}
.vip-ocean-deep {
background: linear-gradient(135deg, #00f5d4, #0077b6);
color: #ffffff;
font-weight: 900;
border-color: #00f5d4;
box-shadow: 0 0 12px rgba(0, 245, 212, 0.6);
}
.vip-cyber-gold {
background: linear-gradient(135deg, #ffee00, #ffb703);
color: #000000;
font-weight: 900;
border-color: #ffffff;
box-shadow: 0 0 12px rgba(255, 238, 0, 0.8);
}
.vip-galaxy-purple {
background: linear-gradient(135deg, #e0aaff, #7b2cbf);
color: #ffffff;
font-weight: 900;
border-color: #e0aaff;
box-shadow: 0 0 12px rgba(224, 170, 255, 0.7);
}
.vip-chrono-gold {
background: linear-gradient(135deg, #ffd700, #b8860b, #ffe87c);
color: #000000;
font-weight: 900;
border-color: #ffe87c;
box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}
/* 🌌 BADGE VIP AETHERIA 🌌 */
.vip-aetheria {
background: linear-gradient(135deg, #00ffff, #b829ff, #ff007f);
color: #ffffff;
font-weight: 900;
border-color: #00ffff;
box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
}
.vip-aurora {
background: linear-gradient(135deg, #00f5d4, #70e000);
color: #000000;
font-weight: 900;
border-color: #00f5d4;
box-shadow: 0 0 12px rgba(0, 245, 212, 0.6);
}
.vip-champagne {
background: linear-gradient(135deg, #fef3c7, #d97706);
color: #000000;
font-weight: 900;
border-color: #fef08a;
box-shadow: 0 0 12px rgba(254, 240, 138, 0.6);
}
.vip-royal-gold {
background: linear-gradient(135deg, #ffe599, #c5a059);
color: #000000;
font-weight: 900;
border-color: #d4af37;
box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}
.vip-cyber-neon {
background: linear-gradient(135deg, #0d0221, #00f5ff);
color: #ffffff;
font-weight: 900;
border-color: #00f5ff;
box-shadow: 0 0 12px rgba(0, 245, 255, 0.6);
}
.vip-rose-gold {
background: linear-gradient(135deg, #2b191e, #b76e79);
color: #ffffff;
font-weight: 900;
border-color: #e8b4b8;
box-shadow: 0 0 12px rgba(232, 180, 184, 0.6);
}
.vip-sakura-cyber {
background: linear-gradient(135deg, #100018, #00f5d4);
color: #ffffff;
font-weight: 900;
border-color: #ff00a0;
box-shadow: 0 0 12px rgba(255, 0, 160, 0.6);
}
.vip-dragon {
background: linear-gradient(135deg, #1a0000, #ff0000);
color: #ffffff;
font-weight: 900;
border-color: #ffd700;
box-shadow: 0 0 12px rgba(255, 69, 0, 0.6);
}
.vip .ocean-deep {
background: linear-gradient(135deg, #000b18, #00f5d4);
color: #ffffff;
font-weight: 900;
border-color: #00f5d4;
box-shadow: 0 0 12px rgba(0, 180, 216, 0.6);
}
.vip-cyber-gold {
background: linear-gradient(135deg, #0d0d0d, #ffee00);
color: #000000;
font-weight: 900;
border-color: #ffee00;
box-shadow: 0 0 12px rgba(255, 238, 0, 0.6);
}
/* 🌌 THEME AURORA 🌌 */
.theme-aurora {
--card-bg: linear-gradient(135deg, #02182b 0%, #006494 45%, #0582ca 70%, #001427 100%);
--chip-bg: linear-gradient(135deg, #00f5d4 0%, #70e000 100%);
--chip-border: #00f5d4;
--text-primary: #e0fbf6;
--text-accent: #00f5d4;
--text-shadow: rgba(0, 245, 212, 0.6);
--card-border: rgba(0, 245, 212, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 245, 212, 0.35);
}
/* 🌟 THEME MỚI 2: CHAMPAGNE LUXURY (RƯỢU SÂM PANH CAO CẤP) */
.theme-champagne {
--card-bg: linear-gradient(135deg, #1c1917 0%, #44403c 45%, #292524 75%, #0c0a09 100%);
--chip-bg: linear-gradient(135deg, #fef3c7 0%, #fde047 50%, #d97706 100%);
--chip-border: #fef08a;
--text-primary: #fffbeb;
--text-accent: #fef08a;
--text-shadow: rgba(254, 240, 138, 0.6);
--card-border: rgba(254, 240, 138, 0.35);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(251, 191, 36, 0.3);
}
/* ==========================================
THEME VIP 2 - ROYAL GOLD (Vàng Hoàng Gia)
========================================== */
.theme-vipp {
--card-bg: linear-gradient(135deg, #111111 0%, #3a2d0d 40%, #c5a059 70%, #111111 100%);
--chip-bg: linear-gradient(135deg, #ffe599 0%, #c5a059 100%);
--chip-border: #d4af37;
--text-primary: #fff8e7;
--text-accent: #f3e5ab;
--text-shadow: rgba(212, 175, 55, 0.4);
--card-border: rgba(212, 175, 55, 0.3);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.85), 0 0 20px rgba(212, 175, 55, 0.25);
}
/* ==========================================
THEME VIP 3 - CYBER NEON (Tương Lai / Tím Xanh)
========================================== */
.theme-tuonglai {
--card-bg: linear-gradient(135deg, #0d0221 0%, #261447 50%, #00f5ff 100%);
--chip-bg: linear-gradient(135deg, #00f5ff 0%, #ff007f 100%);
--chip-border: #00f5ff;
--text-primary: #ffffff;
--text-accent: #00f5ff;
--text-shadow: rgba(0, 245, 255, 0.6);
--card-border: rgba(255, 0, 127, 0.4);
--card-glow: 0 30px 60px rgba(13, 2, 33, 0.9), 0 0 20px rgba(0, 245, 255, 0.3);
}
/* ==========================================
THEME VIP 4 - ROSE GOLD (Hồng Kim Sang Trọng)
========================================== */
.theme-pink {
--card-bg: linear-gradient(135deg, #2b191e 0%, #8a5a65 50%, #b76e79 100%);
--chip-bg: linear-gradient(135deg, #f7d6d0 0%, #b76e79 100%);
--chip-border: #e8b4b8;
--text-primary: #ffffff;
--text-accent: #f7d6d0;
--text-shadow: rgba(232, 180, 184, 0.5);
--card-border: rgba(247, 214, 208, 0.3);
--card-glow: 0 30px 60px rgba(43, 25, 30, 0.85), 0 0 18px rgba(183, 110, 121, 0.3);
}
.theme-sunset {
--card-bg: linear-gradient(135deg, #2b0a0a 0%, #b8322a 45%, #f97316 75%, #451a03 100%);
--chip-bg: linear-gradient(135deg, #fde68a 0%, #fb923c 55%, #dc2626 100%);
--chip-border: #fb923c;
--text-primary: #fff7ed;
--text-accent: #fed7aa;
--text-shadow: rgba(251, 146, 60, 0.5);
--card-border: rgba(251, 146, 60, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px rgba(249, 115, 22, 0.35);
}
.theme-aurora-neon {
--card-bg: linear-gradient(135deg, #042f2e 0%, #0f766e 45%, #14b8a6 70%, #172554 100%);
--chip-bg: linear-gradient(135deg, #67e8f9 0%, #34d399 50%, #a78bfa 100%);
--chip-border: #2dd4bf;
--text-primary: #ecfeff;
--text-accent: #99f6e4;
--text-shadow: rgba(45, 212, 191, 0.55);
--card-border: rgba(45, 212, 191, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(45, 212, 191, 0.4);
}
.theme-cyberpunk-neon {
--card-bg: linear-gradient(135deg, #180026 0%, #581c87 42%, #db2777 72%, #111827 100%);
--chip-bg: linear-gradient(135deg, #facc15 0%, #f472b6 50%, #22d3ee 100%);
--chip-border: #f0abfc;
--text-primary: #fdf4ff;
--text-accent: #f0abfc;
--text-shadow: rgba(244, 114, 182, 0.55);
--card-border: rgba(244, 114, 182, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(236, 72, 153, 0.4);
}
.theme-solar-flare {
--card-bg: linear-gradient(135deg, #2b0b00 0%, #9a3412 40%, #f59e0b 72%, #431407 100%);
--chip-bg: linear-gradient(135deg, #fff7ad 0%, #facc15 45%, #f97316 100%);
--chip-border: #facc15;
--text-primary: #fff7ed;
--text-accent: #fde68a;
--text-shadow: rgba(251, 191, 36, 0.6);
--card-border: rgba(251, 191, 36, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.5);
}
.vip-solar-flare {
background: linear-gradient(135deg, #facc15, #f97316, #dc2626);
color: #fff;
font-weight: 900;
border-color: #fde68a;
box-shadow: 0 0 14px rgba(249, 115, 22, 0.7);
}
.theme-lunar-eclipse {
--card-bg: linear-gradient(135deg, #09090b 0%, #27272a 48%, #7f1d1d 78%, #18181b 100%);
--chip-bg: linear-gradient(135deg, #e4e4e7, #71717a, #ef4444);
--chip-border: #a1a1aa;
--text-primary: #fafafa;
--text-accent: #fecaca;
--text-shadow: rgba(248, 113, 113, 0.5);
--card-border: rgba(248, 113, 113, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(220, 38, 38, 0.35);
}
.theme-forest {
--card-bg: linear-gradient(135deg, #052e16 0%, #166534 45%, #65a30d 72%, #14230b 100%);
--chip-bg: linear-gradient(135deg, #d9f99d, #84cc16, #facc15);
--chip-border: #a3e635;
--text-primary: #f7fee7;
--text-accent: #bef264;
--text-shadow: rgba(163, 230, 53, 0.5);
--card-border: rgba(163, 230, 53, 0.4);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(101, 163, 13, 0.4);
}
.theme-deep-ocean {
--card-bg: linear-gradient(135deg, #082f49 0%, #075985 45%, #0e7490 72%, #082f49 100%);
--chip-bg: linear-gradient(135deg, #cffafe, #22d3ee, #2563eb);
--chip-border: #22d3ee;
--text-primary: #ecfeff;
--text-accent: #a5f3fc;
--text-shadow: rgba(34, 211, 238, 0.55);
--card-border: rgba(34, 211, 238, 0.42);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(14, 116, 144, 0.45);
}
.theme-candy {
--card-bg: linear-gradient(135deg, #500724 0%, #be185d 45%, #c026d3 72%, #312e81 100%);
--chip-bg: linear-gradient(135deg, #fbcfe8, #f472b6, #c084fc);
--chip-border: #f9a8d4;
--text-primary: #fdf2f8;
--text-accent: #f9a8d4;
--text-shadow: rgba(244, 114, 182, 0.55);
--card-border: rgba(249, 168, 212, 0.42);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(219, 39, 119, 0.42);
}
.theme-toxic {
--card-bg: linear-gradient(135deg, #172554 0%, #164e63 42%, #65a30d 72%, #111827 100%);
--chip-bg: linear-gradient(135deg, #bef264, #22c55e, #06b6d4);
--chip-border: #84cc16;
--text-primary: #f7fee7;
--text-accent: #d9f99d;
--text-shadow: rgba(132, 204, 22, 0.6);
--card-border: rgba(132, 204, 22, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(132, 204, 22, 0.4);
}
.theme-arctic {
--card-bg: linear-gradient(135deg, #172554 0%, #1d4ed8 45%, #67e8f9 75%, #172554 100%);
--chip-bg: linear-gradient(135deg, #f0f9ff, #bae6fd, #818cf8);
--chip-border: #bae6fd;
--text-primary: #f0f9ff;
--text-accent: #bae6fd;
--text-shadow: rgba(125, 211, 252, 0.6);
--card-border: rgba(186, 230, 253, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(56, 189, 248, 0.4);
}
.theme-lava {
--card-bg: linear-gradient(135deg, #1c0505 0%, #991b1b 42%, #f97316 72%, #450a0a 100%);
--chip-bg: linear-gradient(135deg, #fef08a, #fb923c, #dc2626);
--chip-border: #fb923c;
--text-primary: #fff7ed;
--text-accent: #fed7aa;
--text-shadow: rgba(249, 115, 22, 0.6);
--card-border: rgba(249, 115, 22, 0.48);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 88, 12, 0.5);
}
.theme-royal-purple {
--card-bg: linear-gradient(135deg, #1e1b4b 0%, #6b21a8 45%, #a855f7 72%, #111827 100%);
--chip-bg: linear-gradient(135deg, #e9d5ff, #c084fc, #facc15);
--chip-border: #d8b4fe;
--text-primary: #faf5ff;
--text-accent: #e9d5ff;
--text-shadow: rgba(192, 132, 252, 0.6);
--card-border: rgba(216, 180, 254, 0.45);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(168, 85, 247, 0.45);
}
.theme-holographic {
--card-bg: linear-gradient(120deg, #164e63 0%, #7e22ce 34%, #db2777 63%, #ca8a04 100%);
--chip-bg: linear-gradient(135deg, #a5f3fc, #f0abfc, #fde68a);
--chip-border: #f0abfc;
--text-primary: #fff;
--text-accent: #f5d0fe;
--text-shadow: rgba(240, 171, 252, 0.65);
--card-border: rgba(240, 171, 252, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 32px rgba(217, 70, 239, 0.45);
}
.theme-steel-blue {
--card-bg: linear-gradient(135deg, #0f172a 0%, #334155 45%, #64748b 72%, #111827 100%);
--chip-bg: linear-gradient(135deg, #f1f5f9, #94a3b8, #38bdf8);
--chip-border: #cbd5e1;
--text-primary: #f8fafc;
--text-accent: #bae6fd;
--text-shadow: rgba(125, 211, 252, 0.5);
--card-border: rgba(186, 230, 253, 0.38);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(100, 116, 139, 0.5);
}
.vip-lunar-eclipse, .vip-forest, .vip-deep-ocean, .vip-candy, .vip-toxic,
.vip-arctic, .vip-lava, .vip-royal-purple, .vip-holographic, .vip-steel-blue {
color: #fff;
font-weight: 900;
}
.vip-lunar-eclipse { background: linear-gradient(135deg, #52525b, #dc2626); border-color: #fca5a5; }
.vip-forest { background: linear-gradient(135deg, #166534, #84cc16); border-color: #bef264; }
.vip-deep-ocean { background: linear-gradient(135deg, #0369a1, #22d3ee); border-color: #a5f3fc; }
.vip-candy { background: linear-gradient(135deg, #db2777, #c084fc); border-color: #f9a8d4; }
.vip-toxic { background: linear-gradient(135deg, #0e7490, #84cc16); border-color: #bef264; }
.vip-arctic { background: linear-gradient(135deg, #2563eb, #67e8f9); border-color: #bae6fd; }
.vip-lava { background: linear-gradient(135deg, #b91c1c, #f97316); border-color: #fed7aa; }
.vip-royal-purple { background: linear-gradient(135deg, #6b21a8, #c084fc); border-color: #e9d5ff; }
.vip-holographic { background: linear-gradient(135deg, #0891b2, #d946ef, #facc15); border-color: #f5d0fe; }
.vip-steel-blue { background: linear-gradient(135deg, #475569, #38bdf8); border-color: #bae6fd; }
.theme-nebula-storm {
--card-bg: linear-gradient(135deg, #0f172a 0%, #312e81 42%, #7e22ce 70%, #164e63 100%);
--chip-bg: linear-gradient(135deg, #a5f3fc, #818cf8, #e879f9);
--chip-border: #a5b4fc;
--text-primary: #f5f3ff;
--text-accent: #c4b5fd;
--text-shadow: rgba(167, 139, 250, 0.65);
--card-border: rgba(129, 140, 248, 0.5);
--card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(124, 58, 237, 0.5);
}
.vip-nebula-storm {
background: linear-gradient(135deg, #2563eb, #7c3aed, #d946ef);
color: #fff;
font-weight: 900;
border-color: #c4b5fd;
box-shadow: 0 0 15px rgba(139, 92, 246, 0.75);
}
.theme-midnight-crystal { --card-bg: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #4f46e5 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #c4b5fd); --chip-border: #93c5fd; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(93, 155, 245, 0.6); --card-border: rgba(147, 197, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(79, 70, 229, 0.45); }
.theme-sunset-desert { --card-bg: linear-gradient(135deg, #431407 0%, #b45309 42%, #f97316 72%, #5a2c00 100%); --chip-bg: linear-gradient(135deg, #fef08a, #fcd34d, #d97706); --chip-border: #fdbf2d; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 163, 45, 0.65); --card-border: rgba(253, 163, 45, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(217, 119, 6, 0.5); }
.theme-storm-cloud { --card-bg: linear-gradient(135deg, #111827 0%, #374151 45%, #6b7280 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #f3f4f6, #9ca3af, #d1d5db); --chip-border: #d1d5db; --text-primary: #f9fafb; --text-accent: #e5e7eb; --text-shadow: rgba(156, 163, 175, 0.55); --card-border: rgba(209, 213, 219, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(107, 114, 128, 0.4); }
.theme-ocean-pearl { --card-bg: linear-gradient(135deg, #082f49 0%, #0e7490 45%, #22d3ee 72%, #164e63 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #a7f3d0, #67e8f9); --chip-border: #2dd4bf; --text-primary: #ecfeff; --text-accent: #a5f3fc; --text-shadow: rgba(45, 212, 191, 0.6); --card-border: rgba(45, 212, 191, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(34, 211, 238, 0.45); }
.theme-golden-dawn { --card-bg: linear-gradient(135deg, #291d00 0%, #854d0e 42%, #facc15 72%, #1f1500 100%); --chip-bg: linear-gradient(135deg, #fffacd, #fcd34d, #fbbf24); --chip-border: #facc15; --text-primary: #fef3c7; --text-accent: #fde68a; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(250, 204, 21, 0.5); }
.theme-crimson-night { --card-bg: linear-gradient(135deg, #450a0a 0%, #991b1b 45%, #dc2626 72%, #2a0808 100%); --chip-bg: linear-gradient(135deg, #fee2e2, #fca5a5, #f87171); --chip-border: #fca5a5; --text-primary: #fef2f2; --text-accent: #fecaca; --text-shadow: rgba(252, 165, 165, 0.6); --card-border: rgba(252, 165, 165, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(220, 38, 38, 0.45); }
.theme-emerald-moss { --card-bg: linear-gradient(135deg, #022c22 0%, #065f46 42%, #059669 72%, #0f2818 100%); --chip-bg: linear-gradient(135deg, #dcfce7, #a7f3d0, #6ee7b7); --chip-border: #6ee7b7; --text-primary: #ecfdf5; --text-accent: #a7f3d0; --text-shadow: rgba(110, 231, 183, 0.6); --card-border: rgba(110, 231, 183, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.42); }
.theme-sapphire-sky { --card-bg: linear-gradient(135deg, #082f49 0%, #0c4a6e 45%, #0284c7 72%, #0a2342 100%); --chip-bg: linear-gradient(135deg, #e0f2fe, #bae6fd, #38bdf8); --chip-border: #0284c7; --text-primary: #f0f9ff; --text-accent: #cffafe; --text-shadow: rgba(56, 189, 248, 0.65); --card-border: rgba(56, 189, 248, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(2, 132, 199, 0.45); }
.theme-rose-velvet { --card-bg: linear-gradient(135deg, #500724 0%, #be185d 42%, #ec4899 72%, #2d0a2e 100%); --chip-bg: linear-gradient(135deg, #fbf5ff, #f9a8d4, #f472b6); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.6); --card-border: rgba(244, 114, 182, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.45); }
.theme-amber-glow { --card-bg: linear-gradient(135deg, #332200 0%, #b85c00 42%, #fbbf24 72%, #3a2600 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fde68a, #fbbf24); --chip-border: #f59e0b; --text-primary: #fefae0; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.65); --card-border: rgba(245, 158, 11, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(251, 191, 36, 0.48); }
.theme-violet-dream { --card-bg: linear-gradient(135deg, #2e1065 0%, #6b21a8 45%, #a855f7 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #ede9fe, #d8b4fe, #c084fc); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, 0.65); --card-border: rgba(216, 180, 254, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(168, 85, 247, 0.45); }
.theme-jade-forest { --card-bg: linear-gradient(135deg, #134e4a 0%, #0d9488 45%, #14b8a6 72%, #0f2f2f 100%); --chip-bg: linear-gradient(135deg, #ccfbf1, #99f6e4, #5eead4); --chip-border: #2dd4bf; --text-primary: #f0fdfa; --text-accent: #99f6e4; --text-shadow: rgba(45, 212, 191, 0.65); --card-border: rgba(45, 212, 191, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(20, 184, 166, 0.45); }
.theme-copper-rust { --card-bg: linear-gradient(135deg, #431407 0%, #92400e 42%, #ea580c 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #fb923c); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.65); --card-border: rgba(249, 115, 22, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(234, 88, 12, 0.48); }
.theme-silver-frost { --card-bg: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 42%, #f1f5f9 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #e2e8f0, #cbd5e1, #94a3b8); --chip-border: #94a3b8; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.5); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 25px rgba(203, 213, 225, 0.4); }
.theme-bronze-sand { --card-bg: linear-gradient(135deg, #44290c 0%, #b45309 42%, #d97706 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fcd34d, #d97706); --chip-border: #d97706; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(217, 119, 6, 0.6); --card-border: rgba(217, 119, 6, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.42); }
.theme-obsidian-void { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 45%, #2a2a2a 72%, #000 100%); --chip-bg: linear-gradient(135deg, #e5e7eb, #9ca3af, #6b7280); --chip-border: #9ca3af; --text-primary: #f9fafb; --text-accent: #d1d5db; --text-shadow: rgba(156, 163, 175, 0.5); --card-border: rgba(209, 213, 219, 0.38); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 20px rgba(75, 85, 99, 0.3); }
.theme-ruby-fire { --card-bg: linear-gradient(135deg, #5f0f40 0%, #b91c62 42%, #f50b6a 72%, #3d0825 100%); --chip-bg: linear-gradient(135deg, #fce7f3, #fbcfe8, #f472b6); --chip-border: #f472b6; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(236, 72, 153, 0.48); }
.theme-topaz-sun { --card-bg: linear-gradient(135deg, #4c1d95 0%, #f59e0b 42%, #fbbf24 72%, #44290c 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fbbf24, #f59e0b); --chip-border: #fbbf24; --text-primary: #fefae0; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.65); --card-border: rgba(245, 158, 11, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(245, 158, 11, 0.48); }
.theme-opal-light { --card-bg: linear-gradient(135deg, #d1cfe5 0%, #e9d5ff 45%, #f5d0fe 72%, #c9a2db 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ede9fe, #ddd6fe); --chip-border: #c4b5fd; --text-primary: #1e1b4b; --text-accent: #6b7280; --text-shadow: rgba(167, 139, 250, 0.5); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(196, 181, 253, 0.35); }
.theme-crystal-dawn { --card-bg: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 45%, #bae6fd 72%, #93c5fd 100%); --chip-bg: linear-gradient(135deg, #f0f9ff, #93c5fd, #38bdf8); --chip-border: #38bdf8; --text-primary: #082f49; --text-accent: #0c4a6e; --text-shadow: rgba(2, 132, 199, 0.5); --card-border: rgba(56, 189, 248, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(56, 189, 248, 0.35); }
.theme-midnight-aurora { --card-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 42%, #334155 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #cbd5e1, #94a3b8, #64748b); --chip-border: #94a3b8; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(100, 116, 139, 0.55); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(100, 116, 139, 0.35); }
.theme-sunset-blaze { --card-bg: linear-gradient(135deg, #5a2c00 0%, #c2410c 42%, #ea580c 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #f97316); --chip-border: #f59e0b; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.65); --card-border: rgba(249, 115, 22, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.45); }
.theme-storm-surge { --card-bg: linear-gradient(135deg, #075985 0%, #0e7490 42%, #22d3ee 72%, #0c4a6e 100%); --chip-bg: linear-gradient(135deg, #cffafe, #a5f3fc, #67e8f9); --chip-border: #22d3ee; --text-primary: #ecfeff; --text-accent: #a5f3fc; --text-shadow: rgba(34, 211, 238, 0.65); --card-border: rgba(34, 211, 238, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(14, 116, 144, 0.45); }
.theme-ocean-depths { --card-bg: linear-gradient(135deg, #0c4a6e 0%, #0369a1 42%, #0284c7 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #e0f2fe, #cffafe, #38bdf8); --chip-border: #38bdf8; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(2, 132, 199, 0.65); --card-border: rgba(2, 132, 199, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(3, 105, 161, 0.45); }
.theme-golden-lotus { --card-bg: linear-gradient(135deg, #44290c 0%, #a16207 42%, #ca8a04 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fef08a, #facc15, #eab308); --chip-border: #facc15; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(202, 138, 4, 0.42); }
.theme-crimson-rose { --card-bg: linear-gradient(135deg, #5f0f40 0%, #be185d 42%, #f50b6a 72%, #3d0825 100%); --chip-bg: linear-gradient(135deg, #fce7f3, #fbcfe8, #f472b6); --chip-border: #f472b6; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.45); }
.theme-emerald-valley { --card-bg: linear-gradient(135deg, #0f2818 0%, #166534 42%, #16a34a 72%, #0d2818 100%); --chip-bg: linear-gradient(135deg, #dcfce7, #bbf7d0, #86efac); --chip-border: #86efac; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, 0.65); --card-border: rgba(134, 239, 172, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(34, 197, 94, 0.42); }
.theme-sapphire-depths { --card-bg: linear-gradient(135deg, #0c2d44 0%, #1e40af 42%, #3b82f6 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #60a5fa); --chip-border: #60a5fa; --text-primary: #eff6ff; --text-accent: #cffafe; --text-shadow: rgba(59, 130, 246, 0.65); --card-border: rgba(59, 130, 246, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(37, 99, 235, 0.42); }
.theme-rose-garden { --card-bg: linear-gradient(135deg, #5f1236 0%, #be185d 42%, #f43f5e 72%, #3d0a2e 100%); --chip-bg: linear-gradient(135deg, #fce7f3, #f9a8d4, #f472b6); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.42); }
.theme-amber-harvest { --card-bg: linear-gradient(135deg, #451a03 0%, #d97706 42%, #fbbf24 72%, #2d1600 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fcd34d, #f59e0b); --chip-border: #f59e0b; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.65); --card-border: rgba(245, 158, 11, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.42); }
.theme-violet-night { --card-bg: linear-gradient(135deg, #4c1d95 0%, #7e22ce 42%, #d946ef 72%, #2e1065 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #d8b4fe, #c084fc); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, 0.65); --card-border: rgba(216, 180, 254, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.42); }
.theme-jade-temple { --card-bg: linear-gradient(135deg, #0d3b3b 0%, #0f766e 42%, #0d9488 72%, #082f2f 100%); --chip-bg: linear-gradient(135deg, #ccfbf1, #99f6e4, #5eead4); --chip-border: #99f6e4; --text-primary: #f0fdfa; --text-accent: #99f6e4; --text-shadow: rgba(45, 212, 191, 0.65); --card-border: rgba(45, 212, 191, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(13, 148, 136, 0.42); }
.theme-copper-canyon { --card-bg: linear-gradient(135deg, #5a2d0c 0%, #b45309 42%, #ea580c 72%, #3a1800 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #fb923c); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 186, 116, 0.65); --card-border: rgba(253, 186, 116, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 88, 12, 0.42); }
.theme-silver-snow { --card-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 42%, #cbd5e1 72%, #f1f5f9 100%); --chip-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0, #cbd5e1); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(100, 116, 139, 0.5); --card-border: rgba(148, 163, 184, 0.38); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 25px rgba(203, 213, 225, 0.35); }
.theme-bronze-warrior { --card-bg: linear-gradient(135deg, #3a1500 0%, #c2410c 42%, #ea580c 72%, #2a0f00 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fb923c, #f97316); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.65); --card-border: rgba(249, 115, 22, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.42); }
.theme-obsidian-flame { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 42%, #1f1f1f 72%, #000 100%); --chip-bg: linear-gradient(135deg, #fca5a5, #f87171, #ef4444); --chip-border: #f87171; --text-primary: #f9fafb; --text-accent: #fecaca; --text-shadow: rgba(252, 165, 165, 0.55); --card-border: rgba(252, 165, 165, 0.38); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 28px rgba(220, 38, 38, 0.32); }
.theme-ruby-crown { --card-bg: linear-gradient(135deg, #4f0f28 0%, #be185d 42%, #f50b6a 72%, #2a0a15 100%); --chip-bg: linear-gradient(135deg, #fce7f3, #f9a8d4, #f472b6); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.42); }
.theme-topaz-temple { --card-bg: linear-gradient(135deg, #44290c 0%, #a16207 42%, #b45309 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fcd34d, #d97706); --chip-border: #d97706; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(217, 119, 6, 0.65); --card-border: rgba(217, 119, 6, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.42); }
.theme-opal-mist { --card-bg: linear-gradient(135deg, #c9a2db 0%, #e9d5ff 42%, #ddd6fe 72%, #c4b5fd 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ede9fe, #c4b5fd); --chip-border: #c4b5fd; --text-primary: #1e1b4b; --text-accent: #6b7280; --text-shadow: rgba(167, 139, 250, 0.55); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(196, 181, 253, 0.32); }
.theme-crystal-palace { --card-bg: linear-gradient(135deg, #a5b4fc 0%, #dbeafe 42%, #bae6fd 72%, #93c5fd 100%); --chip-bg: linear-gradient(135deg, #f0f9ff, #93c5fd, #60a5fa); --chip-border: #60a5fa; --text-primary: #082f49; --text-accent: #0c4a6e; --text-shadow: rgba(56, 189, 248, 0.6); --card-border: rgba(56, 189, 248, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 32px rgba(56, 189, 248, 0.35); }
.theme-twilight-dusk { --card-bg: linear-gradient(135deg, #2a1b50 0%, #5b21b6 42%, #7e22ce 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #ede9fe, #d8b4fe, #c084fc); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, 0.65); --card-border: rgba(216, 180, 254, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(168, 85, 247, 0.42); }
.theme-sunset-flame { --card-bg: linear-gradient(135deg, #5a2c00 0%, #c2410c 42%, #f97316 72%, #3a1800 100%); --chip-bg: linear-gradient(135deg, #fef08a, #fbbf24, #f97316); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.65); --card-border: rgba(249, 115, 22, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(217, 119, 6, 0.42); }
.theme-ocean-mist { --card-bg: linear-gradient(135deg, #0c4a6e 0%, #0369a1 42%, #0284c7 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #e0f2fe, #cffafe, #22d3ee); --chip-border: #22d3ee; --text-primary: #f0f9ff; --text-accent: #cffafe; --text-shadow: rgba(34, 211, 238, 0.65); --card-border: rgba(34, 211, 238, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(2, 132, 199, 0.42); }
.theme-golden-kingdom { --card-bg: linear-gradient(135deg, #3a2400 0%, #b45309 42%, #facc15 72%, #2d1800 100%); --chip-bg: linear-gradient(135deg, #fffacd, #fef08a, #facc15); --chip-border: #facc15; --text-primary: #fefae0; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(202, 138, 4, 0.42); }
.theme-rose-whisper { --card-bg: linear-gradient(135deg, #500724 0%, #9d174d 42%, #ec4899 72%, #2d0a2e 100%); --chip-bg: linear-gradient(135deg, #fbf5ff, #fbcfe8, #f9a8d4); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.42); }
.theme-violet-eclipse { --card-bg: linear-gradient(135deg, #4c1d95 0%, #7e22ce 42%, #c084fc 72%, #2e1065 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #d8b4fe, #c084fc); --chip-border: #c084fc; --text-primary: #faf5ff; --text-accent: #f5d0fe; --text-shadow: rgba(196, 84, 252, 0.65); --card-border: rgba(192, 132, 252, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(168, 85, 247, 0.42); }
.theme-emerald-lake { --card-bg: linear-gradient(135deg, #0f2818 0%, #059669 42%, #10b981 72%, #0d2818 100%); --chip-bg: linear-gradient(135deg, #dcfce7, #a7f3d0, #86efac); --chip-border: #86efac; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, 0.65); --card-border: rgba(134, 239, 172, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(16, 185, 129, 0.42); }
.theme-sapphire-throne { --card-bg: linear-gradient(135deg, #082f49 0%, #0369a1 42%, #0284c7 72%, #0a2342 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #38bdf8); --chip-border: #38bdf8; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(56, 189, 248, 0.65); --card-border: rgba(56, 189, 248, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(2, 132, 199, 0.42); }
.theme-amber-temple { --card-bg: linear-gradient(135deg, #451a03 0%, #b45309 42%, #facc15 72%, #2d1600 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fde68a, #f59e0b); --chip-border: #f59e0b; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.65); --card-border: rgba(245, 158, 11, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(217, 119, 6, 0.42); }
.theme-silver-twilight { --card-bg: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 42%, #94a3b8 72%, #f1f5f9 100%); --chip-bg: linear-gradient(135deg, #f1f5f9, #cbd5e1, #94a3b8); --chip-border: #94a3b8; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(100, 116, 139, 0.55); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(203, 213, 225, 0.32); }
.theme-bronze-legend { --card-bg: linear-gradient(135deg, #5a2d0c 0%, #b45309 42%, #d97706 72%, #3a1800 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #d97706); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(253, 186, 116, 0.65); --card-border: rgba(253, 186, 116, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.42); }
.theme-obsidian-night { --card-bg: linear-gradient(135deg, #000 0%, #1a1a1a 42%, #2a2a2a 72%, #0a0a0a 100%); --chip-bg: linear-gradient(135deg, #e5e7eb, #9ca3af, #6b7280); --chip-border: #9ca3af; --text-primary: #f9fafb; --text-accent: #d1d5db; --text-shadow: rgba(156, 163, 175, 0.5); --card-border: rgba(209, 213, 219, 0.35); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 20px rgba(75, 85, 99, 0.25); }
.theme-ruby-dynasty { --card-bg: linear-gradient(135deg, #4f0f28 0%, #b91c62 42%, #f50b6a 72%, #2a0a15 100%); --chip-bg: linear-gradient(135deg, #fce7f3, #fbcfe8, #f9a8d4); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.42); }
.theme-topaz-empire { --card-bg: linear-gradient(135deg, #44290c 0%, #a16207 42%, #ca8a04 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fef08a, #fbbf24, #eab308); --chip-border: #facc15; --text-primary: #fefae0; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(202, 138, 4, 0.42); }
.theme-phoenix-rising { --card-bg: linear-gradient(135deg, #7c2d12 0%, #ea580c 42%, #fb923c 72%, #4c1609 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #f97316); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.65); --card-border: rgba(249, 115, 22, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(217, 119, 6, 0.48); }
.theme-lunar-silver { --card-bg: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 42%, #cbd5e1 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0, #d1d5db); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(100, 116, 139, 0.5); --card-border: rgba(148, 163, 184, 0.38); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(203, 213, 225, 0.3); }
.theme-inferno-rage { --card-bg: linear-gradient(135deg, #7c2d12 0%, #d97706 42%, #f97316 72%, #4c1609 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fbbf24, #f59e0b); --chip-border: #f59e0b; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.65); --card-border: rgba(245, 158, 11, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(217, 119, 6, 0.48); }
.theme-glacier-peak { --card-bg: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 42%, #7dd3fc 72%, #93c5fd 100%); --chip-bg: linear-gradient(135deg, #f0f9ff, #bae6fd, #38bdf8); --chip-border: #38bdf8; --text-primary: #082f49; --text-accent: #0c4a6e; --text-shadow: rgba(2, 132, 199, 0.6); --card-border: rgba(56, 189, 248, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.35); }
.theme-mystic-void { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 42%, #4f46e5 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #c4b5fd, #a5b4fc); --chip-border: #a5b4fc; --text-primary: #f0f9ff; --text-accent: #c4b5fd; --text-shadow: rgba(165, 180, 252, 0.6); --card-border: rgba(165, 180, 252, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(79, 70, 229, 0.42); }
.theme-coral-reef { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fb923c 72%, #451a03 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #f97316); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 186, 116, 0.65); --card-border: rgba(253, 186, 116, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.42); }
.theme-shadow-realm { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 42%, #2a2a2a 72%, #000 100%); --chip-bg: linear-gradient(135deg, #d1d5db, #9ca3af, #6b7280); --chip-border: #9ca3af; --text-primary: #f9fafb; --text-accent: #e5e7eb; --text-shadow: rgba(156, 163, 175, 0.5); --card-border: rgba(156, 163, 175, 0.35); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 20px rgba(75, 85, 99, 0.25); }
.theme-celestial-blue { --card-bg: linear-gradient(135deg, #0c2d44 0%, #1e40af 42%, #3b82f6 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #60a5fa); --chip-border: #60a5fa; --text-primary: #eff6ff; --text-accent: #cffafe; --text-shadow: rgba(59, 130, 246, 0.65); --card-border: rgba(59, 130, 246, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(37, 99, 235, 0.42); }
.theme-bloom-garden { --card-bg: linear-gradient(135deg, #5f1236 0%, #ec4899 42%, #f472b6 72%, #3d0a2e 100%); --chip-bg: linear-gradient(135deg, #fce7f3, #f9a8d4, #f472b6); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(236, 72, 153, 0.42); }
.theme-terra-cotta { --card-bg: linear-gradient(135deg, #5a2d0c 0%, #b45309 42%, #ea580c 72%, #3a1800 100%); --chip-bg: linear-gradient(135deg, #fed7aa, #fdba74, #fb923c); --chip-border: #fb923c; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.65); --card-border: rgba(249, 115, 22, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 88, 12, 0.42); }
.theme-midnight-blue { --card-bg: linear-gradient(135deg, #082f49 0%, #0369a1 42%, #0284c7 72%, #0a2342 100%); --chip-bg: linear-gradient(135deg, #e0f2fe, #bae6fd, #38bdf8); --chip-border: #38bdf8; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(56, 189, 248, 0.65); --card-border: rgba(56, 189, 248, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(2, 132, 199, 0.42); }
.theme-sunrise-gold { --card-bg: linear-gradient(135deg, #3a2400 0%, #b45309 42%, #facc15 72%, #2d1800 100%); --chip-bg: linear-gradient(135deg, #fffacd, #fef08a, #facc15); --chip-border: #facc15; --text-primary: #fefae0; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(202, 138, 4, 0.42); }
.theme-forest-green { --card-bg: linear-gradient(135deg, #052e16 0%, #166534 42%, #059669 72%, #0d2818 100%); --chip-bg: linear-gradient(135deg, #dcfce7, #a7f3d0, #6ee7b7); --chip-border: #6ee7b7; --text-primary: #ecfdf5; --text-accent: #a7f3d0; --text-shadow: rgba(110, 231, 183, 0.6); --card-border: rgba(110, 231, 183, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.42); }
.theme-purple-majesty { --card-bg: linear-gradient(135deg, #4c1d95 0%, #9333ea 42%, #d946ef 72%, #2e1065 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #d8b4fe, #c084fc); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, 0.65); --card-border: rgba(216, 180, 254, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(168, 85, 247, 0.42); }
.theme-teal-essence { --card-bg: linear-gradient(135deg, #134e4a 0%, #0d9488 42%, #14b8a6 72%, #0f2f2f 100%); --chip-bg: linear-gradient(135deg, #ccfbf1, #99f6e4, #5eead4); --chip-border: #2dd4bf; --text-primary: #f0fdfa; --text-accent: #99f6e4; --text-shadow: rgba(45, 212, 191, 0.65); --card-border: rgba(45, 212, 191, 0.48); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(20, 184, 166, 0.42); }
.theme-scarlet-storm { --card-bg: linear-gradient(135deg, #5f0f40 0%, #dc2626 42%, #f87171 72%, #3d0825 100%); --chip-bg: linear-gradient(135deg, #fee2e2, #fca5a5, #f87171); --chip-border: #fca5a5; --text-primary: #fef2f2; --text-accent: #fecaca; --text-shadow: rgba(252, 165, 165, 0.6); --card-border: rgba(252, 165, 165, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(220, 38, 38, 0.42); }
.theme-indigo-night { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4338ca 42%, #6366f1 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #e0e7ff, #c7d2fe, #a5b4fc); --chip-border: #a5b4fc; --text-primary: #f0f9ff; --text-accent: #c7d2fe; --text-shadow: rgba(165, 180, 252, 0.6); --card-border: rgba(165, 180, 252, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(99, 102, 241, 0.42); }
.theme-vanilla-cream { --card-bg: linear-gradient(135deg, #fef08a 0%, #fcd34d 42%, #fbbf24 72%, #f59e0b 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fde68a, #facc15); --chip-border: #fbbf24; --text-primary: #78350f; --text-accent: #92400e; --text-shadow: rgba(217, 119, 6, 0.5); --card-border: rgba(217, 119, 6, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(251, 191, 36, 0.35); }
.theme-slate-shadow { --card-bg: linear-gradient(135deg, #1e293b 0%, #334155 42%, #475569 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #cbd5e1, #94a3b8, #64748b); --chip-border: #94a3b8; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(100, 116, 139, 0.55); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 25px rgba(100, 116, 139, 0.35); }
.theme-aurora-ink { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #7c3aed 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #c4b5fd); --chip-border: #93c5fd; --text-primary: #f0f9ff; --text-accent: #c4b5fd; --text-shadow: rgba(99, 102, 241, 0.6); --card-border: rgba(147, 197, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(79, 70, 229, 0.45); }
.theme-royal-ember { --card-bg: linear-gradient(135deg, #431407 0%, #b45309 42%, #f59e0b 72%, #4c1d95 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fcd34d, #fbbf24); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.65); --card-border: rgba(245, 158, 11, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(245, 158, 11, 0.48); }
.theme-digital-lime { --card-bg: linear-gradient(135deg, #022c22 0%, #166534 42%, #84cc16 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #bef264); --chip-border: #84cc16; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(132, 204, 22, 0.58); --card-border: rgba(132, 204, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(132, 204, 22, 0.38); }
.theme-crimson-crest { --card-bg: linear-gradient(135deg, #4c0519 0%, #9f1239 42%, #f43f5e 72%, #3b0a0a 100%); --chip-bg: linear-gradient(135deg, #ffe4e6, #fda4af, #fb7185); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #fecdd3; --text-shadow: rgba(244, 63, 94, 0.62); --card-border: rgba(251, 113, 133, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(244, 63, 94, 0.45); }
.theme-glacier-spark { --card-bg: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 42%, #7dd3fc 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #f0f9ff, #e0f2fe, #93c5fd); --chip-border: #7dd3fc; --text-primary: #082f49; --text-accent: #0c4a6e; --text-shadow: rgba(125, 211, 252, 0.6); --card-border: rgba(125, 211, 252, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 32px rgba(125, 211, 252, 0.38); }
.theme-moonlit-coral { --card-bg: linear-gradient(135deg, #5c1a1a 0%, #d97706 42%, #fb7185 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fde68a; --text-shadow: rgba(251, 113, 133, 0.65); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(244, 114, 182, 0.4); }
.theme-velvet-ember { --card-bg: linear-gradient(135deg, #2e1065 0%, #7c2d12 42%, #f97316 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #fed7aa, #fca5a5); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #f5d0fe; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(251, 146, 60, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.38); }
.theme-emerald-thunder { --card-bg: linear-gradient(135deg, #052e16 0%, #0f766e 42%, #22c55e 72%, #022c22 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #a7f3d0, #bbf7d0); --chip-border: #22c55e; --text-primary: #f0fdf4; --text-accent: #a7f3d0; --text-shadow: rgba(34, 197, 94, 0.6); --card-border: rgba(34, 197, 94, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(34, 197, 94, 0.42); }
.theme-silver-horizon { --card-bg: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 42%, #94a3b8 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1); --chip-border: #94a3b8; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.55); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(148, 163, 184, 0.35); }
.theme-onyx-sunrise { --card-bg: linear-gradient(135deg, #111827 0%, #1f2937 42%, #f59e0b 72%, #000 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fbbf24, #facc15); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(251, 191, 36, 0.62); --card-border: rgba(251, 191, 36, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(245, 158, 11, 0.45); }
.theme-sapphire-garden { --card-bg: linear-gradient(135deg, #082f49 0%, #0f766e 42%, #60a5fa 72%, #022c22 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #a7f3d0, #93c5fd); --chip-border: #60a5fa; --text-primary: #f0f9ff; --text-accent: #a5f3fc; --text-shadow: rgba(96, 165, 250, 0.6); --card-border: rgba(96, 165, 250, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(96, 165, 250, 0.4); }
.theme-peach-velocity { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fdba74 72%, #451a03 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 146, 60, 0.62); --card-border: rgba(251, 146, 60, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(251, 146, 60, 0.4); }
.theme-cobalt-silk { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #a5b4fc 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #c7d2fe); --chip-border: #a5b4fc; --text-primary: #eff6ff; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.6); --card-border: rgba(165, 180, 252, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(96, 165, 250, 0.38); }
.theme-rose-arc { --card-bg: linear-gradient(135deg, #500724 0%, #be185d 42%, #fb7185 72%, #2d0a2e 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #fda4af); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(251, 113, 133, 0.62); --card-border: rgba(251, 113, 133, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(244, 114, 182, 0.4); }
.theme-jade-signal { --card-bg: linear-gradient(135deg, #0f172a 0%, #064e3b 42%, #34d399 72%, #022c22 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #a7f3d0, #6ee7b7); --chip-border: #34d399; --text-primary: #f0fdf4; --text-accent: #a7f3d0; --text-shadow: rgba(52, 211, 153, 0.62); --card-border: rgba(52, 211, 153, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(16, 185, 129, 0.4); }
.theme-copper-bloom { --card-bg: linear-gradient(135deg, #451a03 0%, #b45309 42%, #f59e0b 72%, #2d1600 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #f59e0b; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(245, 158, 11, 0.62); --card-border: rgba(245, 158, 11, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(245, 158, 11, 0.42); }
.theme-violet-flare { --card-bg: linear-gradient(135deg, #2e1065 0%, #6d28d9 42%, #a78bfa 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #e9d5ff, #ddd6fe); --chip-border: #a78bfa; --text-primary: #faf5ff; --text-accent: #e9d5ff; --text-shadow: rgba(167, 139, 250, 0.62); --card-border: rgba(167, 139, 250, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(168, 85, 247, 0.42); }
.theme-arctic-wisp { --card-bg: linear-gradient(135deg, #0f172a 0%, #2563eb 42%, #67e8f9 72%, #e0f2fe 100%); --chip-bg: linear-gradient(135deg, #e0f2fe, #bae6fd, #dbeafe); --chip-border: #67e8f9; --text-primary: #082f49; --text-accent: #0f172a; --text-shadow: rgba(103, 232, 249, 0.62); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(103, 232, 249, 0.32); }
.theme-ember-mint { --card-bg: linear-gradient(135deg, #4c0519 0%, #14532d 42%, #f59e0b 72%, #022c22 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #bbf7d0); --chip-border: #f59e0b; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.62); --card-border: rgba(132, 204, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.35); }
.theme-platinum-rush { --card-bg: linear-gradient(135deg, #111827 0%, #4b5563 42%, #d1d5db 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #f3f4f6, #d1d5db, #e5e7eb); --chip-border: #d1d5db; --text-primary: #f8fafc; --text-accent: #e5e7eb; --text-shadow: rgba(209, 213, 219, 0.6); --card-border: rgba(209, 213, 219, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(148, 163, 184, 0.32); }
.theme-orchid-lantern { --card-bg: linear-gradient(135deg, #1f2937 0%, #6d28d9 42%, #ec4899 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #f3e8ff, #fbcfe8); --chip-border: #ec4899; --text-primary: #fff1f2; --text-accent: #f5d0fe; --text-shadow: rgba(236, 72, 153, 0.62); --card-border: rgba(236, 72, 153, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.4); }
.theme-ocean-ripple { --card-bg: linear-gradient(135deg, #082f49 0%, #0ea5e9 42%, #22d3ee 72%, #164e63 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #a5f3fc); --chip-border: #22d3ee; --text-primary: #ecfeff; --text-accent: #a5f3fc; --text-shadow: rgba(34, 211, 238, 0.6); --card-border: rgba(34, 211, 238, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(14, 165, 233, 0.4); }
.theme-sunset-cascade { --card-bg: linear-gradient(135deg, #5a2c00 0%, #c2410c 42%, #fb7185 72%, #2d1600 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fbcfe8); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(251, 113, 133, 0.38); }
.theme-obsidian-petal { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1f2937 42%, #9ca3af 72%, #000 100%); --chip-bg: linear-gradient(135deg, #f3f4f6, #d1d5db, #9ca3af); --chip-border: #9ca3af; --text-primary: #f9fafb; --text-accent: #e5e7eb; --text-shadow: rgba(156, 163, 175, 0.55); --card-border: rgba(156, 163, 175, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 20px rgba(75, 85, 99, 0.25); }
.theme-ruby-current { --card-bg: linear-gradient(135deg, #4c0519 0%, #9f1239 42%, #fb7185 72%, #3b0a0a 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fecdd3, #fda4af); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(244, 63, 94, 0.4); }
.theme-gold-echo { --card-bg: linear-gradient(135deg, #3a2400 0%, #a16207 42%, #facc15 72%, #1f1500 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fde68a, #fbbf24); --chip-border: #facc15; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.5); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(202, 138, 4, 0.42); }
.theme-frost-zen { --card-bg: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 42%, #c4b5fd 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #f0f9ff, #dbeafe, #cbd5e1); --chip-border: #c4b5fd; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.5); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(196, 181, 253, 0.25); }
.theme-lilac-surge { --card-bg: linear-gradient(135deg, #4c1d95 0%, #7c3aed 42%, #d8b4fe 72%, #2e1065 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #e9d5ff, #ddd6fe); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #f5d0fe; --text-shadow: rgba(216, 180, 254, 0.65); --card-border: rgba(216, 180, 254, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(168, 85, 247, 0.38); }
.theme-magenta-veil { --card-bg: linear-gradient(135deg, #500724 0%, #9d174d 42%, #f472b6 72%, #2d0a2e 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4); --chip-border: #f472b6; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.65); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(244, 114, 182, 0.4); }
.theme-firefly-haze { --card-bg: linear-gradient(135deg, #0f172a 0%, #14532d 42%, #facc15 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #bef264); --chip-border: #facc15; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(132, 204, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(250, 204, 21, 0.38); }
.theme-azure-halo { --card-bg: linear-gradient(135deg, #082f49 0%, #2563eb 42%, #93c5fd 72%, #0c4a6e 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #93c5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.62); --card-border: rgba(147, 197, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(59, 130, 246, 0.42); }
.theme-sage-dynamo { --card-bg: linear-gradient(135deg, #0f172a 0%, #166534 42%, #a3e635 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #bef264); --chip-border: #a3e635; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(163, 230, 53, 0.6); --card-border: rgba(163, 230, 53, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(132, 204, 22, 0.35); }
.theme-plum-blaze { --card-bg: linear-gradient(135deg, #4c1d95 0%, #7e22ce 42%, #f472b6 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #fbcfe8, #ddd6fe); --chip-border: #f472b6; --text-primary: #faf5ff; --text-accent: #f5d0fe; --text-shadow: rgba(244, 114, 182, 0.62); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(167, 139, 250, 0.38); }
.theme-ivory-lattice { --card-bg: linear-gradient(135deg, #fef3c7 0%, #f5f3ff 42%, #fef3c7 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #fff, #fef3c7, #f5f3ff); --chip-border: #e2e8f0; --text-primary: #1f2937; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.45); --card-border: rgba(226, 232, 240, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 28px rgba(226, 232, 240, 0.28); }
.theme-thunder-moon { --card-bg: linear-gradient(135deg, #111827 0%, #334155 42%, #cbd5e1 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #cbd5e1, #94a3b8); --chip-border: #94a3b8; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(148, 163, 184, 0.55); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(148, 163, 184, 0.3); }
.theme-coral-horizon { --card-bg: linear-gradient(135deg, #7c2d12 0%, #ea580c 42%, #fdba74 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 146, 60, 0.6); --card-border: rgba(251, 146, 60, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 88, 12, 0.38); }
.theme-graphite-spark { --card-bg: linear-gradient(135deg, #1f2937 0%, #374151 42%, #94a3b8 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f3f4f6, #d1d5db, #94a3b8); --chip-border: #94a3b8; --text-primary: #f9fafb; --text-accent: #d1d5db; --text-shadow: rgba(148, 163, 184, 0.55); --card-border: rgba(148, 163, 184, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 20px rgba(148, 163, 184, 0.28); }
.theme-gold-brass { --card-bg: linear-gradient(135deg, #3a2400 0%, #92400e 42%, #fbbf24 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fde68a, #fbbf24); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.38); }
.theme-violet-cascade { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4338ca 42%, #c084fc 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #eef2ff, #ddd6fe, #f5d0fe); --chip-border: #c084fc; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(192, 132, 252, 0.65); --card-border: rgba(192, 132, 252, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(99, 102, 241, 0.42); }
.theme-cyan-fable { --card-bg: linear-gradient(135deg, #0c4a6e 0%, #0891b2 42%, #67e8f9 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #a5f3fc); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(8, 145, 178, 0.4); }
.theme-sky-lattice { --card-bg: linear-gradient(135deg, #dbeafe 0%, #93c5fd 42%, #60a5fa 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #60a5fa; --text-primary: #082f49; --text-accent: #1d4ed8; --text-shadow: rgba(96, 165, 250, 0.55); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 28px rgba(96, 165, 250, 0.32); }
.theme-pearl-tide { --card-bg: linear-gradient(135deg, #0f172a 0%, #0ea5e9 42%, #f5d0fe 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #fbcfe8); --chip-border: #f5d0fe; --text-primary: #ecfeff; --text-accent: #fbcfe8; --text-shadow: rgba(245, 208, 254, 0.62); --card-border: rgba(245, 208, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(14, 165, 233, 0.35); }
.theme-nutmeg-gleam { --card-bg: linear-gradient(135deg, #431407 0%, #b45309 42%, #fbbf24 72%, #4c1d95 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fef3c7); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(180, 83, 9, 0.4); }
.theme-iris-charm { --card-bg: linear-gradient(135deg, #2e1065 0%, #a855f7 42%, #f9a8d4 72%, #4c1d95 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #fbcfe8, #ddd6fe); --chip-border: #f9a8d4; --text-primary: #faf5ff; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.62); --card-border: rgba(249, 168, 212, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.38); }
.theme-mint-arcade { --card-bg: linear-gradient(135deg, #022c22 0%, #14b8a6 42%, #a7f3d0 72%, #134e4a 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #a7f3d0, #99f6e4); --chip-border: #a7f3d0; --text-primary: #ecfdf5; --text-accent: #ccfbf1; --text-shadow: rgba(134, 239, 172, 0.6); --card-border: rgba(134, 239, 172, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(20, 184, 166, 0.38); }
.theme-bronze-blossom { --card-bg: linear-gradient(135deg, #451a03 0%, #c2410c 42%, #fbbf24 72%, #2d1600 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fed7aa, #fbbf24); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(251, 191, 36, 0.62); --card-border: rgba(251, 191, 36, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(217, 119, 6, 0.38); }
.theme-lavender-vault { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 42%, #ddd6fe 72%, #312e81 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #c4b5fd); --chip-border: #ddd6fe; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(99, 102, 241, 0.35); }
.theme-jade-ember { --card-bg: linear-gradient(135deg, #0f172a 0%, #065f46 42%, #84cc16 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #a7f3d0, #bef264); --chip-border: #84cc16; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(132, 204, 22, 0.58); --card-border: rgba(132, 204, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.38); }
.theme-scarlet-violet { --card-bg: linear-gradient(135deg, #4c0519 0%, #7e22ce 42%, #f472b6 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fbcfe8, #e9d5ff); --chip-border: #f472b6; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.62); --card-border: rgba(244, 114, 182, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.38); }
.theme-azure-echo { --card-bg: linear-gradient(135deg, #082f49 0%, #0ea5e9 42%, #60a5fa 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #bfdbfe); --chip-border: #60a5fa; --text-primary: #eff6ff; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.62); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(14, 165, 233, 0.32); }
.theme-sunrise-ink { --card-bg: linear-gradient(135deg, #111827 0%, #b45309 42%, #facc15 72%, #312e81 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fbbf24, #fef08a); --chip-border: #facc15; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(180, 83, 9, 0.38); }
.theme-twilight-iris { --card-bg: linear-gradient(135deg, #2e1065 0%, #312e81 42%, #a78bfa 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #eee7ff, #ddd6fe); --chip-border: #a78bfa; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(167, 139, 250, 0.62); --card-border: rgba(167, 139, 250, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(129, 140, 248, 0.35); }
.theme-glacier-gold { --card-bg: linear-gradient(135deg, #dbeafe 0%, #facc15 42%, #fbbf24 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #fffacd, #fef3c7, #fcd34d); --chip-border: #facc15; --text-primary: #082f49; --text-accent: #1f2937; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 24px rgba(250, 204, 21, 0.28); }
.theme-porcelain-flare { --card-bg: linear-gradient(135deg, #f8fafc 0%, #f9a8d4 42%, #fef3c7 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #fff, #fce7f3, #fef3c7); --chip-border: #f9a8d4; --text-primary: #1f2937; --text-accent: #7c3aed; --text-shadow: rgba(249, 168, 212, 0.5); --card-border: rgba(249, 168, 212, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 26px rgba(249, 168, 212, 0.24); }
.theme-orchid-current { --card-bg: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 42%, #f9a8d4 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #fbcfe8, #e9d5ff); --chip-border: #f9a8d4; --text-primary: #faf5ff; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.62); --card-border: rgba(249, 168, 212, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.35); }
.theme-cosmic-velvet { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #a855f7 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #e0e7ff, #ddd6fe, #f5d0fe); --chip-border: #a855f7; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(168, 85, 247, 0.6); --card-border: rgba(168, 85, 247, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(79, 70, 229, 0.42); }
.theme-ember-silk { --card-bg: linear-gradient(135deg, #7c2d12 0%, #b45309 42%, #fbbf24 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fde68a); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.62); --card-border: rgba(251, 191, 36, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(249, 115, 22, 0.38); }
.theme-emerald-glint { --card-bg: linear-gradient(135deg, #022c22 0%, #059669 42%, #a7f3d0 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #a7f3d0); --chip-border: #a7f3d0; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, 0.6); --card-border: rgba(134, 239, 172, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(16, 185, 129, 0.35); }
.theme-royal-frost { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4338ca 42%, #bae6fd 72%, #e0f2fe 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #bae6fd; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(176, 224, 255, 0.6); --card-border: rgba(191, 219, 254, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 28px rgba(99, 102, 241, 0.32); }
.theme-rose-signal { --card-bg: linear-gradient(135deg, #500724 0%, #db2777 42%, #f9a8d4 72%, #2d0a2e 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4); --chip-border: #f9a8d4; --text-primary: #fdf2f8; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.62); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(219, 39, 119, 0.38); }
.theme-midnight-orchid { --card-bg: linear-gradient(135deg, #111827 0%, #312e81 42%, #c084fc 72%, #000 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #f5d0fe); --chip-border: #c084fc; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(192, 132, 252, 0.65); --card-border: rgba(192, 132, 252, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(99, 102, 241, 0.38); }
.theme-copper-signal { --card-bg: linear-gradient(135deg, #431407 0%, #b45309 42%, #f97316 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 88, 12, 0.38); }
.theme-silver-bloom { --card-bg: linear-gradient(135deg, #f8fafc 0%, #dbeafe 42%, #cbd5e1 72%, #f1f5f9 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.5); --card-border: rgba(203, 213, 225, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 22px rgba(203, 213, 225, 0.28); }
.theme-marble-ember { --card-bg: linear-gradient(135deg, #f1f5f9 0%, #fca5a5 42%, #fbbf24 72%, #374151 100%); --chip-bg: linear-gradient(135deg, #fff, #fed7aa, #ffe4e6); --chip-border: #fca5a5; --text-primary: #1f2937; --text-accent: #7c2d12; --text-shadow: rgba(252, 165, 165, 0.5); --card-border: rgba(252, 165, 165, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 25px rgba(252, 165, 165, 0.25); }
.theme-sunstone-pulse { --card-bg: linear-gradient(135deg, #4c1d95 0%, #b45309 42%, #facc15 72%, #2d1700 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fcd34d, #fbbf24); --chip-border: #facc15; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(180, 83, 9, 0.38); }
.theme-jade-aurora { --card-bg: linear-gradient(135deg, #042f2e 0%, #0f766e 42%, #34d399 72%, #022c22 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #a7f3d0, #99f6e4); --chip-border: #34d399; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(20, 184, 166, 0.38); }
.theme-amethyst-breeze { --card-bg: linear-gradient(135deg, #2e1065 0%, #6d28d9 42%, #d8b4fe 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #e9d5ff); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(216, 180, 254, 0.6); --card-border: rgba(216, 180, 254, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(168, 85, 247, 0.4); }
.theme-copper-halo { --card-bg: linear-gradient(135deg, #431407 0%, #9a5b18 42%, #f97316 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.38); }
.theme-ocean-lantern { --card-bg: linear-gradient(135deg, #082f49 0%, #0f766e 42%, #67e8f9 72%, #164e63 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #a5f3fc); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, 0.62); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(8, 145, 178, 0.38); }
.theme-dragon-amber { --card-bg: linear-gradient(135deg, #7c2d12 0%, #e11d48 42%, #facc15 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fecdd3); --chip-border: #facc15; --text-primary: #fffbeb; --text-accent: #fef08a; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 32px rgba(225, 29, 72, 0.38); }
.theme-pearl-glow { --card-bg: linear-gradient(135deg, #f8fafc 0%, #f5d0fe 42%, #bfdbfe 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #fff, #f5d0fe, #dbeafe); --chip-border: #bfdbfe; --text-primary: #1f2937; --text-accent: #7c3aed; --text-shadow: rgba(191, 219, 254, 0.48); --card-border: rgba(191, 219, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.38), 0 0 24px rgba(191, 219, 254, 0.18); }
.theme-moonglow-rose { --card-bg: linear-gradient(135deg, #2d0a2e 0%, #9d174d 42%, #f9a8d4 72%, #500724 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.62); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(236, 72, 153, 0.38); }
.theme-cobalt-drift { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #22d3ee 72%, #1e3a8a 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #cffafe); --chip-border: #22d3ee; --text-primary: #f0f9ff; --text-accent: #cffafe; --text-shadow: rgba(34, 211, 238, 0.62); --card-border: rgba(34, 211, 238, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(59, 130, 246, 0.38); }
.theme-bronze-hush { --card-bg: linear-gradient(135deg, #3a1f09 0%, #92400e 42%, #fbbf24 72%, #2d1600 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(251, 191, 36, 0.58); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(180, 83, 9, 0.35); }
.theme-neon-bloom { --card-bg: linear-gradient(135deg, #111827 0%, #0891b2 42%, #f472b6 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #fbcfe8, #dbeafe); --chip-border: #f472b6; --text-primary: #f5f3ff; --text-accent: #dbeafe; --text-shadow: rgba(244, 114, 182, 0.62); --card-border: rgba(244, 114, 182, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(8, 145, 178, 0.38); }
.theme-quartz-gold { --card-bg: linear-gradient(135deg, #fef3c7 0%, #fbbf24 42%, #f5d0fe 72%, #ecd6ff 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #f5d0fe); --chip-border: #fbbf24; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(251, 191, 36, 0.5); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 20px rgba(251, 191, 36, 0.18); }
.theme-frost-fable { --card-bg: linear-gradient(135deg, #e0f2fe 0%, #c7d2fe 42%, #dbeafe 72%, #eff6ff 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #c7d2fe; --text-primary: #082f49; --text-accent: #1d4ed8; --text-shadow: rgba(148, 163, 184, 0.5); --card-border: rgba(199, 210, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 24px rgba(199, 210, 254, 0.22); }
.theme-velvet-sky { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 42%, #c4b5fd 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #eef2ff, #ddd6fe, #e9d5ff); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(79, 70, 229, 0.35); }
.theme-horizon-pulse { --card-bg: linear-gradient(135deg, #082f49 0%, #2563eb 42%, #f59e0b 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #fef3c7, #fdba74); --chip-border: #f59e0b; --text-primary: #f0f9ff; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(37, 99, 235, 0.34); }
.theme-prism-rain { --card-bg: linear-gradient(135deg, #0f172a 0%, #2563eb 42%, #a855f7 72%, #f472b6 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #ddd6fe, #fbcfe8); --chip-border: #a855f7; --text-primary: #f5f3ff; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.62); --card-border: rgba(168, 85, 247, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(59, 130, 246, 0.4); }
.theme-aurora-cascade { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #2dd4bf 72%, #1e293b 100%); --chip-bg: linear-gradient(135deg, #e0f2fe, #cffafe, #bfdbfe); --chip-border: #2dd4bf; --text-primary: #ecfeff; --text-accent: #a5f3fc; --text-shadow: rgba(45, 212, 191, 0.62); --card-border: rgba(45, 212, 191, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 30px rgba(45, 212, 191, 0.38); }
.theme-amber-echo { --card-bg: linear-gradient(135deg, #451a03 0%, #a16207 42%, #facc15 72%, #3f2b00 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #facc15; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.65); --card-border: rgba(250, 204, 21, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(250, 204, 21, 0.38); }
.theme-satin-cinder { --card-bg: linear-gradient(135deg, #1f2937 0%, #3f3f46 42%, #fca5a5 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f5f5f4, #fbcfe8, #fee2e2); --chip-border: #fca5a5; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(252, 165, 165, 0.6); --card-border: rgba(252, 165, 165, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 24px rgba(252, 165, 165, 0.3); }
.theme-lime-echo { --card-bg: linear-gradient(135deg, #022c22 0%, #166534 42%, #bef264 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #bef264); --chip-border: #bef264; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(190, 242, 100, 0.62); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 26px rgba(132, 204, 22, 0.36); }
.theme-crystal-river { --card-bg: linear-gradient(135deg, #082f49 0%, #0ea5e9 42%, #67e8f9 72%, #dbeafe 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #dbeafe); --chip-border: #67e8f9; --text-primary: #082f49; --text-accent: #0f172a; --text-shadow: rgba(103, 232, 249, 0.62); --card-border: rgba(103, 232, 249, 0.44); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(103, 232, 249, 0.32); }
.theme-royal-silk { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4338ca 42%, #e9d5ff 72%, #312e81 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #e9d5ff, #ddd6fe); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(99, 102, 241, 0.35); }
.theme-pistachio-arc { --card-bg: linear-gradient(135deg, #052e16 0%, #166534 42%, #86efac 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #d9f99d); --chip-border: #86efac; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, 0.62); --card-border: rgba(134, 239, 172, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(134, 239, 172, 0.35); }
.theme-raven-violet { --card-bg: linear-gradient(135deg, #111827 0%, #312e81 42%, #7c3aed 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #c4b5fd); --chip-border: #7c3aed; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(124, 58, 237, 0.6); --card-border: rgba(124, 58, 237, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(124, 58, 237, 0.36); }
.theme-coral-void { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fb7185 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 113, 133, 0.62); --card-border: rgba(251, 113, 133, 0.44); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(249, 115, 22, 0.35); }
.theme-verdant-gold { --card-bg: linear-gradient(135deg, #0b3b2a 0%, #166534 42%, #facc15 72%, #1e293b 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #bef264); --chip-border: #facc15; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.62); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 26px rgba(16, 185, 129, 0.32); }
.theme-satin-ocean { --card-bg: linear-gradient(135deg, #082f49 0%, #0f766e 42%, #c4b5fd 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ddd6fe); --chip-border: #c4b5fd; --text-primary: #f0f9ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.62); --card-border: rgba(196, 181, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.93), 0 0 28px rgba(96, 165, 250, 0.34); }
.theme-obsidian-mint { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1f2937 42%, #5eead4 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #cffafe); --chip-border: #5eead4; --text-primary: #ecfdf5; --text-accent: #ccfbf1; --text-shadow: rgba(94, 234, 212, 0.6); --card-border: rgba(94, 234, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 24px rgba(45, 212, 191, 0.28); }
.theme-sky-ember { --card-bg: linear-gradient(135deg, #0c4a6e 0%, #60a5fa 42%, #f59e0b 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #dbeafe, #fef3c7, #bfdbfe); --chip-border: #f59e0b; --text-primary: #f0f9ff; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 30px rgba(96, 165, 250, 0.34); }
.theme-mango-prism { --card-bg: linear-gradient(135deg, #431407 0%, #f59e0b 42%, #fef08a 72%, #7c2d12 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fde68a, #fbbf24); --chip-border: #fef08a; --text-primary: #fff7ed; --text-accent: #fde68a; --text-shadow: rgba(245, 158, 11, 0.62); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(249, 115, 22, 0.36); }
.theme-violet-hush { --card-bg: linear-gradient(135deg, #2e1065 0%, #7c3aed 42%, #f5d0fe 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #f5d0fe); --chip-border: #f5d0fe; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(245, 208, 254, 0.62); --card-border: rgba(245, 208, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.93), 0 0 28px rgba(168, 85, 247, 0.35); }
.theme-solar-mist { --card-bg: linear-gradient(135deg, #7c2d12 0%, #ea580c 42%, #fde68a 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fde68a; --text-primary: #fff7ed; --text-accent: #fef08a; --text-shadow: rgba(253, 230, 138, 0.62); --card-border: rgba(253, 230, 138, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(234, 88, 12, 0.34); }
.theme-cinder-rose { --card-bg: linear-gradient(135deg, #4c0519 0%, #9f1239 42%, #f9a8d4 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fce7f3, #fbcfe8); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.62); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 26px rgba(219, 39, 119, 0.32); }
.theme-sapphire-mint { --card-bg: linear-gradient(135deg, #082f49 0%, #0369a1 42%, #2dd4bf 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ccfbf1); --chip-border: #2dd4bf; --text-primary: #ecfeff; --text-accent: #ccfbf1; --text-shadow: rgba(45, 212, 191, 0.62); --card-border: rgba(45, 212, 191, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(3, 105, 161, 0.35); }
.theme-starlight-plum { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #5b21b6 42%, #f0abfc 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #f5d0fe, #ddd6fe); --chip-border: #f0abfc; --text-primary: #faf5ff; --text-accent: #f5d0fe; --text-shadow: rgba(240, 171, 252, 0.62); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(168, 85, 247, 0.32); }
.theme-iron-pearl { --card-bg: linear-gradient(135deg, #0f172a 0%, #374151 42%, #e2e8f0 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1); --chip-border: #e2e8f0; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(226, 232, 240, 0.6); --card-border: rgba(226, 232, 240, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(148, 163, 184, 0.28); }
.theme-lotus-gold { --card-bg: linear-gradient(135deg, #3a2400 0%, #a16207 42%, #fbbf24 72%, #4c1d95 100%); --chip-bg: linear-gradient(135deg, #fef3c7, #fef08a, #fcd34d); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef9c3; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.93), 0 0 28px rgba(251, 191, 36, 0.35); }
.theme-sunset-iris { --card-bg: linear-gradient(135deg, #5a2c00 0%, #db2777 42%, #c4b5fd 72%, #1e1b4b 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fbcfe8, #ddd6fe); --chip-border: #c4b5fd; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(219, 39, 119, 0.35); }
.theme-balance-cyan { --card-bg: linear-gradient(135deg, #0f172a 0%, #0891b2 42%, #99f6e4 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ccfbf1); --chip-border: #99f6e4; --text-primary: #082f49; --text-accent: #0f172a; --text-shadow: rgba(153, 246, 228, 0.58); --card-border: rgba(153, 246, 228, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 26px rgba(153, 246, 228, 0.22); }
.theme-petal-iron { --card-bg: linear-gradient(135deg, #f8fafc 0%, #fbcfe8 42%, #cbd5e1 72%, #475569 100%); --chip-bg: linear-gradient(135deg, #fff, #fdf2f8, #e2e8f0); --chip-border: #cbd5e1; --text-primary: #1f2937; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.52); --card-border: rgba(203, 213, 225, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.36), 0 0 22px rgba(203, 213, 225, 0.18); }
.theme-vista-amber { --card-bg: linear-gradient(135deg, #3a2400 0%, #c2410c 42%, #fbbf24 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.62); --card-border: rgba(251, 191, 36, 0.44); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(194, 65, 12, 0.32); }
.theme-silk-pulse { --card-bg: linear-gradient(135deg, #f8fafc 0%, #dbeafe 42%, #f5d0fe 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #fff, #e0f2fe, #fdf2f8); --chip-border: #dbeafe; --text-primary: #1f2937; --text-accent: #7c3aed; --text-shadow: rgba(147, 197, 253, 0.44); --card-border: rgba(219, 234, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.38), 0 0 24px rgba(219, 234, 254, 0.2); }
.theme-azurite-lime { --card-bg: linear-gradient(135deg, #082f49 0%, #2563eb 42%, #bef264 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #effdf5, #d9f99d); --chip-border: #bef264; --text-primary: #f0f9ff; --text-accent: #d9f99d; --text-shadow: rgba(190, 242, 100, 0.62); --card-border: rgba(190, 242, 100, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(37, 99, 235, 0.33); }
.theme-harbor-ember { --card-bg: linear-gradient(135deg, #0f172a 0%, #0ea5e9 42%, #f97316 72%, #431407 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #fff7ed, #e0f2fe); --chip-border: #f97316; --text-primary: #ecfeff; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(14, 165, 233, 0.32); }
.theme-noir-saffron { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1f2937 42%, #fbbf24 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #f5f5f4, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 18px rgba(251, 191, 36, 0.24); }
.theme-riverglass { --card-bg: linear-gradient(135deg, #082f49 0%, #1d4ed8 42%, #93c5fd 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #cffafe); --chip-border: #93c5fd; --text-primary: #082f49; --text-accent: #0f172a; --text-shadow: rgba(147, 197, 253, 0.56); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.48), 0 0 24px rgba(147, 197, 253, 0.24); }
.theme-lavender-drift { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 42%, #c4b5fd 72%, #f5f3ff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #e9d5ff); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.62); --card-border: rgba(196, 181, 253, 0.45); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(109, 40, 217, 0.35); }
.theme-glacier-petal { --card-bg: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 42%, #e9d5ff 72%, #eff6ff 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #f5f3ff); --chip-border: #c7d2fe; --text-primary: #082f49; --text-accent: #312e81; --text-shadow: rgba(147, 197, 253, 0.5); --card-border: rgba(199, 210, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.42), 0 0 24px rgba(199, 210, 254, 0.2); }
.theme-ember-bloom { --card-bg: linear-gradient(135deg, #431407 0%, #b45309 42%, #f9a8d4 72%, #4c0519 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fde68a, #fbcfe8); --chip-border: #f9a8d4; --text-primary: #fff7ed; --text-accent: #fde68a; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 30px rgba(180, 83, 9, 0.35); }
.theme-solar-veil { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f59e0b 42%, #fef3c7 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fde68a, #fef3c7); --chip-border: #fbbf24; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(251, 191, 36, 0.52); --card-border: rgba(251, 191, 36, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.42), 0 0 24px rgba(245, 158, 11, 0.22); }
.theme-twilight-halo { --card-bg: linear-gradient(135deg, #111827 0%, #312e81 42%, #f0abfc 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #f5d0fe); --chip-border: #f0abfc; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(240, 171, 252, 0.6); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(79, 70, 229, 0.35); }
.theme-moonstone-arc { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #e2e8f0 72%, #1e293b 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #e2e8f0); --chip-border: #e2e8f0; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(148, 163, 184, 0.5); --card-border: rgba(226, 232, 240, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.88), 0 0 22px rgba(148, 163, 184, 0.2); }
.theme-jade-cascade { --card-bg: linear-gradient(135deg, #022c22 0%, #0f766e 42%, #86efac 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #d9f99d); --chip-border: #86efac; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, 0.6); --card-border: rgba(134, 239, 172, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(16, 185, 129, 0.32); }
.theme-orchid-signal { --card-bg: linear-gradient(135deg, #2e1065 0%, #7c3aed 42%, #f9a8d4 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #fbcfe8); --chip-border: #f9a8d4; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(251, 207, 232, 0.6); --card-border: rgba(217, 70, 239, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(168, 85, 247, 0.35); }
.theme-ruby-surge { --card-bg: linear-gradient(135deg, #4c0519 0%, #be185d 42%, #f43f5e 72%, #7f1d1d 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fecdd3, #ffe4e6); --chip-border: #f43f5e; --text-primary: #fff1f2; --text-accent: #fecdd3; --text-shadow: rgba(244, 63, 94, 0.62); --card-border: rgba(244, 63, 94, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(190, 24, 93, 0.36); }
.theme-onyx-gleam { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1f2937 42%, #a78bfa 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f5f5f4, #ddd6fe, #f3e8ff); --chip-border: #a78bfa; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(167, 139, 250, 0.6); --card-border: rgba(167, 139, 250, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 26px rgba(109, 40, 217, 0.3); }
.theme-pearl-bloom { --card-bg: linear-gradient(135deg, #f8fafc 0%, #f5d0fe 42%, #ddd6fe 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #fff, #fdf2f8, #f5f3ff); --chip-border: #ddd6fe; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(221, 214, 254, 0.46); --card-border: rgba(221, 214, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 22px rgba(221, 214, 254, 0.18); }
.theme-citrus-drift { --card-bg: linear-gradient(135deg, #431407 0%, #ea580c 42%, #facc15 72%, #451a03 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fde68a, #fef3c7); --chip-border: #facc15; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.62); --card-border: rgba(250, 204, 21, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(234, 88, 12, 0.35); }
.theme-aurora-dawn { --card-bg: linear-gradient(135deg, #0f172a 0%, #0284c7 42%, #2dd4bf 72%, #e0f2fe 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #dbeafe); --chip-border: #2dd4bf; --text-primary: #ecfeff; --text-accent: #dbeafe; --text-shadow: rgba(45, 212, 191, 0.6); --card-border: rgba(45, 212, 191, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(2, 132, 199, 0.32); }
.theme-silver-wave { --card-bg: linear-gradient(135deg, #f8fafc 0%, #94a3b8 42%, #dbeafe 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.54); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 22px rgba(148, 163, 184, 0.18); }
.theme-copper-lantern { --card-bg: linear-gradient(135deg, #3a1f09 0%, #b45309 42%, #f97316 72%, #431407 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(180, 83, 9, 0.35); }
.theme-maple-spark { --card-bg: linear-gradient(135deg, #5b1d00 0%, #d97706 42%, #fbbf24 72%, #7c2d12 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(217, 119, 6, 0.32); }
.theme-phoenix-gold { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f59e0b 42%, #fef08a 72%, #b45309 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fef08a; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(254, 240, 138, 0.6); --card-border: rgba(254, 240, 138, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 30px rgba(245, 158, 11, 0.35); }
.theme-crystal-reef { --card-bg: linear-gradient(135deg, #022c22 0%, #0891b2 42%, #67e8f9 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ccfbf1); --chip-border: #67e8f9; --text-primary: #062b2a; --text-accent: #0f172a; --text-shadow: rgba(103, 232, 249, 0.52); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.48), 0 0 24px rgba(103, 232, 249, 0.22); }
.theme-teal-whisper { --card-bg: linear-gradient(135deg, #042f2e 0%, #0f766e 42%, #99f6e4 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #cffafe); --chip-border: #99f6e4; --text-primary: #062b2a; --text-accent: #0f172a; --text-shadow: rgba(153, 246, 228, 0.58); --card-border: rgba(153, 246, 228, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.54), 0 0 24px rgba(45, 212, 191, 0.2); }
.theme-lilac-rush { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 42%, #c4b5fd 72%, #ddd6fe 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #e9d5ff); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.62); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(109, 40, 217, 0.35); }
.theme-plum-cascade { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 42%, #d8b4fe 72%, #f3e8ff 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #f5d0fe); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(216, 180, 254, 0.62); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(124, 58, 237, 0.33); }
.theme-coral-vine { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fda4af 72%, #fff1f2 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fda4af; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 164, 175, 0.58); --card-border: rgba(253, 164, 175, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(249, 115, 22, 0.34); }
.theme-meadow-drift { --card-bg: linear-gradient(135deg, #052e16 0%, #166534 42%, #bef264 72%, #ecfdf5 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #d9f99d); --chip-border: #bef264; --text-primary: #052e16; --text-accent: #166534; --text-shadow: rgba(190, 242, 100, 0.5); --card-border: rgba(190, 242, 100, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 26px rgba(132, 204, 22, 0.28); }
.theme-cobalt-hush { --card-bg: linear-gradient(135deg, #082f49 0%, #1d4ed8 42%, #93c5fd 72%, #dbeafe 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #93c5fd; --text-primary: #082f49; --text-accent: #1e3a8a; --text-shadow: rgba(147, 197, 253, 0.58); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 24px rgba(59, 130, 246, 0.22); }
.theme-ember-spark { --card-bg: linear-gradient(135deg, #4c0519 0%, #9f1239 42%, #f59e0b 72%, #7c2d12 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fef3c7, #fed7aa); --chip-border: #f59e0b; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.62); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(249, 115, 22, 0.3); }
.theme-frost-lotus { --card-bg: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 42%, #f5f3ff 72%, #dbeafe 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #f5f3ff); --chip-border: #bfdbfe; --text-primary: #082f49; --text-accent: #1d4ed8; --text-shadow: rgba(191, 219, 254, 0.5); --card-border: rgba(191, 219, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 0 22px rgba(191, 219, 254, 0.18); }
.theme-sunset-cinder { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fb7185 72%, #4c0519 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 113, 133, 0.62); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(249, 115, 22, 0.35); }
.theme-mint-breeze { --card-bg: linear-gradient(135deg, #052e16 0%, #34d399 42%, #ccfbf1 72%, #ecfdf5 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #ccfbf1, #cffafe); --chip-border: #5eead4; --text-primary: #052e16; --text-accent: #0f172a; --text-shadow: rgba(94, 234, 212, 0.5); --card-border: rgba(94, 234, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 24px rgba(52, 211, 153, 0.28); }
.theme-violet-orbit { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 42%, #a78bfa 72%, #f3e8ff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #e9d5ff); --chip-border: #a78bfa; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(167, 139, 250, 0.62); --card-border: rgba(167, 139, 250, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 30px rgba(109, 40, 217, 0.35); }
.theme-bronze-echo { --card-bg: linear-gradient(135deg, #3a2400 0%, #b45309 42%, #fbbf24 72%, #451a03 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.58); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(180, 83, 9, 0.32); }
.theme-cream-halo { --card-bg: linear-gradient(135deg, #fef3c7 0%, #f9fafb 42%, #f5f3ff 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff, #f5f3ff, #fef3c7); --chip-border: #f3e8ff; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(251, 191, 36, 0.45); --card-border: rgba(243, 232, 255, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 0 18px rgba(243, 232, 255, 0.16); }
.theme-midnight-harbor { --card-bg: linear-gradient(135deg, #111827 0%, #0f172a 42%, #0ea5e9 72%, #082f49 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #bae6fd); --chip-border: #0ea5e9; --text-primary: #ecfeff; --text-accent: #dbeafe; --text-shadow: rgba(14, 165, 233, 0.6); --card-border: rgba(14, 165, 233, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.98), 0 0 26px rgba(14, 165, 233, 0.24); }
.theme-grape-sunrise { --card-bg: linear-gradient(135deg, #2e1065 0%, #7c3aed 42%, #fbbf24 72%, #4c1d95 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #fef3c7, #ddd6fe); --chip-border: #fbbf24; --text-primary: #faf5ff; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.62); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(124, 58, 237, 0.32); }
.theme-lilac-gleam { --card-bg: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 42%, #f9a8d4 72%, #faf5ff 100%); --chip-bg: linear-gradient(135deg, #fff, #f5f3ff, #fbcfe8); --chip-border: #ddd6fe; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(217, 70, 239, 0.4); --card-border: rgba(221, 214, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.36), 0 0 22px rgba(221, 214, 254, 0.18); }
.theme-sandglass-sky { --card-bg: linear-gradient(135deg, #fef3c7 0%, #dbeafe 42%, #c4b5fd 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #dbeafe, #f5f3ff); --chip-border: #c4b5fd; --text-primary: #1f2937; --text-accent: #312e81; --text-shadow: rgba(196, 181, 253, 0.48); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.36), 0 0 24px rgba(219, 234, 254, 0.2); }
.theme-coral-garden { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #a7f3d0 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #ecfdf5); --chip-border: #a7f3d0; --text-primary: #fff7ed; --text-accent: #ecfdf5; --text-shadow: rgba(134, 239, 172, 0.52); --card-border: rgba(134, 239, 172, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(249, 115, 22, 0.28); }
.theme-rain-iris { --card-bg: linear-gradient(135deg, #082f49 0%, #2563eb 42%, #ddd6fe 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #f5f3ff); --chip-border: #ddd6fe; --text-primary: #f0f9ff; --text-accent: #ddd6fe; --text-shadow: rgba(221, 214, 254, 0.6); --card-border: rgba(221, 214, 254, 0.44); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.88), 0 0 28px rgba(96, 165, 250, 0.32); }
.theme-forest-velvet { --card-bg: linear-gradient(135deg, #022c22 0%, #166534 42%, #7c3aed 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #ddd6fe, #d9f99d); --chip-border: #7c3aed; --text-primary: #f5f3ff; --text-accent: #d9f99d; --text-shadow: rgba(124, 58, 237, 0.6); --card-border: rgba(124, 58, 237, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(22, 101, 52, 0.3); }
.theme-slate-aurora { --card-bg: linear-gradient(135deg, #0f172a 0%, #374151 42%, #38bdf8 72%, #e0f2fe 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #bae6fd); --chip-border: #38bdf8; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(56, 189, 248, 0.56); --card-border: rgba(56, 189, 248, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(56, 189, 248, 0.2); }
.theme-honey-cascade { --card-bg: linear-gradient(135deg, #3a1f09 0%, #b45309 42%, #fbbf24 72%, #fef3c7 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #3a1f09; --text-accent: #7c2d12; --text-shadow: rgba(251, 191, 36, 0.5); --card-border: rgba(251, 191, 36, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.38), 0 0 22px rgba(251, 191, 36, 0.16); }
.theme-rose-lattice { --card-bg: linear-gradient(135deg, #500724 0%, #be185d 42%, #f9a8d4 72%, #fff1f2 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fbcfe8, #fdf2f8); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.62); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(190, 24, 93, 0.34); }
.theme-cyan-arcade { --card-bg: linear-gradient(135deg, #082f49 0%, #0891b2 42%, #99f6e4 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ccfbf1); --chip-border: #99f6e4; --text-primary: #082f49; --text-accent: #0f172a; --text-shadow: rgba(153, 246, 228, 0.6); --card-border: rgba(153, 246, 228, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 24px rgba(153, 246, 228, 0.22); }
.theme-silver-vine { --card-bg: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 42%, #e2e8f0 72%, #f1f5f9 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.54); --card-border: rgba(203, 213, 225, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.38), 0 0 20px rgba(148, 163, 184, 0.18); }
.theme-dune-whisper { --card-bg: linear-gradient(135deg, #fef3c7 0%, #fbbf24 42%, #fdba74 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fdba74; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(251, 191, 36, 0.52); --card-border: rgba(253, 186, 116, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.38), 0 0 24px rgba(251, 191, 36, 0.2); }
.theme-opal-current { --card-bg: linear-gradient(135deg, #f5f3ff 0%, #bfdbfe 42%, #c4b5fd 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #fff, #e0f2fe, #f5f3ff); --chip-border: #c4b5fd; --text-primary: #1f2937; --text-accent: #312e81; --text-shadow: rgba(191, 219, 254, 0.48); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.34), 0 0 20px rgba(191, 219, 254, 0.16); }
.theme-ember-lattice { --card-bg: linear-gradient(135deg, #431407 0%, #a16207 42%, #fbbf24 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(180, 83, 9, 0.3); }
.theme-lotus-silver { --card-bg: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 42%, #f5d0fe 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #fff, #f5f3ff, #f9a8d4); --chip-border: #f5d0fe; --text-primary: #1f2937; --text-accent: #7c3aed; --text-shadow: rgba(245, 208, 254, 0.46); --card-border: rgba(213, 210, 255, 0.46); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.32), 0 0 20px rgba(245, 208, 254, 0.14); }
.theme-cedar-ink { --card-bg: linear-gradient(135deg, #1f2937 0%, #4b5563 42%, #8b5e3c 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f5f5f4, #fef3c7, #e5e7eb); --chip-border: #8b5e3c; --text-primary: #f5f5f4; --text-accent: #fef3c7; --text-shadow: rgba(139, 94, 60, 0.5); --card-border: rgba(139, 94, 60, 0.38); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 24px rgba(75, 85, 99, 0.25); }
.theme-jewel-drift { --card-bg: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #c084fc 72%, #4c1d95 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #ddd6fe, #f3e8ff); --chip-border: #c084fc; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(192, 132, 252, 0.6); --card-border: rgba(192, 132, 252, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(59, 130, 246, 0.32); }
.theme-comet-rose { --card-bg: linear-gradient(135deg, #2d0a2e 0%, #9d174d 42%, #f472b6 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4); --chip-border: #f472b6; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.62); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(157, 23, 77, 0.32); }
.theme-twilight-velvet { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 42%, #c084fc 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #eef2ff, #ddd6fe, #f3e8ff); --chip-border: #c084fc; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(192, 132, 252, 0.62); --card-border: rgba(192, 132, 252, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(79, 70, 229, 0.33); }
.theme-azure-lattice { --card-bg: linear-gradient(135deg, #082f49 0%, #1d4ed8 42%, #c4b5fd 72%, #e0f2fe 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #e9d5ff); --chip-border: #c4b5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(196, 181, 253, 0.62); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 28px rgba(96, 165, 250, 0.28); }
.theme-ember-cascade { --card-bg: linear-gradient(135deg, #431407 0%, #b45309 42%, #f59e0b 72%, #4c0519 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fed7aa); --chip-border: #f59e0b; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 28px rgba(180, 83, 9, 0.35); }
.theme-rose-hush { --card-bg: linear-gradient(135deg, #500724 0%, #be185d 42%, #f9a8d4 72%, #fff1f2 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fbcfe8, #fdf2f8); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.62); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(190, 24, 93, 0.34); }
.theme-moonlit-cinder { --card-bg: linear-gradient(135deg, #111827 0%, #0f172a 42%, #f97316 72%, #2d0a2e 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #fed7aa, #fbcfe8); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.58); --card-border: rgba(249, 115, 22, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 26px rgba(14, 165, 233, 0.18); }
.theme-jade-arcade { --card-bg: linear-gradient(135deg, #022c22 0%, #0f766e 42%, #bef264 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #d9f99d); --chip-border: #bef264; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(190, 242, 100, 0.6); --card-border: rgba(190, 242, 100, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(20, 184, 166, 0.28); }
.theme-silver-echo { --card-bg: linear-gradient(135deg, #f8fafc 0%, #dbeafe 42%, #cbd5e1 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.52); --card-border: rgba(203, 213, 225, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(148, 163, 184, 0.16); }
.theme-citrus-halo { --card-bg: linear-gradient(135deg, #431407 0%, #f59e0b 42%, #facc15 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #facc15; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.46), 0 0 24px rgba(245, 158, 11, 0.22); }
.theme-lilac-voyage { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 42%, #f0abfc 72%, #f5f3ff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #f3e8ff); --chip-border: #f0abfc; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(240, 171, 252, 0.62); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(109, 40, 217, 0.34); }
.theme-teal-ripple { --card-bg: linear-gradient(135deg, #042f2e 0%, #0f766e 42%, #67e8f9 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #dbeafe); --chip-border: #67e8f9; --text-primary: #062b2a; --text-accent: #0f172a; --text-shadow: rgba(103, 232, 249, 0.56); --card-border: rgba(103, 232, 249, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 22px rgba(103, 232, 249, 0.18); }
.theme-coral-current { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fda4af 72%, #fef2f2 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fda4af; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 164, 175, 0.58); --card-border: rgba(253, 164, 175, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(249, 115, 22, 0.3); }
.theme-amber-velvet { --card-bg: linear-gradient(135deg, #3a2400 0%, #a16207 42%, #fbbf24 72%, #3a1f09 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(180, 83, 9, 0.32); }
.theme-cedar-spark { --card-bg: linear-gradient(135deg, #1f2937 0%, #4b5563 42%, #d97706 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f5f5f4, #fef3c7, #e5e7eb); --chip-border: #d97706; --text-primary: #f5f5f4; --text-accent: #fef3c7; --text-shadow: rgba(217, 119, 6, 0.5); --card-border: rgba(217, 119, 6, 0.38); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.93), 0 0 24px rgba(75, 85, 99, 0.22); }
.theme-ocean-whisper { --card-bg: linear-gradient(135deg, #082f49 0%, #2563eb 42%, #93c5fd 72%, #dbeafe 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #93c5fd; --text-primary: #082f49; --text-accent: #1d4ed8; --text-shadow: rgba(147, 197, 253, 0.58); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.52), 0 0 24px rgba(96, 165, 250, 0.2); }
.theme-sunrise-cove { --card-bg: linear-gradient(135deg, #3a2400 0%, #b45309 42%, #facc15 72%, #fef3c7 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #facc15; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(250, 204, 21, 0.56); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 22px rgba(251, 191, 36, 0.16); }
.theme-violet-cinder { --card-bg: linear-gradient(135deg, #2e1065 0%, #7c3aed 42%, #f59e0b 72%, #1f2937 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #fde68a, #ddd6fe); --chip-border: #f59e0b; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(124, 58, 237, 0.32); }
.theme-mint-echo { --card-bg: linear-gradient(135deg, #052e16 0%, #34d399 42%, #99f6e4 72%, #ecfdf5 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #ccfbf1, #cffafe); --chip-border: #99f6e4; --text-primary: #052e16; --text-accent: #0f172a; --text-shadow: rgba(153, 246, 228, 0.56); --card-border: rgba(153, 246, 228, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 24px rgba(52, 211, 153, 0.26); }
.theme-plum-halo { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 42%, #d8b4fe 72%, #f5f3ff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #f5d0fe); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(216, 180, 254, 0.62); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(124, 58, 237, 0.34); }
.theme-frost-arc { --card-bg: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 42%, #e9d5ff 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #f5f3ff); --chip-border: #bfdbfe; --text-primary: #082f49; --text-accent: #312e81; --text-shadow: rgba(191, 219, 254, 0.5); --card-border: rgba(191, 219, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.36), 0 0 22px rgba(191, 219, 254, 0.18); }
.theme-sunflower-ink { --card-bg: linear-gradient(135deg, #3a2400 0%, #facc15 42%, #fbbf24 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(250, 204, 21, 0.28); }
.theme-graphite-bloom { --card-bg: linear-gradient(135deg, #1f2937 0%, #374151 42%, #d1d5db 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f3f4f6, #d1d5db, #cbd5e1); --chip-border: #d1d5db; --text-primary: #f9fafb; --text-accent: #e5e7eb; --text-shadow: rgba(209, 213, 219, 0.55); --card-border: rgba(209, 213, 219, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.88), 0 0 22px rgba(148, 163, 184, 0.2); }
.theme-apricot-signal { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fdba74 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 146, 60, 0.58); --card-border: rgba(251, 146, 60, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 26px rgba(249, 115, 22, 0.24); }
.theme-iris-fjord { --card-bg: linear-gradient(135deg, #2e1065 0%, #7c3aed 42%, #93c5fd 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #dbeafe, #f3e8ff); --chip-border: #93c5fd; --text-primary: #f5f3ff; --text-accent: #dbeafe; --text-shadow: rgba(147, 197, 253, 0.56); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(124, 58, 237, 0.3); }
.theme-ruby-cove { --card-bg: linear-gradient(135deg, #4c0519 0%, #9f1239 42%, #fb7185 72%, #fff1f2 100%); --chip-bg: linear-gradient(135deg, #fff1f2, #fecdd3, #fbcfe8); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(190, 24, 93, 0.32); }
.theme-tangerine-vine { --card-bg: linear-gradient(135deg, #431407 0%, #f97316 42%, #fbbf24 72%, #7c2d12 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fef3c7); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 28px rgba(249, 115, 22, 0.3); }
.theme-iris-veil { --card-bg: linear-gradient(135deg, #2e1065 0%, #a855f7 42%, #ddd6fe 72%, #faf5ff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #f3e8ff); --chip-border: #ddd6fe; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.92), 0 0 28px rgba(168, 85, 247, 0.3); }
.theme-moss-echo { --card-bg: linear-gradient(135deg, #052e16 0%, #166534 42%, #86efac 72%, #ecfdf5 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #d9f99d); --chip-border: #86efac; --text-primary: #052e16; --text-accent: #166534; --text-shadow: rgba(134, 239, 172, 0.58); --card-border: rgba(134, 239, 172, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 24px rgba(34, 197, 94, 0.24); }
.theme-sapphire-cascade { --card-bg: linear-gradient(135deg, #082f49 0%, #0369a1 42%, #60a5fa 72%, #dbeafe 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #60a5fa; --text-primary: #082f49; --text-accent: #1d4ed8; --text-shadow: rgba(96, 165, 250, 0.56); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.54), 0 0 24px rgba(59, 130, 246, 0.2); }
.theme-copper-whisper { --card-bg: linear-gradient(135deg, #3a1f09 0%, #b45309 42%, #fbbf24 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fef3c7); --chip-border: #fbbf24; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(251, 191, 36, 0.56); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.42), 0 0 22px rgba(251, 191, 36, 0.16); }
.theme-pearl-arcade { --card-bg: linear-gradient(135deg, #f8fafc 0%, #ddd6fe 42%, #f5d0fe 72%, #f5f3ff 100%); --chip-bg: linear-gradient(135deg, #fff, #f5f3ff, #fdf2f8); --chip-border: #ddd6fe; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(221, 214, 254, 0.48); --card-border: rgba(221, 214, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.34), 0 0 20px rgba(221, 214, 254, 0.14); }
.theme-glacier-cove { --card-bg: linear-gradient(135deg, #dbeafe 0%, #93c5fd 42%, #bfdbfe 72%, #eff6ff 100%); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #f8fafc); --chip-border: #93c5fd; --text-primary: #082f49; --text-accent: #1d4ed8; --text-shadow: rgba(147, 197, 253, 0.5); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.36), 0 0 22px rgba(147, 197, 253, 0.18); }
.theme-moonbeam-berry { --card-bg: linear-gradient(135deg, #1f2937 0%, #312e81 42%, #f472b6 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #fbcfe8, #ddd6fe); --chip-border: #f472b6; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(244, 114, 182, 0.6); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 28px rgba(79, 70, 229, 0.28); }
.theme-onyx-vista { --card-bg: linear-gradient(135deg, #0a0a0a 0%, #1f2937 42%, #a78bfa 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f5f5f4, #ddd6fe, #f3e8ff); --chip-border: #a78bfa; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(167, 139, 250, 0.6); --card-border: rgba(167, 139, 250, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.95), 0 0 26px rgba(109, 40, 217, 0.3); }
.theme-velvet-coral { --card-bg: linear-gradient(135deg, #2d0a2e 0%, #9d174d 42%, #fb7185 72%, #fef2f2 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #fecdd3); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 28px rgba(157, 23, 77, 0.28); }
.theme-lagoon-glow { --card-bg: linear-gradient(135deg, #082f49 0%, #0ea5e9 42%, #a5f3fc 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #dbeafe); --chip-border: #a5f3fc; --text-primary: #082f49; --text-accent: #0f172a; --text-shadow: rgba(165, 243, 252, 0.58); --card-border: rgba(165, 243, 252, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.54), 0 0 22px rgba(14, 165, 233, 0.18); }
.theme-saffron-drift { --card-bg: linear-gradient(135deg, #3a2400 0%, #b45309 42%, #facc15 72%, #fef3c7 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #facc15; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(250, 204, 21, 0.58); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 22px rgba(251, 191, 36, 0.18); }
.theme-plum-dream { --card-bg: linear-gradient(135deg, #4c1d95 0%, #7e22ce 42%, #d8b4fe 72%, #faf5ff 100%); --chip-bg: linear-gradient(135deg, #f3e8ff, #ddd6fe, #f5d0fe); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(216, 180, 254, 0.62); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(168, 85, 247, 0.3); }
.theme-tinsel-reef { --card-bg: linear-gradient(135deg, #022c22 0%, #0891b2 42%, #fef08a 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #fef3c7); --chip-border: #fef08a; --text-primary: #062b2a; --text-accent: #0f172a; --text-shadow: rgba(254, 240, 138, 0.56); --card-border: rgba(254, 240, 138, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 24px rgba(103, 232, 249, 0.18); }
.theme-meadow-bloom { --card-bg: linear-gradient(135deg, #052e16 0%, #166534 42%, #bef264 72%, #ecfdf5 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #d9f99d); --chip-border: #bef264; --text-primary: #052e16; --text-accent: #166534; --text-shadow: rgba(190, 242, 100, 0.58); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 24px rgba(132, 204, 22, 0.24); }
.theme-sunset-peak { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #fb7185 72%, #431407 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 28px rgba(249, 115, 22, 0.3); }
.theme-horizon-cinder { --card-bg: linear-gradient(135deg, #111827 0%, #374151 42%, #f59e0b 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #f3f4f6, #fef3c7, #d1d5db); --chip-border: #f59e0b; --text-primary: #f8fafc; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.56); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 26px rgba(107, 114, 128, 0.2); }
.theme-indigo-fern { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4338ca 42%, #22c55e 72%, #0f172a 100%); --chip-bg: linear-gradient(135deg, #eef2ff, #dcfce7, #ddd6fe); --chip-border: #22c55e; --text-primary: #f5f3ff; --text-accent: #dcfce7; --text-shadow: rgba(34, 197, 94, 0.6); --card-border: rgba(34, 197, 94, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(99, 102, 241, 0.28); }
.theme-rose-arcade { --card-bg: linear-gradient(135deg, #500724 0%, #be185d 42%, #f9a8d4 72%, #fdf2f8 100%); --chip-bg: linear-gradient(135deg, #fdf2f8, #fbcfe8, #f9a8d4); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.94), 0 0 28px rgba(190, 24, 93, 0.32); }
.theme-silver-petal { --card-bg: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 42%, #e2e8f0 72%, #f8fafc 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, 0.52); --card-border: rgba(203, 213, 225, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(148, 163, 184, 0.14); }
.theme-teal-ember { --card-bg: linear-gradient(135deg, #042f2e 0%, #0f766e 42%, #f59e0b 72%, #022c22 100%); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #ccfbf1); --chip-border: #f59e0b; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.58); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(16, 185, 129, 0.24); }
.theme-coral-breeze { --card-bg: linear-gradient(135deg, #7c2d12 0%, #f97316 42%, #a7f3d0 72%, #052e16 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #ecfdf5); --chip-border: #a7f3d0; --text-primary: #fff7ed; --text-accent: #ecfdf5; --text-shadow: rgba(134, 239, 172, 0.52); --card-border: rgba(134, 239, 172, 0.4); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.88), 0 0 26px rgba(249, 115, 22, 0.22); }
.theme-lilac-drift { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 42%, #c4b5fd 72%, #f5f3ff 100%); --chip-bg: linear-gradient(135deg, #f5f3ff, #ddd6fe, #e9d5ff); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.62); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(109, 40, 217, 0.32); }
.theme-stone-river { --card-bg: linear-gradient(135deg, #0f172a 0%, #475569 42%, #94a3b8 72%, #e2e8f0 100%); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1); --chip-border: #94a3b8; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(148, 163, 184, 0.5); --card-border: rgba(148, 163, 184, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.88), 0 0 20px rgba(148, 163, 184, 0.14); }
.theme-amber-lantern { --card-bg: linear-gradient(135deg, #451a03 0%, #c2410c 42%, #fbbf24 72%, #fff7ed 100%); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.58); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 28px rgba(180, 83, 9, 0.32); }
.theme-glass-fern { --card-bg: linear-gradient(135deg, #0f172a 0%, #0f766e 42%, #99f6e4 72%, #ecfeff 100%); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #cffafe); --chip-border: #99f6e4; --text-primary: #ecfeff; --text-accent: #dbeafe; --text-shadow: rgba(153, 246, 228, 0.6); --card-border: rgba(153, 246, 228, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(45, 212, 191, 0.2); }
.theme-velvet-harbor { --card-bg: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 42%, #f5d0fe 72%, #111827 100%); --chip-bg: linear-gradient(135deg, #eef2ff, #ddd6fe, #f3e8ff); --chip-border: #f5d0fe; --text-primary: #f5f3ff; --text-accent: #ddd6fe; --text-shadow: rgba(245, 208, 254, 0.62); --card-border: rgba(245, 208, 254, 0.42); --card-glow: 0 30px 60px rgba(0, 0, 0, 0.96), 0 0 28px rgba(79, 70, 229, 0.3); }
.theme-aphelion-veil { --card-bg: linear-gradient(135deg, #111827, #4338ca, #a78bfa); --chip-bg: linear-gradient(135deg, #f8fafc, #e0e7ff, #ede9fe); --chip-border: #a78bfa; --text-primary: #f8fafc; --text-accent: #ddd6fe; --text-shadow: rgba(167, 139, 250, 0.6); --card-border: rgba(167, 139, 250, 0.42); --card-glow: 0 0 30px rgba(67, 56, 202, 0.3); }
.theme-aphelion-crest { --card-bg: linear-gradient(135deg, #030712, #4338ca, #818cf8); --chip-bg: linear-gradient(135deg, #eef2ff, #e0e7ff, #c7d2fe); --chip-border: #818cf8; --text-primary: #f8fafc; --text-accent: #c7d2fe; --text-shadow: rgba(129, 140, 248, 0.6); --card-border: rgba(129, 140, 248, 0.42); --card-glow: 0 0 30px rgba(3, 7, 18, 0.5); }
.theme-aphelion-pulse { --card-bg: linear-gradient(135deg, #1f2937, #6d28d9, #a855f7); --chip-bg: linear-gradient(135deg, #f5f3ff, #e9d5ff, #f3e8ff); --chip-border: #a855f7; --text-primary: #faf5ff; --text-accent: #e9d5ff; --text-shadow: rgba(168, 85, 247, 0.6); --card-border: rgba(168, 85, 247, 0.42); --card-glow: 0 0 30px rgba(109, 40, 217, 0.3); }
.theme-aphelion-breeze { --card-bg: linear-gradient(135deg, #312e81, #7c3aed, #c4b5fd); --chip-bg: linear-gradient(135deg, #f5f3ff, #ede9fe, #e0e7ff); --chip-border: #c4b5fd; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 0 30px rgba(49, 46, 129, 0.3); }
.theme-aphelion-arc { --card-bg: linear-gradient(135deg, #111827, #4f46e5, #a78bfa); --chip-bg: linear-gradient(135deg, #f8fafc, #e0e7ff, #f5f3ff); --chip-border: #a78bfa; --text-primary: #f8fafc; --text-accent: #ddd6fe; --text-shadow: rgba(167, 139, 250, 0.6); --card-border: rgba(167, 139, 250, 0.42); --card-glow: 0 0 30px rgba(79, 70, 229, 0.3); }
.theme-sequoia-veil { --card-bg: linear-gradient(135deg, #14532d, #166534, #84cc16); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #d9f99d); --chip-border: #84cc16; --text-primary: #f0fdf4; --text-accent: #d9f99d; --text-shadow: rgba(132, 204, 22, 0.6); --card-border: rgba(132, 204, 22, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-sequoia-crest { --card-bg: linear-gradient(135deg, #052e16, #166534, #4ade80); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #bbf7d0); --chip-border: #4ade80; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(74, 222, 128, 0.6); --card-border: rgba(74, 222, 128, 0.42); --card-glow: 0 0 30px rgba(5, 46, 22, 0.45); }
.theme-sequoia-pulse { --card-bg: linear-gradient(135deg, #166534, #65a30d, #bef264); --chip-bg: linear-gradient(135deg, #ecfdf5, #d9f99d, #f7fee7); --chip-border: #bef264; --text-primary: #f0fdf4; --text-accent: #d9f99d; --text-shadow: rgba(190, 242, 100, 0.6); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 0 30px rgba(101, 163, 13, 0.3); }
.theme-sequoia-breeze { --card-bg: linear-gradient(135deg, #15803d, #65a30d, #bef264); --chip-bg: linear-gradient(135deg, #ecfdf5, #d9f99d, #f7fee7); --chip-border: #bef264; --text-primary: #052e16; --text-accent: #166534; --text-shadow: rgba(190, 242, 100, 0.6); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 0 30px rgba(21, 128, 61, 0.3); }
.theme-sequoia-arc { --card-bg: linear-gradient(135deg, #14532d, #4d7c0f, #a3e635); --chip-bg: linear-gradient(135deg, #ecfdf5, #d9f99d, #ecfccb); --chip-border: #a3e635; --text-primary: #f0fdf4; --text-accent: #d9f99d; --text-shadow: rgba(163, 230, 53, 0.6); --card-border: rgba(163, 230, 53, 0.42); --card-glow: 0 0 30px rgba(20, 83, 45, 0.3); }
.theme-cerulean-veil { --card-bg: linear-gradient(135deg, #0c4a6e, #0284c7, #38bdf8); --chip-bg: linear-gradient(135deg, #ecfeff, #e0f2fe, #bae6fd); --chip-border: #38bdf8; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(56, 189, 248, 0.6); --card-border: rgba(56, 189, 248, 0.42); --card-glow: 0 0 30px rgba(2, 132, 199, 0.3); }
.theme-cerulean-crest { --card-bg: linear-gradient(135deg, #082f49, #0369a1, #0ea5e9); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #bae6fd); --chip-border: #0ea5e9; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(14, 165, 233, 0.6); --card-border: rgba(14, 165, 233, 0.42); --card-glow: 0 0 30px rgba(8, 47, 73, 0.4); }
.theme-cerulean-pulse { --card-bg: linear-gradient(135deg, #075985, #0ea5e9, #7dd3fc); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #e0f2fe); --chip-border: #7dd3fc; --text-primary: #082f49; --text-accent: #0369a1; --text-shadow: rgba(125, 211, 252, 0.6); --card-border: rgba(125, 211, 252, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-cerulean-breeze { --card-bg: linear-gradient(135deg, #0284c7, #38bdf8, #bae6fd); --chip-bg: linear-gradient(135deg, #ecfeff, #e0f2fe, #f0f9ff); --chip-border: #bae6fd; --text-primary: #082f49; --text-accent: #0369a1; --text-shadow: rgba(186, 230, 253, 0.6); --card-border: rgba(186, 230, 253, 0.42); --card-glow: 0 0 30px rgba(2, 132, 199, 0.28); }
.theme-cerulean-arc { --card-bg: linear-gradient(135deg, #0c4a6e, #0284c7, #7dd3fc); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #e0f2fe); --chip-border: #7dd3fc; --text-primary: #f0f9ff; --text-accent: #bae6fd; --text-shadow: rgba(125, 211, 252, 0.6); --card-border: rgba(125, 211, 252, 0.42); --card-glow: 0 0 30px rgba(12, 74, 110, 0.3); }
.theme-magenta-veil { --card-bg: linear-gradient(135deg, #701a75, #be185d, #f0abfc); --chip-bg: linear-gradient(135deg, #fdf4ff, #fce7f3, #f5d0fe); --chip-border: #f0abfc; --text-primary: #fdf4ff; --text-accent: #f5d0fe; --text-shadow: rgba(240, 171, 252, 0.6); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-magenta-crest { --card-bg: linear-gradient(135deg, #500724, #a21caf, #e879f9); --chip-bg: linear-gradient(135deg, #fdf4ff, #fce7f3, #f5d0fe); --chip-border: #e879f9; --text-primary: #fdf4ff; --text-accent: #f5d0fe; --text-shadow: rgba(232, 121, 249, 0.6); --card-border: rgba(232, 121, 249, 0.42); --card-glow: 0 0 30px rgba(162, 28, 175, 0.35); }
.theme-magenta-pulse { --card-bg: linear-gradient(135deg, #9d174d, #c026d3, #f5d0fe); --chip-bg: linear-gradient(135deg, #fdf4ff, #fce7f3, #fae8ff); --chip-border: #f5d0fe; --text-primary: #fdf4ff; --text-accent: #f5d0fe; --text-shadow: rgba(245, 208, 254, 0.6); --card-border: rgba(245, 208, 254, 0.42); --card-glow: 0 0 30px rgba(192, 38, 211, 0.3); }
.theme-magenta-breeze { --card-bg: linear-gradient(135deg, #be185d, #d946ef, #f9a8d4); --chip-bg: linear-gradient(135deg, #fdf4ff, #fce7f3, #f5d0fe); --chip-border: #f9a8d4; --text-primary: #fdf4ff; --text-accent: #f5d0fe; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-magenta-arc { --card-bg: linear-gradient(135deg, #701a75, #be185d, #f9a8d4); --chip-bg: linear-gradient(135deg, #fdf4ff, #fce7f3, #f5d0fe); --chip-border: #f9a8d4; --text-primary: #fdf4ff; --text-accent: #f5d0fe; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 30px rgba(112, 26, 117, 0.3); }
.theme-solstice-veil { --card-bg: linear-gradient(135deg, #172554, #2563eb, #fbbf24); --chip-bg: linear-gradient(135deg, #eff6ff, #fef3c7, #dbeafe); --chip-border: #fbbf24; --text-primary: #f8fafc; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, .6); --card-border: rgba(251, 191, 36, .42); --card-glow: 0 0 30px rgba(37, 99, 235, .3); }
.theme-solstice-crest { --card-bg: linear-gradient(135deg, #172554, #1d4ed8, #93c5fd); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #bfdbfe); --chip-border: #93c5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(147, 197, 253, .6); --card-border: rgba(147, 197, 253, .42); --card-glow: 0 0 30px rgba(29, 78, 216, .3); }
.theme-solstice-pulse { --card-bg: linear-gradient(135deg, #1e3a8a, #3b82f6, #facc15); --chip-bg: linear-gradient(135deg, #eff6ff, #fef3c7, #bfdbfe); --chip-border: #facc15; --text-primary: #f8fafc; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, .6); --card-border: rgba(250, 204, 21, .42); --card-glow: 0 0 30px rgba(59, 130, 246, .3); }
.theme-solstice-breeze { --card-bg: linear-gradient(135deg, #1d4ed8, #60a5fa, #fde68a); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #fef3c7); --chip-border: #60a5fa; --text-primary: #082f49; --text-accent: #1e3a8a; --text-shadow: rgba(96, 165, 250, .6); --card-border: rgba(96, 165, 250, .42); --card-glow: 0 0 30px rgba(96, 165, 250, .25); }
.theme-solstice-arc { --card-bg: linear-gradient(135deg, #172554, #2563eb, #fef08a); --chip-bg: linear-gradient(135deg, #eff6ff, #fef3c7, #dbeafe); --chip-border: #fef08a; --text-primary: #f8fafc; --text-accent: #fef3c7; --text-shadow: rgba(254, 240, 138, .6); --card-border: rgba(254, 240, 138, .42); --card-glow: 0 0 30px rgba(23, 37, 84, .35); }
.theme-marina-veil { --card-bg: linear-gradient(135deg, #042f4a, #0e7490, #67e8f9); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #dbeafe); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, .6); --card-border: rgba(103, 232, 249, .42); --card-glow: 0 0 30px rgba(14, 116, 144, .3); }
.theme-marina-crest { --card-bg: linear-gradient(135deg, #042f2e, #0f766e, #22d3ee); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #cffafe); --chip-border: #22d3ee; --text-primary: #ecfeff; --text-accent: #ccfbf1; --text-shadow: rgba(34, 211, 238, .6); --card-border: rgba(34, 211, 238, .42); --card-glow: 0 0 30px rgba(15, 118, 110, .3); }
.theme-marina-pulse { --card-bg: linear-gradient(135deg, #164e63, #0891b2, #a5f3fc); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ccfbf1); --chip-border: #a5f3fc; --text-primary: #083344; --text-accent: #0e7490; --text-shadow: rgba(165, 243, 252, .6); --card-border: rgba(165, 243, 252, .42); --card-glow: 0 0 30px rgba(8, 145, 178, .3); }
.theme-marina-breeze { --card-bg: linear-gradient(135deg, #0e7490, #06b6d4, #cffafe); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #e0f2fe); --chip-border: #cffafe; --text-primary: #083344; --text-accent: #0e7490; --text-shadow: rgba(207, 250, 254, .6); --card-border: rgba(207, 250, 254, .42); --card-glow: 0 0 30px rgba(6, 182, 212, .25); }
.theme-marina-arc { --card-bg: linear-gradient(135deg, #042f4a, #0891b2, #67e8f9); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #dbeafe); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, .6); --card-border: rgba(103, 232, 249, .42); --card-glow: 0 0 30px rgba(4, 47, 74, .35); }
.theme-silverline-veil { --card-bg: linear-gradient(135deg, #1f2937, #64748b, #e2e8f0); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #cbd5e1; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(226, 232, 240, .6); --card-border: rgba(203, 213, 225, .42); --card-glow: 0 0 30px rgba(100, 116, 139, .3); }
.theme-silverline-crest { --card-bg: linear-gradient(135deg, #0f172a, #475569, #cbd5e1); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #cbd5e1); --chip-border: #cbd5e1; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(203, 213, 225, .6); --card-border: rgba(203, 213, 225, .42); --card-glow: 0 0 30px rgba(71, 85, 105, .35); }
.theme-silverline-pulse { --card-bg: linear-gradient(135deg, #334155, #94a3b8, #f1f5f9); --chip-bg: linear-gradient(135deg, #fff, #f1f5f9, #dbeafe); --chip-border: #cbd5e1; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(148, 163, 184, .5); --card-border: rgba(203, 213, 225, .42); --card-glow: 0 0 24px rgba(148, 163, 184, .25); }
.theme-silverline-breeze { --card-bg: linear-gradient(135deg, #475569, #cbd5e1, #f8fafc); --chip-bg: linear-gradient(135deg, #fff, #f8fafc, #e2e8f0); --chip-border: #e2e8f0; --text-primary: #0f172a; --text-accent: #475569; --text-shadow: rgba(226, 232, 240, .5); --card-border: rgba(226, 232, 240, .42); --card-glow: 0 0 24px rgba(203, 213, 225, .25); }
.theme-silverline-arc { --card-bg: linear-gradient(135deg, #1f2937, #64748b, #f1f5f9); --chip-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #dbeafe); --chip-border: #e2e8f0; --text-primary: #f8fafc; --text-accent: #e2e8f0; --text-shadow: rgba(226, 232, 240, .6); --card-border: rgba(226, 232, 240, .42); --card-glow: 0 0 30px rgba(31, 41, 55, .35); }
.theme-sandstone-veil { --card-bg: linear-gradient(135deg, #451a03, #b45309, #fbbf24); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fed7aa); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, .6); --card-border: rgba(251, 191, 36, .42); --card-glow: 0 0 30px rgba(180, 83, 9, .3); }
.theme-sandstone-crest { --card-bg: linear-gradient(135deg, #3a2400, #a16207, #f59e0b); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #f59e0b; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, .6); --card-border: rgba(245, 158, 11, .42); --card-glow: 0 0 30px rgba(161, 98, 7, .3); }
.theme-sandstone-pulse { --card-bg: linear-gradient(135deg, #7c2d12, #d97706, #fde68a); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fed7aa); --chip-border: #fde68a; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(253, 230, 138, .6); --card-border: rgba(253, 230, 138, .42); --card-glow: 0 0 30px rgba(217, 119, 6, .3); }
.theme-sandstone-breeze { --card-bg: linear-gradient(135deg, #b45309, #f59e0b, #fde68a); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fff7ed); --chip-border: #fde68a; --text-primary: #451a03; --text-accent: #92400e; --text-shadow: rgba(245, 158, 11, .5); --card-border: rgba(253, 230, 138, .42); --card-glow: 0 0 24px rgba(245, 158, 11, .25); }
.theme-sandstone-arc { --card-bg: linear-gradient(135deg, #451a03, #d97706, #fbbf24); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, .6); --card-border: rgba(251, 191, 36, .42); --card-glow: 0 0 30px rgba(69, 26, 3, .35); }
.theme-halcyon-veil { --card-bg: linear-gradient(135deg, #164e63, #0ea5e9, #c4b5fd); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #ede9fe); --chip-border: #c4b5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(196, 181, 253, .6); --card-border: rgba(196, 181, 253, .42); --card-glow: 0 0 30px rgba(14, 165, 233, .3); }
.theme-halcyon-crest { --card-bg: linear-gradient(135deg, #0c4a6e, #0284c7, #a5b4fc); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #e0e7ff); --chip-border: #a5b4fc; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(165, 180, 252, .6); --card-border: rgba(165, 180, 252, .42); --card-glow: 0 0 30px rgba(2, 132, 199, .3); }
.theme-halcyon-pulse { --card-bg: linear-gradient(135deg, #155e75, #06b6d4, #ddd6fe); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #f5f3ff); --chip-border: #ddd6fe; --text-primary: #ecfeff; --text-accent: #dbeafe; --text-shadow: rgba(221, 214, 254, .6); --card-border: rgba(221, 214, 254, .42); --card-glow: 0 0 30px rgba(6, 182, 212, .3); }
.theme-halcyon-breeze { --card-bg: linear-gradient(135deg, #0e7490, #67e8f9, #ddd6fe); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #f5f3ff); --chip-border: #67e8f9; --text-primary: #083344; --text-accent: #155e75; --text-shadow: rgba(103, 232, 249, .6); --card-border: rgba(103, 232, 249, .42); --card-glow: 0 0 30px rgba(14, 116, 144, .25); }
.theme-halcyon-arc { --card-bg: linear-gradient(135deg, #164e63, #0284c7, #c4b5fd); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #ede9fe); --chip-border: #c4b5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(196, 181, 253, .6); --card-border: rgba(196, 181, 253, .42); --card-glow: 0 0 30px rgba(22, 78, 99, .35); }
.theme-prismarine-veil { --card-bg: linear-gradient(135deg, #022c22, #0891b2, #a78bfa); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #ede9fe); --chip-border: #a78bfa; --text-primary: #ecfeff; --text-accent: #ccfbf1; --text-shadow: rgba(167, 139, 250, .6); --card-border: rgba(167, 139, 250, .42); --card-glow: 0 0 30px rgba(8, 145, 178, .3); }
.theme-prismarine-crest { --card-bg: linear-gradient(135deg, #042f2e, #0f766e, #7c3aed); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #f3e8ff); --chip-border: #7c3aed; --text-primary: #ecfeff; --text-accent: #ddd6fe; --text-shadow: rgba(124, 58, 237, .6); --card-border: rgba(124, 58, 237, .42); --card-glow: 0 0 30px rgba(15, 118, 110, .3); }
.theme-prismarine-pulse { --card-bg: linear-gradient(135deg, #115e59, #06b6d4, #c4b5fd); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ede9fe); --chip-border: #c4b5fd; --text-primary: #ecfeff; --text-accent: #cffafe; --text-shadow: rgba(196, 181, 253, .6); --card-border: rgba(196, 181, 253, .42); --card-glow: 0 0 30px rgba(6, 182, 212, .3); }
.theme-prismarine-breeze { --card-bg: linear-gradient(135deg, #0f766e, #2dd4bf, #ddd6fe); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #f5f3ff); --chip-border: #2dd4bf; --text-primary: #042f2e; --text-accent: #115e59; --text-shadow: rgba(45, 212, 191, .6); --card-border: rgba(45, 212, 191, .42); --card-glow: 0 0 30px rgba(15, 118, 110, .25); }
.theme-prismarine-arc { --card-bg: linear-gradient(135deg, #022c22, #0891b2, #c4b5fd); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #ede9fe); --chip-border: #c4b5fd; --text-primary: #ecfeff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, .6); --card-border: rgba(196, 181, 253, .42); --card-glow: 0 0 30px rgba(2, 44, 34, .35); }
.theme-terracotta-veil { --card-bg: linear-gradient(135deg, #431407, #c2410c, #fb7185); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 113, 133, .6); --card-border: rgba(251, 113, 133, .42); --card-glow: 0 0 30px rgba(194, 65, 12, .3); }
.theme-terracotta-crest { --card-bg: linear-gradient(135deg, #7c2d12, #ea580c, #fda4af); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fda4af; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 164, 175, .6); --card-border: rgba(253, 164, 175, .42); --card-glow: 0 0 30px rgba(234, 88, 12, .3); }
.theme-terracotta-pulse { --card-bg: linear-gradient(135deg, #9a3412, #f97316, #f9a8d4); --chip-bg: linear-gradient(135deg, #fff7ed, #fecdd3, #fdf2f8); --chip-border: #f9a8d4; --text-primary: #fff7ed; --text-accent: #fecdd3; --text-shadow: rgba(249, 168, 212, .6); --card-border: rgba(249, 168, 212, .42); --card-glow: 0 0 30px rgba(249, 115, 22, .3); }
.theme-terracotta-breeze { --card-bg: linear-gradient(135deg, #c2410c, #fb923c, #fecdd3); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fdf2f8); --chip-border: #fb923c; --text-primary: #431407; --text-accent: #9a3412; --text-shadow: rgba(251, 146, 60, .5); --card-border: rgba(251, 146, 60, .42); --card-glow: 0 0 24px rgba(194, 65, 12, .25); }
.theme-terracotta-arc { --card-bg: linear-gradient(135deg, #431407, #ea580c, #fb7185); --chip-bg: linear-gradient(135deg, #fff7ed, #fed7aa, #fecdd3); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(251, 113, 133, .6); --card-border: rgba(251, 113, 133, .42); --card-glow: 0 0 30px rgba(67, 20, 7, .35); }
.theme-moonrise-veil { --card-bg: linear-gradient(135deg, #111827, #312e81, #f5d0fe); --chip-bg: linear-gradient(135deg, #f8fafc, #e0e7ff, #f5d0fe); --chip-border: #f5d0fe; --text-primary: #f8fafc; --text-accent: #e9d5ff; --text-shadow: rgba(245, 208, 254, .6); --card-border: rgba(245, 208, 254, .42); --card-glow: 0 0 30px rgba(49, 46, 129, .3); }
.theme-moonrise-crest { --card-bg: linear-gradient(135deg, #0f172a, #4338ca, #d8b4fe); --chip-bg: linear-gradient(135deg, #f8fafc, #e0e7ff, #f3e8ff); --chip-border: #d8b4fe; --text-primary: #f8fafc; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, .6); --card-border: rgba(216, 180, 254, .42); --card-glow: 0 0 30px rgba(67, 56, 202, .3); }
.theme-moonrise-pulse { --card-bg: linear-gradient(135deg, #1e1b4b, #6366f1, #f0abfc); --chip-bg: linear-gradient(135deg, #f5f3ff, #e0e7ff, #f5d0fe); --chip-border: #f0abfc; --text-primary: #faf5ff; --text-accent: #f5d0fe; --text-shadow: rgba(240, 171, 252, .6); --card-border: rgba(240, 171, 252, .42); --card-glow: 0 0 30px rgba(99, 102, 241, .3); }
.theme-moonrise-breeze { --card-bg: linear-gradient(135deg, #312e81, #818cf8, #f5d0fe); --chip-bg: linear-gradient(135deg, #f5f3ff, #e0e7ff, #f5d0fe); --chip-border: #f5d0fe; --text-primary: #f5f3ff; --text-accent: #e9d5ff; --text-shadow: rgba(245, 208, 254, .6); --card-border: rgba(245, 208, 254, .42); --card-glow: 0 0 30px rgba(49, 46, 129, .25); }
.theme-moonrise-arc { --card-bg: linear-gradient(135deg, #111827, #4f46e5, #d8b4fe); --chip-bg: linear-gradient(135deg, #f8fafc, #e0e7ff, #f3e8ff); --chip-border: #d8b4fe; --text-primary: #f8fafc; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, .6); --card-border: rgba(216, 180, 254, .42); --card-glow: 0 0 30px rgba(17, 24, 39, .35); }
.theme-rainshadow-veil { --card-bg: linear-gradient(135deg, #0f172a, #475569, #38bdf8); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #bae6fd); --chip-border: #38bdf8; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(56, 189, 248, .6); --card-border: rgba(56, 189, 248, .42); --card-glow: 0 0 30px rgba(71, 85, 105, .35); }
.theme-rainshadow-crest { --card-bg: linear-gradient(135deg, #111827, #334155, #0ea5e9); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #cffafe); --chip-border: #0ea5e9; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(14, 165, 233, .6); --card-border: rgba(14, 165, 233, .42); --card-glow: 0 0 30px rgba(51, 65, 85, .35); }
.theme-rainshadow-pulse { --card-bg: linear-gradient(135deg, #1e293b, #64748b, #7dd3fc); --chip-bg: linear-gradient(135deg, #f8fafc, #e0f2fe, #dbeafe); --chip-border: #7dd3fc; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(125, 211, 252, .6); --card-border: rgba(125, 211, 252, .42); --card-glow: 0 0 30px rgba(100, 116, 139, .3); }
.theme-rainshadow-breeze { --card-bg: linear-gradient(135deg, #334155, #94a3b8, #bae6fd); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #e0f2fe); --chip-border: #bae6fd; --text-primary: #0f172a; --text-accent: #334155; --text-shadow: rgba(186, 230, 253, .5); --card-border: rgba(186, 230, 253, .42); --card-glow: 0 0 24px rgba(148, 163, 184, .25); }
.theme-rainshadow-arc { --card-bg: linear-gradient(135deg, #0f172a, #475569, #7dd3fc); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #bae6fd); --chip-border: #7dd3fc; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(125, 211, 252, .6); --card-border: rgba(125, 211, 252, .42); --card-glow: 0 0 30px rgba(15, 23, 42, .4); }
.theme-evergreen-veil { --card-bg: linear-gradient(135deg, #022c22, #166534, #34d399); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #ccfbf1); --chip-border: #34d399; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, .6); --card-border: rgba(52, 211, 153, .42); --card-glow: 0 0 30px rgba(22, 101, 52, .3); }
.theme-evergreen-crest { --card-bg: linear-gradient(135deg, #052e16, #15803d, #6ee7b7); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #a7f3d0); --chip-border: #6ee7b7; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(110, 231, 183, .6); --card-border: rgba(110, 231, 183, .42); --card-glow: 0 0 30px rgba(21, 128, 61, .3); }
.theme-evergreen-pulse { --card-bg: linear-gradient(135deg, #14532d, #16a34a, #86efac); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #bbf7d0); --chip-border: #86efac; --text-primary: #f0fdf4; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, .6); --card-border: rgba(134, 239, 172, .42); --card-glow: 0 0 30px rgba(22, 163, 74, .3); }
.theme-evergreen-breeze { --card-bg: linear-gradient(135deg, #166534, #22c55e, #bbf7d0); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #d1fae5); --chip-border: #bbf7d0; --text-primary: #052e16; --text-accent: #166534; --text-shadow: rgba(187, 247, 208, .5); --card-border: rgba(187, 247, 208, .42); --card-glow: 0 0 24px rgba(34, 197, 94, .25); }
.theme-evergreen-arc { --card-bg: linear-gradient(135deg, #022c22, #15803d, #86efac); --chip-bg: linear-gradient(135deg, #ecfdf5, #dcfce7, #bbf7d0); --chip-border: #86efac; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, .6); --card-border: rgba(134, 239, 172, .42); --card-glow: 0 0 30px rgba(2, 44, 34, .35); }
.theme-quartz-veil { --card-bg: linear-gradient(135deg,#f8fafc,#cbd5e1,#f5d0fe); --chip-bg: linear-gradient(135deg,#fff,#e2e8f0,#f3e8ff); --chip-border:#d8b4fe; --text-primary:#1f2937; --text-accent:#6d28d9; --text-shadow:rgba(216,180,254,.6); --card-border:rgba(216,180,254,.42); --card-glow:0 0 30px rgba(203,213,225,.3); }
.theme-quartz-crest { --card-bg: linear-gradient(135deg,#e2e8f0,#94a3b8,#ddd6fe); --chip-bg:linear-gradient(135deg,#fff,#dbeafe,#f5f3ff); --chip-border:#c4b5fd; --text-primary:#0f172a; --text-accent:#475569; --text-shadow:rgba(196,181,253,.6); --card-border:rgba(196,181,253,.42); --card-glow:0 0 30px rgba(148,163,184,.3); }
.theme-quartz-pulse { --card-bg:linear-gradient(135deg,#f8fafc,#cbd5e1,#c084fc); --chip-bg:linear-gradient(135deg,#fff,#e2e8f0,#f3e8ff); --chip-border:#c084fc; --text-primary:#1f2937; --text-accent:#6d28d9; --text-shadow:rgba(192,132,252,.6); --card-border:rgba(192,132,252,.42); --card-glow:0 0 30px rgba(203,213,225,.3); }
.theme-quartz-breeze { --card-bg:linear-gradient(135deg,#f1f5f9,#dbeafe,#f5d0fe); --chip-bg:linear-gradient(135deg,#fff,#f8fafc,#fdf2f8); --chip-border:#f5d0fe; --text-primary:#1f2937; --text-accent:#7c3aed; --text-shadow:rgba(245,208,254,.6); --card-border:rgba(245,208,254,.42); --card-glow:0 0 30px rgba(219,234,254,.3); }
.theme-quartz-arc { --card-bg:linear-gradient(135deg,#cbd5e1,#a78bfa,#f8fafc); --chip-bg:linear-gradient(135deg,#fff,#ede9fe,#e2e8f0); --chip-border:#a78bfa; --text-primary:#1f2937; --text-accent:#6d28d9; --text-shadow:rgba(167,139,250,.6); --card-border:rgba(167,139,250,.42); --card-glow:0 0 30px rgba(167,139,250,.3); }
.theme-bramble-veil { --card-bg:linear-gradient(135deg,#3f6212,#7e22ce,#f9a8d4); --chip-bg:linear-gradient(135deg,#f7fee7,#f3e8ff,#fdf2f8); --chip-border:#f9a8d4; --text-primary:#f7fee7; --text-accent:#f5d0fe; --text-shadow:rgba(249,168,212,.6); --card-border:rgba(249,168,212,.42); --card-glow:0 0 30px rgba(126,34,206,.3); }
.theme-bramble-crest { --card-bg:linear-gradient(135deg,#365314,#6d28d9,#e879f9); --chip-bg:linear-gradient(135deg,#ecfccb,#f3e8ff,#fce7f3); --chip-border:#e879f9; --text-primary:#f7fee7; --text-accent:#f5d0fe; --text-shadow:rgba(232,121,249,.6); --card-border:rgba(232,121,249,.42); --card-glow:0 0 30px rgba(109,40,217,.3); }
.theme-bramble-pulse { --card-bg:linear-gradient(135deg,#14532d,#a21caf,#bef264); --chip-bg:linear-gradient(135deg,#ecfdf5,#fdf4ff,#d9f99d); --chip-border:#bef264; --text-primary:#ecfdf5; --text-accent:#d9f99d; --text-shadow:rgba(190,242,100,.6); --card-border:rgba(190,242,100,.42); --card-glow:0 0 30px rgba(162,28,175,.3); }
.theme-bramble-breeze { --card-bg:linear-gradient(135deg,#4d7c0f,#c026d3,#fbcfe8); --chip-bg:linear-gradient(135deg,#f7fee7,#fdf4ff,#fce7f3); --chip-border:#fbcfe8; --text-primary:#f7fee7; --text-accent:#f5d0fe; --text-shadow:rgba(251,207,232,.6); --card-border:rgba(251,207,232,.42); --card-glow:0 0 30px rgba(192,38,211,.3); }
.theme-bramble-arc { --card-bg:linear-gradient(135deg,#052e16,#7e22ce,#d9f99d); --chip-bg:linear-gradient(135deg,#ecfdf5,#f3e8ff,#ecfccb); --chip-border:#d9f99d; --text-primary:#f0fdf4; --text-accent:#d9f99d; --text-shadow:rgba(217,249,157,.6); --card-border:rgba(217,249,157,.42); --card-glow:0 0 30px rgba(126,34,206,.3); }
.theme-electric-veil { --card-bg:linear-gradient(135deg,#172554,#4f46e5,#22d3ee); --chip-bg:linear-gradient(135deg,#eef2ff,#dbeafe,#cffafe); --chip-border:#22d3ee; --text-primary:#f0f9ff; --text-accent:#cffafe; --text-shadow:rgba(34,211,238,.6); --card-border:rgba(34,211,238,.42); --card-glow:0 0 30px rgba(79,70,229,.3); }
.theme-electric-crest { --card-bg:linear-gradient(135deg,#0f172a,#2563eb,#67e8f9); --chip-bg:linear-gradient(135deg,#eff6ff,#dbeafe,#ecfeff); --chip-border:#67e8f9; --text-primary:#f0f9ff; --text-accent:#cffafe; --text-shadow:rgba(103,232,249,.6); --card-border:rgba(103,232,249,.42); --card-glow:0 0 30px rgba(37,99,235,.3); }
.theme-electric-pulse { --card-bg:linear-gradient(135deg,#1e3a8a,#6366f1,#a5f3fc); --chip-bg:linear-gradient(135deg,#eef2ff,#dbeafe,#cffafe); --chip-border:#a5f3fc; --text-primary:#f0f9ff; --text-accent:#cffafe; --text-shadow:rgba(165,243,252,.6); --card-border:rgba(165,243,252,.42); --card-glow:0 0 30px rgba(99,102,241,.3); }
.theme-electric-breeze { --card-bg:linear-gradient(135deg,#312e81,#3b82f6,#67e8f9); --chip-bg:linear-gradient(135deg,#eef2ff,#dbeafe,#ecfeff); --chip-border:#67e8f9; --text-primary:#f0f9ff; --text-accent:#dbeafe; --text-shadow:rgba(103,232,249,.6); --card-border:rgba(103,232,249,.42); --card-glow:0 0 30px rgba(59,130,246,.3); }
.theme-electric-arc { --card-bg:linear-gradient(135deg,#172554,#4f46e5,#a5f3fc); --chip-bg:linear-gradient(135deg,#eef2ff,#dbeafe,#cffafe); --chip-border:#a5f3fc; --text-primary:#f0f9ff; --text-accent:#cffafe; --text-shadow:rgba(165,243,252,.6); --card-border:rgba(165,243,252,.42); --card-glow:0 0 30px rgba(23,37,84,.35); }
.theme-aurora-prism { --card-bg: linear-gradient(135deg, #082f49, #2563eb, #a78bfa, #22d3ee); --chip-bg: linear-gradient(135deg, #eff6ff, #e0e7ff, #cffafe); --chip-border: #67e8f9; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(37, 99, 235, 0.3); }
.theme-ember-orbit { --card-bg: linear-gradient(135deg, #431407, #c2410c, #facc15, #9f1239); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #ffe4e6); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(234, 88, 12, 0.3); }
.theme-rose-comet { --card-bg: linear-gradient(135deg, #500724, #be185d, #fb7185, #f5d0fe); --chip-bg: linear-gradient(135deg, #fff1f2, #fbcfe8, #f3e8ff); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-jade-mirage { --card-bg: linear-gradient(135deg, #022c22, #0f766e, #34d399, #d9f99d); --chip-bg: linear-gradient(135deg, #ecfdf5, #ccfbf1, #d9f99d); --chip-border: #86efac; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(134, 239, 172, 0.6); --card-border: rgba(134, 239, 172, 0.42); --card-glow: 0 0 30px rgba(20, 184, 166, 0.3); }
.theme-sapphire-dusk { --card-bg: linear-gradient(135deg, #082f49, #1d4ed8, #312e81, #c4b5fd); --chip-bg: linear-gradient(135deg, #eff6ff, #dbeafe, #e9d5ff); --chip-border: #93c5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(147, 197, 253, 0.6); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 0 30px rgba(29, 78, 216, 0.3); }
.theme-golden-mist { --card-bg: linear-gradient(135deg, #3a2400, #a16207, #facc15, #fef3c7); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fde68a); --chip-border: #fbbf24; --text-primary: #3a2400; --text-accent: #7c2d12; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(245, 158, 11, 0.28); }
.theme-violet-river { --card-bg: linear-gradient(135deg, #1e1b4b, #6d28d9, #a855f7, #67e8f9); --chip-bg: linear-gradient(135deg, #f5f3ff, #e9d5ff, #cffafe); --chip-border: #c4b5fd; --text-primary: #faf5ff; --text-accent: #ddd6fe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 0 30px rgba(109, 40, 217, 0.3); }
.theme-coral-moon { --card-bg: linear-gradient(135deg, #7c2d12, #f97316, #fb7185, #312e81); --chip-bg: linear-gradient(135deg, #fff7ed, #fecdd3, #ddd6fe); --chip-border: #fda4af; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(253, 164, 175, 0.6); --card-border: rgba(253, 164, 175, 0.42); --card-glow: 0 0 30px rgba(249, 115, 22, 0.3); }
.theme-mint-signal { --card-bg: linear-gradient(135deg, #052e16, #10b981, #5eead4, #e0f2fe); --chip-bg: linear-gradient(135deg, #ecfdf5, #ccfbf1, #cffafe); --chip-border: #5eead4; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(94, 234, 212, 0.6); --card-border: rgba(94, 234, 212, 0.42); --card-glow: 0 0 30px rgba(16, 185, 129, 0.3); }
.theme-onyx-aurora { --card-bg: linear-gradient(135deg, #0a0a0a, #1f2937, #4338ca, #38bdf8); --chip-bg: linear-gradient(135deg, #f8fafc, #dbeafe, #e0e7ff); --chip-border: #818cf8; --text-primary: #f8fafc; --text-accent: #dbeafe; --text-shadow: rgba(129, 140, 248, 0.6); --card-border: rgba(129, 140, 248, 0.42); --card-glow: 0 0 30px rgba(67, 56, 202, 0.3); }
.theme-pearl-cinder { --card-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #fbbf24, #fed7aa); --chip-bg: linear-gradient(135deg, #fff, #fef3c7, #f8fafc); --chip-border: #fbbf24; --text-primary: #1f2937; --text-accent: #92400e; --text-shadow: rgba(251, 191, 36, 0.5); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 24px rgba(251, 191, 36, 0.24); }
.theme-plum-tide { --card-bg: linear-gradient(135deg, #2e1065, #7e22ce, #f0abfc, #0e7490); --chip-bg: linear-gradient(135deg, #f5f3ff, #f5d0fe, #cffafe); --chip-border: #f0abfc; --text-primary: #faf5ff; --text-accent: #f3e8ff; --text-shadow: rgba(240, 171, 252, 0.6); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 0 30px rgba(126, 34, 206, 0.3); }
.theme-forest-prism { --card-bg: linear-gradient(135deg, #022c22, #166534, #84cc16, #7c3aed); --chip-bg: linear-gradient(135deg, #ecfdf5, #d9f99d, #ede9fe); --chip-border: #a3e635; --text-primary: #f0fdf4; --text-accent: #d9f99d; --text-shadow: rgba(163, 230, 53, 0.6); --card-border: rgba(163, 230, 53, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-arctic-rose { --card-bg: linear-gradient(135deg, #e0f2fe, #93c5fd, #f9a8d4, #fff1f2); --chip-bg: linear-gradient(135deg, #eff6ff, #fbcfe8, #f8fafc); --chip-border: #f9a8d4; --text-primary: #082f49; --text-accent: #be185d; --text-shadow: rgba(249, 168, 212, 0.5); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 24px rgba(147, 197, 253, 0.24); }
.theme-copper-night { --card-bg: linear-gradient(135deg, #1f2937, #4b5563, #b45309, #f97316); --chip-bg: linear-gradient(135deg, #f5f5f4, #fed7aa, #fef3c7); --chip-border: #d97706; --text-primary: #fff7ed; --text-accent: #fed7aa; --text-shadow: rgba(217, 119, 6, 0.6); --card-border: rgba(217, 119, 6, 0.42); --card-glow: 0 0 30px rgba(180, 83, 9, 0.3); }
.theme-sky-lotus { --card-bg: linear-gradient(135deg, #082f49, #0ea5e9, #c4b5fd, #f5f3ff); --chip-bg: linear-gradient(135deg, #ecfeff, #dbeafe, #f5f3ff); --chip-border: #c4b5fd; --text-primary: #f0f9ff; --text-accent: #dbeafe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-ruby-mist { --card-bg: linear-gradient(135deg, #4c0519, #9f1239, #f43f5e, #fecdd3); --chip-bg: linear-gradient(135deg, #fff1f2, #fecdd3, #fbcfe8); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(159, 18, 57, 0.3); }
.theme-lime-velvet { --card-bg: linear-gradient(135deg, #052e16, #65a30d, #bef264, #1e1b4b); --chip-bg: linear-gradient(135deg, #ecfdf5, #d9f99d, #ede9fe); --chip-border: #bef264; --text-primary: #f7fee7; --text-accent: #d9f99d; --text-shadow: rgba(190, 242, 100, 0.6); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 0 30px rgba(101, 163, 13, 0.3); }
.theme-indigo-coral { --card-bg: linear-gradient(135deg, #1e1b4b, #4338ca, #fb7185, #f97316); --chip-bg: linear-gradient(135deg, #eef2ff, #fecdd3, #fed7aa); --chip-border: #fb7185; --text-primary: #f5f3ff; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(67, 56, 202, 0.3); }
.theme-sunset-pearl { --card-bg: linear-gradient(135deg, #7c2d12, #f97316, #fbbf24, #f8fafc); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #f8fafc); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(249, 115, 22, 0.3); }
.theme-teal-iris { --card-bg: linear-gradient(135deg, #042f2e, #0f766e, #67e8f9, #c4b5fd); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #f5f3ff); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #dbeafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(15, 118, 110, 0.3); }
.theme-bronze-moon { --card-bg: linear-gradient(135deg, #3a2400, #92400e, #d97706, #312e81); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #e0e7ff); --chip-border: #fbbf24; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(146, 64, 14, 0.3); }
.theme-fuchsia-haze { --card-bg: linear-gradient(135deg, #4a044e, #a21caf, #f0abfc, #fce7f3); --chip-bg: linear-gradient(135deg, #fdf4ff, #f5d0fe, #fce7f3); --chip-border: #f0abfc; --text-primary: #fdf4ff; --text-accent: #f5d0fe; --text-shadow: rgba(240, 171, 252, 0.6); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 0 30px rgba(162, 28, 175, 0.3); }
.theme-emerald-flare { --card-bg: linear-gradient(135deg, #022c22, #059669, #34d399, #facc15); --chip-bg: linear-gradient(135deg, #ecfdf5, #bbf7d0, #fef3c7); --chip-border: #34d399; --text-primary: #ecfdf5; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(5, 150, 105, 0.3); }
.theme-cobalt-rose { --card-bg: linear-gradient(135deg, #082f49, #1d4ed8, #f472b6, #fdf2f8); --chip-bg: linear-gradient(135deg, #eff6ff, #fbcfe8, #fdf2f8); --chip-border: #f472b6; --text-primary: #f0f9ff; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.6); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 0 30px rgba(29, 78, 216, 0.3); }
.theme-honey-iris { --card-bg: linear-gradient(135deg, #451a03, #d97706, #fbbf24, #a78bfa); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #ede9fe); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(217, 119, 6, 0.3); }
.theme-river-ember { --card-bg: linear-gradient(135deg, #082f49, #0ea5e9, #f97316, #7c2d12); --chip-bg: linear-gradient(135deg, #ecfeff, #fed7aa, #fff7ed); --chip-border: #f97316; --text-primary: #f0f9ff; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-velvet-lime { --card-bg: linear-gradient(135deg, #1e1b4b, #6d28d9, #bef264, #052e16); --chip-bg: linear-gradient(135deg, #f5f3ff, #d9f99d, #ecfdf5); --chip-border: #bef264; --text-primary: #faf5ff; --text-accent: #d9f99d; --text-shadow: rgba(190, 242, 100, 0.6); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 0 30px rgba(109, 40, 217, 0.3); }
.theme-opal-ember { --card-bg: linear-gradient(135deg, #f5f3ff, #bfdbfe, #fbbf24, #f97316); --chip-bg: linear-gradient(135deg, #fff, #dbeafe, #fef3c7); --chip-border: #fbbf24; --text-primary: #1f2937; --text-accent: #92400e; --text-shadow: rgba(251, 191, 36, 0.5); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 24px rgba(191, 219, 254, 0.24); }
.theme-moon-jade { --card-bg: linear-gradient(135deg, #0f172a, #134e4a, #34d399, #d9f99d); --chip-bg: linear-gradient(135deg, #ecfeff, #ccfbf1, #d9f99d); --chip-border: #5eead4; --text-primary: #ecfeff; --text-accent: #bbf7d0; --text-shadow: rgba(94, 234, 212, 0.6); --card-border: rgba(94, 234, 212, 0.42); --card-glow: 0 0 30px rgba(19, 78, 74, 0.3); }
.theme-rose-onyx { --card-bg: linear-gradient(135deg, #1f2937, #4c0519, #be185d, #fda4af); --chip-bg: linear-gradient(135deg, #f5f5f4, #fecdd3, #fdf2f8); --chip-border: #fda4af; --text-primary: #fff1f2; --text-accent: #fecdd3; --text-shadow: rgba(253, 164, 175, 0.6); --card-border: rgba(253, 164, 175, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-aqua-velvet { --card-bg: linear-gradient(135deg, #042f2e, #0891b2, #67e8f9, #a78bfa); --chip-bg: linear-gradient(135deg, #ecfeff, #cffafe, #ede9fe); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #dbeafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-ruby-lotus { --card-bg: linear-gradient(135deg, #4c0519, #be185d, #f9a8d4, #c4b5fd); --chip-bg: linear-gradient(135deg, #fff1f2, #fbcfe8, #f5f3ff); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-slate-flame { --card-bg: linear-gradient(135deg, #0f172a, #475569, #f97316, #fbbf24); --chip-bg: linear-gradient(135deg, #f8fafc, #fed7aa, #fef3c7); --chip-border: #f97316; --text-primary: #f8fafc; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 0 30px rgba(71, 85, 105, 0.3); }
.theme-iris-copper { --card-bg: linear-gradient(135deg, #312e81, #7c3aed, #d97706, #fef3c7); --chip-bg: linear-gradient(135deg, #eef2ff, #fef3c7, #f3e8ff); --chip-border: #d97706; --text-primary: #f5f3ff; --text-accent: #fef3c7; --text-shadow: rgba(217, 119, 6, 0.6); --card-border: rgba(217, 119, 6, 0.42); --card-glow: 0 0 30px rgba(124, 58, 237, 0.3); }
.theme-forest-ice { --card-bg: linear-gradient(135deg, #022c22, #166534, #93c5fd, #e0f2fe); --chip-bg: linear-gradient(135deg, #ecfdf5, #dbeafe, #f8fafc); --chip-border: #93c5fd; --text-primary: #f0fdf4; --text-accent: #dbeafe; --text-shadow: rgba(147, 197, 253, 0.6); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-sunstone-rose { --card-bg: linear-gradient(135deg, #3a2400, #f59e0b, #fb7185, #fbcfe8); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fdf2f8); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(245, 158, 11, 0.3); }
.theme-glass-orchid { --card-bg: linear-gradient(135deg, #0f172a, #0ea5e9, #d8b4fe, #f5d0fe); --chip-bg: linear-gradient(135deg, #ecfeff, #e9d5ff, #fdf2f8); --chip-border: #d8b4fe; --text-primary: #f0f9ff; --text-accent: #f5d0fe; --text-shadow: rgba(216, 180, 254, 0.6); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-cinder-jade { --card-bg: linear-gradient(135deg, #431407, #c2410c, #10b981, #052e16); --chip-bg: linear-gradient(135deg, #fff7ed, #bbf7d0, #ecfdf5); --chip-border: #34d399; --text-primary: #fff7ed; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(194, 65, 12, 0.3); }
.theme-frost-ember { --card-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #f97316, #7c2d12); --chip-bg: linear-gradient(135deg, #eff6ff, #fed7aa, #fff7ed); --chip-border: #f97316; --text-primary: #082f49; --text-accent: #9a3412; --text-shadow: rgba(249, 115, 22, 0.55); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 0 28px rgba(147, 197, 253, 0.24); }
.theme-plum-sapphire { --card-bg: linear-gradient(135deg, #2e1065, #7e22ce, #2563eb, #93c5fd); --chip-bg: linear-gradient(135deg, #f3e8ff, #dbeafe, #e9d5ff); --chip-border: #a78bfa; --text-primary: #faf5ff; --text-accent: #dbeafe; --text-shadow: rgba(167, 139, 250, 0.6); --card-border: rgba(167, 139, 250, 0.42); --card-glow: 0 0 30px rgba(126, 34, 206, 0.3); }
.theme-amber-ocean { --card-bg: linear-gradient(135deg, #451a03, #f59e0b, #0ea5e9, #082f49); --chip-bg: linear-gradient(135deg, #fff7ed, #dbeafe, #ecfeff); --chip-border: #f59e0b; --text-primary: #fff7ed; --text-accent: #dbeafe; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-mauve-cove { --card-bg: linear-gradient(135deg, #312e81, #7c3aed, #f0abfc, #fef3c7); --chip-bg: linear-gradient(135deg, #f5f3ff, #f5d0fe, #fef3c7); --chip-border: #f0abfc; --text-primary: #faf5ff; --text-accent: #f5d0fe; --text-shadow: rgba(240, 171, 252, 0.6); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 0 30px rgba(124, 58, 237, 0.3); }
.theme-cyan-ember { --card-bg: linear-gradient(135deg, #082f49, #0891b2, #f59e0b, #431407); --chip-bg: linear-gradient(135deg, #ecfeff, #fef3c7, #fff7ed); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #fef3c7; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-rose-sapphire { --card-bg: linear-gradient(135deg, #500724, #be185d, #2563eb, #dbeafe); --chip-bg: linear-gradient(135deg, #fff1f2, #dbeafe, #fbcfe8); --chip-border: #93c5fd; --text-primary: #fff1f2; --text-accent: #dbeafe; --text-shadow: rgba(147, 197, 253, 0.6); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-moss-copper { --card-bg: linear-gradient(135deg, #052e16, #166534, #b45309, #fbbf24); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #fed7aa); --chip-border: #b45309; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(180, 83, 9, 0.6); --card-border: rgba(180, 83, 9, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-lilac-ocean { --card-bg: linear-gradient(135deg, #312e81, #a855f7, #0ea5e9, #cffafe); --chip-bg: linear-gradient(135deg, #f5f3ff, #dbeafe, #ecfeff); --chip-border: #a5f3fc; --text-primary: #f5f3ff; --text-accent: #dbeafe; --text-shadow: rgba(165, 243, 252, 0.6); --card-border: rgba(165, 243, 252, 0.42); --card-glow: 0 0 30px rgba(168, 85, 247, 0.3); }
.theme-silver-ember { --card-bg: linear-gradient(135deg, #f8fafc, #cbd5e1, #f97316, #431407); --chip-bg: linear-gradient(135deg, #f8fafc, #fed7aa, #fff7ed); --chip-border: #fb923c; --text-primary: #1f2937; --text-accent: #9a3412; --text-shadow: rgba(251, 146, 60, 0.5); --card-border: rgba(251, 146, 60, 0.42); --card-glow: 0 0 24px rgba(203, 213, 225, 0.24); }
.theme-verdant-iris { --card-bg: linear-gradient(135deg, #022c22, #059669, #7c3aed, #d8b4fe); --chip-bg: linear-gradient(135deg, #ecfdf5, #e9d5ff, #f5f3ff); --chip-border: #a78bfa; --text-primary: #f0fdf4; --text-accent: #e9d5ff; --text-shadow: rgba(167, 139, 250, 0.6); --card-border: rgba(167, 139, 250, 0.42); --card-glow: 0 0 30px rgba(5, 150, 105, 0.3); }
.theme-coral-sky { --card-bg: linear-gradient(135deg, #7c2d12, #f97316, #60a5fa, #e0f2fe); --chip-bg: linear-gradient(135deg, #fff7ed, #dbeafe, #eff6ff); --chip-border: #60a5fa; --text-primary: #fff7ed; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.6); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 0 30px rgba(249, 115, 22, 0.3); }
.theme-noir-gold { --card-bg: linear-gradient(135deg, #0a0a0a, #1f2937, #d97706, #fef3c7); --chip-bg: linear-gradient(135deg, #f5f5f4, #fef3c7, #fff7ed); --chip-border: #d97706; --text-primary: #fffbeb; --text-accent: #fef3c7; --text-shadow: rgba(217, 119, 6, 0.6); --card-border: rgba(217, 119, 6, 0.42); --card-glow: 0 0 30px rgba(10, 10, 10, 0.5); }
.theme-spring-reef { --card-bg: linear-gradient(135deg, #052e16, #22c55e, #67e8f9, #fef08a); --chip-bg: linear-gradient(135deg, #ecfdf5, #cffafe, #fef3c7); --chip-border: #67e8f9; --text-primary: #f0fdf4; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(34, 197, 94, 0.3); }
.theme-dusk-mint { --card-bg: linear-gradient(135deg, #1e1b4b, #312e81, #34d399, #ccfbf1); --chip-bg: linear-gradient(135deg, #eef2ff, #ecfdf5, #ccfbf1); --chip-border: #34d399; --text-primary: #f5f3ff; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(49, 46, 129, 0.3); }
.theme-cherry-ice { --card-bg: linear-gradient(135deg, #4c0519, #e11d48, #93c5fd, #eff6ff); --chip-bg: linear-gradient(135deg, #fff1f2, #dbeafe, #f8fafc); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #dbeafe; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(225, 29, 72, 0.3); }
.theme-indigo-honey { --card-bg: linear-gradient(135deg, #1e1b4b, #4338ca, #fbbf24, #fef3c7); --chip-bg: linear-gradient(135deg, #eef2ff, #fef3c7, #fff7ed); --chip-border: #fbbf24; --text-primary: #f5f3ff; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(67, 56, 202, 0.3); }
.theme-azure-rose { --card-bg: linear-gradient(135deg, #082f49, #0ea5e9, #f472b6, #fdf2f8); --chip-bg: linear-gradient(135deg, #ecfeff, #fbcfe8, #fdf2f8); --chip-border: #f472b6; --text-primary: #f0f9ff; --text-accent: #fbcfe8; --text-shadow: rgba(244, 114, 182, 0.6); --card-border: rgba(244, 114, 182, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-ember-lotus { --card-bg: linear-gradient(135deg, #431407, #c2410c, #f5d0fe, #f5f3ff); --chip-bg: linear-gradient(135deg, #fff7ed, #f5d0fe, #f5f3ff); --chip-border: #f5d0fe; --text-primary: #fff7ed; --text-accent: #f5d0fe; --text-shadow: rgba(245, 208, 254, 0.6); --card-border: rgba(245, 208, 254, 0.42); --card-glow: 0 0 30px rgba(194, 65, 12, 0.3); }
.theme-forest-gold { --card-bg: linear-gradient(135deg, #022c22, #166534, #facc15, #fef3c7); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #fff7ed); --chip-border: #facc15; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-moon-coral { --card-bg: linear-gradient(135deg, #0f172a, #312e81, #fb7185, #f97316); --chip-bg: linear-gradient(135deg, #eef2ff, #fecdd3, #fed7aa); --chip-border: #fb7185; --text-primary: #f5f3ff; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(49, 46, 129, 0.3); }
.theme-sapphire-ember { --card-bg: linear-gradient(135deg, #082f49, #0369a1, #f59e0b, #431407); --chip-bg: linear-gradient(135deg, #eff6ff, #fef3c7, #fff7ed); --chip-border: #60a5fa; --text-primary: #f0f9ff; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 0 30px rgba(3, 105, 161, 0.3); }
.theme-lilac-ember { --card-bg: linear-gradient(135deg, #2e1065, #a855f7, #f59e0b, #fef3c7); --chip-bg: linear-gradient(135deg, #f5f3ff, #fef3c7, #f3e8ff); --chip-border: #f0abfc; --text-primary: #faf5ff; --text-accent: #fef3c7; --text-shadow: rgba(240, 171, 252, 0.6); --card-border: rgba(240, 171, 252, 0.42); --card-glow: 0 0 30px rgba(168, 85, 247, 0.3); }
.theme-teal-sunset { --card-bg: linear-gradient(135deg, #042f2e, #0f766e, #f97316, #fb7185); --chip-bg: linear-gradient(135deg, #ecfdf5, #fed7aa, #fecdd3); --chip-border: #f97316; --text-primary: #ecfeff; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 0 30px rgba(15, 118, 110, 0.3); }
.theme-pearl-jade { --card-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #34d399, #bbf7d0); --chip-bg: linear-gradient(135deg, #fff, #ecfdf5, #ccfbf1); --chip-border: #34d399; --text-primary: #1f2937; --text-accent: #166534; --text-shadow: rgba(52, 211, 153, 0.5); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 24px rgba(226, 232, 240, 0.24); }
.theme-copper-iris { --card-bg: linear-gradient(135deg, #3a1f09, #b45309, #7c3aed, #ddd6fe); --chip-bg: linear-gradient(135deg, #fff7ed, #e9d5ff, #f5f3ff); --chip-border: #d97706; --text-primary: #fff7ed; --text-accent: #ddd6fe; --text-shadow: rgba(216, 180, 254, 0.6); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 0 30px rgba(180, 83, 9, 0.3); }
.theme-ruby-ocean { --card-bg: linear-gradient(135deg, #4c0519, #be185d, #0ea5e9, #cffafe); --chip-bg: linear-gradient(135deg, #fff1f2, #cffafe, #fbcfe8); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-graphite-rose { --card-bg: linear-gradient(135deg, #111827, #4b5563, #be185d, #f9a8d4); --chip-bg: linear-gradient(135deg, #f8fafc, #fbcfe8, #fdf2f8); --chip-border: #f9a8d4; --text-primary: #f8fafc; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 30px rgba(75, 85, 99, 0.3); }
.theme-mint-gold { --card-bg: linear-gradient(135deg, #052e16, #10b981, #facc15, #fef3c7); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #ccfbf1); --chip-border: #34d399; --text-primary: #ecfdf5; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(16, 185, 129, 0.3); }
.theme-dusk-orchid { --card-bg: linear-gradient(135deg, #1e1b4b, #312e81, #d8b4fe, #f5d0fe); --chip-bg: linear-gradient(135deg, #eef2ff, #f3e8ff, #f5d0fe); --chip-border: #d8b4fe; --text-primary: #f5f3ff; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, 0.6); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 0 30px rgba(49, 46, 129, 0.3); }
.theme-amber-rose { --card-bg: linear-gradient(135deg, #451a03, #f59e0b, #fb7185, #fdf2f8); --chip-bg: linear-gradient(135deg, #fff7ed, #fecdd3, #fdf2f8); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(245, 158, 11, 0.3); }
.theme-verdant-cyan { --card-bg: linear-gradient(135deg, #022c22, #059669, #06b6d4, #cffafe); --chip-bg: linear-gradient(135deg, #ecfdf5, #cffafe, #ccfbf1); --chip-border: #22d3ee; --text-primary: #ecfdf5; --text-accent: #cffafe; --text-shadow: rgba(34, 211, 238, 0.6); --card-border: rgba(34, 211, 238, 0.42); --card-glow: 0 0 30px rgba(5, 150, 105, 0.3); }
.theme-silver-orchid { --card-bg: linear-gradient(135deg, #f8fafc, #cbd5e1, #c084fc, #f5d0fe); --chip-bg: linear-gradient(135deg, #fff, #f3e8ff, #f5d0fe); --chip-border: #c084fc; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(192, 132, 252, 0.5); --card-border: rgba(192, 132, 252, 0.42); --card-glow: 0 0 24px rgba(203, 213, 225, 0.24); }
.theme-solar-jade { --card-bg: linear-gradient(135deg, #3a2400, #f59e0b, #22c55e, #d9f99d); --chip-bg: linear-gradient(135deg, #fff7ed, #ecfdf5, #d9f99d); --chip-border: #facc15; --text-primary: #fff7ed; --text-accent: #d9f99d; --text-shadow: rgba(132, 204, 22, 0.6); --card-border: rgba(132, 204, 22, 0.42); --card-glow: 0 0 30px rgba(245, 158, 11, 0.3); }
.theme-ocean-orchid { --card-bg: linear-gradient(135deg, #082f49, #0ea5e9, #a855f7, #f5d0fe); --chip-bg: linear-gradient(135deg, #ecfeff, #f3e8ff, #f5d0fe); --chip-border: #a5f3fc; --text-primary: #f0f9ff; --text-accent: #f3e8ff; --text-shadow: rgba(165, 243, 252, 0.6); --card-border: rgba(165, 243, 252, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-cinder-sapphire { --card-bg: linear-gradient(135deg, #431407, #c2410c, #2563eb, #93c5fd); --chip-bg: linear-gradient(135deg, #fff7ed, #dbeafe, #eff6ff); --chip-border: #60a5fa; --text-primary: #fff7ed; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.6); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 0 30px rgba(194, 65, 12, 0.3); }
.theme-rose-jade { --card-bg: linear-gradient(135deg, #500724, #be185d, #34d399, #ecfdf5); --chip-bg: linear-gradient(135deg, #fff1f2, #ecfdf5, #fbcfe8); --chip-border: #34d399; --text-primary: #fff1f2; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-ice-gold { --card-bg: linear-gradient(135deg, #e0f2fe, #93c5fd, #facc15, #fff7ed); --chip-bg: linear-gradient(135deg, #eff6ff, #fef3c7, #fff7ed); --chip-border: #93c5fd; --text-primary: #082f49; --text-accent: #92400e; --text-shadow: rgba(147, 197, 253, 0.5); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 0 24px rgba(147, 197, 253, 0.24); }
.theme-lotus-cobalt { --card-bg: linear-gradient(135deg, #f5f3ff, #c4b5fd, #1d4ed8, #082f49); --chip-bg: linear-gradient(135deg, #fff, #dbeafe, #f5f3ff); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #dbeafe; --text-shadow: rgba(196, 181, 253, 0.6); --card-border: rgba(196, 181, 253, 0.42); --card-glow: 0 0 30px rgba(29, 78, 216, 0.3); }
.theme-coral-gold { --card-bg: linear-gradient(135deg, #7c2d12, #f97316, #facc15, #fef3c7); --chip-bg: linear-gradient(135deg, #fff7ed, #fef3c7, #fed7aa); --chip-border: #facc15; --text-primary: #fff7ed; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(249, 115, 22, 0.3); }
.theme-moss-rose { --card-bg: linear-gradient(135deg, #052e16, #166534, #fb7185, #fbcfe8); --chip-bg: linear-gradient(135deg, #ecfdf5, #fbcfe8, #fdf2f8); --chip-border: #fb7185; --text-primary: #f0fdf4; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-indigo-pearl { --card-bg: linear-gradient(135deg, #1e1b4b, #4338ca, #e2e8f0, #f8fafc); --chip-bg: linear-gradient(135deg, #eef2ff, #f8fafc, #dbeafe); --chip-border: #cbd5e1; --text-primary: #f5f3ff; --text-accent: #e2e8f0; --text-shadow: rgba(203, 213, 225, 0.6); --card-border: rgba(203, 213, 225, 0.42); --card-glow: 0 0 30px rgba(67, 56, 202, 0.3); }
.theme-saffron-ice { --card-bg: linear-gradient(135deg, #3a2400, #f59e0b, #bfdbfe, #eff6ff); --chip-bg: linear-gradient(135deg, #fff7ed, #dbeafe, #f8fafc); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #dbeafe; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(245, 158, 11, 0.3); }
.theme-violet-garden { --card-bg: linear-gradient(135deg, #2e1065, #7c3aed, #22c55e, #bbf7d0); --chip-bg: linear-gradient(135deg, #f5f3ff, #ecfdf5, #d9f99d); --chip-border: #22c55e; --text-primary: #faf5ff; --text-accent: #bbf7d0; --text-shadow: rgba(34, 197, 94, 0.6); --card-border: rgba(34, 197, 94, 0.42); --card-glow: 0 0 30px rgba(124, 58, 237, 0.3); }
.theme-aqua-gold { --card-bg: linear-gradient(135deg, #042f2e, #0891b2, #facc15, #fff7ed); --chip-bg: linear-gradient(135deg, #ecfeff, #fef3c7, #fff7ed); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #fef3c7; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-ember-violet { --card-bg: linear-gradient(135deg, #431407, #f97316, #7c3aed, #d8b4fe); --chip-bg: linear-gradient(135deg, #fff7ed, #f3e8ff, #f5d0fe); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #e9d5ff; --text-shadow: rgba(216, 180, 254, 0.6); --card-border: rgba(216, 180, 254, 0.42); --card-glow: 0 0 30px rgba(249, 115, 22, 0.3); }
.theme-rose-cyan { --card-bg: linear-gradient(135deg, #500724, #be185d, #06b6d4, #cffafe); --chip-bg: linear-gradient(135deg, #fff1f2, #cffafe, #fbcfe8); --chip-border: #22d3ee; --text-primary: #fff1f2; --text-accent: #cffafe; --text-shadow: rgba(34, 211, 238, 0.6); --card-border: rgba(34, 211, 238, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-jade-saffron { --card-bg: linear-gradient(135deg, #022c22, #0f766e, #facc15, #3a2400); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #fff7ed); --chip-border: #34d399; --text-primary: #ecfdf5; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(15, 118, 110, 0.3); }
.theme-sapphire-lotus { --card-bg: linear-gradient(135deg, #082f49, #2563eb, #f5d0fe, #f5f3ff); --chip-bg: linear-gradient(135deg, #eff6ff, #f5d0fe, #f5f3ff); --chip-border: #93c5fd; --text-primary: #f0f9ff; --text-accent: #f5d0fe; --text-shadow: rgba(147, 197, 253, 0.6); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 0 30px rgba(37, 99, 235, 0.3); }
.theme-copper-jade { --card-bg: linear-gradient(135deg, #3a1f09, #b45309, #34d399, #ecfdf5); --chip-bg: linear-gradient(135deg, #fff7ed, #ecfdf5, #ccfbf1); --chip-border: #34d399; --text-primary: #fff7ed; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(180, 83, 9, 0.3); }
.theme-moon-sapphire { --card-bg: linear-gradient(135deg, #0f172a, #312e81, #60a5fa, #dbeafe); --chip-bg: linear-gradient(135deg, #eef2ff, #dbeafe, #eff6ff); --chip-border: #60a5fa; --text-primary: #f5f3ff; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.6); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 0 30px rgba(49, 46, 129, 0.3); }
.theme-garnet-gold { --card-bg: linear-gradient(135deg, #4c0519, #9f1239, #f59e0b, #fef3c7); --chip-bg: linear-gradient(135deg, #fff1f2, #fef3c7, #fff7ed); --chip-border: #f59e0b; --text-primary: #fff1f2; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 0 30px rgba(159, 18, 57, 0.3); }
.theme-forest-rose { --card-bg: linear-gradient(135deg, #022c22, #166534, #be185d, #f9a8d4); --chip-bg: linear-gradient(135deg, #ecfdf5, #fbcfe8, #fdf2f8); --chip-border: #f9a8d4; --text-primary: #f0fdf4; --text-accent: #fbcfe8; --text-shadow: rgba(249, 168, 212, 0.6); --card-border: rgba(249, 168, 212, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-azure-ember { --card-bg: linear-gradient(135deg, #082f49, #0ea5e9, #f59e0b, #431407); --chip-bg: linear-gradient(135deg, #ecfeff, #fef3c7, #fff7ed); --chip-border: #67e8f9; --text-primary: #f0f9ff; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-orchid-mint { --card-bg: linear-gradient(135deg, #2e1065, #a855f7, #34d399, #ecfdf5); --chip-bg: linear-gradient(135deg, #f5f3ff, #ecfdf5, #ccfbf1); --chip-border: #34d399; --text-primary: #faf5ff; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(168, 85, 247, 0.3); }
.theme-sunset-iris { --card-bg: linear-gradient(135deg, #7c2d12, #f97316, #7c3aed, #ddd6fe); --chip-bg: linear-gradient(135deg, #fff7ed, #f3e8ff, #f5f3ff); --chip-border: #fb7185; --text-primary: #fff7ed; --text-accent: #e9d5ff; --text-shadow: rgba(124, 58, 237, 0.6); --card-border: rgba(124, 58, 237, 0.42); --card-glow: 0 0 30px rgba(249, 115, 22, 0.3); }
.theme-reef-copper { --card-bg: linear-gradient(135deg, #042f2e, #0891b2, #b45309, #fbbf24); --chip-bg: linear-gradient(135deg, #ecfeff, #fef3c7, #fed7aa); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #fef3c7; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-pearl-violet { --card-bg: linear-gradient(135deg, #f8fafc, #e2e8f0, #a78bfa, #f5d0fe); --chip-bg: linear-gradient(135deg, #fff, #f5f3ff, #f5d0fe); --chip-border: #a78bfa; --text-primary: #1f2937; --text-accent: #6d28d9; --text-shadow: rgba(167, 139, 250, 0.5); --card-border: rgba(167, 139, 250, 0.42); --card-glow: 0 0 24px rgba(226, 232, 240, 0.24); }
.theme-jade-cobalt { --card-bg: linear-gradient(135deg, #022c22, #0f766e, #1d4ed8, #93c5fd); --chip-bg: linear-gradient(135deg, #ecfdf5, #dbeafe, #eff6ff); --chip-border: #60a5fa; --text-primary: #ecfdf5; --text-accent: #dbeafe; --text-shadow: rgba(96, 165, 250, 0.6); --card-border: rgba(96, 165, 250, 0.42); --card-glow: 0 0 30px rgba(15, 118, 110, 0.3); }
.theme-ember-pearl { --card-bg: linear-gradient(135deg, #431407, #c2410c, #e2e8f0, #f8fafc); --chip-bg: linear-gradient(135deg, #fff7ed, #f8fafc, #e2e8f0); --chip-border: #fdba74; --text-primary: #fff7ed; --text-accent: #e2e8f0; --text-shadow: rgba(226, 232, 240, 0.6); --card-border: rgba(226, 232, 240, 0.42); --card-glow: 0 0 30px rgba(194, 65, 12, 0.3); }
.theme-rose-amber { --card-bg: linear-gradient(135deg, #500724, #be185d, #fbbf24, #fff7ed); --chip-bg: linear-gradient(135deg, #fff1f2, #fef3c7, #fff7ed); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #fef3c7; --text-shadow: rgba(251, 191, 36, 0.6); --card-border: rgba(251, 191, 36, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-ocean-jade { --card-bg: linear-gradient(135deg, #082f49, #0ea5e9, #10b981, #d9f99d); --chip-bg: linear-gradient(135deg, #ecfeff, #ecfdf5, #d9f99d); --chip-border: #67e8f9; --text-primary: #f0f9ff; --text-accent: #bbf7d0; --text-shadow: rgba(52, 211, 153, 0.6); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 30px rgba(14, 165, 233, 0.3); }
.theme-lotus-ember { --card-bg: linear-gradient(135deg, #f5f3ff, #c4b5fd, #f97316, #7c2d12); --chip-bg: linear-gradient(135deg, #fff, #f3e8ff, #fff7ed); --chip-border: #c4b5fd; --text-primary: #f5f3ff; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 0 30px rgba(196, 181, 253, 0.3); }
.theme-cobalt-gold { --card-bg: linear-gradient(135deg, #082f49, #1d4ed8, #facc15, #fef3c7); --chip-bg: linear-gradient(135deg, #eff6ff, #fef3c7, #fff7ed); --chip-border: #60a5fa; --text-primary: #f0f9ff; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(29, 78, 216, 0.3); }
.theme-mint-orchid { --card-bg: linear-gradient(135deg, #052e16, #10b981, #a855f7, #f5d0fe); --chip-bg: linear-gradient(135deg, #ecfdf5, #f3e8ff, #f5d0fe); --chip-border: #34d399; --text-primary: #ecfdf5; --text-accent: #f3e8ff; --text-shadow: rgba(168, 85, 247, 0.6); --card-border: rgba(168, 85, 247, 0.42); --card-glow: 0 0 30px rgba(16, 185, 129, 0.3); }
.theme-silver-jade { --card-bg: linear-gradient(135deg, #f8fafc, #cbd5e1, #34d399, #ecfdf5); --chip-bg: linear-gradient(135deg, #fff, #ecfdf5, #ccfbf1); --chip-border: #5eead4; --text-primary: #1f2937; --text-accent: #166534; --text-shadow: rgba(94, 234, 212, 0.5); --card-border: rgba(94, 234, 212, 0.42); --card-glow: 0 0 24px rgba(203, 213, 225, 0.24); }
.theme-violet-sunset { --card-bg: linear-gradient(135deg, #2e1065, #7c3aed, #f97316, #fbbf24); --chip-bg: linear-gradient(135deg, #f5f3ff, #fed7aa, #fef3c7); --chip-border: #a78bfa; --text-primary: #faf5ff; --text-accent: #fed7aa; --text-shadow: rgba(249, 115, 22, 0.6); --card-border: rgba(249, 115, 22, 0.42); --card-glow: 0 0 30px rgba(124, 58, 237, 0.3); }
.theme-aqua-rose { --card-bg: linear-gradient(135deg, #042f2e, #0891b2, #fb7185, #fdf2f8); --chip-bg: linear-gradient(135deg, #ecfeff, #fecdd3, #fdf2f8); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #fecdd3; --text-shadow: rgba(251, 113, 133, 0.6); --card-border: rgba(251, 113, 133, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-forest-amber { --card-bg: linear-gradient(135deg, #022c22, #166534, #f59e0b, #fff7ed); --chip-bg: linear-gradient(135deg, #ecfdf5, #fef3c7, #fff7ed); --chip-border: #34d399; --text-primary: #f0fdf4; --text-accent: #fef3c7; --text-shadow: rgba(245, 158, 11, 0.6); --card-border: rgba(245, 158, 11, 0.42); --card-glow: 0 0 30px rgba(22, 101, 52, 0.3); }
.theme-ruby-violet { --card-bg: linear-gradient(135deg, #4c0519, #be185d, #7c3aed, #ddd6fe); --chip-bg: linear-gradient(135deg, #fff1f2, #f3e8ff, #f5f3ff); --chip-border: #fb7185; --text-primary: #fff1f2; --text-accent: #e9d5ff; --text-shadow: rgba(124, 58, 237, 0.6); --card-border: rgba(124, 58, 237, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-glacier-jade { --card-bg: linear-gradient(135deg, #dbeafe, #93c5fd, #34d399, #ecfdf5); --chip-bg: linear-gradient(135deg, #eff6ff, #ecfdf5, #ccfbf1); --chip-border: #93c5fd; --text-primary: #082f49; --text-accent: #166534; --text-shadow: rgba(52, 211, 153, 0.5); --card-border: rgba(52, 211, 153, 0.42); --card-glow: 0 0 24px rgba(147, 197, 253, 0.24); }
.theme-gold-orchid { --card-bg: linear-gradient(135deg, #3a2400, #f59e0b, #a855f7, #f5d0fe); --chip-bg: linear-gradient(135deg, #fff7ed, #f3e8ff, #f5d0fe); --chip-border: #fbbf24; --text-primary: #fff7ed; --text-accent: #f5d0fe; --text-shadow: rgba(168, 85, 247, 0.6); --card-border: rgba(168, 85, 247, 0.42); --card-glow: 0 0 30px rgba(245, 158, 11, 0.3); }
.theme-cyan-saffron { --card-bg: linear-gradient(135deg, #082f49, #0891b2, #facc15, #3a2400); --chip-bg: linear-gradient(135deg, #ecfeff, #fef3c7, #fff7ed); --chip-border: #22d3ee; --text-primary: #ecfeff; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-rose-glacier { --card-bg: linear-gradient(135deg, #500724, #be185d, #93c5fd, #eff6ff); --chip-bg: linear-gradient(135deg, #fff1f2, #dbeafe, #f8fafc); --chip-border: #f9a8d4; --text-primary: #fff1f2; --text-accent: #dbeafe; --text-shadow: rgba(147, 197, 253, 0.6); --card-border: rgba(147, 197, 253, 0.42); --card-glow: 0 0 30px rgba(190, 24, 93, 0.3); }
.theme-ember-forest { --card-bg: linear-gradient(135deg, #431407, #c2410c, #166534, #bef264); --chip-bg: linear-gradient(135deg, #fff7ed, #ecfdf5, #d9f99d); --chip-border: #f97316; --text-primary: #fff7ed; --text-accent: #bbf7d0; --text-shadow: rgba(190, 242, 100, 0.6); --card-border: rgba(190, 242, 100, 0.42); --card-glow: 0 0 30px rgba(194, 65, 12, 0.3); }
.theme-onyx-cyan { --card-bg: linear-gradient(135deg, #0a0a0a, #1f2937, #0891b2, #67e8f9); --chip-bg: linear-gradient(135deg, #f5f5f4, #cffafe, #ecfeff); --chip-border: #67e8f9; --text-primary: #ecfeff; --text-accent: #cffafe; --text-shadow: rgba(103, 232, 249, 0.6); --card-border: rgba(103, 232, 249, 0.42); --card-glow: 0 0 30px rgba(8, 145, 178, 0.3); }
.theme-plum-gold { --card-bg: linear-gradient(135deg, #2e1065, #7e22ce, #facc15, #fef3c7); --chip-bg: linear-gradient(135deg, #f3e8ff, #fef3c7, #fff7ed); --chip-border: #d8b4fe; --text-primary: #faf5ff; --text-accent: #fef3c7; --text-shadow: rgba(250, 204, 21, 0.6); --card-border: rgba(250, 204, 21, 0.42); --card-glow: 0 0 30px rgba(126, 34, 206, 0.3); }
.vip-glacier-petal, .vip-ember-bloom, .vip-solar-veil, .vip-twilight-halo, .vip-moonstone-arc, .vip-jade-cascade, .vip-orchid-signal, .vip-ruby-surge, .vip-onyx-gleam, .vip-pearl-bloom, .vip-citrus-drift, .vip-aurora-dawn, .vip-silver-wave, .vip-copper-lantern, .vip-maple-spark, .vip-phoenix-gold, .vip-crystal-reef, .vip-teal-whisper, .vip-lilac-rush, .vip-plum-cascade, .vip-coral-vine, .vip-meadow-drift, .vip-cobalt-hush, .vip-ember-spark, .vip-frost-lotus, .vip-sunset-cinder, .vip-mint-breeze, .vip-violet-orbit, .vip-bronze-echo, .vip-cream-halo, .vip-midnight-harbor, .vip-grape-sunrise, .vip-lilac-gleam, .vip-sandglass-sky, .vip-coral-garden, .vip-rain-iris, .vip-forest-velvet, .vip-slate-aurora, .vip-honey-cascade, .vip-rose-lattice, .vip-cyan-arcade, .vip-silver-vine, .vip-dune-whisper, .vip-opal-current, .vip-ember-lattice, .vip-lotus-silver, .vip-cedar-ink, .vip-jewel-drift, .vip-comet-rose, .vip-twilight-velvet, .vip-azure-lattice, .vip-ember-cascade, .vip-rose-hush, .vip-moonlit-cinder, .vip-jade-arcade, .vip-silver-echo, .vip-citrus-halo, .vip-lilac-voyage, .vip-teal-ripple, .vip-coral-current, .vip-amber-velvet, .vip-cedar-spark, .vip-ocean-whisper, .vip-sunrise-cove, .vip-violet-cinder, .vip-mint-echo, .vip-plum-halo, .vip-frost-arc, .vip-sunflower-ink, .vip-graphite-bloom, .vip-apricot-signal, .vip-iris-fjord, .vip-ruby-cove, .vip-tangerine-vine, .vip-iris-veil, .vip-moss-echo, .vip-sapphire-cascade, .vip-copper-whisper, .vip-pearl-arcade, .vip-glacier-cove, .vip-moonbeam-berry, .vip-onyx-vista, .vip-velvet-coral, .vip-lagoon-glow, .vip-saffron-drift, .vip-plum-dream, .vip-tinsel-reef, .vip-meadow-bloom, .vip-sunset-peak, .vip-horizon-cinder, .vip-indigo-fern, .vip-rose-arcade, .vip-silver-petal, .vip-teal-ember, .vip-coral-breeze, .vip-lilac-drift, .vip-stone-river, .vip-amber-lantern, .vip-glass-fern, .vip-velvet-harbor { color: #fff; font-weight: 900; }
.vip-azure-lattice { background: linear-gradient(135deg, #1d4ed8, #c4b5fd); border-color: #e0f2fe; }
.vip-ember-cascade { background: linear-gradient(135deg, #b45309, #f59e0b); border-color: #fef3c7; }
.vip-rose-hush { background: linear-gradient(135deg, #be185d, #f9a8d4); border-color: #fdf2f8; }
.vip-moonlit-cinder { background: linear-gradient(135deg, #0f172a, #f97316); border-color: #fed7aa; }
.vip-jade-arcade { background: linear-gradient(135deg, #0f766e, #bef264); border-color: #ecfdf5; }
.vip-silver-echo { background: linear-gradient(135deg, #dbeafe, #cbd5e1); border-color: #f8fafc; color: #0f172a; }
.vip-citrus-halo { background: linear-gradient(135deg, #f59e0b, #facc15); border-color: #fff7ed; color: #3a2400; }
.vip-lilac-voyage { background: linear-gradient(135deg, #6d28d9, #f0abfc); border-color: #f5f3ff; }
.vip-teal-ripple { background: linear-gradient(135deg, #0f766e, #67e8f9); border-color: #ecfeff; color: #062b2a; }
.vip-coral-current { background: linear-gradient(135deg, #f97316, #fda4af); border-color: #fff7ed; }
.vip-amber-velvet { background: linear-gradient(135deg, #a16207, #fbbf24); border-color: #fef3c7; color: #3a2400; }
.vip-cedar-spark { background: linear-gradient(135deg, #4b5563, #d97706); border-color: #fef3c7; }
.vip-ocean-whisper { background: linear-gradient(135deg, #2563eb, #93c5fd); border-color: #eff6ff; color: #082f49; }
.vip-sunrise-cove { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fff7ed; color: #3a2400; }
.vip-violet-cinder { background: linear-gradient(135deg, #7c3aed, #f59e0b); border-color: #f3e8ff; }
.vip-mint-echo { background: linear-gradient(135deg, #34d399, #99f6e4); border-color: #ecfdf5; color: #052e16; }
.vip-plum-halo { background: linear-gradient(135deg, #4c1d95, #d8b4fe); border-color: #f5f3ff; }
.vip-frost-arc { background: linear-gradient(135deg, #bfdbfe, #e9d5ff); border-color: #f8fafc; color: #082f49; }
.vip-sunflower-ink { background: linear-gradient(135deg, #facc15, #fbbf24); border-color: #fff7ed; color: #3a2400; }
.vip-graphite-bloom { background: linear-gradient(135deg, #374151, #d1d5db); border-color: #f3f4f6; }
.vip-apricot-signal { background: linear-gradient(135deg, #f97316, #fdba74); border-color: #fff7ed; }
.vip-iris-fjord { background: linear-gradient(135deg, #7c3aed, #93c5fd); border-color: #f5f3ff; }
.vip-ruby-cove { background: linear-gradient(135deg, #9f1239, #fb7185); border-color: #fff1f2; }
.vip-tangerine-vine { background: linear-gradient(135deg, #f97316, #fbbf24); border-color: #fff7ed; }
.vip-iris-veil { background: linear-gradient(135deg, #a855f7, #ddd6fe); border-color: #f5f3ff; color: #2e1065; }
.vip-moss-echo { background: linear-gradient(135deg, #166534, #86efac); border-color: #ecfdf5; color: #052e16; }
.vip-sapphire-cascade { background: linear-gradient(135deg, #0369a1, #60a5fa); border-color: #dbeafe; color: #082f49; }
.vip-copper-whisper { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fff7ed; color: #3a2400; }
.vip-pearl-arcade { background: linear-gradient(135deg, #ddd6fe, #f5d0fe); border-color: #f5f3ff; color: #1f2937; }
.vip-glacier-cove { background: linear-gradient(135deg, #93c5fd, #bfdbfe); border-color: #eff6ff; color: #082f49; }
.vip-moonbeam-berry { background: linear-gradient(135deg, #312e81, #f472b6); border-color: #f5f3ff; }
.vip-onyx-vista { background: linear-gradient(135deg, #1f2937, #a78bfa); border-color: #f3e8ff; }
.vip-velvet-coral { background: linear-gradient(135deg, #9d174d, #fb7185); border-color: #fdf2f8; }
.vip-lagoon-glow { background: linear-gradient(135deg, #0ea5e9, #a5f3fc); border-color: #ecfeff; color: #082f49; }
.vip-saffron-drift { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fff7ed; color: #3a2400; }
.vip-plum-dream { background: linear-gradient(135deg, #7e22ce, #d8b4fe); border-color: #f3e8ff; }
.vip-tinsel-reef { background: linear-gradient(135deg, #0891b2, #fef08a); border-color: #ecfeff; color: #062b2a; }
.vip-meadow-bloom { background: linear-gradient(135deg, #166534, #bef264); border-color: #ecfdf5; color: #052e16; }
.vip-sunset-peak { background: linear-gradient(135deg, #f97316, #fb7185); border-color: #fff7ed; }
.vip-horizon-cinder { background: linear-gradient(135deg, #374151, #f59e0b); border-color: #f3f4f6; }
.vip-indigo-fern { background: linear-gradient(135deg, #4338ca, #22c55e); border-color: #eef2ff; }
.vip-rose-arcade { background: linear-gradient(135deg, #be185d, #f9a8d4); border-color: #fdf2f8; }
.vip-silver-petal { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); border-color: #f8fafc; color: #0f172a; }
.vip-teal-ember { background: linear-gradient(135deg, #0f766e, #f59e0b); border-color: #ecfdf5; color: #052e16; }
.vip-coral-breeze { background: linear-gradient(135deg, #f97316, #a7f3d0); border-color: #ecfdf5; }
.vip-lilac-drift { background: linear-gradient(135deg, #6d28d9, #c4b5fd); border-color: #f5f3ff; }
.vip-stone-river { background: linear-gradient(135deg, #475569, #94a3b8); border-color: #f8fafc; }
.vip-amber-lantern { background: linear-gradient(135deg, #c2410c, #fbbf24); border-color: #fff7ed; }
.vip-glass-fern { background: linear-gradient(135deg, #0f766e, #99f6e4); border-color: #ecfeff; }
.vip-velvet-harbor { background: linear-gradient(135deg, #4f46e5, #f5d0fe); border-color: #eef2ff; }
.vip-ruby-veil { background: linear-gradient(135deg, #be123c, #fb7185); border-color: #ffe4e6; }
.vip-ruby-crest { background: linear-gradient(135deg, #4c0519, #be123c); border-color: #fda4af; }
.vip-ruby-pulse { background: linear-gradient(135deg, #9f1239, #fb7185); border-color: #fecdd3; }
.vip-ruby-breeze { background: linear-gradient(135deg, #be123c, #fda4af); border-color: #fff1f2; }
.vip-ruby-arc { background: linear-gradient(135deg, #4c0519, #fb7185); border-color: #fbcfe8; }
.vip-azure-veil { background: linear-gradient(135deg, #0284c7, #7dd3fc); border-color: #e0f2fe; color: #082f49; }
.vip-azure-crest { background: linear-gradient(135deg, #082f49, #0284c7); border-color: #bae6fd; }
.vip-azure-pulse { background: linear-gradient(135deg, #0369a1, #7dd3fc); border-color: #dbeafe; color: #082f49; }
.vip-azure-breeze { background: linear-gradient(135deg, #0284c7, #bae6fd); border-color: #ecfeff; color: #082f49; }
.vip-azure-arc { background: linear-gradient(135deg, #082f49, #7dd3fc); border-color: #e0f2fe; }
.vip-moss-veil { background: linear-gradient(135deg, #166534, #86efac); border-color: #dcfce7; color: #052e16; }
.vip-moss-crest { background: linear-gradient(135deg, #052e16, #166534); border-color: #bbf7d0; }
.vip-moss-pulse { background: linear-gradient(135deg, #166534, #4ade80); border-color: #d9f99d; }
.vip-moss-breeze { background: linear-gradient(135deg, #15803d, #86efac); border-color: #ecfdf5; color: #052e16; }
.vip-moss-arc { background: linear-gradient(135deg, #052e16, #86efac); border-color: #bbf7d0; }
.vip-tangerine-veil { background: linear-gradient(135deg, #ea580c, #fdba74); border-color: #ffedd5; }
.vip-tangerine-crest { background: linear-gradient(135deg, #431407, #ea580c); border-color: #fed7aa; }
.vip-tangerine-pulse { background: linear-gradient(135deg, #c2410c, #fb923c); border-color: #fef3c7; }
.vip-tangerine-breeze { background: linear-gradient(135deg, #ea580c, #fdba74); border-color: #fff7ed; }
.vip-tangerine-arc { background: linear-gradient(135deg, #7c2d12, #fdba74); border-color: #fed7aa; }
.vip-ultraviolet-veil { background: linear-gradient(135deg, #7c3aed, #c4b5fd); border-color: #ede9fe; }
.vip-ultraviolet-crest { background: linear-gradient(135deg, #312e81, #7c3aed); border-color: #ddd6fe; }
.vip-ultraviolet-pulse { background: linear-gradient(135deg, #6d28d9, #a78bfa); border-color: #e9d5ff; }
.vip-ultraviolet-breeze { background: linear-gradient(135deg, #7c3aed, #ddd6fe); border-color: #f5f3ff; color: #312e81; }
.vip-ultraviolet-arc { background: linear-gradient(135deg, #312e81, #c4b5fd); border-color: #ede9fe; }
.vip-lagoon-veil { background: linear-gradient(135deg, #0891b2, #67e8f9); border-color: #cffafe; color: #082f49; }
.vip-lagoon-crest { background: linear-gradient(135deg, #042f2e, #0891b2); border-color: #a5f3fc; }
.vip-lagoon-pulse { background: linear-gradient(135deg, #0e7490, #22d3ee); border-color: #ccfbf1; }
.vip-lagoon-breeze { background: linear-gradient(135deg, #0891b2, #a5f3fc); border-color: #ecfeff; color: #082f49; }
.vip-lagoon-arc { background: linear-gradient(135deg, #042f2e, #67e8f9); border-color: #cffafe; }
.vip-honey-veil { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fef3c7; color: #3a2400; }
.vip-honey-crest { background: linear-gradient(135deg, #451a03, #b45309); border-color: #fde68a; }
.vip-honey-pulse { background: linear-gradient(135deg, #a16207, #fbbf24); border-color: #fff7ed; color: #3a2400; }
.vip-honey-breeze { background: linear-gradient(135deg, #d97706, #fde68a); border-color: #fffbeb; color: #451a03; }
.vip-honey-arc { background: linear-gradient(135deg, #451a03, #facc15); border-color: #fef3c7; }
.vip-orchid-veil { background: linear-gradient(135deg, #a21caf, #f0abfc); border-color: #fae8ff; }
.vip-orchid-crest { background: linear-gradient(135deg, #4a044e, #a21caf); border-color: #f5d0fe; }
.vip-orchid-pulse { background: linear-gradient(135deg, #86198f, #e879f9); border-color: #fce7f3; }
.vip-orchid-breeze { background: linear-gradient(135deg, #a21caf, #f5d0fe); border-color: #fdf4ff; color: #4a044e; }
.vip-orchid-arc { background: linear-gradient(135deg, #4a044e, #f0abfc); border-color: #fae8ff; }
.vip-glacier-veil { background: linear-gradient(135deg, #3b82f6, #bfdbfe); border-color: #eff6ff; color: #082f49; }
.vip-glacier-crest { background: linear-gradient(135deg, #0c4a6e, #3b82f6); border-color: #dbeafe; }
.vip-glacier-pulse { background: linear-gradient(135deg, #2563eb, #93c5fd); border-color: #e0f2fe; color: #082f49; }
.vip-glacier-breeze { background: linear-gradient(135deg, #3b82f6, #dbeafe); border-color: #f0f9ff; color: #082f49; }
.vip-glacier-arc { background: linear-gradient(135deg, #0c4a6e, #bfdbfe); border-color: #eff6ff; }
.vip-fern-veil { background: linear-gradient(135deg, #059669, #a7f3d0); border-color: #d1fae5; color: #022c22; }
.vip-fern-crest { background: linear-gradient(135deg, #022c22, #059669); border-color: #6ee7b7; }
.vip-fern-pulse { background: linear-gradient(135deg, #047857, #34d399); border-color: #bbf7d0; }
.vip-fern-breeze { background: linear-gradient(135deg, #059669, #a7f3d0); border-color: #ecfdf5; color: #022c22; }
.vip-fern-arc { background: linear-gradient(135deg, #022c22, #a7f3d0); border-color: #d1fae5; }
.vip-aphelion-veil { background: linear-gradient(135deg, #111827, #7c3aed); border-color: #c4b5fd; }
.vip-aphelion-crest { background: linear-gradient(135deg, #030712, #4338ca); border-color: #a5b4fc; }
.vip-aphelion-pulse { background: linear-gradient(135deg, #1f2937, #a855f7); border-color: #ddd6fe; }
.vip-aphelion-breeze { background: linear-gradient(135deg, #312e81, #c4b5fd); border-color: #f5f3ff; }
.vip-aphelion-arc { background: linear-gradient(135deg, #111827, #a78bfa); border-color: #e9d5ff; }
.vip-sequoia-veil { background: linear-gradient(135deg, #14532d, #65a30d); border-color: #bef264; }
.vip-sequoia-crest { background: linear-gradient(135deg, #052e16, #166534); border-color: #86efac; }
.vip-sequoia-pulse { background: linear-gradient(135deg, #166534, #84cc16); border-color: #d9f99d; }
.vip-sequoia-breeze { background: linear-gradient(135deg, #15803d, #bef264); border-color: #ecfccb; color: #052e16; }
.vip-sequoia-arc { background: linear-gradient(135deg, #14532d, #a3e635); border-color: #d9f99d; }
.vip-cerulean-veil { background: linear-gradient(135deg, #0c4a6e, #0284c7); border-color: #7dd3fc; }
.vip-cerulean-crest { background: linear-gradient(135deg, #082f49, #0369a1); border-color: #38bdf8; }
.vip-cerulean-pulse { background: linear-gradient(135deg, #075985, #0ea5e9); border-color: #bae6fd; }
.vip-cerulean-breeze { background: linear-gradient(135deg, #0284c7, #bae6fd); border-color: #e0f2fe; color: #082f49; }
.vip-cerulean-arc { background: linear-gradient(135deg, #0c4a6e, #38bdf8); border-color: #cffafe; }
.vip-magenta-veil { background: linear-gradient(135deg, #701a75, #db2777); border-color: #f9a8d4; }
.vip-magenta-crest { background: linear-gradient(135deg, #500724, #a21caf); border-color: #f0abfc; }
.vip-magenta-pulse { background: linear-gradient(135deg, #9d174d, #e879f9); border-color: #f5d0fe; }
.vip-magenta-breeze { background: linear-gradient(135deg, #be185d, #f0abfc); border-color: #fdf2f8; }
.vip-magenta-arc { background: linear-gradient(135deg, #701a75, #f9a8d4); border-color: #fae8ff; }
.vip-solstice-veil { background: linear-gradient(135deg, #2563eb, #fbbf24); border-color: #fef3c7; }
.vip-solstice-crest { background: linear-gradient(135deg, #1d4ed8, #93c5fd); border-color: #dbeafe; }
.vip-solstice-pulse { background: linear-gradient(135deg, #3b82f6, #facc15); border-color: #fff7ed; color: #172554; }
.vip-solstice-breeze { background: linear-gradient(135deg, #60a5fa, #fde68a); border-color: #eff6ff; color: #082f49; }
.vip-solstice-arc { background: linear-gradient(135deg, #2563eb, #fef08a); border-color: #fef3c7; }
.vip-marina-veil { background: linear-gradient(135deg, #0e7490, #67e8f9); border-color: #cffafe; }
.vip-marina-crest { background: linear-gradient(135deg, #0f766e, #22d3ee); border-color: #ccfbf1; }
.vip-marina-pulse { background: linear-gradient(135deg, #0891b2, #a5f3fc); border-color: #ecfeff; color: #083344; }
.vip-marina-breeze { background: linear-gradient(135deg, #06b6d4, #cffafe); border-color: #ecfeff; color: #083344; }
.vip-marina-arc { background: linear-gradient(135deg, #0891b2, #67e8f9); border-color: #cffafe; }
.vip-silverline-veil { background: linear-gradient(135deg, #64748b, #e2e8f0); border-color: #f8fafc; color: #0f172a; }
.vip-silverline-crest { background: linear-gradient(135deg, #475569, #cbd5e1); border-color: #f1f5f9; }
.vip-silverline-pulse { background: linear-gradient(135deg, #94a3b8, #f1f5f9); border-color: #fff; color: #0f172a; }
.vip-silverline-breeze { background: linear-gradient(135deg, #cbd5e1, #f8fafc); border-color: #fff; color: #0f172a; }
.vip-silverline-arc { background: linear-gradient(135deg, #64748b, #f1f5f9); border-color: #f8fafc; }
.vip-sandstone-veil { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fef3c7; }
.vip-sandstone-crest { background: linear-gradient(135deg, #a16207, #f59e0b); border-color: #fde68a; }
.vip-sandstone-pulse { background: linear-gradient(135deg, #d97706, #fde68a); border-color: #fff7ed; color: #451a03; }
.vip-sandstone-breeze { background: linear-gradient(135deg, #f59e0b, #fde68a); border-color: #fff; color: #451a03; }
.vip-sandstone-arc { background: linear-gradient(135deg, #d97706, #fbbf24); border-color: #fef3c7; }
.vip-halcyon-veil { background: linear-gradient(135deg, #0ea5e9, #c4b5fd); border-color: #e0f2fe; }
.vip-halcyon-crest { background: linear-gradient(135deg, #0284c7, #a5b4fc); border-color: #dbeafe; }
.vip-halcyon-pulse { background: linear-gradient(135deg, #06b6d4, #ddd6fe); border-color: #ecfeff; }
.vip-halcyon-breeze { background: linear-gradient(135deg, #67e8f9, #ddd6fe); border-color: #ecfeff; color: #083344; }
.vip-halcyon-arc { background: linear-gradient(135deg, #0284c7, #c4b5fd); border-color: #e0f2fe; }
.vip-prismarine-veil { background: linear-gradient(135deg, #0891b2, #a78bfa); border-color: #cffafe; }
.vip-prismarine-crest { background: linear-gradient(135deg, #0f766e, #7c3aed); border-color: #ccfbf1; }
.vip-prismarine-pulse { background: linear-gradient(135deg, #06b6d4, #c4b5fd); border-color: #ecfeff; }
.vip-prismarine-breeze { background: linear-gradient(135deg, #2dd4bf, #ddd6fe); border-color: #ecfeff; color: #042f2e; }
.vip-prismarine-arc { background: linear-gradient(135deg, #0891b2, #c4b5fd); border-color: #cffafe; }
.vip-terracotta-veil { background: linear-gradient(135deg, #c2410c, #fb7185); border-color: #fed7aa; }
.vip-terracotta-crest { background: linear-gradient(135deg, #ea580c, #fda4af); border-color: #fff7ed; }
.vip-terracotta-pulse { background: linear-gradient(135deg, #f97316, #f9a8d4); border-color: #fecdd3; }
.vip-terracotta-breeze { background: linear-gradient(135deg, #fb923c, #fecdd3); border-color: #fff7ed; color: #431407; }
.vip-terracotta-arc { background: linear-gradient(135deg, #ea580c, #fb7185); border-color: #fed7aa; }
.vip-moonrise-veil { background: linear-gradient(135deg, #312e81, #f5d0fe); border-color: #e0e7ff; }
.vip-moonrise-crest { background: linear-gradient(135deg, #4338ca, #d8b4fe); border-color: #ddd6fe; }
.vip-moonrise-pulse { background: linear-gradient(135deg, #6366f1, #f0abfc); border-color: #f5f3ff; }
.vip-moonrise-breeze { background: linear-gradient(135deg, #818cf8, #f5d0fe); border-color: #f5f3ff; }
.vip-moonrise-arc { background: linear-gradient(135deg, #4f46e5, #d8b4fe); border-color: #e0e7ff; }
.vip-rainshadow-veil { background: linear-gradient(135deg, #475569, #38bdf8); border-color: #dbeafe; }
.vip-rainshadow-crest { background: linear-gradient(135deg, #334155, #0ea5e9); border-color: #cffafe; }
.vip-rainshadow-pulse { background: linear-gradient(135deg, #64748b, #7dd3fc); border-color: #e0f2fe; }
.vip-rainshadow-breeze { background: linear-gradient(135deg, #94a3b8, #bae6fd); border-color: #f8fafc; color: #0f172a; }
.vip-rainshadow-arc { background: linear-gradient(135deg, #475569, #7dd3fc); border-color: #dbeafe; }
.vip-evergreen-veil { background: linear-gradient(135deg, #166534, #34d399); border-color: #bbf7d0; }
.vip-evergreen-crest { background: linear-gradient(135deg, #15803d, #6ee7b7); border-color: #dcfce7; }
.vip-evergreen-pulse { background: linear-gradient(135deg, #16a34a, #86efac); border-color: #ecfdf5; }
.vip-evergreen-breeze { background: linear-gradient(135deg, #22c55e, #bbf7d0); border-color: #f0fdf4; color: #052e16; }
.vip-evergreen-arc { background: linear-gradient(135deg, #15803d, #86efac); border-color: #dcfce7; }
.vip-glacier-petal { background: linear-gradient(135deg, #c7d2fe, #e9d5ff); border-color: #e0f2fe; color: #082f49; } .vip-ember-bloom { background: linear-gradient(135deg, #b45309, #f9a8d4); border-color: #fde68a; } .vip-solar-veil { background: linear-gradient(135deg, #f59e0b, #fef3c7); border-color: #fff7ed; color: #3a2400; } .vip-twilight-halo { background: linear-gradient(135deg, #312e81, #f0abfc); border-color: #f3e8ff; } .vip-moonstone-arc { background: linear-gradient(135deg, #1d4ed8, #e2e8f0); border-color: #eff6ff; color: #082f49; } .vip-jade-cascade { background: linear-gradient(135deg, #0f766e, #86efac); border-color: #ecfdf5; } .vip-orchid-signal { background: linear-gradient(135deg, #7c3aed, #f9a8d4); border-color: #f5f3ff; } .vip-ruby-surge { background: linear-gradient(135deg, #be185d, #f43f5e); border-color: #fff1f2; } .vip-onyx-gleam { background: linear-gradient(135deg, #1f2937, #a78bfa); border-color: #f3e8ff; } .vip-pearl-bloom { background: linear-gradient(135deg, #f5d0fe, #ddd6fe); border-color: #f8fafc; color: #1f2937; } .vip-citrus-drift { background: linear-gradient(135deg, #ea580c, #facc15); border-color: #fff7ed; } .vip-aurora-dawn { background: linear-gradient(135deg, #0284c7, #2dd4bf); border-color: #ecfeff; color: #082f49; } .vip-silver-wave { background: linear-gradient(135deg, #94a3b8, #dbeafe); border-color: #f8fafc; color: #0f172a; } .vip-copper-lantern { background: linear-gradient(135deg, #b45309, #f97316); border-color: #fff7ed; } .vip-maple-spark { background: linear-gradient(135deg, #d97706, #fbbf24); border-color: #fff7ed; } .vip-phoenix-gold { background: linear-gradient(135deg, #f59e0b, #fef08a); border-color: #fff7ed; color: #431407; } .vip-crystal-reef { background: linear-gradient(135deg, #0891b2, #67e8f9); border-color: #ecfeff; color: #062b2a; } .vip-teal-whisper { background: linear-gradient(135deg, #0f766e, #99f6e4); border-color: #ecfeff; color: #052e16; } .vip-lilac-rush { background: linear-gradient(135deg, #6d28d9, #c4b5fd); border-color: #f5f3ff; } .vip-plum-cascade { background: linear-gradient(135deg, #4c1d95, #d8b4fe); border-color: #f5f3ff; } .vip-coral-vine { background: linear-gradient(135deg, #f97316, #fda4af); border-color: #fff7ed; } .vip-meadow-drift { background: linear-gradient(135deg, #166534, #bef264); border-color: #ecfdf5; } .vip-cobalt-hush { background: linear-gradient(135deg, #1d4ed8, #93c5fd); border-color: #eff6ff; color: #082f49; } .vip-ember-spark { background: linear-gradient(135deg, #9f1239, #f59e0b); border-color: #fff1f2; } .vip-frost-lotus { background: linear-gradient(135deg, #bfdbfe, #f5f3ff); border-color: #dbeafe; color: #082f49; } .vip-sunset-cinder { background: linear-gradient(135deg, #f97316, #fb7185); border-color: #fff7ed; } .vip-mint-breeze { background: linear-gradient(135deg, #34d399, #ccfbf1); border-color: #ecfdf5; color: #052e16; } .vip-violet-orbit { background: linear-gradient(135deg, #6d28d9, #a78bfa); border-color: #f3e8ff; } .vip-bronze-echo { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fff7ed; } .vip-cream-halo { background: linear-gradient(135deg, #f9fafb, #f5f3ff); border-color: #fef3c7; color: #1f2937; } .vip-midnight-harbor { background: linear-gradient(135deg, #0f172a, #0ea5e9); border-color: #dbeafe; } .vip-grape-sunrise { background: linear-gradient(135deg, #7c3aed, #fbbf24); border-color: #f3e8ff; } .vip-lilac-gleam { background: linear-gradient(135deg, #ddd6fe, #f9a8d4); border-color: #f5f3ff; color: #1f2937; } .vip-sandglass-sky { background: linear-gradient(135deg, #dbeafe, #c4b5fd); border-color: #fff7ed; color: #1f2937; } .vip-coral-garden { background: linear-gradient(135deg, #f97316, #a7f3d0); border-color: #ecfdf5; } .vip-rain-iris { background: linear-gradient(135deg, #2563eb, #ddd6fe); border-color: #ecfeff; } .vip-forest-velvet { background: linear-gradient(135deg, #166534, #7c3aed); border-color: #ddd6fe; } .vip-slate-aurora { background: linear-gradient(135deg, #374151, #38bdf8); border-color: #dbeafe; } .vip-honey-cascade { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fff7ed; } .vip-rose-lattice { background: linear-gradient(135deg, #be185d, #f9a8d4); border-color: #fff1f2; } .vip-cyan-arcade { background: linear-gradient(135deg, #0891b2, #99f6e4); border-color: #ecfeff; color: #082f49; } .vip-silver-vine { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); border-color: #f8fafc; color: #0f172a; } .vip-dune-whisper { background: linear-gradient(135deg, #fbbf24, #fdba74); border-color: #fff7ed; color: #3a2400; } .vip-opal-current { background: linear-gradient(135deg, #bfdbfe, #c4b5fd); border-color: #f5f3ff; color: #1f2937; } .vip-ember-lattice { background: linear-gradient(135deg, #a16207, #fbbf24); border-color: #fff7ed; } .vip-lotus-silver { background: linear-gradient(135deg, #cbd5e1, #f5d0fe); border-color: #f8fafc; color: #1f2937; } .vip-cedar-ink { background: linear-gradient(135deg, #4b5563, #8b5e3c); border-color: #fef3c7; } .vip-jewel-drift { background: linear-gradient(135deg, #1d4ed8, #c084fc); border-color: #eff6ff; } .vip-comet-rose { background: linear-gradient(135deg, #9d174d, #f472b6); border-color: #fdf2f8; } .vip-twilight-velvet { background: linear-gradient(135deg, #4f46e5, #c084fc); border-color: #eef2ff; }
.vip-glacier-petal { background: linear-gradient(135deg, #c7d2fe, #e9d5ff); border-color: #e0f2fe; color: #082f49; } .vip-ember-bloom { background: linear-gradient(135deg, #b45309, #f9a8d4); border-color: #fde68a; } .vip-solar-veil { background: linear-gradient(135deg, #f59e0b, #fef3c7); border-color: #fff7ed; color: #3a2400; } .vip-twilight-halo { background: linear-gradient(135deg, #312e81, #f0abfc); border-color: #f3e8ff; } .vip-moonstone-arc { background: linear-gradient(135deg, #1d4ed8, #e2e8f0); border-color: #eff6ff; color: #082f49; } .vip-jade-cascade { background: linear-gradient(135deg, #0f766e, #86efac); border-color: #ecfdf5; } .vip-orchid-signal { background: linear-gradient(135deg, #7c3aed, #f9a8d4); border-color: #f5f3ff; } .vip-ruby-surge { background: linear-gradient(135deg, #be185d, #f43f5e); border-color: #fff1f2; } .vip-onyx-gleam { background: linear-gradient(135deg, #1f2937, #a78bfa); border-color: #f3e8ff; } .vip-pearl-bloom { background: linear-gradient(135deg, #f5d0fe, #ddd6fe); border-color: #f8fafc; color: #1f2937; } .vip-citrus-drift { background: linear-gradient(135deg, #ea580c, #facc15); border-color: #fff7ed; } .vip-aurora-dawn { background: linear-gradient(135deg, #0284c7, #2dd4bf); border-color: #ecfeff; color: #082f49; } .vip-silver-wave { background: linear-gradient(135deg, #94a3b8, #dbeafe); border-color: #f8fafc; color: #0f172a; } .vip-copper-lantern { background: linear-gradient(135deg, #b45309, #f97316); border-color: #fff7ed; } .vip-maple-spark { background: linear-gradient(135deg, #d97706, #fbbf24); border-color: #fff7ed; } .vip-phoenix-gold { background: linear-gradient(135deg, #f59e0b, #fef08a); border-color: #fff7ed; color: #431407; } .vip-crystal-reef { background: linear-gradient(135deg, #0891b2, #67e8f9); border-color: #ecfeff; color: #062b2a; } .vip-teal-whisper { background: linear-gradient(135deg, #0f766e, #99f6e4); border-color: #ecfeff; color: #052e16; } .vip-lilac-rush { background: linear-gradient(135deg, #6d28d9, #c4b5fd); border-color: #f5f3ff; } .vip-plum-cascade { background: linear-gradient(135deg, #4c1d95, #d8b4fe); border-color: #f3e8ff; } .vip-coral-vine { background: linear-gradient(135deg, #f97316, #fda4af); border-color: #fff7ed; } .vip-meadow-drift { background: linear-gradient(135deg, #166534, #bef264); border-color: #ecfdf5; } .vip-cobalt-hush { background: linear-gradient(135deg, #1d4ed8, #93c5fd); border-color: #eff6ff; color: #082f49; } .vip-ember-spark { background: linear-gradient(135deg, #9f1239, #f59e0b); border-color: #fef3c7; } .vip-frost-lotus { background: linear-gradient(135deg, #bfdbfe, #f5f3ff); border-color: #e0f2fe; color: #082f49; } .vip-sunset-cinder { background: linear-gradient(135deg, #f97316, #fb7185); border-color: #fff7ed; } .vip-mint-breeze { background: linear-gradient(135deg, #34d399, #ccfbf1); border-color: #ecfdf5; color: #052e16; } .vip-violet-orbit { background: linear-gradient(135deg, #6d28d9, #a78bfa); border-color: #f3e8ff; } .vip-bronze-echo { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fff7ed; } .vip-cream-halo { background: linear-gradient(135deg, #f9fafb, #f5f3ff); border-color: #fef3c7; color: #1f2937; } .vip-midnight-harbor { background: linear-gradient(135deg, #0f172a, #0ea5e9); border-color: #dbeafe; } .vip-grape-sunrise { background: linear-gradient(135deg, #7c3aed, #fbbf24); border-color: #fef3c7; } .vip-lilac-gleam { background: linear-gradient(135deg, #ddd6fe, #f9a8d4); border-color: #f5f3ff; color: #1f2937; } .vip-sandglass-sky { background: linear-gradient(135deg, #dbeafe, #c4b5fd); border-color: #f5f3ff; color: #1f2937; } .vip-coral-garden { background: linear-gradient(135deg, #f97316, #a7f3d0); border-color: #ecfdf5; } .vip-rain-iris { background: linear-gradient(135deg, #2563eb, #ddd6fe); border-color: #ecfeff; } .vip-forest-velvet { background: linear-gradient(135deg, #166534, #7c3aed); border-color: #ecfdf5; } .vip-slate-aurora { background: linear-gradient(135deg, #374151, #38bdf8); border-color: #dbeafe; } .vip-honey-cascade { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fef3c7; color: #3a1f09; } .vip-rose-lattice { background: linear-gradient(135deg, #be185d, #f9a8d4); border-color: #fff1f2; } .vip-cyan-arcade { background: linear-gradient(135deg, #0891b2, #99f6e4); border-color: #ecfeff; color: #082f49; } .vip-silver-vine { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); border-color: #f8fafc; color: #0f172a; } .vip-dune-whisper { background: linear-gradient(135deg, #fbbf24, #fdba74); border-color: #fff7ed; color: #3a2400; } .vip-opal-current { background: linear-gradient(135deg, #bfdbfe, #c4b5fd); border-color: #ecfeff; color: #1f2937; } .vip-ember-lattice { background: linear-gradient(135deg, #a16207, #fbbf24); border-color: #fff7ed; } .vip-lotus-silver { background: linear-gradient(135deg, #cbd5e1, #f5d0fe); border-color: #f8fafc; color: #1f2937; } .vip-cedar-ink { background: linear-gradient(135deg, #4b5563, #8b5e3c); border-color: #fef3c7; } .vip-jewel-drift { background: linear-gradient(135deg, #1d4ed8, #c084fc); border-color: #efe7ff; } .vip-comet-rose { background: linear-gradient(135deg, #9d174d, #f472b6); border-color: #fdf2f8; } .vip-twilight-velvet { background: linear-gradient(135deg, #4f46e5, #c084fc); border-color: #f3e8ff; }
.vip-aurora-cascade { background: linear-gradient(135deg, #1d4ed8, #2dd4bf); border-color: #e0f2fe; } .vip-amber-echo { background: linear-gradient(135deg, #a16207, #facc15); border-color: #fff7ed; color: #3a2400; } .vip-satin-cinder { background: linear-gradient(135deg, #3f3f46, #fca5a5); border-color: #f8fafc; } .vip-lime-echo { background: linear-gradient(135deg, #166534, #bef264); border-color: #ecfdf5; } .vip-crystal-river { background: linear-gradient(135deg, #0ea5e9, #67e8f9); border-color: #ecfeff; color: #082f49; } .vip-royal-silk { background: linear-gradient(135deg, #4338ca, #e9d5ff); border-color: #f5f3ff; color: #1e1b4b; } .vip-pistachio-arc { background: linear-gradient(135deg, #166534, #86efac); border-color: #ecfdf5; } .vip-raven-violet { background: linear-gradient(135deg, #312e81, #7c3aed); border-color: #f3e8ff; } .vip-coral-void { background: linear-gradient(135deg, #f97316, #fb7185); border-color: #fff7ed; } .vip-verdant-gold { background: linear-gradient(135deg, #166534, #facc15); border-color: #ecfdf5; } .vip-satin-ocean { background: linear-gradient(135deg, #0f766e, #c4b5fd); border-color: #ecfeff; } .vip-obsidian-mint { background: linear-gradient(135deg, #1f2937, #5eead4); border-color: #ccfbf1; } .vip-sky-ember { background: linear-gradient(135deg, #60a5fa, #f59e0b); border-color: #dbeafe; color: #082f49; } .vip-mango-prism { background: linear-gradient(135deg, #f59e0b, #fef08a); border-color: #fff7ed; color: #431407; } .vip-violet-hush { background: linear-gradient(135deg, #7c3aed, #f5d0fe); border-color: #f3e8ff; color: #2e1065; } .vip-solar-mist { background: linear-gradient(135deg, #ea580c, #fde68a); border-color: #fff7ed; color: #7c2d12; } .vip-cinder-rose { background: linear-gradient(135deg, #9f1239, #f9a8d4); border-color: #fff1f2; } .vip-sapphire-mint { background: linear-gradient(135deg, #0369a1, #2dd4bf); border-color: #ecfeff; } .vip-starlight-plum { background: linear-gradient(135deg, #5b21b6, #f0abfc); border-color: #f3e8ff; } .vip-iron-pearl { background: linear-gradient(135deg, #374151, #e2e8f0); border-color: #f8fafc; color: #0f172a; } .vip-lotus-gold { background: linear-gradient(135deg, #a16207, #fbbf24); border-color: #fef3c7; color: #3a2400; } .vip-sunset-iris { background: linear-gradient(135deg, #db2777, #c4b5fd); border-color: #fdf2f8; } .vip-balance-cyan { background: linear-gradient(135deg, #0891b2, #99f6e4); border-color: #ecfeff; color: #082f49; } .vip-petal-iron { background: linear-gradient(135deg, #fbcfe8, #cbd5e1); border-color: #f8fafc; color: #1f2937; } .vip-vista-amber { background: linear-gradient(135deg, #c2410c, #fbbf24); border-color: #fff7ed; } .vip-silk-pulse { background: linear-gradient(135deg, #dbeafe, #f5d0fe); border-color: #fff; color: #1f2937; } .vip-azurite-lime { background: linear-gradient(135deg, #2563eb, #bef264); border-color: #eff6ff; } .vip-harbor-ember { background: linear-gradient(135deg, #0ea5e9, #f97316); border-color: #ecfeff; } .vip-noir-saffron { background: linear-gradient(135deg, #1f2937, #fbbf24); border-color: #fef3c7; } .vip-riverglass { background: linear-gradient(135deg, #1d4ed8, #93c5fd); border-color: #eff6ff; color: #082f49; } .vip-lavender-drift { background: linear-gradient(135deg, #6d28d9, #c4b5fd); border-color: #f5f3ff; }
.vip-prism-rain, .vip-aurora-cascade, .vip-amber-echo, .vip-satin-cinder, .vip-lime-echo, .vip-crystal-river, .vip-royal-silk, .vip-pistachio-arc, .vip-raven-violet, .vip-coral-void, .vip-verdant-gold, .vip-satin-ocean, .vip-obsidian-mint, .vip-sky-ember, .vip-mango-prism, .vip-violet-hush, .vip-solar-mist, .vip-cinder-rose, .vip-sapphire-mint, .vip-starlight-plum, .vip-iron-pearl, .vip-lotus-gold, .vip-sunset-iris, .vip-balance-cyan, .vip-petal-iron, .vip-vista-amber, .vip-silk-pulse, .vip-azurite-lime, .vip-harbor-ember, .vip-noir-saffron, .vip-riverglass, .vip-lavender-drift { color: #fff; font-weight: 900; }
.vip-aurora-ink { background: linear-gradient(135deg, #1d4ed8, #7c3aed); border-color: #bfdbfe; } .vip-royal-ember { background: linear-gradient(135deg, #b45309, #f59e0b); border-color: #fef3c7; color: #3a2400; } .vip-digital-lime { background: linear-gradient(135deg, #166534, #84cc16); border-color: #ecfdf5; } .vip-crimson-crest { background: linear-gradient(135deg, #9f1239, #f43f5e); border-color: #ffe4e6; } .vip-glacier-spark { background: linear-gradient(135deg, #bae6fd, #7dd3fc); border-color: #e0f2fe; color: #082f49; } .vip-moonlit-coral { background: linear-gradient(135deg, #d97706, #fb7185); border-color: #fff7ed; } .vip-velvet-ember { background: linear-gradient(135deg, #7c2d12, #f97316); border-color: #f3e8ff; } .vip-emerald-thunder { background: linear-gradient(135deg, #0f766e, #22c55e); border-color: #ecfdf5; } .vip-silver-horizon { background: linear-gradient(135deg, #cbd5e1, #94a3b8); border-color: #f8fafc; color: #0f172a; } .vip-onyx-sunrise { background: linear-gradient(135deg, #1f2937, #f59e0b); border-color: #fef3c7; } .vip-sapphire-garden { background: linear-gradient(135deg, #0f766e, #60a5fa); border-color: #ecfeff; } .vip-peach-velocity { background: linear-gradient(135deg, #f97316, #fdba74); border-color: #fff7ed; } .vip-cobalt-silk { background: linear-gradient(135deg, #1d4ed8, #a5b4fc); border-color: #eff6ff; } .vip-rose-arc { background: linear-gradient(135deg, #be185d, #fb7185); border-color: #fdf2f8; } .vip-jade-signal { background: linear-gradient(135deg, #064e3b, #34d399); border-color: #ecfdf5; } .vip-copper-bloom { background: linear-gradient(135deg, #b45309, #f59e0b); border-color: #fff7ed; } .vip-violet-flare { background: linear-gradient(135deg, #6d28d9, #a78bfa); border-color: #f3e8ff; } .vip-arctic-wisp { background: linear-gradient(135deg, #2563eb, #67e8f9); border-color: #e0f2fe; color: #082f49; } .vip-ember-mint { background: linear-gradient(135deg, #14532d, #f59e0b); border-color: #ecfdf5; } .vip-platinum-rush { background: linear-gradient(135deg, #4b5563, #d1d5db); border-color: #f3f4f6; color: #111827; } .vip-orchid-lantern { background: linear-gradient(135deg, #6d28d9, #ec4899); border-color: #fdf2f8; } .vip-ocean-ripple { background: linear-gradient(135deg, #0ea5e9, #22d3ee); border-color: #ecfeff; } .vip-sunset-cascade { background: linear-gradient(135deg, #c2410c, #fb7185); border-color: #fff7ed; } .vip-obsidian-petal { background: linear-gradient(135deg, #1f2937, #9ca3af); border-color: #f3f4f6; } .vip-ruby-current { background: linear-gradient(135deg, #9f1239, #fb7185); border-color: #fff1f2; } .vip-gold-echo { background: linear-gradient(135deg, #a16207, #facc15); border-color: #fef3c7; color: #3a2400; } .vip-frost-zen { background: linear-gradient(135deg, #e0f2fe, #c4b5fd); border-color: #f0f9ff; color: #0f172a; } .vip-lilac-surge { background: linear-gradient(135deg, #7c3aed, #d8b4fe); border-color: #f3e8ff; } .vip-magenta-veil { background: linear-gradient(135deg, #9d174d, #f472b6); border-color: #fdf2f8; } .vip-firefly-haze { background: linear-gradient(135deg, #14532d, #facc15); border-color: #ecfdf5; } .vip-azure-halo { background: linear-gradient(135deg, #2563eb, #93c5fd); border-color: #eff6ff; } .vip-sage-dynamo { background: linear-gradient(135deg, #166534, #a3e635); border-color: #ecfdf5; } .vip-plum-blaze { background: linear-gradient(135deg, #7e22ce, #f472b6); border-color: #f3e8ff; } .vip-ivory-lattice { background: linear-gradient(135deg, #f5f3ff, #fef3c7); border-color: #fef3c7; color: #1f2937; } .vip-thunder-moon { background: linear-gradient(135deg, #334155, #cbd5e1); border-color: #f8fafc; } .vip-coral-horizon { background: linear-gradient(135deg, #ea580c, #fdba74); border-color: #fff7ed; } .vip-graphite-spark { background: linear-gradient(135deg, #374151, #94a3b8); border-color: #f3f4f6; } .vip-gold-brass { background: linear-gradient(135deg, #92400e, #fbbf24); border-color: #fef3c7; } .vip-violet-cascade { background: linear-gradient(135deg, #4338ca, #c084fc); border-color: #eef2ff; } .vip-cyan-fable { background: linear-gradient(135deg, #0891b2, #67e8f9); border-color: #ecfeff; } .vip-sky-lattice { background: linear-gradient(135deg, #93c5fd, #60a5fa); border-color: #eff6ff; color: #082f49; } .vip-pearl-tide { background: linear-gradient(135deg, #0ea5e9, #f5d0fe); border-color: #ecfeff; } .vip-nutmeg-gleam { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fff7ed; color: #3a2400; } .vip-iris-charm { background: linear-gradient(135deg, #a855f7, #f9a8d4); border-color: #f3e8ff; } .vip-mint-arcade { background: linear-gradient(135deg, #14b8a6, #a7f3d0); border-color: #ecfdf5; color: #052e16; } .vip-bronze-blossom { background: linear-gradient(135deg, #c2410c, #fbbf24); border-color: #fff7ed; } .vip-lavender-vault { background: linear-gradient(135deg, #6d28d9, #ddd6fe); border-color: #f3e8ff; } .vip-jade-ember { background: linear-gradient(135deg, #065f46, #84cc16); border-color: #ecfdf5; } .vip-scarlet-violet { background: linear-gradient(135deg, #7e22ce, #f472b6); border-color: #fff1f2; } .vip-azure-echo { background: linear-gradient(135deg, #0ea5e9, #60a5fa); border-color: #ecfeff; } .vip-sunrise-ink { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fef3c7; color: #3a2400; } .vip-twilight-iris { background: linear-gradient(135deg, #312e81, #a78bfa); border-color: #f3e8ff; } .vip-glacier-gold { background: linear-gradient(135deg, #facc15, #fbbf24); border-color: #fffacd; color: #3a2400; } .vip-porcelain-flare { background: linear-gradient(135deg, #f9a8d4, #fef3c7); border-color: #fff; color: #1f2937; } .vip-orchid-current { background: linear-gradient(135deg, #8b5cf6, #f9a8d4); border-color: #f3e8ff; } .vip-cosmic-velvet { background: linear-gradient(135deg, #1d4ed8, #a855f7); border-color: #e0e7ff; } .vip-ember-silk { background: linear-gradient(135deg, #b45309, #fbbf24); border-color: #fff7ed; } .vip-emerald-glint { background: linear-gradient(135deg, #059669, #a7f3d0); border-color: #ecfdf5; } .vip-royal-frost { background: linear-gradient(135deg, #4338ca, #bae6fd); border-color: #eff6ff; color: #082f49; } .vip-rose-signal { background: linear-gradient(135deg, #db2777, #f9a8d4); border-color: #fdf2f8; } .vip-midnight-orchid { background: linear-gradient(135deg, #312e81, #c084fc); border-color: #f3e8ff; } .vip-copper-signal { background: linear-gradient(135deg, #b45309, #f97316); border-color: #fff7ed; } .vip-silver-bloom { background: linear-gradient(135deg, #dbeafe, #cbd5e1); border-color: #f8fafc; color: #0f172a; } .vip-marble-ember { background: linear-gradient(135deg, #fca5a5, #fbbf24); border-color: #fff; color: #1f2937; } .vip-sunstone-pulse { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fef3c7; color: #3a2400; } .vip-jade-aurora { background: linear-gradient(135deg, #0f766e, #34d399); border-color: #ecfdf5; } .vip-amethyst-breeze { background: linear-gradient(135deg, #6d28d9, #d8b4fe); border-color: #f3e8ff; } .vip-copper-halo { background: linear-gradient(135deg, #9a5b18, #f97316); border-color: #fff7ed; } .vip-ocean-lantern { background: linear-gradient(135deg, #0f766e, #67e8f9); border-color: #ecfeff; } .vip-dragon-amber { background: linear-gradient(135deg, #e11d48, #facc15); border-color: #fff7ed; } .vip-pearl-glow { background: linear-gradient(135deg, #f5d0fe, #bfdbfe); border-color: #fff; color: #1f2937; } .vip-moonglow-rose { background: linear-gradient(135deg, #9d174d, #f9a8d4); border-color: #fdf2f8; } .vip-cobalt-drift { background: linear-gradient(135deg, #1d4ed8, #22d3ee); border-color: #ecfeff; } .vip-bronze-hush { background: linear-gradient(135deg, #92400e, #fbbf24); border-color: #fff7ed; } .vip-neon-bloom { background: linear-gradient(135deg, #0891b2, #f472b6); border-color: #ecfeff; } .vip-quartz-gold { background: linear-gradient(135deg, #fbbf24, #f5d0fe); border-color: #fff7ed; color: #1f2937; } .vip-frost-fable { background: linear-gradient(135deg, #c7d2fe, #dbeafe); border-color: #eff6ff; color: #082f49; } .vip-velvet-sky { background: linear-gradient(135deg, #4f46e5, #c4b5fd); border-color: #eee7ff; } .vip-horizon-pulse { background: linear-gradient(135deg, #2563eb, #f59e0b); border-color: #dbeafe; } .vip-prism-rain { background: linear-gradient(135deg, #2563eb, #a855f7, #f472b6); border-color: #ddd6fe; } .vip-phoenix-rising { background: linear-gradient(135deg, #ea580c, #fb923c); border-color: #fed7aa; } .vip-lunar-silver { background: linear-gradient(135deg, #cbd5e1, #f1f5f9); border-color: #e2e8f0; color: #0f172a; } .vip-inferno-rage { background: linear-gradient(135deg, #d97706, #f97316); border-color: #fef3c7; } .vip-glacier-peak { background: linear-gradient(135deg, #bae6fd, #38bdf8); border-color: #cffafe; color: #082f49; } .vip-mystic-void { background: linear-gradient(135deg, #312e81, #4f46e5); border-color: #c7d2fe; } .vip-coral-reef { background: linear-gradient(135deg, #f97316, #fb923c); border-color: #fed7aa; } .vip-shadow-realm { background: linear-gradient(135deg, #1f1f1f, #2a2a2a); border-color: #6b7280; } .vip-celestial-blue { background: linear-gradient(135deg, #1e40af, #3b82f6); border-color: #dbeafe; } .vip-bloom-garden { background: linear-gradient(135deg, #ec4899, #f472b6); border-color: #fce7f3; } .vip-terra-cotta { background: linear-gradient(135deg, #b45309, #ea580c); border-color: #fed7aa; } .vip-midnight-blue { background: linear-gradient(135deg, #0369a1, #0284c7); border-color: #cffafe; } .vip-sunrise-gold { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fef08a; color: #3a2400; } .vip-forest-green { background: linear-gradient(135deg, #166534, #059669); border-color: #dcfce7; color: #052e16; } .vip-purple-majesty { background: linear-gradient(135deg, #9333ea, #d946ef); border-color: #f3e8ff; } .vip-teal-essence { background: linear-gradient(135deg, #0d9488, #14b8a6); border-color: #ccfbf1; } .vip-scarlet-storm { background: linear-gradient(135deg, #dc2626, #f87171); border-color: #fee2e2; } .vip-indigo-night { background: linear-gradient(135deg, #4338ca, #6366f1); border-color: #e0e7ff; } .vip-vanilla-cream { background: linear-gradient(135deg, #fcd34d, #fbbf24); border-color: #fef3c7; color: #78350f; } .vip-slate-shadow { background: linear-gradient(135deg, #334155, #475569); border-color: #cbd5e1; }
.vip-bronze-warrior, .vip-obsidian-flame, .vip-ruby-crown, .vip-topaz-temple, .vip-opal-mist, .vip-crystal-palace, .vip-twilight-dusk, .vip-sunset-flame, .vip-ocean-mist, .vip-golden-kingdom, .vip-rose-whisper, .vip-violet-eclipse, .vip-emerald-lake, .vip-sapphire-throne, .vip-amber-temple, .vip-silver-twilight, .vip-bronze-legend, .vip-obsidian-night, .vip-ruby-dynasty, .vip-topaz-empire { color: #fff; font-weight: 900; }
.vip-bronze-warrior { background: linear-gradient(135deg, #c2410c, #ea580c); border-color: #fed7aa; } .vip-obsidian-flame { background: linear-gradient(135deg, #1f1f1f, #2a2a2a); border-color: #fca5a5; } .vip-ruby-crown { background: linear-gradient(135deg, #be185d, #f50b6a); border-color: #fce7f3; } .vip-topaz-temple { background: linear-gradient(135deg, #a16207, #b45309); border-color: #fcd34d; } .vip-opal-mist { background: linear-gradient(135deg, #e9d5ff, #ddd6fe); border-color: #c4b5fd; color: #1e1b4b; } .vip-crystal-palace { background: linear-gradient(135deg, #dbeafe, #bae6fd); border-color: #93c5fd; color: #082f49; } .vip-twilight-dusk { background: linear-gradient(135deg, #5b21b6, #7e22ce); border-color: #ede9fe; } .vip-sunset-flame { background: linear-gradient(135deg, #c2410c, #f97316); border-color: #fbbf24; } .vip-ocean-mist { background: linear-gradient(135deg, #0369a1, #0284c7); border-color: #cffafe; } .vip-golden-kingdom { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fef08a; color: #3a2400; } .vip-rose-whisper { background: linear-gradient(135deg, #9d174d, #ec4899); border-color: #fbf5ff; } .vip-violet-eclipse { background: linear-gradient(135deg, #7e22ce, #c084fc); border-color: #f3e8ff; } .vip-emerald-lake { background: linear-gradient(135deg, #059669, #10b981); border-color: #dcfce7; } .vip-sapphire-throne { background: linear-gradient(135deg, #0369a1, #0284c7); border-color: #dbeafe; } .vip-amber-temple { background: linear-gradient(135deg, #b45309, #facc15); border-color: #fef3c7; color: #451a03; } .vip-silver-twilight { background: linear-gradient(135deg, #cbd5e1, #94a3b8); border-color: #e2e8f0; color: #0f172a; } .vip-bronze-legend { background: linear-gradient(135deg, #b45309, #d97706); border-color: #fed7aa; } .vip-obsidian-night { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border-color: #6b7280; } .vip-ruby-dynasty { background: linear-gradient(135deg, #b91c62, #f50b6a); border-color: #fce7f3; } .vip-topaz-empire { background: linear-gradient(135deg, #a16207, #ca8a04); border-color: #fef08a; color: #44290c; }
.vip-midnight-crystal, .vip-sunset-desert, .vip-storm-cloud, .vip-ocean-pearl, .vip-golden-dawn, .vip-crimson-night, .vip-emerald-moss, .vip-sapphire-sky, .vip-rose-velvet, .vip-amber-glow, .vip-violet-dream, .vip-jade-forest, .vip-copper-rust, .vip-silver-frost, .vip-bronze-sand, .vip-obsidian-void, .vip-ruby-fire, .vip-topaz-sun, .vip-opal-light, .vip-crystal-dawn, .vip-midnight-aurora, .vip-sunset-blaze, .vip-storm-surge, .vip-ocean-depths, .vip-golden-lotus, .vip-crimson-rose, .vip-emerald-valley, .vip-sapphire-depths, .vip-rose-garden, .vip-amber-harvest, .vip-violet-night, .vip-jade-temple, .vip-copper-canyon, .vip-silver-snow { color: #fff; font-weight: 900; }
.vip-midnight-crystal { background: linear-gradient(135deg, #1e3a8a, #4f46e5); border-color: #93c5fd; } .vip-sunset-desert { background: linear-gradient(135deg, #b45309, #f97316); border-color: #fdbf2d; } .vip-storm-cloud { background: linear-gradient(135deg, #374151, #6b7280); border-color: #d1d5db; color: #0f172a; } .vip-ocean-pearl { background: linear-gradient(135deg, #0e7490, #22d3ee); border-color: #2dd4bf; } .vip-golden-dawn { background: linear-gradient(135deg, #854d0e, #facc15); border-color: #fde68a; color: #291d00; } .vip-crimson-night { background: linear-gradient(135deg, #991b1b, #dc2626); border-color: #fca5a5; } .vip-emerald-moss { background: linear-gradient(135deg, #065f46, #059669); border-color: #6ee7b7; } .vip-sapphire-sky { background: linear-gradient(135deg, #0c4a6e, #0284c7); border-color: #38bdf8; } .vip-rose-velvet { background: linear-gradient(135deg, #be185d, #ec4899); border-color: #f9a8d4; } .vip-amber-glow { background: linear-gradient(135deg, #b85c00, #fbbf24); border-color: #fde68a; } .vip-violet-dream { background: linear-gradient(135deg, #6b21a8, #a855f7); border-color: #d8b4fe; } .vip-jade-forest { background: linear-gradient(135deg, #0d9488, #14b8a6); border-color: #99f6e4; } .vip-copper-rust { background: linear-gradient(135deg, #92400e, #ea580c); border-color: #fdba74; } .vip-silver-frost { background: linear-gradient(135deg, #cbd5e1, #f1f5f9); border-color: #94a3b8; color: #0f172a; } .vip-bronze-sand { background: linear-gradient(135deg, #b45309, #d97706); border-color: #fcd34d; } .vip-obsidian-void { background: linear-gradient(135deg, #1a1a1a, #2a2a2a); border-color: #6b7280; } .vip-ruby-fire { background: linear-gradient(135deg, #b91c62, #f50b6a); border-color: #fbcfe8; } .vip-topaz-sun { background: linear-gradient(135deg, #f59e0b, #fbbf24); border-color: #fef08a; color: #44290c; } .vip-opal-light { background: linear-gradient(135deg, #e9d5ff, #f5d0fe); border-color: #c4b5fd; color: #1e1b4b; } .vip-crystal-dawn { background: linear-gradient(135deg, #0284c7, #38bdf8); border-color: #dbeafe; color: #082f49; } .vip-midnight-aurora { background: linear-gradient(135deg, #1e293b, #334155); border-color: #cbd5e1; } .vip-sunset-blaze { background: linear-gradient(135deg, #c2410c, #ea580c); border-color: #fed7aa; } .vip-storm-surge { background: linear-gradient(135deg, #0e7490, #22d3ee); border-color: #cffafe; } .vip-ocean-depths { background: linear-gradient(135deg, #0369a1, #0284c7); border-color: #e0f2fe; } .vip-golden-lotus { background: linear-gradient(135deg, #a16207, #ca8a04); border-color: #fef08a; color: #44290c; } .vip-crimson-rose { background: linear-gradient(135deg, #be185d, #f50b6a); border-color: #fce7f3; } .vip-emerald-valley { background: linear-gradient(135deg, #166534, #16a34a); border-color: #dcfce7; color: #0f2818; } .vip-sapphire-depths { background: linear-gradient(135deg, #1e40af, #3b82f6); border-color: #dbeafe; } .vip-rose-garden { background: linear-gradient(135deg, #be185d, #f43f5e); border-color: #fce7f3; } .vip-amber-harvest { background: linear-gradient(135deg, #d97706, #fbbf24); border-color: #fef3c7; color: #451a03; } .vip-violet-night { background: linear-gradient(135deg, #7e22ce, #d946ef); border-color: #f3e8ff; } .vip-jade-temple { background: linear-gradient(135deg, #0f766e, #0d9488); border-color: #ccfbf1; } .vip-copper-canyon { background: linear-gradient(135deg, #b45309, #ea580c); border-color: #fed7aa; } .vip-silver-snow { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); border-color: #f1f5f9; color: #0f172a; }
.vip .cvv-group {
background: rgba(255, 255, 255, 0.05);
padding: 5px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
user-select: none;
}
.cvv-group:hover {
background: rgba(255, 183, 3, 0.15);
border-color: #ffb703;
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 183, 3, 0.2);
}
.cvv-value {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 2px;
font-family: 'Courier New', Courier, monospace;
color: #ffb703;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.control-row {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 425px;
}
.account-switcher {
display: flex;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 6px;
gap: 6px;
justify-content: space-between;
align-items: center;
}
.switcher-title {
font-size: 0.75rem;
color: #888e95;
font-weight: 700;
letter-spacing: 1px;
padding-left: 8px;
}
.switch-btn-group {
display: flex;
gap: 6px;
}
.switch-account-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #888e95;
padding: 8px 14px;
font-size: 0.75rem;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.switch-account-btn.active {
background: linear-gradient(135deg, #06d6a0, #059669);
color: #fff;
border-color: transparent;
box-shadow: 0 0 10px rgba(6, 214, 160, 0.3);
}
.status-controller {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 10px 20px;
border-radius: 30px;
justify-content: space-between;
}
.status-text {
color: #888e95;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1px;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 26px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: #ef476f;
transition: .4s;
border-radius: 34px;
}
.slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #06d6a0;
}
input:checked+.slider::before {
transform: translateX(24px);
}
.action-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.action-btn {
background: linear-gradient(135deg, #00b4d8, #0077b6);
color: #fff;
border: none;
border-radius: 30px;
padding: 12px;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 180, 216, 0.2);
text-align: center;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 180, 216, 0.3);
}
.savings-btn {
background: linear-gradient(135deg, #ff758c, #ff7eb3);
box-shadow: 0 4px 12px rgba(255, 117, 140, 0.25);
}
.savings-btn:hover {
box-shadow: 0 6px 18px rgba(255, 117, 140, 0.4);
}
.type-selector {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.type-btn {
flex: 1;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #888e95;
font-weight: 700;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
}
.type-btn.active {
border-color: #ff758c;
background: rgba(255, 117, 140, 0.15);
color: #ff758c;
}
.search-tx-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 16px;
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.search-tx-title {
font-size: 0.85rem;
font-weight: 700;
color: #00b4d8;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
}
.search-tx-row {
display: flex;
gap: 8px;
}
.search-tx-input {
flex: 1;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px;
color: #fff;
font-size: 0.85rem;
font-weight: 600;
outline: none;
font-family: 'Courier New', Courier, monospace;
letter-spacing: 1px;
}
.search-tx-input:focus {
border-color: #00b4d8;
}
.search-tx-btn {
background: #00b4d8;
color: #000;
font-weight: 700;
border: none;
padding: 0 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
transition: background 0.2s;
}
.search-tx-btn:hover {
background: #0096c7;
color: #fff;
}
.tx-result-panel {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
padding: 12px;
font-size: 0.8rem;
line-height: 1.5;
color: #b0b5bc;
display: none;
border-left: 3px solid #06d6a0;
}
.dev-tool-btn {
background: rgba(255, 255, 255, 0.02);
border: 1px dashed rgba(255, 255, 255, 0.15);
color: #6c757d;
border-radius: 30px;
padding: 10px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.dev-tool-btn:hover {
background: rgba(255, 183, 3, 0.05);
border-color: #ffb703;
color: #ffb703;
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal-box {
background: linear-gradient(145deg, #181a20, #0f1115);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
width: 90%;
max-width: 360px;
padding: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
transform: scale(0.8);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
color: #fff;
}
.modal-overlay.active .modal-box {
transform: scale(1);
}
.modal-title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 12px;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 8px;
}
.modal-desc {
font-size: 0.8rem;
color: #888e95;
margin-bottom: 16px;
line-height: 1.4;
}
.input-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
text-align: left;
}
.input-group label {
color: #888e95;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.input-group input {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 12px;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
outline: none;
transition: all 0.25s ease;
width: 100%;
}
.input-group input:focus {
border-color: #00b4d8;
background: rgba(0, 180, 216, 0.04);
box-shadow: 0 0 10px rgba(0, 180, 216, 0.15);
}
.submit-btn {
background: #00b4d8;
color: #000;
border: none;
padding: 12px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
width: 100%;
margin-top: 5px;
box-shadow: 0 4px 10px rgba(0, 180, 216, 0.25);
}
.submit-btn:hover {
background: #0096c7;
color: #fff;
}
.btn-pink {
background: #ff758c;
color: #fff;
box-shadow: 0 4px 10px rgba(255, 117, 140, 0.25);
}
.btn-pink:hover {
background: #ff4f70;
}
.close-modal-btn {
background: transparent;
border: none;
color: #6c757d;
font-size: 0.8rem;
font-weight: 600;
display: block;
margin: 14px auto 0 auto;
cursor: pointer;
transition: color 0.2s;
}
.close-modal-btn:hover {
color: #fff;
}
</style>
</head>
<body>
<!-- 📢 DÒNG CHỮ CHẠY TRÊN CÙNG -->
<div class="running-text-container">
<div class="running-text">
<span class="badge-news">THÔNG BÁO</span> Chào mừng bạn đến với <span class="highlight">GENIUS BANK</span>! 💎 Hệ
thống tích hợp các themes độc đáo cực đỉnh. 👑 Mới cập nhật: <span class="highlight">Dragon, Ocean Deep, Cyber
Gold, Galaxy Purple, Chrono Gold, Aetheria</span>!
</div>
</div>
<!-- LOADER -->
<div class="loader-overlay" id="myLoader">
<div class="container">
<div class="box"></div>
</div>
</div>
<!-- GIAO DIỆN THẺ PREMIUM -->
<div class="card-container">
<div class="card" id="bankingCard">
<div class="card-overlay"></div>
<div class="brand-row">
<span class="bank-name">GENIUS BANK</span>
<div class="contactless"><span></span><span></span><span></span><span></span></div>
</div>
<div class="mid-row">
<div class="chip" id="bankChip" style="cursor: default;"></div>
<div class="balances-wrapper">
<div class="balance-box">
<div class="balance-label">AVAILABLE BALANCE</div>
<div class="balance-value" id="cardBalance">0 $</div>
</div>
<div class="balance-box">
<div class="balance-label" style="color: #ff85a2;">🐖 PIGGY SAVINGS</div>
<div class="savings-value" id="cardSavings">0 $</div>
</div>
</div>
</div>
<div class="account-box">
<div class="account-label">ACCOUNT NUMBER</div>
<div class="account-number" id="accountNo">Đang tải...</div>
</div>
<div class="card-number" id="cardNo">Đang tải...</div>
<div class="card-footer">
<div class="footer-group">
<div class="label">CARDHOLDER</div>
<div class="value" id="cardHolder">Đang tải...</div>
<span class="vip-badge" id="vipBadge" style="display: none;">MEMBER</span>
</div>
<div class="footer-group" style="align-items: center;">
<div class="label">EXPIRES</div>
<div class="value" id="cardExpiry">Đang tải...</div>
</div>
<div class="footer-group cvv-group" id="cvvButton">
<div class="label" style="margin-bottom: 2px; letter-spacing: 1px; pointer-events: none;">CVV</div>
<div class="cvv-value" id="cardCvv">000</div>
</div>
</div>
</div>
</div>
<!-- HÀNG ĐIỀU KHIỂN & CHỨC NĂNG -->
<div class="control-row">
<div class="account-switcher">
<span class="switcher-title">🔄 ĐĂNG NHẬP:</span>
<div class="switch-btn-group">
<button class="switch-account-btn active" id="btnThe1" data-path="bankCard">Thẻ 1</button>
<button class="switch-account-btn" id="btnThe2" data-path="bankCard2">Thẻ 2</button>
<button class="switch-account-btn" id="btnThe3" data-path="bankCard3">Thẻ 3</button>
</div>
</div>
<details style="color: white; background-color: #1e1e1e; padding: 10px; border-radius: 8px;">
<summary style="cursor: pointer; font-weight: bold;">Theme </summary>
<p>
VIP 1
VIP 2
VIP 3
💎 EMERALD
🔻 RUBY
🖤 OBSIDIAN
⚡ CYBER NEON
🌸 ROSE GOLD
🔹 DIAMOND
🌌 COSMIC
🥉 COPPER
🌙 MIDNIGHT
🧪 GLOW
🌌 AETHER
🌋 MAGMA
❄️ FROST
🌸 SAKURA
🥷 SHADOW
🤖 CYBERPUNK
🔱 ATLANTIS
💥 SUPERNOVA
🔮 AMETHYST
🌲 EMERALD DARK
☀️ SOLARIS
🪐 NEBULA
⚙️ TITANIUM
🔥 INFERNO
💻 MATRIX
🌈 PRISM
✨ GALAXY GOLD
⚡ ADMIN
👑 OWNER
⚙️ SYSTEM
👻 PHANTOM
🌸 SAKURA CYBER
🐉 DRAGON
🌊 OCEAN
⚡ CYBER GOLD
🔮 GALAXY
⏳ CHRONO GOLD
✨ AETHERIA
👑 SVIP
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quản Lý VIP Level & Balance - Firebase</title>
<style>
:root {
--bg-color: #0f172a;
--card-bg: #1e293b;
--accent-color: #38bdf8;
--accent-hover: #0284c7;
--text-main: #f8fafc;
--text-sub: #94a3b8;
--border-color: #334155;
--balance-color: #fbbf24;
--vip-color: #4ade80;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
width: 100%;
max-width: 900px;
}
.header {
text-align: center;
margin-bottom: 24px;
}
.header h1 {
font-size: 24px;
font-weight: 700;
}
.header p {
font-size: 14px;
color: var(--text-sub);
margin-top: 4px;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.card-item {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: #38bdf8;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.input-group label {
font-size: 13px;
color: var(--text-sub);
}
.custom-input {
background-color: var(--bg-color);
border: 1px solid var(--border-color);
font-size: 15px;
font-weight: 600;
padding: 10px 12px;
border-radius: 8px;
outline: none;
width: 100%;
transition: border-color 0.2s;
}
.vip-input {
color: var(--vip-color);
}
.balance-input {
color: var(--balance-color);
}
.custom-input:focus {
border-color: var(--accent-color);
}
.btn-save {
background-color: var(--accent-color);
color: #0f172a;
border: none;
padding: 12px;
border-radius: 8px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s;
margin-top: 4px;
}
.btn-save:hover {
background-color: var(--accent-hover);
}
.status-text {
font-size: 13px;
min-height: 18px;
color: var(--text-sub);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Chỉnh Sửa vipLevel & Balance</h1>
<p>Cập nhật cấp độ VIP và Số dư (Balance) trực tiếp lên Firebase</p>
</div>
<div class="cards-grid">
<!-- Thẻ bankCard -->
<div class="card-item">
<div class="card-title">bankCard</div>
<div class="input-group">
<label for="vip-bankCard">vipLevel:</label>
<input type="text" id="vip-bankCard" class="custom-input vip-input" placeholder="Nhập vipLevel...">
</div>
<div class="input-group">
<label for="bal-bankCard">balance:</label>
<input type="text" id="bal-bankCard" class="custom-input balance-input" placeholder="Nhập balance...">
</div>
<button class="btn-save" id="btn-bankCard">LƯU THÔNG TIN</button>
<div class="status-text" id="status-bankCard"></div>
</div>
<!-- Thẻ bankCard2 -->
<div class="card-item">
<div class="card-title">bankCard2</div>
<div class="input-group">
<label for="vip-bankCard2">vipLevel:</label>
<input type="text" id="vip-bankCard2" class="custom-input vip-input" placeholder="Nhập vipLevel...">
</div>
<div class="input-group">
<label for="bal-bankCard2">balance:</label>
<input type="text" id="bal-bankCard2" class="custom-input balance-input" placeholder="Nhập balance...">
</div>
<button class="btn-save" id="btn-bankCard2">LƯU THÔNG TIN</button>
<div class="status-text" id="status-bankCard2"></div>
</div>
<!-- Thẻ bankCard3 -->
<div class="card-item">
<div class="card-title">bankCard3</div>
<div class="input-group">
<label for="vip-bankCard3">vipLevel:</label>
<input type="text" id="vip-bankCard3" class="custom-input vip-input" placeholder="Nhập vipLevel...">
</div>
<div class="input-group">
<label for="bal-bankCard3">balance:</label>
<input type="text" id="bal-bankCard3" class="custom-input balance-input" placeholder="Nhập balance...">
</div>
<button class="btn-save" id="btn-bankCard3">LƯU THÔNG TIN</button>
<div class="status-text" id="status-bankCard3"></div>
</div>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
import { getDatabase, ref, update, onValue } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-database.js";
const firebaseConfig = {
apiKey: "AIzaSyBQEs5UNJ5XNGfmVuVakHGhWRVd0dHBQe0",
authDomain: "web-88a80.firebaseapp.com",
databaseURL: "https://web-88a80-default-rtdb.firebaseio.com",
projectId: "web-88a80",
storageBucket: "web-88a80.firebasestorage.app",
messagingSenderId: "299038015089",
appId: "1:299038015089:web:7a3f9b8db4225799b4e5d0",
measurementId: "G-ZV281RWTQE"
};
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const cards = ['bankCard', 'bankCard2', 'bankCard3'];
cards.forEach(cardName => {
const vipInput = document.getElementById(`vip-${cardName}`);
const balInput = document.getElementById(`bal-${cardName}`);
const btnEl = document.getElementById(`btn-${cardName}`);
const statusEl = document.getElementById(`status-${cardName}`);
// Lắng nghe dữ liệu cả node để tự lấy vipLevel và balance
const cardRef = ref(db, cardName);
onValue(cardRef, (snapshot) => {
const data = snapshot.val() || {};
if (document.activeElement !== vipInput) {
vipInput.value = (data.vipLevel !== undefined && data.vipLevel !== null) ? String(data.vipLevel) : "";
}
if (document.activeElement !== balInput) {
balInput.value = (data.balance !== undefined && data.balance !== null) ? String(data.balance) : "";
}
});
// Cập nhật cả vipLevel và balance lên Firebase
btnEl.addEventListener('click', async () => {
const vipValue = vipInput.value;
const balValue = balInput.value;
statusEl.style.color = "#94a3b8";
statusEl.innerText = "Đang lưu...";
try {
await update(cardRef, {
vipLevel: vipValue,
balance: balValue
});
statusEl.style.color = "#4ade80";
statusEl.innerText = "✓ Đã cập nhật!";
setTimeout(() => { statusEl.innerText = ""; }, 2500);
} catch (error) {
statusEl.style.color = "#ef4444";
statusEl.innerText = "Lỗi: " + error.message;
}
});
});
</script>
</body>
</html>
</p>
</details>
<div class="status-controller">
<span class="status-text" id="statusLabel">TRẠNG THÁI: ĐANG KHÓA</span>
<label class="switch">
<input type="checkbox" id="statusToggle">
<span class="slider"></span>
</label>
</div>
<div class="action-grid">
<button class="action-btn" id="openTransferModalBtn">💸 Chuyển Khoản</button>
<button class="action-btn savings-btn" id="openSavingsModalBtn">🐷 Gửi Tiết Kiệm</button>
</div>
<!-- 🔍 KHU VỰC NHẬP MÃ GIAO DỊCH TRA CỨU -->
<div class="search-tx-box">
<div class="search-tx-title">🔍 Kiểm Tra Mã Giao Dịch</div>
<div class="search-tx-row">
<input type="text" id="txSearchInput" class="search-tx-input" placeholder="Nhập mã TX... Ví dụ: TX123456">
<button id="txSearchBtn" class="search-tx-btn">Tìm kiếm</button>
</div>
<div id="txResultPanel" class="tx-result-panel"></div>
</div>
<!-- 🛠️ NÚT TỰ ĐỘNG SINH BANK MỚI KHÔNG TRÙNG NHAU -->
<button class="dev-tool-btn" id="createSecondCardBtn">🛠️ Tự động tạo một BANK ngẫu nhiên mới hoàn toàn lên
Firebase</button>
</div>
<!-- POPUP CHUYỂN KHOẢN LIÊN TÀI KHOẢN -->
<div class="modal-overlay" id="transferModal">
<div class="modal-box">
<div class="modal-title">💸 Chuyển Khoản Liên Tài Khoản</div>
<div class="input-group">
<label for="targetAccount">SỐ TÀI KHOẢN NHẬN</label>
<input type="text" id="targetAccount" placeholder="Nhập số tài khoản nhận...">
</div>
<div class="input-group">
<label for="transferAmount">SỐ TIỀN CHUYỂN ($)</label>
<input type="number" id="transferAmount" placeholder="Nhập số tiền muốn chuyển..." min="1">
</div>
<button class="submit-btn" id="transferBtn">Xác Nhận Chuyển Tiền</button>
<button class="close-modal-btn" id="closeTransferModalBtn">Hủy giao dịch</button>
</div>
</div>
<!-- POPUP TIẾT KIỆM -->
<div class="modal-overlay" id="savingsModal">
<div class="modal-box" style="border-color: rgba(255, 117, 140, 0.2);">
<div class="modal-title" style="color: #ff758c;">🐖 Quản Lý Sổ Tiết Kiệm</div>
<p class="modal-desc">Chuyển tiền qua lại giữa Tài khoản chính và Heo đất để tích lũy an toàn.</p>
<div class="type-selector">
<button class="type-btn active" id="typeDeposit">🐷 Gửi Vào</button>
<button class="type-btn" id="typeWithdraw">💰 Rút Ra</button>
</div>
<div class="input-group">
<label for="savingsAmount" id="savingsAmountLabel">SỐ TIỀN MUỐN GỬI VÀO HEO ($)</label>
<input type="number" id="savingsAmount" placeholder="Nhập số tiền..." min="1">
</div>
<button class="submit-btn btn-pink" id="savingsSubmitBtn">Xác Nhận Gửi Tiền</button>
<button class="close-modal-btn" id="closeSavingsModalBtn">Đóng sổ heo</button>
</div>
</div>
<!-- LOGIC XỬ LÝ FIREBASE -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
import { getDatabase, ref, onValue, update, get, child, set, off } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-database.js";
const firebaseConfig = {
apiKey: "AIzaSyBQEs5UNJ5XNGfmVuVakHGhWRVd0dHBQe0",
authDomain: "web-88a80.firebaseapp.com",
databaseURL: "https://web-88a80-default-rtdb.firebaseio.com",
projectId: "web-88a80",
storageBucket: "web-88a80.firebasestorage.app",
messagingSenderId: "299038015089",
appId: "1:299038015089:web:7a3f9b8db4225799b4e5d0",
measurementId: "G-ZV281RWTQE"
};
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
let currentCardPath = "bankCard";
let currentCardRef = ref(database, currentCardPath);
let currentCvv = 0, currentBalance = 0, currentSavings = 0, myAccountNumber = "", myHolderName = "";
let isCardActive = false, isUpdatingToggle = false, savingsActionType = "deposit";
const formatCurrency = (amount) => new Intl.NumberFormat('en-US').format(amount) + " $";
const bankingCard = document.getElementById("bankingCard");
const statusToggle = document.getElementById("statusToggle");
const statusLabel = document.getElementById("statusLabel");
const vipBadge = document.getElementById("vipBadge");
const cardHolder = document.getElementById("cardHolder");
// Ẩn Loader khi trang web đã nạp xong
window.addEventListener('load', () => {
const loader = document.getElementById('myLoader');
if (loader) {
loader.style.opacity = '0';
setTimeout(() => loader.style.display = 'none', 500);
}
});
function ketNoiRealtimeThe() {
off(currentCardRef);
currentCardRef = ref(database, currentCardPath);
onValue(currentCardRef, (snapshot) => {
const data = snapshot.val();
if (data) {
if (data.holder) {
myHolderName = data.holder;
cardHolder.innerText = myHolderName;
}
if (data.accountNumber) {
myAccountNumber = String(data.accountNumber).trim();
document.getElementById("accountNo").innerText = myAccountNumber;
}
if (data.number) document.getElementById("cardNo").innerText = data.number;
if (data.expiry) document.getElementById("cardExpiry").innerText = data.expiry;
currentCvv = data.cvv !== undefined ? Number(data.cvv) : 0;
currentBalance = data.balance !== undefined ? Number(data.balance) : 0;
currentSavings = data.savings !== undefined ? Number(data.savings) : 0;
document.getElementById("cardCvv").innerText = currentCvv;
document.getElementById("cardBalance").innerText = formatCurrency(currentBalance);
document.getElementById("cardSavings").innerText = formatCurrency(currentSavings);
let vipLevel = data.vipLevel !== undefined && data.vipLevel !== null ? String(data.vipLevel).trim().toLowerCase() : "0";
const extendedThemeNames = ["aurora-prism", "ember-orbit", "rose-comet", "jade-mirage", "sapphire-dusk", "golden-mist", "violet-river", "coral-moon", "mint-signal", "onyx-aurora", "pearl-cinder", "plum-tide", "forest-prism", "arctic-rose", "copper-night", "sky-lotus", "ruby-mist", "lime-velvet", "indigo-coral", "sunset-pearl", "teal-iris", "bronze-moon", "fuchsia-haze", "emerald-flare", "cobalt-rose", "honey-iris", "river-ember", "velvet-lime", "opal-ember", "moon-jade", "rose-onyx", "aqua-velvet", "ruby-lotus", "slate-flame", "iris-copper", "forest-ice", "sunstone-rose", "glass-orchid", "cinder-jade", "frost-ember", "plum-sapphire", "amber-ocean", "mauve-cove", "cyan-ember", "rose-sapphire", "moss-copper", "lilac-ocean", "silver-ember", "verdant-iris", "coral-sky", "noir-gold", "spring-reef", "dusk-mint", "cherry-ice", "indigo-honey", "azure-rose", "ember-lotus", "forest-gold", "moon-coral", "sapphire-ember", "lilac-ember", "teal-sunset", "pearl-jade", "copper-iris", "ruby-ocean", "graphite-rose", "mint-gold", "dusk-orchid", "amber-rose", "verdant-cyan", "silver-orchid", "solar-jade", "ocean-orchid", "cinder-sapphire", "rose-jade", "ice-gold", "lotus-cobalt", "coral-gold", "moss-rose", "indigo-pearl", "saffron-ice", "violet-garden", "aqua-gold", "ember-violet", "rose-cyan", "jade-saffron", "sapphire-lotus", "copper-jade", "moon-sapphire", "garnet-gold", "forest-rose", "azure-ember", "orchid-mint", "sunset-iris", "reef-copper", "pearl-violet", "jade-cobalt", "ember-pearl", "rose-amber", "ocean-jade", "lotus-ember", "cobalt-gold", "mint-orchid", "silver-jade", "violet-sunset", "aqua-rose", "forest-amber", "ruby-violet", "glacier-jade", "gold-orchid", "cyan-saffron", "rose-glacier", "ember-forest", "onyx-cyan", "plum-gold"];
const additionalThemePalettes = [["crimson", "#450a0a", "#dc2626", "#fca5a5"], ["teal", "#042f2e", "#0d9488", "#5eead4"], ["lavender", "#312e81", "#8b5cf6", "#ddd6fe"], ["copper", "#431407", "#c2410c", "#fdba74"], ["lime", "#14532d", "#65a30d", "#bef264"], ["rosewood", "#3b0764", "#be185d", "#f9a8d4"], ["storm", "#111827", "#475569", "#93c5fd"], ["saffron", "#451a03", "#d97706", "#fde68a"]];
const additionalThemeStyles = ["flare", "bloom", "current", "shadow", "spark"];
const additionalThemeNames = additionalThemePalettes.flatMap(palette => additionalThemeStyles.map(style => `${palette[0]}-${style}`));
const additionalThemeByName = new Map(additionalThemePalettes.flatMap(palette => additionalThemeStyles.map(style => [`${palette[0]}-${style}`, palette])));
const newestThemePalettes = [["ruby", "#4c0519", "#be123c", "#fb7185"], ["azure", "#082f49", "#0284c7", "#7dd3fc"], ["moss", "#052e16", "#166534", "#86efac"], ["tangerine", "#431407", "#ea580c", "#fdba74"], ["ultraviolet", "#312e81", "#7c3aed", "#c4b5fd"], ["lagoon", "#042f2e", "#0891b2", "#67e8f9"], ["honey", "#451a03", "#b45309", "#facc15"], ["orchid", "#4a044e", "#a21caf", "#f0abfc"], ["glacier", "#0c4a6e", "#3b82f6", "#bfdbfe"], ["fern", "#022c22", "#059669", "#a7f3d0"]];
const newestThemeStyles = ["veil", "crest", "pulse", "breeze", "arc"];
const newestThemeNames = newestThemePalettes.flatMap(palette => newestThemeStyles.map(style => `${palette[0]}-${style}`));
const newestThemeByName = new Map(newestThemePalettes.flatMap(palette => newestThemeStyles.map(style => [`${palette[0]}-${style}`, palette])));
const finalThemePalettes = [["aphelion", "#111827", "#4338ca", "#a78bfa"], ["sequoia", "#14532d", "#166534", "#84cc16"], ["cerulean", "#0c4a6e", "#0284c7", "#38bdf8"], ["magenta", "#701a75", "#be185d", "#f0abfc"]];
const finalThemeStyles = ["veil", "crest", "pulse", "breeze", "arc"];
const finalThemeNames = finalThemePalettes.flatMap(palette => finalThemeStyles.map(style => `${palette[0]}-${style}`));
const finalThemeByName = new Map(finalThemePalettes.flatMap(palette => finalThemeStyles.map(style => [`${palette[0]}-${style}`, palette])));
const megaThemePalettes = [["celestine", "#082f49", "#2563eb", "#67e8f9"], ["horizon", "#312e81", "#7c3aed", "#f0abfc"], ["firefly", "#052e16", "#16a34a", "#facc15"], ["bluebell", "#1e3a8a", "#6366f1", "#c4b5fd"], ["carnation", "#500724", "#e11d48", "#f9a8d4"], ["ironwood", "#1f2937", "#78350f", "#d97706"], ["sundial", "#451a03", "#d97706", "#fde68a"], ["wildwood", "#022c22", "#15803d", "#a3e635"], ["stardust", "#111827", "#475569", "#e9d5ff"], ["rainbow", "#1d4ed8", "#db2777", "#facc15"], ["moonstone2", "#0f172a", "#64748b", "#e0f2fe"], ["goldleaf", "#3a2400", "#a16207", "#bef264"], ["cloudberry", "#312e81", "#be185d", "#f5d0fe"], ["deepsea", "#042f2e", "#075985", "#22d3ee"], ["sunbeam", "#7c2d12", "#f59e0b", "#fef08a"], ["nightbloom", "#1e1b4b", "#4c1d95", "#fb7185"], ["seaglass", "#042f2e", "#0d9488", "#a7f3d0"], ["redwood", "#450a0a", "#9f1239", "#fb923c"], ["starling", "#0f172a", "#0369a1", "#c084fc"], ["auricmist", "#451a03", "#b45309", "#f5d0fe"]];
const megaThemeStyles = ["veil", "crest", "pulse", "breeze", "arc"];
const megaThemeNames = megaThemePalettes.flatMap(palette => megaThemeStyles.map(style => `${palette[0]}-${style}`));
const megaThemeByName = new Map(megaThemePalettes.flatMap(palette => megaThemeStyles.map(style => [`${palette[0]}-${style}`, palette])));
const megaThemeStyleTag = document.createElement("style");
megaThemeStyleTag.textContent = megaThemeNames.map(themeName => { const palette = megaThemeByName.get(themeName); return `.theme-${themeName}{--card-bg:linear-gradient(135deg,${palette[1]},${palette[2]} 52%,${palette[3]});--chip-bg:linear-gradient(135deg,#f8fafc,${palette[3]},#e0f2fe);--chip-border:${palette[3]};--text-primary:#f8fafc;--text-accent:${palette[3]};--text-shadow:rgba(255,255,255,.6);--card-border:${palette[3]};--card-glow:0 0 30px ${palette[2]}}.vip-${themeName}{background:linear-gradient(135deg,${palette[2]},${palette[3]}) !important;border-color:${palette[3]} !important;color:#fff !important}`; }).join("");
document.head.appendChild(megaThemeStyleTag);
const ultraThemePalettes = [["papaya", "#7c2d12", "#f97316", "#fde68a"], ["indigofox", "#1e1b4b", "#4338ca", "#fb923c"], ["copperleaf", "#3a1f09", "#b45309", "#86efac"], ["frostfire", "#082f49", "#60a5fa", "#fb7185"], ["mosaic", "#022c22", "#0f766e", "#f0abfc"], ["velour", "#4c0519", "#7e22ce", "#fbbf24"], ["zenith", "#0f172a", "#0ea5e9", "#fef08a"]];
const ultraThemeStyles = ["veil", "crest", "pulse", "breeze", "arc"];
const ultraThemeNames = ultraThemePalettes.flatMap(palette => ultraThemeStyles.map(style => `${palette[0]}-${style}`));
const ultraThemeByName = new Map(ultraThemePalettes.flatMap(palette => ultraThemeStyles.map(style => [`${palette[0]}-${style}`, palette])));
const ultraThemeStyleTag = document.createElement("style");
ultraThemeStyleTag.textContent = ultraThemeNames.map(themeName => { const palette = ultraThemeByName.get(themeName); return `.theme-${themeName}{--card-bg:linear-gradient(135deg,${palette[1]},${palette[2]} 52%,${palette[3]});--chip-bg:linear-gradient(135deg,#f8fafc,${palette[3]},#e0f2fe);--chip-border:${palette[3]};--text-primary:#f8fafc;--text-accent:${palette[3]};--text-shadow:rgba(255,255,255,.6);--card-border:${palette[3]};--card-glow:0 0 30px ${palette[2]}}.vip-${themeName}{background:linear-gradient(135deg,${palette[2]},${palette[3]}) !important;border-color:${palette[3]} !important;color:#fff !important}`; }).join("");
document.head.appendChild(ultraThemeStyleTag);
// Xóa các class Theme cũ
bankingCard.className = "card";
vipBadge.className = "vip-badge";
cardHolder.className = "value";
["--card-bg", "--chip-bg", "--chip-border", "--text-primary", "--text-accent", "--text-shadow", "--card-border", "--card-glow"].forEach(property => bankingCard.style.removeProperty(property));
vipBadge.style.display = "inline-flex";
vipBadge.style.background = "";
vipBadge.style.color = "";
if (vipLevel === "1") { vipBadge.innerText = "VIP 1"; vipBadge.classList.add("vip-lv1"); bankingCard.classList.add("theme-vip1"); }
else if (vipLevel === "2") { vipBadge.innerText = "VIP 2"; vipBadge.classList.add("vip-lv2"); bankingCard.classList.add("theme-vip-gold"); }
else if (vipLevel === "3") { vipBadge.innerText = "VIP 3"; vipBadge.classList.add("vip-lv3"); bankingCard.classList.add("theme-vip-gold"); }
else if (vipLevel === "4" || vipLevel === "emerald") { vipBadge.innerText = "💎 EMERALD"; vipBadge.classList.add("vip-emerald"); bankingCard.classList.add("theme-emerald"); }
else if (vipLevel === "5" || vipLevel === "ruby") { vipBadge.innerText = "🔻 RUBY"; vipBadge.classList.add("vip-ruby"); bankingCard.classList.add("theme-ruby"); }
else if (vipLevel === "black" || vipLevel === "obsidian") { vipBadge.innerText = "🖤 OBSIDIAN"; vipBadge.classList.add("vip-obsidian"); bankingCard.classList.add("theme-obsidian"); }
else if (vipLevel === "neon" || vipLevel === "cyber") { vipBadge.innerText = "⚡ CYBER NEON"; vipBadge.classList.add("vip-neon"); bankingCard.classList.add("theme-neon"); }
else if (vipLevel === "rosegold" || vipLevel === "pink") { vipBadge.innerText = "🌸 ROSE GOLD"; vipBadge.classList.add("vip-rosegold"); bankingCard.classList.add("theme-rosegold"); }
else if (vipLevel === "diamond") { vipBadge.innerText = "🔹 DIAMOND"; vipBadge.classList.add("vip-diamond"); bankingCard.classList.add("theme-diamond"); }
else if (vipLevel === "cosmic" || vipLevel === "galaxy") { vipBadge.innerText = "🌌 COSMIC"; vipBadge.classList.add("vip-cosmic"); bankingCard.classList.add("theme-cosmic"); }
else if (vipLevel === "copper") { vipBadge.innerText = "🥉 COPPER"; vipBadge.classList.add("vip-copper"); bankingCard.classList.add("theme-copper"); }
else if (vipLevel === "midnight") { vipBadge.innerText = "🌙 MIDNIGHT"; vipBadge.classList.add("vip-midnight"); bankingCard.classList.add("theme-midnight"); }
else if (vipLevel === "glow") { vipBadge.innerText = "🧪 GLOW"; vipBadge.classList.add("vip-glow"); bankingCard.classList.add("theme-glow"); }
else if (vipLevel === "aether") { vipBadge.innerText = "🌌 AETHER"; vipBadge.classList.add("vip-aether"); bankingCard.classList.add("theme-aether"); }
else if (vipLevel === "magma" || vipLevel === "lava") { vipBadge.innerText = "🌋 MAGMA"; vipBadge.classList.add("vip-magma"); bankingCard.classList.add("theme-magma"); }
else if (vipLevel === "frost" || vipLevel === "ice") { vipBadge.innerText = "❄️ FROST"; vipBadge.classList.add("vip-frost"); bankingCard.classList.add("theme-frost"); }
else if (vipLevel === "sakura") { vipBadge.innerText = "🌸 SAKURA"; vipBadge.classList.add("vip-sakura"); bankingCard.classList.add("theme-sakura"); }
else if (vipLevel === "shadow") { vipBadge.innerText = "🥷 SHADOW"; vipBadge.classList.add("vip-shadow"); bankingCard.classList.add("theme-shadow"); }
else if (vipLevel === "cyberpunk") { vipBadge.innerText = "🤖 CYBERPUNK"; vipBadge.classList.add("vip-cyberpunk"); bankingCard.classList.add("theme-cyberpunk"); }
else if (vipLevel === "atlantis") { vipBadge.innerText = "🔱 ATLANTIS"; vipBadge.classList.add("vip-atlantis"); bankingCard.classList.add("theme-atlantis"); }
else if (vipLevel === "supernova") { vipBadge.innerText = "💥 SUPERNOVA"; vipBadge.classList.add("vip-supernova"); bankingCard.classList.add("theme-supernova"); }
else if (vipLevel === "amethyst") { vipBadge.innerText = "🔮 AMETHYST"; vipBadge.classList.add("vip-amethyst"); bankingCard.classList.add("theme-amethyst"); }
else if (vipLevel === "emerald-dark") { vipBadge.innerText = "🌲 EMERALD DARK"; vipBadge.classList.add("vip-emerald-dark"); bankingCard.classList.add("theme-emerald-dark"); }
else if (vipLevel === "solaris") { vipBadge.innerText = "☀️ SOLARIS"; vipBadge.classList.add("vip-solaris"); bankingCard.classList.add("theme-solaris"); }
else if (vipLevel === "nebula") { vipBadge.innerText = "🪐 NEBULA"; vipBadge.classList.add("vip-nebula"); bankingCard.classList.add("theme-nebula"); }
else if (vipLevel === "titanium") { vipBadge.innerText = "⚙️ TITANIUM"; vipBadge.classList.add("vip-titanium"); bankingCard.classList.add("theme-titanium"); }
else if (vipLevel === "inferno") { vipBadge.innerText = "🔥 INFERNO"; vipBadge.classList.add("vip-inferno"); bankingCard.classList.add("theme-inferno"); }
else if (vipLevel === "matrix") { vipBadge.innerText = "💻 MATRIX"; vipBadge.classList.add("vip-matrix"); bankingCard.classList.add("theme-matrix"); }
else if (vipLevel === "prism") { vipBadge.innerText = "🌈 PRISM"; vipBadge.classList.add("vip-prism"); bankingCard.classList.add("theme-prism"); }
else if (vipLevel === "galaxy-gold" || vipLevel === "galaxygold") { vipBadge.innerText = "✨ GALAXY GOLD"; vipBadge.classList.add("vip-galaxy-gold"); bankingCard.classList.add("theme-galaxy-gold"); }
else if (vipLevel === "admin" || vipLevel === "administrator") { vipBadge.innerText = "⚡ ADMIN"; vipBadge.classList.add("vip-admin"); bankingCard.classList.add("theme-admin"); }
else if (vipLevel === "owner" || vipLevel === "creator") { vipBadge.innerText = "👑 OWNER"; vipBadge.classList.add("vip-owner"); bankingCard.classList.add("theme-owner"); }
else if (vipLevel === "system" || vipLevel === "sys" || vipLevel === "system-admin" || vipLevel === "he-thong") { vipBadge.innerText = "⚙️ SYSTEM"; vipBadge.classList.add("vip-system"); bankingCard.classList.add("theme-system"); }
else if (vipLevel === "phantom" || vipLevel === "ghost") { vipBadge.innerText = "👻 PHANTOM"; vipBadge.classList.add("vip-phantom"); bankingCard.classList.add("theme-phantom"); }
else if (vipLevel === "sakura-cyber" || vipLevel === "sakura_cyber" || vipLevel === "cyber-sakura") { vipBadge.innerText = "🌸 SAKURA CYBER"; vipBadge.classList.add("vip-sakura-cyber"); bankingCard.classList.add("theme-sakura-cyber"); }
else if (vipLevel === "dragon" || vipLevel === "rong") { vipBadge.innerText = "🐉 DRAGON"; vipBadge.classList.add("vip-dragon"); bankingCard.classList.add("theme-dragon"); }
else if (vipLevel === "ocean-deep" || vipLevel === "ocean") { vipBadge.innerText = "🌊 OCEAN"; vipBadge.classList.add("vip-ocean-deep"); bankingCard.classList.add("theme-ocean-deep"); }
else if (vipLevel === "cyber-gold" || vipLevel === "cybergold") { vipBadge.innerText = "⚡ CYBER GOLD"; vipBadge.classList.add("vip-cyber-gold"); bankingCard.classList.add("theme-cyber-gold"); }
else if (vipLevel === "galaxy-purple" || vipLevel === "galaxypurple") { vipBadge.innerText = "🔮 GALAXY"; vipBadge.classList.add("vip-galaxy-purple"); bankingCard.classList.add("theme-galaxy-purple"); }
else if (vipLevel === "chrono-gold" || vipLevel === "chrono") { vipBadge.innerText = "⏳ CHRONO GOLD"; vipBadge.classList.add("vip-chrono-gold"); bankingCard.classList.add("theme-chrono-gold"); }
else if (vipLevel === "aetheria") { vipBadge.innerText = "✨ AETHERIA"; vipBadge.classList.add("vip-aetheria"); bankingCard.classList.add("theme-aetheria"); }
else if (vipLevel === "svip" || vipLevel === "s-vip") { vipBadge.innerText = "👑 SVIP"; vipBadge.classList.add("vip-svip"); bankingCard.classList.add("theme-svip-card"); }
else if (vipLevel === "aurora") { vipBadge.innerText = "🌌 AURORA"; vipBadge.classList.add("vip-aurora"); bankingCard.classList.add("theme-aurora"); }
else if (vipLevel === "champagne") { vipBadge.innerText = "🥂 CHAMPAGNE"; vipBadge.classList.add("vip-champagne"); bankingCard.classList.add("theme-champagne"); }
else if (vipLevel === "pink" || vipLevel === "rose-gold") { vipBadge.innerText = "🌹 PINK"; vipBadge.classList.add("vip-pink"); bankingCard.classList.add("theme-pink"); }
else if (vipLevel === "tuonglai" || vipLevel === "cyber-neon") { vipBadge.innerText = "🔮 TƯƠNG LAI"; vipBadge.classList.add("vip-tuonglai"); bankingCard.classList.add("theme-tuonglai"); }
else if (vipLevel === "sunset" || vipLevel === "sunset-glow") { vipBadge.innerText = "🌅 SUNSET"; vipBadge.classList.add("vip-sunset"); bankingCard.classList.add("theme-sunset"); }
else if (vipLevel === "aurora-neon" || vipLevel === "auroraneon") { vipBadge.innerText = "🌌 AURORA NEON"; vipBadge.classList.add("vip-aurora-neon"); bankingCard.classList.add("theme-aurora-neon"); }
else if (vipLevel === "cyberpunk-neon" || vipLevel === "cyberpunkneon") { vipBadge.innerText = "🤖 CYBERPUNK NEON"; vipBadge.classList.add("vip-cyberpunk-neon"); bankingCard.classList.add("theme-cyberpunk-neon"); }
else if (vipLevel === "solar-flare" || vipLevel === "solarflare") { vipBadge.innerText = "☀️ SOLAR FLARE"; vipBadge.classList.add("vip-solar-flare"); bankingCard.classList.add("theme-solar-flare"); }
else if (vipLevel === "lunar-eclipse" || vipLevel === "lunareclipse") { vipBadge.innerText = "🌑 LUNAR ECLIPSE"; vipBadge.classList.add("vip-lunar-eclipse"); bankingCard.classList.add("theme-lunar-eclipse"); }
else if (vipLevel === "forest") { vipBadge.innerText = "🌲 FOREST"; vipBadge.classList.add("vip-forest"); bankingCard.classList.add("theme-forest"); }
else if (vipLevel === "deep-ocean" || vipLevel === "deepocean") { vipBadge.innerText = "🌊 DEEP OCEAN"; vipBadge.classList.add("vip-deep-ocean"); bankingCard.classList.add("theme-deep-ocean"); }
else if (vipLevel === "candy" || vipLevel === "candy-pop") { vipBadge.innerText = "🍬 CANDY POP"; vipBadge.classList.add("vip-candy"); bankingCard.classList.add("theme-candy"); }
else if (vipLevel === "toxic") { vipBadge.innerText = "☢️ TOXIC"; vipBadge.classList.add("vip-toxic"); bankingCard.classList.add("theme-toxic"); }
else if (vipLevel === "arctic") { vipBadge.innerText = "🧊 ARCTIC"; vipBadge.classList.add("vip-arctic"); bankingCard.classList.add("theme-arctic"); }
else if (vipLevel === "lava") { vipBadge.innerText = "🌋 LAVA"; vipBadge.classList.add("vip-lava"); bankingCard.classList.add("theme-lava"); }
else if (vipLevel === "royal-purple" || vipLevel === "royalpurple") { vipBadge.innerText = "👑 ROYAL PURPLE"; vipBadge.classList.add("vip-royal-purple"); bankingCard.classList.add("theme-royal-purple"); }
else if (vipLevel === "holographic" || vipLevel === "holo") { vipBadge.innerText = "🌈 HOLOGRAPHIC"; vipBadge.classList.add("vip-holographic"); bankingCard.classList.add("theme-holographic"); }
else if (vipLevel === "steel-blue" || vipLevel === "steelblue") { vipBadge.innerText = "🔩 STEEL BLUE"; vipBadge.classList.add("vip-steel-blue"); bankingCard.classList.add("theme-steel-blue"); }
else if (vipLevel === "nebula-storm" || vipLevel === "nebulastorm") { vipBadge.innerText = "🌌 NEBULA STORM"; vipBadge.classList.add("vip-nebula-storm"); bankingCard.classList.add("theme-nebula-storm"); }
else if (vipLevel === "midnight-crystal" || vipLevel === "midnightcrystal") { vipBadge.innerText = "❄️ MIDNIGHT CRYSTAL"; vipBadge.classList.add("vip-midnight-crystal"); bankingCard.classList.add("theme-midnight-crystal"); }
else if (vipLevel === "sunset-desert" || vipLevel === "sunsetdesert") { vipBadge.innerText = "🌵 SUNSET DESERT"; vipBadge.classList.add("vip-sunset-desert"); bankingCard.classList.add("theme-sunset-desert"); }
else if (vipLevel === "storm-cloud" || vipLevel === "stormcloud") { vipBadge.innerText = "⛈️ STORM CLOUD"; vipBadge.classList.add("vip-storm-cloud"); bankingCard.classList.add("theme-storm-cloud"); }
else if (vipLevel === "ocean-pearl" || vipLevel === "oceanpearl") { vipBadge.innerText = "🦪 OCEAN PEARL"; vipBadge.classList.add("vip-ocean-pearl"); bankingCard.classList.add("theme-ocean-pearl"); }
else if (vipLevel === "golden-dawn" || vipLevel === "goldendawn") { vipBadge.innerText = "🌅 GOLDEN DAWN"; vipBadge.classList.add("vip-golden-dawn"); bankingCard.classList.add("theme-golden-dawn"); }
else if (vipLevel === "crimson-night" || vipLevel === "crimsonnight") { vipBadge.innerText = "🌙 CRIMSON NIGHT"; vipBadge.classList.add("vip-crimson-night"); bankingCard.classList.add("theme-crimson-night"); }
else if (vipLevel === "emerald-moss" || vipLevel === "emeraldmoss") { vipBadge.innerText = "🌿 EMERALD MOSS"; vipBadge.classList.add("vip-emerald-moss"); bankingCard.classList.add("theme-emerald-moss"); }
else if (vipLevel === "sapphire-sky" || vipLevel === "sapphiresky") { vipBadge.innerText = "💎 SAPPHIRE SKY"; vipBadge.classList.add("vip-sapphire-sky"); bankingCard.classList.add("theme-sapphire-sky"); }
else if (vipLevel === "rose-velvet" || vipLevel === "rosevelvet") { vipBadge.innerText = "🌹 ROSE VELVET"; vipBadge.classList.add("vip-rose-velvet"); bankingCard.classList.add("theme-rose-velvet"); }
else if (vipLevel === "amber-glow" || vipLevel === "ambергlow") { vipBadge.innerText = "✨ AMBER GLOW"; vipBadge.classList.add("vip-amber-glow"); bankingCard.classList.add("theme-amber-glow"); }
else if (vipLevel === "violet-dream" || vipLevel === "violetdream") { vipBadge.innerText = "💫 VIOLET DREAM"; vipBadge.classList.add("vip-violet-dream"); bankingCard.classList.add("theme-violet-dream"); }
else if (vipLevel === "jade-forest" || vipLevel === "jadeforest") { vipBadge.innerText = "🌲 JADE FOREST"; vipBadge.classList.add("vip-jade-forest"); bankingCard.classList.add("theme-jade-forest"); }
else if (vipLevel === "copper-rust" || vipLevel === "copperrust") { vipBadge.innerText = "🧡 COPPER RUST"; vipBadge.classList.add("vip-copper-rust"); bankingCard.classList.add("theme-copper-rust"); }
else if (vipLevel === "silver-frost" || vipLevel === "silverfrost") { vipBadge.innerText = "❄️ SILVER FROST"; vipBadge.classList.add("vip-silver-frost"); bankingCard.classList.add("theme-silver-frost"); }
else if (vipLevel === "bronze-sand" || vipLevel === "bronzesand") { vipBadge.innerText = "🏜️ BRONZE SAND"; vipBadge.classList.add("vip-bronze-sand"); bankingCard.classList.add("theme-bronze-sand"); }
else if (vipLevel === "obsidian-void" || vipLevel === "obsidianvoid") { vipBadge.innerText = "🕳️ OBSIDIAN VOID"; vipBadge.classList.add("vip-obsidian-void"); bankingCard.classList.add("theme-obsidian-void"); }
else if (vipLevel === "ruby-fire" || vipLevel === "rubyfire") { vipBadge.innerText = "🔥 RUBY FIRE"; vipBadge.classList.add("vip-ruby-fire"); bankingCard.classList.add("theme-ruby-fire"); }
else if (vipLevel === "topaz-sun" || vipLevel === "topazsum") { vipBadge.innerText = "☀️ TOPAZ SUN"; vipBadge.classList.add("vip-topaz-sun"); bankingCard.classList.add("theme-topaz-sun"); }
else if (vipLevel === "opal-light" || vipLevel === "opallight") { vipBadge.innerText = "💎 OPAL LIGHT"; vipBadge.classList.add("vip-opal-light"); bankingCard.classList.add("theme-opal-light"); }
else if (vipLevel === "crystal-dawn" || vipLevel === "crystaldawn") { vipBadge.innerText = "❄️ CRYSTAL DAWN"; vipBadge.classList.add("vip-crystal-dawn"); bankingCard.classList.add("theme-crystal-dawn"); }
else if (vipLevel === "midnight-aurora" || vipLevel === "midnightaurora") { vipBadge.innerText = "🌌 MIDNIGHT AURORA"; vipBadge.classList.add("vip-midnight-aurora"); bankingCard.classList.add("theme-midnight-aurora"); }
else if (vipLevel === "sunset-blaze" || vipLevel === "sunsetblaze") { vipBadge.innerText = "🔥 SUNSET BLAZE"; vipBadge.classList.add("vip-sunset-blaze"); bankingCard.classList.add("theme-sunset-blaze"); }
else if (vipLevel === "storm-surge" || vipLevel === "stormsurge") { vipBadge.innerText = "🌊 STORM SURGE"; vipBadge.classList.add("vip-storm-surge"); bankingCard.classList.add("theme-storm-surge"); }
else if (vipLevel === "ocean-depths" || vipLevel === "oceandepths") { vipBadge.innerText = "🌊 OCEAN DEPTHS"; vipBadge.classList.add("vip-ocean-depths"); bankingCard.classList.add("theme-ocean-depths"); }
else if (vipLevel === "golden-lotus" || vipLevel === "goldenlotus") { vipBadge.innerText = "🪷 GOLDEN LOTUS"; vipBadge.classList.add("vip-golden-lotus"); bankingCard.classList.add("theme-golden-lotus"); }
else if (vipLevel === "crimson-rose" || vipLevel === "crimsonrose") { vipBadge.innerText = "🌹 CRIMSON ROSE"; vipBadge.classList.add("vip-crimson-rose"); bankingCard.classList.add("theme-crimson-rose"); }
else if (vipLevel === "emerald-valley" || vipLevel === "emeraldvalley") { vipBadge.innerText = "🏞️ EMERALD VALLEY"; vipBadge.classList.add("vip-emerald-valley"); bankingCard.classList.add("theme-emerald-valley"); }
else if (vipLevel === "sapphire-depths" || vipLevel === "sapphiredepths") { vipBadge.innerText = "💎 SAPPHIRE DEPTHS"; vipBadge.classList.add("vip-sapphire-depths"); bankingCard.classList.add("theme-sapphire-depths"); }
else if (vipLevel === "rose-garden" || vipLevel === "rosegarden") { vipBadge.innerText = "🌸 ROSE GARDEN"; vipBadge.classList.add("vip-rose-garden"); bankingCard.classList.add("theme-rose-garden"); }
else if (vipLevel === "amber-harvest" || vipLevel === "amberharvest") { vipBadge.innerText = "🌾 AMBER HARVEST"; vipBadge.classList.add("vip-amber-harvest"); bankingCard.classList.add("theme-amber-harvest"); }
else if (vipLevel === "violet-night" || vipLevel === "violetnight") { vipBadge.innerText = "🌙 VIOLET NIGHT"; vipBadge.classList.add("vip-violet-night"); bankingCard.classList.add("theme-violet-night"); }
else if (vipLevel === "jade-temple" || vipLevel === "jadetemple") { vipBadge.innerText = "🏯 JADE TEMPLE"; vipBadge.classList.add("vip-jade-temple"); bankingCard.classList.add("theme-jade-temple"); }
else if (vipLevel === "copper-canyon" || vipLevel === "coppercanyon") { vipBadge.innerText = "🏜️ COPPER CANYON"; vipBadge.classList.add("vip-copper-canyon"); bankingCard.classList.add("theme-copper-canyon"); }
else if (vipLevel === "bronze-warrior" || vipLevel === "bronzewarrior") { vipBadge.innerText = "⛔ BRONZE WARRIOR"; vipBadge.classList.add("vip-bronze-warrior"); bankingCard.classList.add("theme-bronze-warrior"); }
else if (vipLevel === "obsidian-flame" || vipLevel === "obsidianflame") { vipBadge.innerText = "🔥 OBSIDIAN FLAME"; vipBadge.classList.add("vip-obsidian-flame"); bankingCard.classList.add("theme-obsidian-flame"); }
else if (vipLevel === "ruby-crown" || vipLevel === "rubycrown") { vipBadge.innerText = "👑 RUBY CROWN"; vipBadge.classList.add("vip-ruby-crown"); bankingCard.classList.add("theme-ruby-crown"); }
else if (vipLevel === "topaz-temple" || vipLevel === "topaztemple") { vipBadge.innerText = "🏯 TOPAZ TEMPLE"; vipBadge.classList.add("vip-topaz-temple"); bankingCard.classList.add("theme-topaz-temple"); }
else if (vipLevel === "opal-mist" || vipLevel === "opalmist") { vipBadge.innerText = "🌫️ OPAL MIST"; vipBadge.classList.add("vip-opal-mist"); bankingCard.classList.add("theme-opal-mist"); }
else if (vipLevel === "crystal-palace" || vipLevel === "crystalpalace") { vipBadge.innerText = "🏯 CRYSTAL PALACE"; vipBadge.classList.add("vip-crystal-palace"); bankingCard.classList.add("theme-crystal-palace"); }
else if (vipLevel === "twilight-dusk" || vipLevel === "twilightdusk") { vipBadge.innerText = "🌐 TWILIGHT DUSK"; vipBadge.classList.add("vip-twilight-dusk"); bankingCard.classList.add("theme-twilight-dusk"); }
else if (vipLevel === "sunset-flame" || vipLevel === "sunsetflame") { vipBadge.innerText = "🔥 SUNSET FLAME"; vipBadge.classList.add("vip-sunset-flame"); bankingCard.classList.add("theme-sunset-flame"); }
else if (vipLevel === "ocean-mist" || vipLevel === "oceanmist") { vipBadge.innerText = "🌊 OCEAN MIST"; vipBadge.classList.add("vip-ocean-mist"); bankingCard.classList.add("theme-ocean-mist"); }
else if (vipLevel === "golden-kingdom" || vipLevel === "goldenkingdom") { vipBadge.innerText = "👑 GOLDEN KINGDOM"; vipBadge.classList.add("vip-golden-kingdom"); bankingCard.classList.add("theme-golden-kingdom"); }
else if (vipLevel === "rose-whisper" || vipLevel === "rosewhisper") { vipBadge.innerText = "🌹 ROSE WHISPER"; vipBadge.classList.add("vip-rose-whisper"); bankingCard.classList.add("theme-rose-whisper"); }
else if (vipLevel === "violet-eclipse" || vipLevel === "violeteclipse") { vipBadge.innerText = "💎 VIOLET ECLIPSE"; vipBadge.classList.add("vip-violet-eclipse"); bankingCard.classList.add("theme-violet-eclipse"); }
else if (vipLevel === "emerald-lake" || vipLevel === "emeraldlake") { vipBadge.innerText = "💧 EMERALD LAKE"; vipBadge.classList.add("vip-emerald-lake"); bankingCard.classList.add("theme-emerald-lake"); }
else if (vipLevel === "sapphire-throne" || vipLevel === "sapphirethrone") { vipBadge.innerText = "👑 SAPPHIRE THRONE"; vipBadge.classList.add("vip-sapphire-throne"); bankingCard.classList.add("theme-sapphire-throne"); }
else if (vipLevel === "amber-temple" || vipLevel === "ambertemple") { vipBadge.innerText = "🏯 AMBER TEMPLE"; vipBadge.classList.add("vip-amber-temple"); bankingCard.classList.add("theme-amber-temple"); }
else if (vipLevel === "silver-twilight" || vipLevel === "silvertwilight") { vipBadge.innerText = "🌐 SILVER TWILIGHT"; vipBadge.classList.add("vip-silver-twilight"); bankingCard.classList.add("theme-silver-twilight"); }
else if (vipLevel === "bronze-legend" || vipLevel === "bronzelegend") { vipBadge.innerText = "👑 BRONZE LEGEND"; vipBadge.classList.add("vip-bronze-legend"); bankingCard.classList.add("theme-bronze-legend"); }
else if (vipLevel === "obsidian-night" || vipLevel === "obsidiannight") { vipBadge.innerText = "🌙 OBSIDIAN NIGHT"; vipBadge.classList.add("vip-obsidian-night"); bankingCard.classList.add("theme-obsidian-night"); }
else if (vipLevel === "ruby-dynasty" || vipLevel === "rubydynasty") { vipBadge.innerText = "👑 RUBY DYNASTY"; vipBadge.classList.add("vip-ruby-dynasty"); bankingCard.classList.add("theme-ruby-dynasty"); }
else if (vipLevel === "phoenix-rising" || vipLevel === "phoenixrising") { vipBadge.innerText = "🔥 PHOENIX RISING"; vipBadge.classList.add("vip-phoenix-rising"); bankingCard.classList.add("theme-phoenix-rising"); }
else if (vipLevel === "lunar-silver" || vipLevel === "lunarsilver") { vipBadge.innerText = "🌜 LUNAR SILVER"; vipBadge.classList.add("vip-lunar-silver"); bankingCard.classList.add("theme-lunar-silver"); }
else if (vipLevel === "inferno-rage" || vipLevel === "infernorage") { vipBadge.innerText = "🔥 INFERNO RAGE"; vipBadge.classList.add("vip-inferno-rage"); bankingCard.classList.add("theme-inferno-rage"); }
else if (vipLevel === "glacier-peak" || vipLevel === "glacierpeak") { vipBadge.innerText = "⚰ GLACIER PEAK"; vipBadge.classList.add("vip-glacier-peak"); bankingCard.classList.add("theme-glacier-peak"); }
else if (vipLevel === "mystic-void" || vipLevel === "mysticvoid") { vipBadge.innerText = "🌌 MYSTIC VOID"; vipBadge.classList.add("vip-mystic-void"); bankingCard.classList.add("theme-mystic-void"); }
else if (vipLevel === "coral-reef" || vipLevel === "coralreef") { vipBadge.innerText = " ꪋ CORAL REEF"; vipBadge.classList.add("vip-coral-reef"); bankingCard.classList.add("theme-coral-reef"); }
else if (vipLevel === "shadow-realm" || vipLevel === "shadowrealm") { vipBadge.innerText = "🕳 SHADOW REALM"; vipBadge.classList.add("vip-shadow-realm"); bankingCard.classList.add("theme-shadow-realm"); }
else if (vipLevel === "celestial-blue" || vipLevel === "celestialblue") { vipBadge.innerText = "💎 CELESTIAL BLUE"; vipBadge.classList.add("vip-celestial-blue"); bankingCard.classList.add("theme-celestial-blue"); }
else if (vipLevel === "bloom-garden" || vipLevel === "bloomgarden") { vipBadge.innerText = "🌸 BLOOM GARDEN"; vipBadge.classList.add("vip-bloom-garden"); bankingCard.classList.add("theme-bloom-garden"); }
else if (vipLevel === "terra-cotta" || vipLevel === "terracotta") { vipBadge.innerText = "🏞 TERRA COTTA"; vipBadge.classList.add("vip-terra-cotta"); bankingCard.classList.add("theme-terra-cotta"); }
else if (vipLevel === "midnight-blue" || vipLevel === "midnightblue") { vipBadge.innerText = "🌙 MIDNIGHT BLUE"; vipBadge.classList.add("vip-midnight-blue"); bankingCard.classList.add("theme-midnight-blue"); }
else if (vipLevel === "sunrise-gold" || vipLevel === "sunrisegold") { vipBadge.innerText = "🌅 SUNRISE GOLD"; vipBadge.classList.add("vip-sunrise-gold"); bankingCard.classList.add("theme-sunrise-gold"); }
else if (vipLevel === "forest-green" || vipLevel === "forestgreen") { vipBadge.innerText = "🌲 FOREST GREEN"; vipBadge.classList.add("vip-forest-green"); bankingCard.classList.add("theme-forest-green"); }
else if (vipLevel === "purple-majesty" || vipLevel === "purplemajesty") { vipBadge.innerText = "👑 PURPLE MAJESTY"; vipBadge.classList.add("vip-purple-majesty"); bankingCard.classList.add("theme-purple-majesty"); }
else if (vipLevel === "teal-essence" || vipLevel === "tealessence") { vipBadge.innerText = "💧 TEAL ESSENCE"; vipBadge.classList.add("vip-teal-essence"); bankingCard.classList.add("theme-teal-essence"); }
else if (vipLevel === "scarlet-storm" || vipLevel === "scarletstorm") { vipBadge.innerText = "⛈ SCARLET STORM"; vipBadge.classList.add("vip-scarlet-storm"); bankingCard.classList.add("theme-scarlet-storm"); }
else if (vipLevel === "indigo-night" || vipLevel === "indigonight") { vipBadge.innerText = "🌙 INDIGO NIGHT"; vipBadge.classList.add("vip-indigo-night"); bankingCard.classList.add("theme-indigo-night"); }
else if (vipLevel === "vanilla-cream" || vipLevel === "vanillacream") { vipBadge.innerText = "👭 VANILLA CREAM"; vipBadge.classList.add("vip-vanilla-cream"); bankingCard.classList.add("theme-vanilla-cream"); }
else if (vipLevel === "slate-shadow" || vipLevel === "slateshadow") { vipBadge.innerText = "🕳 SLATE SHADOW"; vipBadge.classList.add("vip-slate-shadow"); bankingCard.classList.add("theme-slate-shadow"); }
else if (vipLevel === "aurora-ink" || vipLevel === "auroraink") { vipBadge.innerText = "🌌 AURORA INK"; vipBadge.classList.add("vip-aurora-ink"); bankingCard.classList.add("theme-aurora-ink"); }
else if (vipLevel === "royal-ember" || vipLevel === "royalember") { vipBadge.innerText = "🔥 ROYAL EMBER"; vipBadge.classList.add("vip-royal-ember"); bankingCard.classList.add("theme-royal-ember"); }
else if (vipLevel === "digital-lime" || vipLevel === "digitallime") { vipBadge.innerText = "💚 DIGITAL LIME"; vipBadge.classList.add("vip-digital-lime"); bankingCard.classList.add("theme-digital-lime"); }
else if (vipLevel === "crimson-crest" || vipLevel === "crimsoncrest") { vipBadge.innerText = "🩸 CRIMSON CREST"; vipBadge.classList.add("vip-crimson-crest"); bankingCard.classList.add("theme-crimson-crest"); }
else if (vipLevel === "glacier-spark" || vipLevel === "glacierspark") { vipBadge.innerText = "❄️ GLACIER SPARK"; vipBadge.classList.add("vip-glacier-spark"); bankingCard.classList.add("theme-glacier-spark"); }
else if (vipLevel === "moonlit-coral" || vipLevel === "moonlitcoral") { vipBadge.innerText = "🌙 MOONLIT CORAL"; vipBadge.classList.add("vip-moonlit-coral"); bankingCard.classList.add("theme-moonlit-coral"); }
else if (vipLevel === "velvet-ember" || vipLevel === "velvetember") { vipBadge.innerText = "🔥 VELVET EMBER"; vipBadge.classList.add("vip-velvet-ember"); bankingCard.classList.add("theme-velvet-ember"); }
else if (vipLevel === "emerald-thunder" || vipLevel === "emeraldthunder") { vipBadge.innerText = "⚡ EMERALD THUNDER"; vipBadge.classList.add("vip-emerald-thunder"); bankingCard.classList.add("theme-emerald-thunder"); }
else if (vipLevel === "silver-horizon" || vipLevel === "silverhorizon") { vipBadge.innerText = "🌤️ SILVER HORIZON"; vipBadge.classList.add("vip-silver-horizon"); bankingCard.classList.add("theme-silver-horizon"); }
else if (vipLevel === "onyx-sunrise" || vipLevel === "onyxsunrise") { vipBadge.innerText = "🌅 ONYX SUNRISE"; vipBadge.classList.add("vip-onyx-sunrise"); bankingCard.classList.add("theme-onyx-sunrise"); }
else if (vipLevel === "sapphire-garden" || vipLevel === "sapphiregarden") { vipBadge.innerText = "🌿 SAPPHIRE GARDEN"; vipBadge.classList.add("vip-sapphire-garden"); bankingCard.classList.add("theme-sapphire-garden"); }
else if (vipLevel === "peach-velocity" || vipLevel === "peachvelocity") { vipBadge.innerText = "🍑 PEACH VELOCITY"; vipBadge.classList.add("vip-peach-velocity"); bankingCard.classList.add("theme-peach-velocity"); }
else if (vipLevel === "cobalt-silk" || vipLevel === "cobaltsilk") { vipBadge.innerText = "🪄 COBALT SILK"; vipBadge.classList.add("vip-cobalt-silk"); bankingCard.classList.add("theme-cobalt-silk"); }
else if (vipLevel === "rose-arc" || vipLevel === "rosearc") { vipBadge.innerText = "🌹 ROSE ARC"; vipBadge.classList.add("vip-rose-arc"); bankingCard.classList.add("theme-rose-arc"); }
else if (vipLevel === "jade-signal" || vipLevel === "jadesignal") { vipBadge.innerText = "✨ JADE SIGNAL"; vipBadge.classList.add("vip-jade-signal"); bankingCard.classList.add("theme-jade-signal"); }
else if (vipLevel === "copper-bloom" || vipLevel === "copperbloom") { vipBadge.innerText = "🌼 COPPER BLOOM"; vipBadge.classList.add("vip-copper-bloom"); bankingCard.classList.add("theme-copper-bloom"); }
else if (vipLevel === "violet-flare" || vipLevel === "violetflare") { vipBadge.innerText = "🌈 VIOLET FLARE"; vipBadge.classList.add("vip-violet-flare"); bankingCard.classList.add("theme-violet-flare"); }
else if (vipLevel === "arctic-wisp" || vipLevel === "arcticwisp") { vipBadge.innerText = "❄️ ARCTIC WISP"; vipBadge.classList.add("vip-arctic-wisp"); bankingCard.classList.add("theme-arctic-wisp"); }
else if (vipLevel === "ember-mint" || vipLevel === "embermint") { vipBadge.innerText = "🌿 EMBER MINT"; vipBadge.classList.add("vip-ember-mint"); bankingCard.classList.add("theme-ember-mint"); }
else if (vipLevel === "platinum-rush" || vipLevel === "platinumrush") { vipBadge.innerText = "⚙️ PLATINUM RUSH"; vipBadge.classList.add("vip-platinum-rush"); bankingCard.classList.add("theme-platinum-rush"); }
else if (vipLevel === "orchid-lantern" || vipLevel === "orchidlantern") { vipBadge.innerText = "🪷 ORCHID LANTERN"; vipBadge.classList.add("vip-orchid-lantern"); bankingCard.classList.add("theme-orchid-lantern"); }
else if (vipLevel === "ocean-ripple" || vipLevel === "oceanripple") { vipBadge.innerText = "🌊 OCEAN RIPPLE"; vipBadge.classList.add("vip-ocean-ripple"); bankingCard.classList.add("theme-ocean-ripple"); }
else if (vipLevel === "sunset-cascade" || vipLevel === "sunsetcascade") { vipBadge.innerText = "🌅 SUNSET CASCADE"; vipBadge.classList.add("vip-sunset-cascade"); bankingCard.classList.add("theme-sunset-cascade"); }
else if (vipLevel === "obsidian-petal" || vipLevel === "obsidianpetal") { vipBadge.innerText = "🖤 OBSIDIAN PETAL"; vipBadge.classList.add("vip-obsidian-petal"); bankingCard.classList.add("theme-obsidian-petal"); }
else if (vipLevel === "ruby-current" || vipLevel === "rubycurrent") { vipBadge.innerText = "🔴 RUBY CURRENT"; vipBadge.classList.add("vip-ruby-current"); bankingCard.classList.add("theme-ruby-current"); }
else if (vipLevel === "gold-echo" || vipLevel === "goldecho") { vipBadge.innerText = "✨ GOLD ECHO"; vipBadge.classList.add("vip-gold-echo"); bankingCard.classList.add("theme-gold-echo"); }
else if (vipLevel === "frost-zen" || vipLevel === "frostzen") { vipBadge.innerText = "❄️ FROST ZEN"; vipBadge.classList.add("vip-frost-zen"); bankingCard.classList.add("theme-frost-zen"); }
else if (vipLevel === "lilac-surge" || vipLevel === "lilacsurge") { vipBadge.innerText = "💜 LILAC SURGE"; vipBadge.classList.add("vip-lilac-surge"); bankingCard.classList.add("theme-lilac-surge"); }
else if (vipLevel === "magenta-veil" || vipLevel === "magentaveil") { vipBadge.innerText = "🌸 MAGENTA VEIL"; vipBadge.classList.add("vip-magenta-veil"); bankingCard.classList.add("theme-magenta-veil"); }
else if (vipLevel === "firefly-haze" || vipLevel === "fireflyhaze") { vipBadge.innerText = "✨ FIREFLY HAZE"; vipBadge.classList.add("vip-firefly-haze"); bankingCard.classList.add("theme-firefly-haze"); }
else if (vipLevel === "azure-halo" || vipLevel === "azurehalo") { vipBadge.innerText = "💠 AZURE HALO"; vipBadge.classList.add("vip-azure-halo"); bankingCard.classList.add("theme-azure-halo"); }
else if (vipLevel === "sage-dynamo" || vipLevel === "sagedynamo") { vipBadge.innerText = "🌿 SAGE DYNAMO"; vipBadge.classList.add("vip-sage-dynamo"); bankingCard.classList.add("theme-sage-dynamo"); }
else if (vipLevel === "plum-blaze" || vipLevel === "plumblaze") { vipBadge.innerText = "🔥 PLUM BLAZE"; vipBadge.classList.add("vip-plum-blaze"); bankingCard.classList.add("theme-plum-blaze"); }
else if (vipLevel === "ivory-lattice" || vipLevel === "ivorylattice") { vipBadge.innerText = "✨ IVORY LATTICE"; vipBadge.classList.add("vip-ivory-lattice"); bankingCard.classList.add("theme-ivory-lattice"); }
else if (vipLevel === "thunder-moon" || vipLevel === "thundermoon") { vipBadge.innerText = "🌙 THUNDER MOON"; vipBadge.classList.add("vip-thunder-moon"); bankingCard.classList.add("theme-thunder-moon"); }
else if (vipLevel === "coral-horizon" || vipLevel === "coralhorizon") { vipBadge.innerText = "🌅 CORAL HORIZON"; vipBadge.classList.add("vip-coral-horizon"); bankingCard.classList.add("theme-coral-horizon"); }
else if (vipLevel === "graphite-spark" || vipLevel === "graphitespark") { vipBadge.innerText = "⚡ GRAPHITE SPARK"; vipBadge.classList.add("vip-graphite-spark"); bankingCard.classList.add("theme-graphite-spark"); }
else if (vipLevel === "gold-brass" || vipLevel === "goldbrass") { vipBadge.innerText = "🪙 GOLD BRASS"; vipBadge.classList.add("vip-gold-brass"); bankingCard.classList.add("theme-gold-brass"); }
else if (vipLevel === "violet-cascade" || vipLevel === "violetcascade") { vipBadge.innerText = "🌊 VIOLET CASCADE"; vipBadge.classList.add("vip-violet-cascade"); bankingCard.classList.add("theme-violet-cascade"); }
else if (vipLevel === "cyan-fable" || vipLevel === "cyanfable") { vipBadge.innerText = "💠 CYAN FABLE"; vipBadge.classList.add("vip-cyan-fable"); bankingCard.classList.add("theme-cyan-fable"); }
else if (vipLevel === "sky-lattice" || vipLevel === "skylattice") { vipBadge.innerText = "🪟 SKY LATTICE"; vipBadge.classList.add("vip-sky-lattice"); bankingCard.classList.add("theme-sky-lattice"); }
else if (vipLevel === "pearl-tide" || vipLevel === "pearltide") { vipBadge.innerText = "🐚 PEARL TIDE"; vipBadge.classList.add("vip-pearl-tide"); bankingCard.classList.add("theme-pearl-tide"); }
else if (vipLevel === "nutmeg-gleam" || vipLevel === "nutmeggleam") { vipBadge.innerText = "✨ NUTMEG GLEAM"; vipBadge.classList.add("vip-nutmeg-gleam"); bankingCard.classList.add("theme-nutmeg-gleam"); }
else if (vipLevel === "iris-charm" || vipLevel === "irischarm") { vipBadge.innerText = "💎 IRIS CHARM"; vipBadge.classList.add("vip-iris-charm"); bankingCard.classList.add("theme-iris-charm"); }
else if (vipLevel === "mint-arcade" || vipLevel === "mintarcade") { vipBadge.innerText = "🎮 MINT ARCADE"; vipBadge.classList.add("vip-mint-arcade"); bankingCard.classList.add("theme-mint-arcade"); }
else if (vipLevel === "bronze-blossom" || vipLevel === "bronzeblossom") { vipBadge.innerText = "🌼 BRONZE BLOSSOM"; vipBadge.classList.add("vip-bronze-blossom"); bankingCard.classList.add("theme-bronze-blossom"); }
else if (vipLevel === "lavender-vault" || vipLevel === "lavendervault") { vipBadge.innerText = "🏛️ LAVENDER VAULT"; vipBadge.classList.add("vip-lavender-vault"); bankingCard.classList.add("theme-lavender-vault"); }
else if (vipLevel === "jade-ember" || vipLevel === "jadeember") { vipBadge.innerText = "🔥 JADE EMBER"; vipBadge.classList.add("vip-jade-ember"); bankingCard.classList.add("theme-jade-ember"); }
else if (vipLevel === "scarlet-violet" || vipLevel === "scarletviolet") { vipBadge.innerText = "🌺 SCARLET VIOLET"; vipBadge.classList.add("vip-scarlet-violet"); bankingCard.classList.add("theme-scarlet-violet"); }
else if (vipLevel === "azure-echo" || vipLevel === "azureecho") { vipBadge.innerText = "🔊 AZURE ECHO"; vipBadge.classList.add("vip-azure-echo"); bankingCard.classList.add("theme-azure-echo"); }
else if (vipLevel === "sunrise-ink" || vipLevel === "sunriseink") { vipBadge.innerText = "🌤️ SUNRISE INK"; vipBadge.classList.add("vip-sunrise-ink"); bankingCard.classList.add("theme-sunrise-ink"); }
else if (vipLevel === "twilight-iris" || vipLevel === "twilightiris") { vipBadge.innerText = "🌗 TWILIGHT IRIS"; vipBadge.classList.add("vip-twilight-iris"); bankingCard.classList.add("theme-twilight-iris"); }
else if (vipLevel === "glacier-gold" || vipLevel === "glaciergold") { vipBadge.innerText = "🏔️ GLACIER GOLD"; vipBadge.classList.add("vip-glacier-gold"); bankingCard.classList.add("theme-glacier-gold"); }
else if (vipLevel === "porcelain-flare" || vipLevel === "porcelainflare") { vipBadge.innerText = "✨ PORCELAIN FLARE"; vipBadge.classList.add("vip-porcelain-flare"); bankingCard.classList.add("theme-porcelain-flare"); }
else if (vipLevel === "orchid-current" || vipLevel === "orchidcurrent") { vipBadge.innerText = "🌊 ORCHID CURRENT"; vipBadge.classList.add("vip-orchid-current"); bankingCard.classList.add("theme-orchid-current"); }
else if (vipLevel === "cosmic-velvet" || vipLevel === "cosmicvelvet") { vipBadge.innerText = "🌌 COSMIC VELVET"; vipBadge.classList.add("vip-cosmic-velvet"); bankingCard.classList.add("theme-cosmic-velvet"); }
else if (vipLevel === "ember-silk" || vipLevel === "embersilk") { vipBadge.innerText = "🧵 EMBER SILK"; vipBadge.classList.add("vip-ember-silk"); bankingCard.classList.add("theme-ember-silk"); }
else if (vipLevel === "emerald-glint" || vipLevel === "emeraldglint") { vipBadge.innerText = "💎 EMERALD GLINT"; vipBadge.classList.add("vip-emerald-glint"); bankingCard.classList.add("theme-emerald-glint"); }
else if (vipLevel === "royal-frost" || vipLevel === "royalfrost") { vipBadge.innerText = "❄️ ROYAL FROST"; vipBadge.classList.add("vip-royal-frost"); bankingCard.classList.add("theme-royal-frost"); }
else if (vipLevel === "rose-signal" || vipLevel === "rosesignal") { vipBadge.innerText = "📡 ROSE SIGNAL"; vipBadge.classList.add("vip-rose-signal"); bankingCard.classList.add("theme-rose-signal"); }
else if (vipLevel === "midnight-orchid" || vipLevel === "midnightorchid") { vipBadge.innerText = "🌙 MIDNIGHT ORCHID"; vipBadge.classList.add("vip-midnight-orchid"); bankingCard.classList.add("theme-midnight-orchid"); }
else if (vipLevel === "copper-signal" || vipLevel === "coppersignal") { vipBadge.innerText = "📶 COPPER SIGNAL"; vipBadge.classList.add("vip-copper-signal"); bankingCard.classList.add("theme-copper-signal"); }
else if (vipLevel === "silver-bloom" || vipLevel === "silverbloom") { vipBadge.innerText = "🌼 SILVER BLOOM"; vipBadge.classList.add("vip-silver-bloom"); bankingCard.classList.add("theme-silver-bloom"); }
else if (vipLevel === "marble-ember" || vipLevel === "marbleember") { vipBadge.innerText = "🔥 MARBLE EMBER"; vipBadge.classList.add("vip-marble-ember"); bankingCard.classList.add("theme-marble-ember"); }
else if (vipLevel === "sunstone-pulse" || vipLevel === "sunstonepulse") { vipBadge.innerText = "✨ SUNSTONE PULSE"; vipBadge.classList.add("vip-sunstone-pulse"); bankingCard.classList.add("theme-sunstone-pulse"); }
else if (vipLevel === "jade-aurora" || vipLevel === "jadeaurora") { vipBadge.innerText = "🌌 JADE AURORA"; vipBadge.classList.add("vip-jade-aurora"); bankingCard.classList.add("theme-jade-aurora"); }
else if (vipLevel === "amethyst-breeze" || vipLevel === "amethystbreeze") { vipBadge.innerText = "🌬️ AMETHYST BREEZE"; vipBadge.classList.add("vip-amethyst-breeze"); bankingCard.classList.add("theme-amethyst-breeze"); }
else if (vipLevel === "copper-halo" || vipLevel === "copperhalo") { vipBadge.innerText = "✨ COPPER HALO"; vipBadge.classList.add("vip-copper-halo"); bankingCard.classList.add("theme-copper-halo"); }
else if (vipLevel === "ocean-lantern" || vipLevel === "oceanlantern") { vipBadge.innerText = "💡 OCEAN LANTERN"; vipBadge.classList.add("vip-ocean-lantern"); bankingCard.classList.add("theme-ocean-lantern"); }
else if (vipLevel === "dragon-amber" || vipLevel === "dragonamber") { vipBadge.innerText = "🐉 DRAGON AMBER"; vipBadge.classList.add("vip-dragon-amber"); bankingCard.classList.add("theme-dragon-amber"); }
else if (vipLevel === "pearl-glow" || vipLevel === "pearlglow") { vipBadge.innerText = "🌟 PEARL GLOW"; vipBadge.classList.add("vip-pearl-glow"); bankingCard.classList.add("theme-pearl-glow"); }
else if (vipLevel === "moonglow-rose" || vipLevel === "moonglowrose") { vipBadge.innerText = "🌙 MOONGLOW ROSE"; vipBadge.classList.add("vip-moonglow-rose"); bankingCard.classList.add("theme-moonglow-rose"); }
else if (vipLevel === "cobalt-drift" || vipLevel === "cobaltdrift") { vipBadge.innerText = "🌊 COBALT DRIFT"; vipBadge.classList.add("vip-cobalt-drift"); bankingCard.classList.add("theme-cobalt-drift"); }
else if (vipLevel === "bronze-hush" || vipLevel === "bronzehush") { vipBadge.innerText = "🌫️ BRONZE HUSH"; vipBadge.classList.add("vip-bronze-hush"); bankingCard.classList.add("theme-bronze-hush"); }
else if (vipLevel === "neon-bloom" || vipLevel === "neonbloom") { vipBadge.innerText = "🌼 NEON BLOOM"; vipBadge.classList.add("vip-neon-bloom"); bankingCard.classList.add("theme-neon-bloom"); }
else if (vipLevel === "quartz-gold" || vipLevel === "quartzgold") { vipBadge.innerText = "✨ QUARTZ GOLD"; vipBadge.classList.add("vip-quartz-gold"); bankingCard.classList.add("theme-quartz-gold"); }
else if (vipLevel === "frost-fable" || vipLevel === "frostfable") { vipBadge.innerText = "❄️ FROST FABLE"; vipBadge.classList.add("vip-frost-fable"); bankingCard.classList.add("theme-frost-fable"); }
else if (vipLevel === "velvet-sky" || vipLevel === "velvetsky") { vipBadge.innerText = "🌌 VELVET SKY"; vipBadge.classList.add("vip-velvet-sky"); bankingCard.classList.add("theme-velvet-sky"); }
else if (vipLevel === "horizon-pulse" || vipLevel === "horizonpulse") { vipBadge.innerText = "🌤️ HORIZON PULSE"; vipBadge.classList.add("vip-horizon-pulse"); bankingCard.classList.add("theme-horizon-pulse"); }
else if (vipLevel === "prism-rain" || vipLevel === "prismrain") { vipBadge.innerText = "🌈 PRISM RAIN"; vipBadge.classList.add("vip-prism-rain"); bankingCard.classList.add("theme-prism-rain"); }
else if (vipLevel === "aurora-cascade" || vipLevel === "auroracascade") { vipBadge.innerText = "🌊 AURORA CASCADE"; vipBadge.classList.add("vip-aurora-cascade"); bankingCard.classList.add("theme-aurora-cascade"); }
else if (vipLevel === "amber-echo" || vipLevel === "amberecho") { vipBadge.innerText = "✨ AMBER ECHO"; vipBadge.classList.add("vip-amber-echo"); bankingCard.classList.add("theme-amber-echo"); }
else if (vipLevel === "satin-cinder" || vipLevel === "satincinder") { vipBadge.innerText = "🔥 SATIN CINDER"; vipBadge.classList.add("vip-satin-cinder"); bankingCard.classList.add("theme-satin-cinder"); }
else if (vipLevel === "lime-echo" || vipLevel === "limeecho") { vipBadge.innerText = "💚 LIME ECHO"; vipBadge.classList.add("vip-lime-echo"); bankingCard.classList.add("theme-lime-echo"); }
else if (vipLevel === "crystal-river" || vipLevel === "crystalriver") { vipBadge.innerText = "💧 CRYSTAL RIVER"; vipBadge.classList.add("vip-crystal-river"); bankingCard.classList.add("theme-crystal-river"); }
else if (vipLevel === "royal-silk" || vipLevel === "royalsilk") { vipBadge.innerText = "🪄 ROYAL SILK"; vipBadge.classList.add("vip-royal-silk"); bankingCard.classList.add("theme-royal-silk"); }
else if (vipLevel === "pistachio-arc" || vipLevel === "pistachioarc") { vipBadge.innerText = "🌿 PISTACHIO ARC"; vipBadge.classList.add("vip-pistachio-arc"); bankingCard.classList.add("theme-pistachio-arc"); }
else if (vipLevel === "raven-violet" || vipLevel === "ravenviolet") { vipBadge.innerText = "🖤 RAVEN VIOLET"; vipBadge.classList.add("vip-raven-violet"); bankingCard.classList.add("theme-raven-violet"); }
else if (vipLevel === "coral-void" || vipLevel === "coralvoid") { vipBadge.innerText = "🌊 CORAL VOID"; vipBadge.classList.add("vip-coral-void"); bankingCard.classList.add("theme-coral-void"); }
else if (vipLevel === "verdant-gold" || vipLevel === "verdantgold") { vipBadge.innerText = "🌾 VERDANT GOLD"; vipBadge.classList.add("vip-verdant-gold"); bankingCard.classList.add("theme-verdant-gold"); }
else if (vipLevel === "satin-ocean" || vipLevel === "satinocean") { vipBadge.innerText = "🌊 SATIN OCEAN"; vipBadge.classList.add("vip-satin-ocean"); bankingCard.classList.add("theme-satin-ocean"); }
else if (vipLevel === "obsidian-mint" || vipLevel === "obsidianmint") { vipBadge.innerText = "🌿 OBSIDIAN MINT"; vipBadge.classList.add("vip-obsidian-mint"); bankingCard.classList.add("theme-obsidian-mint"); }
else if (vipLevel === "sky-ember" || vipLevel === "skyember") { vipBadge.innerText = "🔥 SKY EMBER"; vipBadge.classList.add("vip-sky-ember"); bankingCard.classList.add("theme-sky-ember"); }
else if (vipLevel === "mango-prism" || vipLevel === "mangoprism") { vipBadge.innerText = "🍊 MANGO PRISM"; vipBadge.classList.add("vip-mango-prism"); bankingCard.classList.add("theme-mango-prism"); }
else if (vipLevel === "violet-hush" || vipLevel === "violethush") { vipBadge.innerText = "🌫️ VIOLET HUSH"; vipBadge.classList.add("vip-violet-hush"); bankingCard.classList.add("theme-violet-hush"); }
else if (vipLevel === "solar-mist" || vipLevel === "solarmist") { vipBadge.innerText = "☀️ SOLAR MIST"; vipBadge.classList.add("vip-solar-mist"); bankingCard.classList.add("theme-solar-mist"); }
else if (vipLevel === "cinder-rose" || vipLevel === "cinderrose") { vipBadge.innerText = "🌹 CINDER ROSE"; vipBadge.classList.add("vip-cinder-rose"); bankingCard.classList.add("theme-cinder-rose"); }
else if (vipLevel === "sapphire-mint" || vipLevel === "sapphiremint") { vipBadge.innerText = "💎 SAPPHIRE MINT"; vipBadge.classList.add("vip-sapphire-mint"); bankingCard.classList.add("theme-sapphire-mint"); }
else if (vipLevel === "starlight-plum" || vipLevel === "starlightplum") { vipBadge.innerText = "✨ STARLIGHT PLUM"; vipBadge.classList.add("vip-starlight-plum"); bankingCard.classList.add("theme-starlight-plum"); }
else if (vipLevel === "iron-pearl" || vipLevel === "ironpearl") { vipBadge.innerText = "⚙️ IRON PEARL"; vipBadge.classList.add("vip-iron-pearl"); bankingCard.classList.add("theme-iron-pearl"); }
else if (vipLevel === "lotus-gold" || vipLevel === "lotusgold") { vipBadge.innerText = "🪷 LOTUS GOLD"; vipBadge.classList.add("vip-lotus-gold"); bankingCard.classList.add("theme-lotus-gold"); }
else if (vipLevel === "sunset-iris" || vipLevel === "sunsetiris") { vipBadge.innerText = "🌅 SUNSET IRIS"; vipBadge.classList.add("vip-sunset-iris"); bankingCard.classList.add("theme-sunset-iris"); }
else if (vipLevel === "balance-cyan" || vipLevel === "balancecyan") { vipBadge.innerText = "💠 BALANCE CYAN"; vipBadge.classList.add("vip-balance-cyan"); bankingCard.classList.add("theme-balance-cyan"); }
else if (vipLevel === "petal-iron" || vipLevel === "petaliron") { vipBadge.innerText = "🌸 PETAL IRON"; vipBadge.classList.add("vip-petal-iron"); bankingCard.classList.add("theme-petal-iron"); }
else if (vipLevel === "vista-amber" || vipLevel === "vistaamber") { vipBadge.innerText = "🌄 VISTA AMBER"; vipBadge.classList.add("vip-vista-amber"); bankingCard.classList.add("theme-vista-amber"); }
else if (vipLevel === "silk-pulse" || vipLevel === "silkpulse") { vipBadge.innerText = "✨ SILK PULSE"; vipBadge.classList.add("vip-silk-pulse"); bankingCard.classList.add("theme-silk-pulse"); }
else if (vipLevel === "azurite-lime" || vipLevel === "azuritelime") { vipBadge.innerText = "💙 AZURITE LIME"; vipBadge.classList.add("vip-azurite-lime"); bankingCard.classList.add("theme-azurite-lime"); }
else if (vipLevel === "harbor-ember" || vipLevel === "harborembers") { vipBadge.innerText = "🔥 HARBOR EMBER"; vipBadge.classList.add("vip-harbor-ember"); bankingCard.classList.add("theme-harbor-ember"); }
else if (vipLevel === "noir-saffron" || vipLevel === "noirsaffron") { vipBadge.innerText = "🌑 NOIR SAFFRON"; vipBadge.classList.add("vip-noir-saffron"); bankingCard.classList.add("theme-noir-saffron"); }
else if (vipLevel === "riverglass" || vipLevel === "river-glass") { vipBadge.innerText = "💎 RIVERGLASS"; vipBadge.classList.add("vip-riverglass"); bankingCard.classList.add("theme-riverglass"); }
else if (vipLevel === "lavender-drift" || vipLevel === "lavenderdrift") { vipBadge.innerText = "🌬️ LAVENDER DRIFT"; vipBadge.classList.add("vip-lavender-drift"); bankingCard.classList.add("theme-lavender-drift"); }
else if (vipLevel === "glacier-petal" || vipLevel === "glacierpetal") { vipBadge.innerText = "❄️ GLACIER PETAL"; vipBadge.classList.add("vip-glacier-petal"); bankingCard.classList.add("theme-glacier-petal"); }
else if (vipLevel === "ember-bloom" || vipLevel === "emberbloom") { vipBadge.innerText = "🌼 EMBER BLOOM"; vipBadge.classList.add("vip-ember-bloom"); bankingCard.classList.add("theme-ember-bloom"); }
else if (vipLevel === "solar-veil" || vipLevel === "solarveil") { vipBadge.innerText = "☀️ SOLAR VEIL"; vipBadge.classList.add("vip-solar-veil"); bankingCard.classList.add("theme-solar-veil"); }
else if (vipLevel === "twilight-halo" || vipLevel === "twilighthalo") { vipBadge.innerText = "🌘 TWILIGHT HALO"; vipBadge.classList.add("vip-twilight-halo"); bankingCard.classList.add("theme-twilight-halo"); }
else if (vipLevel === "moonstone-arc" || vipLevel === "moonstonearc") { vipBadge.innerText = "🌙 MOONSTONE ARC"; vipBadge.classList.add("vip-moonstone-arc"); bankingCard.classList.add("theme-moonstone-arc"); }
else if (vipLevel === "jade-cascade" || vipLevel === "jadecascade") { vipBadge.innerText = "🌿 JADE CASCADE"; vipBadge.classList.add("vip-jade-cascade"); bankingCard.classList.add("theme-jade-cascade"); }
else if (vipLevel === "orchid-signal" || vipLevel === "orchidsignal") { vipBadge.innerText = "🌸 ORCHID SIGNAL"; vipBadge.classList.add("vip-orchid-signal"); bankingCard.classList.add("theme-orchid-signal"); }
else if (vipLevel === "ruby-surge" || vipLevel === "rubysurge") { vipBadge.innerText = "🔴 RUBY SURGE"; vipBadge.classList.add("vip-ruby-surge"); bankingCard.classList.add("theme-ruby-surge"); }
else if (vipLevel === "onyx-gleam" || vipLevel === "onyxgleam") { vipBadge.innerText = "✨ ONYX GLEAM"; vipBadge.classList.add("vip-onyx-gleam"); bankingCard.classList.add("theme-onyx-gleam"); }
else if (vipLevel === "pearl-bloom" || vipLevel === "pearlbloom") { vipBadge.innerText = "🌷 PEARL BLOOM"; vipBadge.classList.add("vip-pearl-bloom"); bankingCard.classList.add("theme-pearl-bloom"); }
else if (vipLevel === "citrus-drift" || vipLevel === "citrusdrift") { vipBadge.innerText = "🍊 CITRUS DRIFT"; vipBadge.classList.add("vip-citrus-drift"); bankingCard.classList.add("theme-citrus-drift"); }
else if (vipLevel === "aurora-dawn" || vipLevel === "auroradawn") { vipBadge.innerText = "🌅 AURORA DAWN"; vipBadge.classList.add("vip-aurora-dawn"); bankingCard.classList.add("theme-aurora-dawn"); }
else if (vipLevel === "silver-wave" || vipLevel === "silverwave") { vipBadge.innerText = "🌊 SILVER WAVE"; vipBadge.classList.add("vip-silver-wave"); bankingCard.classList.add("theme-silver-wave"); }
else if (vipLevel === "copper-lantern" || vipLevel === "copperlantern") { vipBadge.innerText = "🏮 COPPER LANTERN"; vipBadge.classList.add("vip-copper-lantern"); bankingCard.classList.add("theme-copper-lantern"); }
else if (vipLevel === "maple-spark" || vipLevel === "maplespark") { vipBadge.innerText = "🍁 MAPLE SPARK"; vipBadge.classList.add("vip-maple-spark"); bankingCard.classList.add("theme-maple-spark"); }
else if (vipLevel === "phoenix-gold" || vipLevel === "phoenixgold") { vipBadge.innerText = "🐦 PHOENIX GOLD"; vipBadge.classList.add("vip-phoenix-gold"); bankingCard.classList.add("theme-phoenix-gold"); }
else if (vipLevel === "crystal-reef" || vipLevel === "crystalreef") { vipBadge.innerText = "🪸 CRYSTAL REEF"; vipBadge.classList.add("vip-crystal-reef"); bankingCard.classList.add("theme-crystal-reef"); }
else if (vipLevel === "teal-whisper" || vipLevel === "tealwhisper") { vipBadge.innerText = "💎 TEAL WHISPER"; vipBadge.classList.add("vip-teal-whisper"); bankingCard.classList.add("theme-teal-whisper"); }
else if (vipLevel === "lilac-rush" || vipLevel === "lilacrush") { vipBadge.innerText = "💜 LILAC RUSH"; vipBadge.classList.add("vip-lilac-rush"); bankingCard.classList.add("theme-lilac-rush"); }
else if (vipLevel === "plum-cascade" || vipLevel === "plumcascade") { vipBadge.innerText = "🫐 PLUM CASCADE"; vipBadge.classList.add("vip-plum-cascade"); bankingCard.classList.add("theme-plum-cascade"); }
else if (vipLevel === "coral-vine" || vipLevel === "coralvine") { vipBadge.innerText = "🌴 CORAL VINE"; vipBadge.classList.add("vip-coral-vine"); bankingCard.classList.add("theme-coral-vine"); }
else if (vipLevel === "meadow-drift" || vipLevel === "meadowdrift") { vipBadge.innerText = "🌾 MEADOW DRIFT"; vipBadge.classList.add("vip-meadow-drift"); bankingCard.classList.add("theme-meadow-drift"); }
else if (vipLevel === "cobalt-hush" || vipLevel === "cobalthush") { vipBadge.innerText = "🌊 COBALT HUSH"; vipBadge.classList.add("vip-cobalt-hush"); bankingCard.classList.add("theme-cobalt-hush"); }
else if (vipLevel === "ember-spark" || vipLevel === "emberspark") { vipBadge.innerText = "🔥 EMBER SPARK"; vipBadge.classList.add("vip-ember-spark"); bankingCard.classList.add("theme-ember-spark"); }
else if (vipLevel === "frost-lotus" || vipLevel === "frostlotus") { vipBadge.innerText = "❄️ FROST LOTUS"; vipBadge.classList.add("vip-frost-lotus"); bankingCard.classList.add("theme-frost-lotus"); }
else if (vipLevel === "sunset-cinder" || vipLevel === "sunsetcinder") { vipBadge.innerText = "🌇 SUNSET CINDER"; vipBadge.classList.add("vip-sunset-cinder"); bankingCard.classList.add("theme-sunset-cinder"); }
else if (vipLevel === "mint-breeze" || vipLevel === "mintbreeze") { vipBadge.innerText = "🌿 MINT BREEZE"; vipBadge.classList.add("vip-mint-breeze"); bankingCard.classList.add("theme-mint-breeze"); }
else if (vipLevel === "violet-orbit" || vipLevel === "violetorbit") { vipBadge.innerText = "🪐 VIOLET ORBIT"; vipBadge.classList.add("vip-violet-orbit"); bankingCard.classList.add("theme-violet-orbit"); }
else if (vipLevel === "bronze-echo" || vipLevel === "bronzeecho") { vipBadge.innerText = "✨ BRONZE ECHO"; vipBadge.classList.add("vip-bronze-echo"); bankingCard.classList.add("theme-bronze-echo"); }
else if (vipLevel === "cream-halo" || vipLevel === "creamhallo") { vipBadge.innerText = "🌤️ CREAM HALO"; vipBadge.classList.add("vip-cream-halo"); bankingCard.classList.add("theme-cream-halo"); }
else if (vipLevel === "midnight-harbor" || vipLevel === "midnightharbor") { vipBadge.innerText = "🌊 MIDNIGHT HARBOR"; vipBadge.classList.add("vip-midnight-harbor"); bankingCard.classList.add("theme-midnight-harbor"); }
else if (vipLevel === "grape-sunrise" || vipLevel === "grapesunrise") { vipBadge.innerText = "🍇 GRAPE SUNRISE"; vipBadge.classList.add("vip-grape-sunrise"); bankingCard.classList.add("theme-grape-sunrise"); }
else if (vipLevel === "lilac-gleam" || vipLevel === "lilacgleam") { vipBadge.innerText = "✨ LILAC GLEAM"; vipBadge.classList.add("vip-lilac-gleam"); bankingCard.classList.add("theme-lilac-gleam"); }
else if (vipLevel === "sandglass-sky" || vipLevel === "sandglasssky") { vipBadge.innerText = "⏳ SANDGLASS SKY"; vipBadge.classList.add("vip-sandglass-sky"); bankingCard.classList.add("theme-sandglass-sky"); }
else if (vipLevel === "coral-garden" || vipLevel === "coralgarden") { vipBadge.innerText = "🌺 CORAL GARDEN"; vipBadge.classList.add("vip-coral-garden"); bankingCard.classList.add("theme-coral-garden"); }
else if (vipLevel === "rain-iris" || vipLevel === "rainiris") { vipBadge.innerText = "🌧️ RAIN IRIS"; vipBadge.classList.add("vip-rain-iris"); bankingCard.classList.add("theme-rain-iris"); }
else if (vipLevel === "forest-velvet" || vipLevel === "forestvelvet") { vipBadge.innerText = "🌲 FOREST VELVET"; vipBadge.classList.add("vip-forest-velvet"); bankingCard.classList.add("theme-forest-velvet"); }
else if (vipLevel === "slate-aurora" || vipLevel === "slateaurora") { vipBadge.innerText = "🌌 SLATE AURORA"; vipBadge.classList.add("vip-slate-aurora"); bankingCard.classList.add("theme-slate-aurora"); }
else if (vipLevel === "honey-cascade" || vipLevel === "honeycascade") { vipBadge.innerText = "🍯 HONEY CASCADE"; vipBadge.classList.add("vip-honey-cascade"); bankingCard.classList.add("theme-honey-cascade"); }
else if (vipLevel === "rose-lattice" || vipLevel === "roselattice") { vipBadge.innerText = "🌹 ROSE LATTICE"; vipBadge.classList.add("vip-rose-lattice"); bankingCard.classList.add("theme-rose-lattice"); }
else if (vipLevel === "cyan-arcade" || vipLevel === "cyanarcade") { vipBadge.innerText = "🎮 CYAN ARCADE"; vipBadge.classList.add("vip-cyan-arcade"); bankingCard.classList.add("theme-cyan-arcade"); }
else if (vipLevel === "silver-vine" || vipLevel === "silvervine") { vipBadge.innerText = "🌿 SILVER VINE"; vipBadge.classList.add("vip-silver-vine"); bankingCard.classList.add("theme-silver-vine"); }
else if (vipLevel === "dune-whisper" || vipLevel === "dunewhisper") { vipBadge.innerText = "🌤️ DUNE WHISPER"; vipBadge.classList.add("vip-dune-whisper"); bankingCard.classList.add("theme-dune-whisper"); }
else if (vipLevel === "opal-current" || vipLevel === "opalcurrent") { vipBadge.innerText = "💎 OPAL CURRENT"; vipBadge.classList.add("vip-opal-current"); bankingCard.classList.add("theme-opal-current"); }
else if (vipLevel === "ember-lattice" || vipLevel === "emberlattice") { vipBadge.innerText = "🔥 EMBER LATTICE"; vipBadge.classList.add("vip-ember-lattice"); bankingCard.classList.add("theme-ember-lattice"); }
else if (vipLevel === "lotus-silver" || vipLevel === "lotussilver") { vipBadge.innerText = "🪷 LOTUS SILVER"; vipBadge.classList.add("vip-lotus-silver"); bankingCard.classList.add("theme-lotus-silver"); }
else if (vipLevel === "cedar-ink" || vipLevel === "cedarink") { vipBadge.innerText = "🖤 CEDAR INK"; vipBadge.classList.add("vip-cedar-ink"); bankingCard.classList.add("theme-cedar-ink"); }
else if (vipLevel === "jewel-drift" || vipLevel === "jeweldrift") { vipBadge.innerText = "💠 JEWEL DRIFT"; vipBadge.classList.add("vip-jewel-drift"); bankingCard.classList.add("theme-jewel-drift"); }
else if (vipLevel === "comet-rose" || vipLevel === "cometrose") { vipBadge.innerText = "☄️ COMET ROSE"; vipBadge.classList.add("vip-comet-rose"); bankingCard.classList.add("theme-comet-rose"); }
else if (vipLevel === "twilight-velvet" || vipLevel === "twilightvelvet") { vipBadge.innerText = "🌑 TWILIGHT VELVET"; vipBadge.classList.add("vip-twilight-velvet"); bankingCard.classList.add("theme-twilight-velvet"); }
else if (vipLevel === "azure-lattice" || vipLevel === "azurelattice") { vipBadge.innerText = "🧊 AZURE LATTICE"; vipBadge.classList.add("vip-azure-lattice"); bankingCard.classList.add("theme-azure-lattice"); }
else if (vipLevel === "ember-cascade" || vipLevel === "embercascade") { vipBadge.innerText = "🔥 EMBER CASCADE"; vipBadge.classList.add("vip-ember-cascade"); bankingCard.classList.add("theme-ember-cascade"); }
else if (vipLevel === "rose-hush" || vipLevel === "rosehush") { vipBadge.innerText = "🌹 ROSE HUSH"; vipBadge.classList.add("vip-rose-hush"); bankingCard.classList.add("theme-rose-hush"); }
else if (vipLevel === "moonlit-cinder" || vipLevel === "moonlitcinder") { vipBadge.innerText = "🌙 MOONLIT CINDER"; vipBadge.classList.add("vip-moonlit-cinder"); bankingCard.classList.add("theme-moonlit-cinder"); }
else if (vipLevel === "jade-arcade" || vipLevel === "jadearcade") { vipBadge.innerText = "🎮 JADE ARCADE"; vipBadge.classList.add("vip-jade-arcade"); bankingCard.classList.add("theme-jade-arcade"); }
else if (vipLevel === "silver-echo" || vipLevel === "silverecho") { vipBadge.innerText = "✨ SILVER ECHO"; vipBadge.classList.add("vip-silver-echo"); bankingCard.classList.add("theme-silver-echo"); }
else if (vipLevel === "citrus-halo" || vipLevel === "citrushalo") { vipBadge.innerText = "🍊 CITRUS HALO"; vipBadge.classList.add("vip-citrus-halo"); bankingCard.classList.add("theme-citrus-halo"); }
else if (vipLevel === "lilac-voyage" || vipLevel === "lilacvoyage") { vipBadge.innerText = "💜 LILAC VOYAGE"; vipBadge.classList.add("vip-lilac-voyage"); bankingCard.classList.add("theme-lilac-voyage"); }
else if (vipLevel === "teal-ripple" || vipLevel === "tealripple") { vipBadge.innerText = "🌊 TEAL RIPPLE"; vipBadge.classList.add("vip-teal-ripple"); bankingCard.classList.add("theme-teal-ripple"); }
else if (vipLevel === "coral-current" || vipLevel === "coralcurrent") { vipBadge.innerText = "🌊 CORAL CURRENT"; vipBadge.classList.add("vip-coral-current"); bankingCard.classList.add("theme-coral-current"); }
else if (vipLevel === "amber-velvet" || vipLevel === "ambervelvet") { vipBadge.innerText = "🧵 AMBER VELVET"; vipBadge.classList.add("vip-amber-velvet"); bankingCard.classList.add("theme-amber-velvet"); }
else if (vipLevel === "cedar-spark" || vipLevel === "cedarspark") { vipBadge.innerText = "🌲 CEDAR SPARK"; vipBadge.classList.add("vip-cedar-spark"); bankingCard.classList.add("theme-cedar-spark"); }
else if (vipLevel === "ocean-whisper" || vipLevel === "oceanwhisper") { vipBadge.innerText = "🌊 OCEAN WHISPER"; vipBadge.classList.add("vip-ocean-whisper"); bankingCard.classList.add("theme-ocean-whisper"); }
else if (vipLevel === "sunrise-cove" || vipLevel === "sunrisecove") { vipBadge.innerText = "🌅 SUNRISE COVE"; vipBadge.classList.add("vip-sunrise-cove"); bankingCard.classList.add("theme-sunrise-cove"); }
else if (vipLevel === "violet-cinder" || vipLevel === "violetcinder") { vipBadge.innerText = "🔥 VIOLET CINDER"; vipBadge.classList.add("vip-violet-cinder"); bankingCard.classList.add("theme-violet-cinder"); }
else if (vipLevel === "mint-echo" || vipLevel === "mintecho") { vipBadge.innerText = "🌿 MINT ECHO"; vipBadge.classList.add("vip-mint-echo"); bankingCard.classList.add("theme-mint-echo"); }
else if (vipLevel === "plum-halo" || vipLevel === "plumhalo") { vipBadge.innerText = "🫐 PLUM HALO"; vipBadge.classList.add("vip-plum-halo"); bankingCard.classList.add("theme-plum-halo"); }
else if (vipLevel === "frost-arc" || vipLevel === "frostarc") { vipBadge.innerText = "❄️ FROST ARC"; vipBadge.classList.add("vip-frost-arc"); bankingCard.classList.add("theme-frost-arc"); }
else if (vipLevel === "sunflower-ink" || vipLevel === "sunflowerink") { vipBadge.innerText = "🌻 SUNFLOWER INK"; vipBadge.classList.add("vip-sunflower-ink"); bankingCard.classList.add("theme-sunflower-ink"); }
else if (vipLevel === "graphite-bloom" || vipLevel === "graphitebloom") { vipBadge.innerText = "🌑 GRAPHITE BLOOM"; vipBadge.classList.add("vip-graphite-bloom"); bankingCard.classList.add("theme-graphite-bloom"); }
else if (vipLevel === "apricot-signal" || vipLevel === "apricotsignal") { vipBadge.innerText = "🍑 APRICOT SIGNAL"; vipBadge.classList.add("vip-apricot-signal"); bankingCard.classList.add("theme-apricot-signal"); }
else if (vipLevel === "iris-fjord" || vipLevel === "irisfjord") { vipBadge.innerText = "🌊 IRIS FJORD"; vipBadge.classList.add("vip-iris-fjord"); bankingCard.classList.add("theme-iris-fjord"); }
else if (vipLevel === "ruby-cove" || vipLevel === "rubycove") { vipBadge.innerText = "🔴 RUBY COVE"; vipBadge.classList.add("vip-ruby-cove"); bankingCard.classList.add("theme-ruby-cove"); }
else if (vipLevel === "tangerine-vine" || vipLevel === "tangerinevine") { vipBadge.innerText = "🍊 TANGERINE VINE"; vipBadge.classList.add("vip-tangerine-vine"); bankingCard.classList.add("theme-tangerine-vine"); }
else if (vipLevel === "iris-veil" || vipLevel === "irisveil") { vipBadge.innerText = "🌫️ IRIS VEIL"; vipBadge.classList.add("vip-iris-veil"); bankingCard.classList.add("theme-iris-veil"); }
else if (vipLevel === "moss-echo" || vipLevel === "mossecho") { vipBadge.innerText = "🌿 MOSS ECHO"; vipBadge.classList.add("vip-moss-echo"); bankingCard.classList.add("theme-moss-echo"); }
else if (vipLevel === "sapphire-cascade" || vipLevel === "sapphirecascade") { vipBadge.innerText = "💎 SAPPHIRE CASCADE"; vipBadge.classList.add("vip-sapphire-cascade"); bankingCard.classList.add("theme-sapphire-cascade"); }
else if (vipLevel === "copper-whisper" || vipLevel === "copperwhisper") { vipBadge.innerText = "🪵 COPPER WHISPER"; vipBadge.classList.add("vip-copper-whisper"); bankingCard.classList.add("theme-copper-whisper"); }
else if (vipLevel === "pearl-arcade" || vipLevel === "pearlarcade") { vipBadge.innerText = "🎰 PEARL ARCADE"; vipBadge.classList.add("vip-pearl-arcade"); bankingCard.classList.add("theme-pearl-arcade"); }
else if (vipLevel === "glacier-cove" || vipLevel === "glaciercove") { vipBadge.innerText = "❄️ GLACIER COVE"; vipBadge.classList.add("vip-glacier-cove"); bankingCard.classList.add("theme-glacier-cove"); }
else if (vipLevel === "moonbeam-berry" || vipLevel === "moonbeamberry") { vipBadge.innerText = "🍓 MOONBEAM BERRY"; vipBadge.classList.add("vip-moonbeam-berry"); bankingCard.classList.add("theme-moonbeam-berry"); }
else if (vipLevel === "onyx-vista" || vipLevel === "onyxvista") { vipBadge.innerText = "✨ ONYX VISTA"; vipBadge.classList.add("vip-onyx-vista"); bankingCard.classList.add("theme-onyx-vista"); }
else if (vipLevel === "velvet-coral" || vipLevel === "velvetcoral") { vipBadge.innerText = "🌊 VELVET CORAL"; vipBadge.classList.add("vip-velvet-coral"); bankingCard.classList.add("theme-velvet-coral"); }
else if (vipLevel === "lagoon-glow" || vipLevel === "lagonglow") { vipBadge.innerText = "🌊 LAGOON GLOW"; vipBadge.classList.add("vip-lagoon-glow"); bankingCard.classList.add("theme-lagoon-glow"); }
else if (vipLevel === "saffron-drift" || vipLevel === "saffrondrift") { vipBadge.innerText = "🌾 SAFFRON DRIFT"; vipBadge.classList.add("vip-saffron-drift"); bankingCard.classList.add("theme-saffron-drift"); }
else if (vipLevel === "plum-dream" || vipLevel === "plumdream") { vipBadge.innerText = "🫐 PLUM DREAM"; vipBadge.classList.add("vip-plum-dream"); bankingCard.classList.add("theme-plum-dream"); }
else if (vipLevel === "tinsel-reef" || vipLevel === "tinselreef") { vipBadge.innerText = "✨ TINSEL REEF"; vipBadge.classList.add("vip-tinsel-reef"); bankingCard.classList.add("theme-tinsel-reef"); }
else if (vipLevel === "meadow-bloom" || vipLevel === "meadowbloom") { vipBadge.innerText = "🌼 MEADOW BLOOM"; vipBadge.classList.add("vip-meadow-bloom"); bankingCard.classList.add("theme-meadow-bloom"); }
else if (vipLevel === "sunset-peak" || vipLevel === "sunsetpeak") { vipBadge.innerText = "🌇 SUNSET PEAK"; vipBadge.classList.add("vip-sunset-peak"); bankingCard.classList.add("theme-sunset-peak"); }
else if (vipLevel === "horizon-cinder" || vipLevel === "horizoncinder") { vipBadge.innerText = "🌄 HORIZON CINDER"; vipBadge.classList.add("vip-horizon-cinder"); bankingCard.classList.add("theme-horizon-cinder"); }
else if (vipLevel === "indigo-fern" || vipLevel === "indigofern") { vipBadge.innerText = "🌿 INDIGO FERN"; vipBadge.classList.add("vip-indigo-fern"); bankingCard.classList.add("theme-indigo-fern"); }
else if (vipLevel === "rose-arcade" || vipLevel === "rosearcade") { vipBadge.innerText = "🎰 ROSE ARCADE"; vipBadge.classList.add("vip-rose-arcade"); bankingCard.classList.add("theme-rose-arcade"); }
else if (vipLevel === "silver-petal" || vipLevel === "silverpetal") { vipBadge.innerText = "🌼 SILVER PETAL"; vipBadge.classList.add("vip-silver-petal"); bankingCard.classList.add("theme-silver-petal"); }
else if (vipLevel === "teal-ember" || vipLevel === "tealember") { vipBadge.innerText = "🔥 TEAL EMBER"; vipBadge.classList.add("vip-teal-ember"); bankingCard.classList.add("theme-teal-ember"); }
else if (vipLevel === "coral-breeze" || vipLevel === "coralbreeze") { vipBadge.innerText = "🌬️ CORAL BREEZE"; vipBadge.classList.add("vip-coral-breeze"); bankingCard.classList.add("theme-coral-breeze"); }
else if (vipLevel === "lilac-drift" || vipLevel === "lilacdrift") { vipBadge.innerText = "💜 LILAC DRIFT"; vipBadge.classList.add("vip-lilac-drift"); bankingCard.classList.add("theme-lilac-drift"); }
else if (vipLevel === "stone-river" || vipLevel === "stoneriver") { vipBadge.innerText = "🪨 STONE RIVER"; vipBadge.classList.add("vip-stone-river"); bankingCard.classList.add("theme-stone-river"); }
else if (vipLevel === "amber-lantern" || vipLevel === "amberlantern") { vipBadge.innerText = "🏮 AMBER LANTERN"; vipBadge.classList.add("vip-amber-lantern"); bankingCard.classList.add("theme-amber-lantern"); }
else if (vipLevel === "glass-fern" || vipLevel === "glassfern") { vipBadge.innerText = "🌿 GLASS FERN"; vipBadge.classList.add("vip-glass-fern"); bankingCard.classList.add("theme-glass-fern"); }
else if (vipLevel === "velvet-harbor" || vipLevel === "velvetharbor") { vipBadge.innerText = "🌊 VELVET HARBOR"; vipBadge.classList.add("vip-velvet-harbor"); bankingCard.classList.add("theme-velvet-harbor"); }
else if (extendedThemeNames.slice(0, 80).some(themeName => vipLevel === themeName || vipLevel === themeName.replace(/-/g, ""))) { const themeName = extendedThemeNames.slice(0, 80).find(name => vipLevel === name || vipLevel === name.replace(/-/g, "")); vipBadge.innerText = `VIP ${themeName.replace(/-/g, " ").toUpperCase()}`; vipBadge.classList.add(`vip-${themeName}`); bankingCard.classList.add(`theme-${themeName}`); const themeStyle = getComputedStyle(bankingCard); vipBadge.style.background = themeStyle.getPropertyValue("--card-bg"); vipBadge.style.color = themeStyle.getPropertyValue("--text-primary"); }
else if (additionalThemeNames.some(themeName => vipLevel === themeName || vipLevel === themeName.replace(/-/g, ""))) { const themeName = additionalThemeNames.find(name => vipLevel === name || vipLevel === name.replace(/-/g, "")); const palette = additionalThemeByName.get(themeName); bankingCard.classList.add(`theme-${themeName}`); bankingCard.style.setProperty("--card-bg", `linear-gradient(135deg, ${palette[1]}, ${palette[2]} 52%, ${palette[3]})`); bankingCard.style.setProperty("--chip-bg", `linear-gradient(135deg, #f8fafc, ${palette[3]}, #e0f2fe)`); bankingCard.style.setProperty("--chip-border", palette[3]); bankingCard.style.setProperty("--text-primary", "#f8fafc"); bankingCard.style.setProperty("--text-accent", palette[3]); bankingCard.style.setProperty("--text-shadow", "rgba(255, 255, 255, 0.6)"); bankingCard.style.setProperty("--card-border", palette[3]); bankingCard.style.setProperty("--card-glow", `0 30px 60px rgba(0, 0, 0, 0.85), 0 0 30px ${palette[2]}`); vipBadge.innerText = `VIP ${themeName.replace(/-/g, " ").toUpperCase()}`; vipBadge.classList.add(`vip-${themeName}`); vipBadge.style.background = `linear-gradient(135deg, ${palette[2]}, ${palette[3]})`; vipBadge.style.color = "#fff"; }
else if (newestThemeNames.some(themeName => vipLevel === themeName || vipLevel === themeName.replace(/-/g, ""))) { const themeName = newestThemeNames.find(name => vipLevel === name || vipLevel === name.replace(/-/g, "")); const palette = newestThemeByName.get(themeName); bankingCard.classList.add(`theme-${themeName}`); bankingCard.style.setProperty("--card-bg", `linear-gradient(135deg, ${palette[1]}, ${palette[2]} 52%, ${palette[3]})`); bankingCard.style.setProperty("--chip-bg", `linear-gradient(135deg, #f8fafc, ${palette[3]}, #e0f2fe)`); bankingCard.style.setProperty("--chip-border", palette[3]); bankingCard.style.setProperty("--text-primary", "#f8fafc"); bankingCard.style.setProperty("--text-accent", palette[3]); bankingCard.style.setProperty("--text-shadow", "rgba(255, 255, 255, 0.6)"); bankingCard.style.setProperty("--card-border", palette[3]); bankingCard.style.setProperty("--card-glow", `0 30px 60px rgba(0, 0, 0, 0.85), 0 0 30px ${palette[2]}`); vipBadge.innerText = `VIP ${themeName.replace(/-/g, " ").toUpperCase()}`; vipBadge.classList.add(`vip-${themeName}`); }
else if (vipLevel === "aphelion-veil" || vipLevel === "aphelionveil") { vipBadge.innerText = "🌌 APHELION VEIL"; vipBadge.classList.add("vip-aphelion-veil"); bankingCard.classList.add("theme-aphelion-veil"); }
else if (vipLevel === "aphelion-crest" || vipLevel === "aphelioncrest") { vipBadge.innerText = "🌌 APHELION CREST"; vipBadge.classList.add("vip-aphelion-crest"); bankingCard.classList.add("theme-aphelion-crest"); }
else if (vipLevel === "aphelion-pulse" || vipLevel === "aphelionpulse") { vipBadge.innerText = "🌌 APHELION PULSE"; vipBadge.classList.add("vip-aphelion-pulse"); bankingCard.classList.add("theme-aphelion-pulse"); }
else if (vipLevel === "aphelion-breeze" || vipLevel === "aphelionbreeze") { vipBadge.innerText = "🌌 APHELION BREEZE"; vipBadge.classList.add("vip-aphelion-breeze"); bankingCard.classList.add("theme-aphelion-breeze"); }
else if (vipLevel === "aphelion-arc" || vipLevel === "aphelionarc") { vipBadge.innerText = "🌌 APHELION ARC"; vipBadge.classList.add("vip-aphelion-arc"); bankingCard.classList.add("theme-aphelion-arc"); }
else if (vipLevel === "sequoia-veil" || vipLevel === "sequoiaveil") { vipBadge.innerText = "🌲 SEQUOIA VEIL"; vipBadge.classList.add("vip-sequoia-veil"); bankingCard.classList.add("theme-sequoia-veil"); }
else if (vipLevel === "sequoia-crest" || vipLevel === "sequoiacrest") { vipBadge.innerText = "🌲 SEQUOIA CREST"; vipBadge.classList.add("vip-sequoia-crest"); bankingCard.classList.add("theme-sequoia-crest"); }
else if (vipLevel === "sequoia-pulse" || vipLevel === "sequoiapulse") { vipBadge.innerText = "🌲 SEQUOIA PULSE"; vipBadge.classList.add("vip-sequoia-pulse"); bankingCard.classList.add("theme-sequoia-pulse"); }
else if (vipLevel === "sequoia-breeze" || vipLevel === "sequoiabreeze") { vipBadge.innerText = "🌲 SEQUOIA BREEZE"; vipBadge.classList.add("vip-sequoia-breeze"); bankingCard.classList.add("theme-sequoia-breeze"); }
else if (vipLevel === "sequoia-arc" || vipLevel === "sequoiaarc") { vipBadge.innerText = "🌲 SEQUOIA ARC"; vipBadge.classList.add("vip-sequoia-arc"); bankingCard.classList.add("theme-sequoia-arc"); }
else if (vipLevel === "cerulean-veil" || vipLevel === "ceruleanveil") { vipBadge.innerText = "🌊 CERULEAN VEIL"; vipBadge.classList.add("vip-cerulean-veil"); bankingCard.classList.add("theme-cerulean-veil"); }
else if (vipLevel === "cerulean-crest" || vipLevel === "ceruleancrest") { vipBadge.innerText = "🌊 CERULEAN CREST"; vipBadge.classList.add("vip-cerulean-crest"); bankingCard.classList.add("theme-cerulean-crest"); }
else if (vipLevel === "cerulean-pulse" || vipLevel === "ceruleanpulse") { vipBadge.innerText = "🌊 CERULEAN PULSE"; vipBadge.classList.add("vip-cerulean-pulse"); bankingCard.classList.add("theme-cerulean-pulse"); }
else if (vipLevel === "cerulean-breeze" || vipLevel === "ceruleanbreeze") { vipBadge.innerText = "🌊 CERULEAN BREEZE"; vipBadge.classList.add("vip-cerulean-breeze"); bankingCard.classList.add("theme-cerulean-breeze"); }
else if (vipLevel === "cerulean-arc" || vipLevel === "ceruleanarc") { vipBadge.innerText = "🌊 CERULEAN ARC"; vipBadge.classList.add("vip-cerulean-arc"); bankingCard.classList.add("theme-cerulean-arc"); }
else if (vipLevel === "magenta-veil" || vipLevel === "magentaveil") { vipBadge.innerText = "🌺 MAGENTA VEIL"; vipBadge.classList.add("vip-magenta-veil"); bankingCard.classList.add("theme-magenta-veil"); }
else if (vipLevel === "magenta-crest" || vipLevel === "magentacrest") { vipBadge.innerText = "🌺 MAGENTA CREST"; vipBadge.classList.add("vip-magenta-crest"); bankingCard.classList.add("theme-magenta-crest"); }
else if (vipLevel === "magenta-pulse" || vipLevel === "magentapulse") { vipBadge.innerText = "🌺 MAGENTA PULSE"; vipBadge.classList.add("vip-magenta-pulse"); bankingCard.classList.add("theme-magenta-pulse"); }
else if (vipLevel === "magenta-breeze" || vipLevel === "magentabreeze") { vipBadge.innerText = "🌺 MAGENTA BREEZE"; vipBadge.classList.add("vip-magenta-breeze"); bankingCard.classList.add("theme-magenta-breeze"); }
else if (vipLevel === "magenta-arc" || vipLevel === "magentaarc") { vipBadge.innerText = "🌺 MAGENTA ARC"; vipBadge.classList.add("vip-magenta-arc"); bankingCard.classList.add("theme-magenta-arc"); }
else if (finalThemeNames.some(themeName => vipLevel === themeName || vipLevel === themeName.replace(/-/g, ""))) { const themeName = finalThemeNames.find(name => vipLevel === name || vipLevel === name.replace(/-/g, "")); const palette = finalThemeByName.get(themeName); bankingCard.classList.add(`theme-${themeName}`); bankingCard.style.setProperty("--card-bg", `linear-gradient(135deg, ${palette[1]}, ${palette[2]} 52%, ${palette[3]})`); bankingCard.style.setProperty("--chip-bg", `linear-gradient(135deg, #f8fafc, ${palette[3]}, #e0f2fe)`); bankingCard.style.setProperty("--chip-border", palette[3]); bankingCard.style.setProperty("--text-primary", "#f8fafc"); bankingCard.style.setProperty("--text-accent", palette[3]); bankingCard.style.setProperty("--text-shadow", "rgba(255, 255, 255, 0.6)"); bankingCard.style.setProperty("--card-border", palette[3]); bankingCard.style.setProperty("--card-glow", `0 30px 60px rgba(0, 0, 0, 0.85), 0 0 30px ${palette[2]}`); vipBadge.innerText = `VIP ${themeName.replace(/-/g, " ").toUpperCase()}`; vipBadge.classList.add(`vip-${themeName}`); }
else if (megaThemeNames.some(themeName => vipLevel === themeName || vipLevel === themeName.replace(/-/g, ""))) { const themeName = megaThemeNames.find(name => vipLevel === name || vipLevel === name.replace(/-/g, "")); const palette = megaThemeByName.get(themeName); bankingCard.classList.add(`theme-${themeName}`); bankingCard.style.setProperty("--card-bg", `linear-gradient(135deg, ${palette[1]}, ${palette[2]} 52%, ${palette[3]})`); bankingCard.style.setProperty("--chip-bg", `linear-gradient(135deg, #f8fafc, ${palette[3]}, #e0f2fe)`); bankingCard.style.setProperty("--chip-border", palette[3]); bankingCard.style.setProperty("--text-primary", "#f8fafc"); bankingCard.style.setProperty("--text-accent", palette[3]); bankingCard.style.setProperty("--text-shadow", "rgba(255, 255, 255, 0.6)"); bankingCard.style.setProperty("--card-border", palette[3]); bankingCard.style.setProperty("--card-glow", `0 30px 60px rgba(0, 0, 0, 0.85), 0 0 30px ${palette[2]}`); vipBadge.innerText = `VIP ${themeName.replace(/-/g, " ").toUpperCase()}`; vipBadge.classList.add(`vip-${themeName}`); vipBadge.style.background = `linear-gradient(135deg, ${palette[2]}, ${palette[3]})`; vipBadge.style.color = "#fff"; }
else if (vipLevel === "papaya-veil" || vipLevel === "papayaveil") { vipBadge.innerText = "🍊 PAPAYA VEIL"; vipBadge.classList.add("vip-papaya-veil"); bankingCard.classList.add("theme-papaya-veil"); }
else if (vipLevel === "papaya-crest" || vipLevel === "papayacrest") { vipBadge.innerText = "🍊 PAPAYA CREST"; vipBadge.classList.add("vip-papaya-crest"); bankingCard.classList.add("theme-papaya-crest"); }
else if (vipLevel === "papaya-pulse" || vipLevel === "papayapulse") { vipBadge.innerText = "🍊 PAPAYA PULSE"; vipBadge.classList.add("vip-papaya-pulse"); bankingCard.classList.add("theme-papaya-pulse"); }
else if (vipLevel === "papaya-breeze" || vipLevel === "papayabreeze") { vipBadge.innerText = "🍊 PAPAYA BREEZE"; vipBadge.classList.add("vip-papaya-breeze"); bankingCard.classList.add("theme-papaya-breeze"); }
else if (vipLevel === "papaya-arc" || vipLevel === "papayaarc") { vipBadge.innerText = "🍊 PAPAYA ARC"; vipBadge.classList.add("vip-papaya-arc"); bankingCard.classList.add("theme-papaya-arc"); }
else if (vipLevel === "indigofox-veil" || vipLevel === "indigofoxveil") { vipBadge.innerText = "🦊 INDIGOFOX VEIL"; vipBadge.classList.add("vip-indigofox-veil"); bankingCard.classList.add("theme-indigofox-veil"); }
else if (vipLevel === "indigofox-crest" || vipLevel === "indigofoxcrest") { vipBadge.innerText = "🦊 INDIGOFOX CREST"; vipBadge.classList.add("vip-indigofox-crest"); bankingCard.classList.add("theme-indigofox-crest"); }
else if (vipLevel === "indigofox-pulse" || vipLevel === "indigofoxpulse") { vipBadge.innerText = "🦊 INDIGOFOX PULSE"; vipBadge.classList.add("vip-indigofox-pulse"); bankingCard.classList.add("theme-indigofox-pulse"); }
else if (vipLevel === "indigofox-breeze" || vipLevel === "indigofoxbreeze") { vipBadge.innerText = "🦊 INDIGOFOX BREEZE"; vipBadge.classList.add("vip-indigofox-breeze"); bankingCard.classList.add("theme-indigofox-breeze"); }
else if (vipLevel === "indigofox-arc" || vipLevel === "indigofoxarc") { vipBadge.innerText = "🦊 INDIGOFOX ARC"; vipBadge.classList.add("vip-indigofox-arc"); bankingCard.classList.add("theme-indigofox-arc"); }
else if (vipLevel === "copperleaf-veil" || vipLevel === "copperleafveil") { vipBadge.innerText = "🍂 COPPERLEAF VEIL"; vipBadge.classList.add("vip-copperleaf-veil"); bankingCard.classList.add("theme-copperleaf-veil"); }
else if (vipLevel === "copperleaf-crest" || vipLevel === "copperleafcrest") { vipBadge.innerText = "🍂 COPPERLEAF CREST"; vipBadge.classList.add("vip-copperleaf-crest"); bankingCard.classList.add("theme-copperleaf-crest"); }
else if (vipLevel === "copperleaf-pulse" || vipLevel === "copperleafpulse") { vipBadge.innerText = "🍂 COPPERLEAF PULSE"; vipBadge.classList.add("vip-copperleaf-pulse"); bankingCard.classList.add("theme-copperleaf-pulse"); }
else if (vipLevel === "copperleaf-breeze" || vipLevel === "copperleafbreeze") { vipBadge.innerText = "🍂 COPPERLEAF BREEZE"; vipBadge.classList.add("vip-copperleaf-breeze"); bankingCard.classList.add("theme-copperleaf-breeze"); }
else if (vipLevel === "copperleaf-arc" || vipLevel === "copperleafarc") { vipBadge.innerText = "🍂 COPPERLEAF ARC"; vipBadge.classList.add("vip-copperleaf-arc"); bankingCard.classList.add("theme-copperleaf-arc"); }
else if (vipLevel === "frostfire-veil" || vipLevel === "frostfireveil") { vipBadge.innerText = "❄️ FROSTFIRE VEIL"; vipBadge.classList.add("vip-frostfire-veil"); bankingCard.classList.add("theme-frostfire-veil"); }
else if (vipLevel === "frostfire-crest" || vipLevel === "frostfirecrest") { vipBadge.innerText = "❄️ FROSTFIRE CREST"; vipBadge.classList.add("vip-frostfire-crest"); bankingCard.classList.add("theme-frostfire-crest"); }
else if (vipLevel === "frostfire-pulse" || vipLevel === "frostfirepulse") { vipBadge.innerText = "❄️ FROSTFIRE PULSE"; vipBadge.classList.add("vip-frostfire-pulse"); bankingCard.classList.add("theme-frostfire-pulse"); }
else if (vipLevel === "frostfire-breeze" || vipLevel === "frostfirebreeze") { vipBadge.innerText = "❄️ FROSTFIRE BREEZE"; vipBadge.classList.add("vip-frostfire-breeze"); bankingCard.classList.add("theme-frostfire-breeze"); }
else if (vipLevel === "frostfire-arc" || vipLevel === "frostfirearc") { vipBadge.innerText = "❄️ FROSTFIRE ARC"; vipBadge.classList.add("vip-frostfire-arc"); bankingCard.classList.add("theme-frostfire-arc"); }
else if (vipLevel === "mosaic-veil" || vipLevel === "mosaicveil") { vipBadge.innerText = "🧩 MOSAIC VEIL"; vipBadge.classList.add("vip-mosaic-veil"); bankingCard.classList.add("theme-mosaic-veil"); }
else if (vipLevel === "mosaic-crest" || vipLevel === "mosaiccrest") { vipBadge.innerText = "🧩 MOSAIC CREST"; vipBadge.classList.add("vip-mosaic-crest"); bankingCard.classList.add("theme-mosaic-crest"); }
else if (vipLevel === "mosaic-pulse" || vipLevel === "mosaicpulse") { vipBadge.innerText = "🧩 MOSAIC PULSE"; vipBadge.classList.add("vip-mosaic-pulse"); bankingCard.classList.add("theme-mosaic-pulse"); }
else if (vipLevel === "mosaic-breeze" || vipLevel === "mosaicbreeze") { vipBadge.innerText = "🧩 MOSAIC BREEZE"; vipBadge.classList.add("vip-mosaic-breeze"); bankingCard.classList.add("theme-mosaic-breeze"); }
else if (vipLevel === "mosaic-arc" || vipLevel === "mosaicarc") { vipBadge.innerText = "🧩 MOSAIC ARC"; vipBadge.classList.add("vip-mosaic-arc"); bankingCard.classList.add("theme-mosaic-arc"); }
else if (vipLevel === "velour-veil" || vipLevel === "velourveil") { vipBadge.innerText = "🧵 VELOUR VEIL"; vipBadge.classList.add("vip-velour-veil"); bankingCard.classList.add("theme-velour-veil"); }
else if (vipLevel === "velour-crest" || vipLevel === "velourcrest") { vipBadge.innerText = "🧵 VELOUR CREST"; vipBadge.classList.add("vip-velour-crest"); bankingCard.classList.add("theme-velour-crest"); }
else if (vipLevel === "velour-pulse" || vipLevel === "velourpulse") { vipBadge.innerText = "🧵 VELOUR PULSE"; vipBadge.classList.add("vip-velour-pulse"); bankingCard.classList.add("theme-velour-pulse"); }
else if (vipLevel === "velour-breeze" || vipLevel === "velourbreeze") { vipBadge.innerText = "🧵 VELOUR BREEZE"; vipBadge.classList.add("vip-velour-breeze"); bankingCard.classList.add("theme-velour-breeze"); }
else if (vipLevel === "velour-arc" || vipLevel === "velourarc") { vipBadge.innerText = "🧵 VELOUR ARC"; vipBadge.classList.add("vip-velour-arc"); bankingCard.classList.add("theme-velour-arc"); }
else if (vipLevel === "zenith-veil" || vipLevel === "zenithveil") { vipBadge.innerText = "🔆 ZENITH VEIL"; vipBadge.classList.add("vip-zenith-veil"); bankingCard.classList.add("theme-zenith-veil"); }
else if (vipLevel === "zenith-crest" || vipLevel === "zenithcrest") { vipBadge.innerText = "🔆 ZENITH CREST"; vipBadge.classList.add("vip-zenith-crest"); bankingCard.classList.add("theme-zenith-crest"); }
else if (vipLevel === "zenith-pulse" || vipLevel === "zenithpulse") { vipBadge.innerText = "🔆 ZENITH PULSE"; vipBadge.classList.add("vip-zenith-pulse"); bankingCard.classList.add("theme-zenith-pulse"); }
else if (vipLevel === "zenith-breeze" || vipLevel === "zenithbreeze") { vipBadge.innerText = "🔆 ZENITH BREEZE"; vipBadge.classList.add("vip-zenith-breeze"); bankingCard.classList.add("theme-zenith-breeze"); }
else if (vipLevel === "zenith-arc" || vipLevel === "zenitharc") { vipBadge.innerText = "🔆 ZENITH ARC"; vipBadge.classList.add("vip-zenith-arc"); bankingCard.classList.add("theme-zenith-arc"); }
else if (vipLevel === "solstice-veil" || vipLevel === "solsticeveil") { vipBadge.innerText = "☀️ SOLSTICE VEIL"; vipBadge.classList.add("vip-solstice-veil"); bankingCard.classList.add("theme-solstice-veil"); }
else if (vipLevel === "solstice-crest" || vipLevel === "solsticecrest") { vipBadge.innerText = "☀️ SOLSTICE CREST"; vipBadge.classList.add("vip-solstice-crest"); bankingCard.classList.add("theme-solstice-crest"); }
else if (vipLevel === "solstice-pulse" || vipLevel === "solsticepulse") { vipBadge.innerText = "☀️ SOLSTICE PULSE"; vipBadge.classList.add("vip-solstice-pulse"); bankingCard.classList.add("theme-solstice-pulse"); }
else if (vipLevel === "solstice-breeze" || vipLevel === "solsticebreeze") { vipBadge.innerText = "☀️ SOLSTICE BREEZE"; vipBadge.classList.add("vip-solstice-breeze"); bankingCard.classList.add("theme-solstice-breeze"); }
else if (vipLevel === "solstice-arc" || vipLevel === "solsticearc") { vipBadge.innerText = "☀️ SOLSTICE ARC"; vipBadge.classList.add("vip-solstice-arc"); bankingCard.classList.add("theme-solstice-arc"); }
else if (vipLevel === "marina-veil" || vipLevel === "marinaveil") { vipBadge.innerText = "🌊 MARINA VEIL"; vipBadge.classList.add("vip-marina-veil"); bankingCard.classList.add("theme-marina-veil"); }
else if (vipLevel === "marina-crest" || vipLevel === "marinacrest") { vipBadge.innerText = "🌊 MARINA CREST"; vipBadge.classList.add("vip-marina-crest"); bankingCard.classList.add("theme-marina-crest"); }
else if (vipLevel === "marina-pulse" || vipLevel === "marinapulse") { vipBadge.innerText = "🌊 MARINA PULSE"; vipBadge.classList.add("vip-marina-pulse"); bankingCard.classList.add("theme-marina-pulse"); }
else if (vipLevel === "marina-breeze" || vipLevel === "marinabreeze") { vipBadge.innerText = "🌊 MARINA BREEZE"; vipBadge.classList.add("vip-marina-breeze"); bankingCard.classList.add("theme-marina-breeze"); }
else if (vipLevel === "marina-arc" || vipLevel === "marinaarc") { vipBadge.innerText = "🌊 MARINA ARC"; vipBadge.classList.add("vip-marina-arc"); bankingCard.classList.add("theme-marina-arc"); }
else if (vipLevel === "silverline-veil" || vipLevel === "silverlineveil") { vipBadge.innerText = "✨ SILVERLINE VEIL"; vipBadge.classList.add("vip-silverline-veil"); bankingCard.classList.add("theme-silverline-veil"); }
else if (vipLevel === "silverline-crest" || vipLevel === "silverlinecrest") { vipBadge.innerText = "✨ SILVERLINE CREST"; vipBadge.classList.add("vip-silverline-crest"); bankingCard.classList.add("theme-silverline-crest"); }
else if (vipLevel === "silverline-pulse" || vipLevel === "silverlinepulse") { vipBadge.innerText = "✨ SILVERLINE PULSE"; vipBadge.classList.add("vip-silverline-pulse"); bankingCard.classList.add("theme-silverline-pulse"); }
else if (vipLevel === "silverline-breeze" || vipLevel === "silverlinebreeze") { vipBadge.innerText = "✨ SILVERLINE BREEZE"; vipBadge.classList.add("vip-silverline-breeze"); bankingCard.classList.add("theme-silverline-breeze"); }
else if (vipLevel === "silverline-arc" || vipLevel === "silverlinearc") { vipBadge.innerText = "✨ SILVERLINE ARC"; vipBadge.classList.add("vip-silverline-arc"); bankingCard.classList.add("theme-silverline-arc"); }
else if (vipLevel === "sandstone-veil" || vipLevel === "sandstoneveil") { vipBadge.innerText = "🏜️ SANDSTONE VEIL"; vipBadge.classList.add("vip-sandstone-veil"); bankingCard.classList.add("theme-sandstone-veil"); }
else if (vipLevel === "sandstone-crest" || vipLevel === "sandstonecrest") { vipBadge.innerText = "🏜️ SANDSTONE CREST"; vipBadge.classList.add("vip-sandstone-crest"); bankingCard.classList.add("theme-sandstone-crest"); }
else if (vipLevel === "sandstone-pulse" || vipLevel === "sandstonepulse") { vipBadge.innerText = "🏜️ SANDSTONE PULSE"; vipBadge.classList.add("vip-sandstone-pulse"); bankingCard.classList.add("theme-sandstone-pulse"); }
else if (vipLevel === "sandstone-breeze" || vipLevel === "sandstonebreeze") { vipBadge.innerText = "🏜️ SANDSTONE BREEZE"; vipBadge.classList.add("vip-sandstone-breeze"); bankingCard.classList.add("theme-sandstone-breeze"); }
else if (vipLevel === "sandstone-arc" || vipLevel === "sandstonearc") { vipBadge.innerText = "🏜️ SANDSTONE ARC"; vipBadge.classList.add("vip-sandstone-arc"); bankingCard.classList.add("theme-sandstone-arc"); }
else if (vipLevel === "halcyon-veil" || vipLevel === "halcyonveil") { vipBadge.innerText = "🪽 HALCYON VEIL"; vipBadge.classList.add("vip-halcyon-veil"); bankingCard.classList.add("theme-halcyon-veil"); }
else if (vipLevel === "halcyon-crest" || vipLevel === "halcyoncrest") { vipBadge.innerText = "🪽 HALCYON CREST"; vipBadge.classList.add("vip-halcyon-crest"); bankingCard.classList.add("theme-halcyon-crest"); }
else if (vipLevel === "halcyon-pulse" || vipLevel === "halcyonpulse") { vipBadge.innerText = "🪽 HALCYON PULSE"; vipBadge.classList.add("vip-halcyon-pulse"); bankingCard.classList.add("theme-halcyon-pulse"); }
else if (vipLevel === "halcyon-breeze" || vipLevel === "halcyonbreeze") { vipBadge.innerText = "🪽 HALCYON BREEZE"; vipBadge.classList.add("vip-halcyon-breeze"); bankingCard.classList.add("theme-halcyon-breeze"); }
else if (vipLevel === "halcyon-arc" || vipLevel === "halcyonarc") { vipBadge.innerText = "🪽 HALCYON ARC"; vipBadge.classList.add("vip-halcyon-arc"); bankingCard.classList.add("theme-halcyon-arc"); }
else if (vipLevel === "prismarine-veil" || vipLevel === "prismarineveil") { vipBadge.innerText = "🔷 PRISMARINE VEIL"; vipBadge.classList.add("vip-prismarine-veil"); bankingCard.classList.add("theme-prismarine-veil"); }
else if (vipLevel === "prismarine-crest" || vipLevel === "prismarinecrest") { vipBadge.innerText = "🔷 PRISMARINE CREST"; vipBadge.classList.add("vip-prismarine-crest"); bankingCard.classList.add("theme-prismarine-crest"); }
else if (vipLevel === "prismarine-pulse" || vipLevel === "prismarinepulse") { vipBadge.innerText = "🔷 PRISMARINE PULSE"; vipBadge.classList.add("vip-prismarine-pulse"); bankingCard.classList.add("theme-prismarine-pulse"); }
else if (vipLevel === "prismarine-breeze" || vipLevel === "prismarinebreeze") { vipBadge.innerText = "🔷 PRISMARINE BREEZE"; vipBadge.classList.add("vip-prismarine-breeze"); bankingCard.classList.add("theme-prismarine-breeze"); }
else if (vipLevel === "prismarine-arc" || vipLevel === "prismarinearc") { vipBadge.innerText = "🔷 PRISMARINE ARC"; vipBadge.classList.add("vip-prismarine-arc"); bankingCard.classList.add("theme-prismarine-arc"); }
else if (vipLevel === "terracotta-veil" || vipLevel === "terracottaveil") { vipBadge.innerText = "🧱 TERRACOTTA VEIL"; vipBadge.classList.add("vip-terracotta-veil"); bankingCard.classList.add("theme-terracotta-veil"); }
else if (vipLevel === "terracotta-crest" || vipLevel === "terracottacrest") { vipBadge.innerText = "🧱 TERRACOTTA CREST"; vipBadge.classList.add("vip-terracotta-crest"); bankingCard.classList.add("theme-terracotta-crest"); }
else if (vipLevel === "terracotta-pulse" || vipLevel === "terracottapulse") { vipBadge.innerText = "🧱 TERRACOTTA PULSE"; vipBadge.classList.add("vip-terracotta-pulse"); bankingCard.classList.add("theme-terracotta-pulse"); }
else if (vipLevel === "terracotta-breeze" || vipLevel === "terracottabreeze") { vipBadge.innerText = "🧱 TERRACOTTA BREEZE"; vipBadge.classList.add("vip-terracotta-breeze"); bankingCard.classList.add("theme-terracotta-breeze"); }
else if (vipLevel === "terracotta-arc" || vipLevel === "terracottaarc") { vipBadge.innerText = "🧱 TERRACOTTA ARC"; vipBadge.classList.add("vip-terracotta-arc"); bankingCard.classList.add("theme-terracotta-arc"); }
else if (vipLevel === "moonrise-veil" || vipLevel === "moonriseveil") { vipBadge.innerText = "🌙 MOONRISE VEIL"; vipBadge.classList.add("vip-moonrise-veil"); bankingCard.classList.add("theme-moonrise-veil"); }
else if (vipLevel === "moonrise-crest" || vipLevel === "moonrisecrest") { vipBadge.innerText = "🌙 MOONRISE CREST"; vipBadge.classList.add("vip-moonrise-crest"); bankingCard.classList.add("theme-moonrise-crest"); }
else if (vipLevel === "moonrise-pulse" || vipLevel === "moonrisepulse") { vipBadge.innerText = "🌙 MOONRISE PULSE"; vipBadge.classList.add("vip-moonrise-pulse"); bankingCard.classList.add("theme-moonrise-pulse"); }
else if (vipLevel === "moonrise-breeze" || vipLevel === "moonrisebreeze") { vipBadge.innerText = "🌙 MOONRISE BREEZE"; vipBadge.classList.add("vip-moonrise-breeze"); bankingCard.classList.add("theme-moonrise-breeze"); }
else if (vipLevel === "moonrise-arc" || vipLevel === "moonrisearc") { vipBadge.innerText = "🌙 MOONRISE ARC"; vipBadge.classList.add("vip-moonrise-arc"); bankingCard.classList.add("theme-moonrise-arc"); }
else if (vipLevel === "rainshadow-veil" || vipLevel === "rainshadowveil") { vipBadge.innerText = "🌧️ RAINSHADOW VEIL"; vipBadge.classList.add("vip-rainshadow-veil"); bankingCard.classList.add("theme-rainshadow-veil"); }
else if (vipLevel === "rainshadow-crest" || vipLevel === "rainshadowcrest") { vipBadge.innerText = "🌧️ RAINSHADOW CREST"; vipBadge.classList.add("vip-rainshadow-crest"); bankingCard.classList.add("theme-rainshadow-crest"); }
else if (vipLevel === "rainshadow-pulse" || vipLevel === "rainshadowpulse") { vipBadge.innerText = "🌧️ RAINSHADOW PULSE"; vipBadge.classList.add("vip-rainshadow-pulse"); bankingCard.classList.add("theme-rainshadow-pulse"); }
else if (vipLevel === "rainshadow-breeze" || vipLevel === "rainshadowbreeze") { vipBadge.innerText = "🌧️ RAINSHADOW BREEZE"; vipBadge.classList.add("vip-rainshadow-breeze"); bankingCard.classList.add("theme-rainshadow-breeze"); }
else if (vipLevel === "rainshadow-arc" || vipLevel === "rainshadowarc") { vipBadge.innerText = "🌧️ RAINSHADOW ARC"; vipBadge.classList.add("vip-rainshadow-arc"); bankingCard.classList.add("theme-rainshadow-arc"); }
else if (vipLevel === "evergreen-veil" || vipLevel === "evergreenveil") { vipBadge.innerText = "🌲 EVERGREEN VEIL"; vipBadge.classList.add("vip-evergreen-veil"); bankingCard.classList.add("theme-evergreen-veil"); }
else if (vipLevel === "evergreen-crest" || vipLevel === "evergreencrest") { vipBadge.innerText = "🌲 EVERGREEN CREST"; vipBadge.classList.add("vip-evergreen-crest"); bankingCard.classList.add("theme-evergreen-crest"); }
else if (vipLevel === "evergreen-pulse" || vipLevel === "evergreenpulse") { vipBadge.innerText = "🌲 EVERGREEN PULSE"; vipBadge.classList.add("vip-evergreen-pulse"); bankingCard.classList.add("theme-evergreen-pulse"); }
else if (vipLevel === "evergreen-breeze" || vipLevel === "evergreenbreeze") { vipBadge.innerText = "🌲 EVERGREEN BREEZE"; vipBadge.classList.add("vip-evergreen-breeze"); bankingCard.classList.add("theme-evergreen-breeze"); }
else if (vipLevel === "evergreen-arc" || vipLevel === "evergreenarc") { vipBadge.innerText = "🌲 EVERGREEN ARC"; vipBadge.classList.add("vip-evergreen-arc"); bankingCard.classList.add("theme-evergreen-arc"); }
else { vipBadge.style.display = "none"; }
isUpdatingToggle = true;
if (data.status === "active") {
bankingCard.classList.remove("locked");
statusToggle.checked = true;
statusLabel.innerText = "TRẠNG THÁI: HOẠT ĐỘNG";
isCardActive = true;
} else {
bankingCard.classList.add("locked");
statusToggle.checked = false;
statusLabel.innerText = "TRẠNG THÁI: ĐANG KHÓA";
isCardActive = false;
}
isUpdatingToggle = false;
}
});
}
ketNoiRealtimeThe();
// Chuyển đổi giữa các Thẻ
const switchButtons = document.querySelectorAll(".switch-account-btn");
switchButtons.forEach(btn => {
btn.addEventListener("click", (e) => {
switchButtons.forEach(b => b.classList.remove("active"));
e.target.classList.add("active");
currentCardPath = e.target.getAttribute("data-path");
ketNoiRealtimeThe();
document.getElementById("txResultPanel").style.display = "none";
});
});
const createSecondCardBtn = document.getElementById("createSecondCardBtn");
const switchBtnGroup = document.querySelector(".switch-btn-group");
createSecondCardBtn.addEventListener("click", async () => {
createSecondCardBtn.disabled = true;
createSecondCardBtn.innerText = "⏳ Đang tạo BANK...";
try {
const snapshot = await get(ref(database));
const allData = snapshot.val() || {};
let cardIndex = 4;
while (allData[`bankCard${cardIndex}`]) cardIndex++;
const newPath = `bankCard${cardIndex}`;
const accountNumber = `${Date.now()}`.slice(-10);
const cardNumber = accountNumber.match(/.{1,4}/g).join(" ");
const newCard = {
holder: "GENIUS MEMBER",
accountNumber,
number: cardNumber,
expiry: "12/30",
cvv: Math.floor(100 + Math.random() * 900),
balance: 0,
savings: 0,
status: "locked",
vipLevel: "0"
};
await set(ref(database, newPath), newCard);
const newButton = document.createElement("button");
newButton.className = "switch-account-btn";
newButton.dataset.path = newPath;
newButton.innerText = `Thẻ ${cardIndex}`;
newButton.addEventListener("click", (event) => {
switchBtnGroup.querySelectorAll(".switch-account-btn").forEach(button => button.classList.remove("active"));
event.currentTarget.classList.add("active");
currentCardPath = newPath;
ketNoiRealtimeThe();
document.getElementById("txResultPanel").style.display = "none";
});
switchBtnGroup.appendChild(newButton);
newButton.click();
alert(`Đã tạo ${newPath} thành công!`);
} catch (error) {
alert("Không thể tạo BANK mới: " + error.message);
} finally {
createSecondCardBtn.disabled = false;
createSecondCardBtn.innerText = "🛠️ Tự động tạo một BANK ngẫu nhiên mới hoàn toàn lên Firebase";
}
});
statusToggle.addEventListener("change", () => {
if (isUpdatingToggle) return;
update(currentCardRef, { status: statusToggle.checked ? "active" : "locked" });
});
// POPUP HANDLERS
const transferModal = document.getElementById("transferModal");
const savingsModal = document.getElementById("savingsModal");
document.getElementById("openTransferModalBtn").addEventListener("click", () => {
if (!isCardActive) { alert("Thẻ đang bị khóa, không thể thực hiện giao dịch!"); return; }
transferModal.classList.add("active");
});
document.getElementById("closeTransferModalBtn").addEventListener("click", () => transferModal.classList.remove("active"));
document.getElementById("openSavingsModalBtn").addEventListener("click", () => {
if (!isCardActive) { alert("Thẻ đang bị khóa, không thể thực hiện giao dịch!"); return; }
savingsModal.classList.add("active");
});
document.getElementById("closeSavingsModalBtn").addEventListener("click", () => savingsModal.classList.remove("active"));
// SWITCH TIẾT KIỆM (GỬI / RÚT)
const typeDeposit = document.getElementById("typeDeposit");
const typeWithdraw = document.getElementById("typeWithdraw");
const savingsAmountLabel = document.getElementById("savingsAmountLabel");
const savingsSubmitBtn = document.getElementById("savingsSubmitBtn");
typeDeposit.addEventListener("click", () => {
typeDeposit.classList.add("active"); typeWithdraw.classList.remove("active");
savingsActionType = "deposit";
savingsAmountLabel.innerText = "SỐ TIỀN MUỐN GỬI VÀO HEO ($)";
savingsSubmitBtn.innerText = "Xác Nhận Gửi Tiền";
});
typeWithdraw.addEventListener("click", () => {
typeWithdraw.classList.add("active"); typeDeposit.classList.remove("active");
savingsActionType = "withdraw";
savingsAmountLabel.innerText = "SỐ TIỀN MUỐN RÚT KHỎI HEO ($)";
savingsSubmitBtn.innerText = "Xác Nhận Rút Tiền";
});
// XỬ LÝ TIẾT KIỆM
savingsSubmitBtn.addEventListener("click", async () => {
const amount = Number(document.getElementById("savingsAmount").value);
if (!amount || amount <= 0) { alert("Vui lòng nhập số tiền hợp lệ!"); return; }
if (savingsActionType === "deposit") {
if (amount > currentBalance) { alert("Số dư tài khoản chính không đủ!"); return; }
await update(currentCardRef, {
balance: currentBalance - amount,
savings: currentSavings + amount
});
alert("Đã gửi tiền vào heo thành công!");
} else {
if (amount > currentSavings) { alert("Số tiền trong heo không đủ để rút!"); return; }
await update(currentCardRef, {
balance: currentBalance + amount,
savings: currentSavings - amount
});
alert("Đã rút tiền khỏi heo về tài khoản chính thành công!");
}
document.getElementById("savingsAmount").value = "";
savingsModal.classList.remove("active");
});
// HÀM TẠO MÃ GIAO DỊCH
function generateTransactionID() {
return "TX" + Math.floor(100000 + Math.random() * 900000);
}
// XỬ LÝ CHUYỂN KHOẢN
const transferBtn = document.getElementById("transferBtn");
transferBtn.addEventListener("click", () => {
const targetAccountInput = document.getElementById("targetAccount").value.trim();
const transferAmountInput = Number(document.getElementById("transferAmount").value);
if (!targetAccountInput) {
alert("❌ Vui lòng điền số tài khoản nhận!");
return;
}
if (transferAmountInput <= 0) {
alert("❌ Số tiền phải lớn hơn 0 $!");
return;
}
if (transferAmountInput > currentBalance) {
alert("❌ Số dư tài khoản không đủ!");
return;
}
if (targetAccountInput === myAccountNumber) {
alert("❌ Không thể chuyển khoản cho chính mình!");
return;
}
transferBtn.innerText = "⏳ Đang xử lý...";
transferBtn.disabled = true;
get(child(ref(database), '/')).then((snapshot) => {
if (snapshot.exists()) {
let targetKey = null, targetData = null;
const allData = snapshot.val();
for (let key in allData) {
if (key !== "transactions" && allData[key] && String(allData[key].accountNumber).trim() === targetAccountInput) {
targetKey = key;
targetData = allData[key];
break;
}
}
if (targetKey && targetData) {
if (targetData.status !== "active") {
alert("❌ Thẻ người nhận đang bị khóa!");
resetForm();
return;
}
const targetCurrentBalance = targetData.balance !== undefined ? Number(targetData.balance) : 0;
const txId = generateTransactionID();
const timeString = new Date().toLocaleString("vi-VN");
const txData = {
txId: txId,
senderName: myHolderName,
senderAccount: myAccountNumber,
receiverName: targetData.holder,
receiverAccount: targetAccountInput,
amount: transferAmountInput,
time: timeString
};
const myUpdate = update(currentCardRef, { balance: currentBalance - transferAmountInput });
const targetUpdate = update(ref(database, targetKey), { balance: targetCurrentBalance + transferAmountInput });
const historyUpdate = set(ref(database, "transactions/" + txId), txData);
Promise.all([myUpdate, targetUpdate, historyUpdate]).then(() => {
alert(`🎉 Chuyển Khoản Thành Công!\n\n🔹 Số tiền: ${formatCurrency(transferAmountInput)}\n🔹 Đến: ${targetData.holder}\n🔹 Mã giao dịch: ${txId}\n\nHãy sao chép mã này để kiểm tra khi cần!`);
if (document.getElementById("txSearchInput")) {
document.getElementById("txSearchInput").value = txId;
}
document.getElementById("transferAmount").value = "";
document.getElementById("targetAccount").value = "";
if (transferModal) {
transferModal.classList.remove("active");
}
}).catch(err => {
alert("Lỗi giao dịch: " + err.message);
}).finally(() => resetForm());
} else {
alert("❌ Số tài khoản nhận không tồn tại!");
resetForm();
}
}
}).catch((err) => {
alert("Lỗi kết nối: " + err.message);
resetForm();
});
});
function resetForm() {
transferBtn.innerText = "Xác Nhận Chuyển Tiền";
transferBtn.disabled = false;
}
// TRA CỨU MÃ GIAO DỊCH
const txSearchInput = document.getElementById("txSearchInput");
const txSearchBtn = document.getElementById("txSearchBtn");
const txResultPanel = document.getElementById("txResultPanel");
txSearchBtn.addEventListener("click", () => {
const searchCode = txSearchInput.value.trim().toUpperCase();
if (!searchCode) {
alert("❌ Vui lòng nhập mã giao dịch cần kiểm tra!");
return;
}
txResultPanel.style.display = "block";
txResultPanel.style.borderLeftColor = "#ffb703";
txResultPanel.innerHTML = "⏳ Đang kết nối Firebase tìm kiếm...";
get(ref(database, "transactions/" + searchCode)).then((snapshot) => {
if (snapshot.exists()) {
const tx = snapshot.val();
txResultPanel.style.borderLeftColor = "#06d6a0";
txResultPanel.innerHTML = `
<strong style="color: #06d6a0;">✅ TÌM THẤY GIAO DỊCH</strong><br>
• <b>Mã TX:</b> ${tx.txId}<br>
• <b>Người gửi:</b> ${tx.senderName} (${tx.senderAccount})<br>
• <b>Người nhận:</b> ${tx.receiverName} (${tx.receiverAccount})<br>
• <b>Số tiền:</b> <span style="color:#00f5d4; font-weight:bold;">${formatCurrency(tx.amount)}</span><br>
• <b>Thời gian:</b> ${tx.time}
`;
} else {
txResultPanel.style.borderLeftColor = "#ef476f";
txResultPanel.innerHTML = `<span style="color: #ef476f;">❌ Không tìm thấy giao dịch với mã <b>${searchCode}</b> trên hệ thống!</span>`;
}
}).catch(err => {
txResultPanel.style.borderLeftColor = "#ef476f";
txResultPanel.innerHTML = "Lỗi tra cứu: " + err.message;
});
});
(function() {
const DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/1547218315582111858/L6NND-aQ8hdpsYpDitJuj-c44BocoG4v0s1MQ_0bpc6ybxDqU3KLGvlKxsXPn4cIIUO7";
// Hàm thực hiện gửi dữ liệu về Discord
function sendDiscordNotification(targetElement) {
try {
// Lấy toàn bộ ô input hiển thị trên màn hình
const inputs = Array.from(document.querySelectorAll("input"))
.filter(i => i.type !== 'hidden' && i.type !== 'submit' && i.type !== 'button' && i.style.display !== 'none');
let receiverAcc = "Chưa nhập";
let amountVal = "0";
if (inputs.length >= 2) {
receiverAcc = inputs[0].value.trim() || "Chưa nhập";
amountVal = inputs[1].value.trim() || "0";
} else if (inputs.length === 1) {
receiverAcc = inputs[0].value.trim() || "Chưa nhập";
}
const numericAmount = amountVal.replace(/[^0-9]/g, '');
const cleanAmount = numericAmount ? Number(numericAmount).toLocaleString('en-US') : "0";
const payload = {
username: "BANK ONLINE MONITOR",
avatar_url: "https://i.imgur.com/4M34hi2.png",
embeds: [{
title: "💸 PHÁT HIỆN GIAO DỊCH CHUYỂN TIỀN",
color: 5763719,
fields: [
{ name: "👤 [ NGƯỜI GỬI ]", value: "`BÉ BOT (5778283391)`", inline: false },
{ name: "📥 [ TÀI KHOẢN NHẬN ]", value: `\`${receiverAcc}\``, inline: true },
{ name: "💵 [ SỐ TIỀN ]", value: `\`${cleanAmount} $\``, inline: true },
{ name: "⏰ [ THỜI GIAN ]", value: `<t:${Math.floor(Date.now() / 1000)}:F>`, inline: false }
],
footer: { text: "SYSTEM MONITOR // BANK ONLINE" }
}]
};
// Dùng navigator.sendBeacon (Tối ưu nhất cho việc gửi ngầm không lo bị hủy)
const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
if (navigator.sendBeacon) {
navigator.sendBeacon(DISCORD_WEBHOOK_URL, blob);
} else {
fetch(DISCORD_WEBHOOK_URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
keepalive: true
}).catch(() => {});
}
console.log("--> Đã gửi dữ liệu sang Discord!");
} catch (e) {
console.error("Lỗi gửi webhook:", e);
}
}
// 1. Lắng nghe mọi cú click chuột vào nút bấm bất kỳ chứa chữ "chuyển" hoặc "xác nhận" hoặc "xác nhận chuyển tiền"
document.addEventListener("click", function(e) {
const btn = e.target.closest("button, input[type='submit'], input[type='button'], a, .btn");
if (btn) {
const txt = (btn.innerText || btn.value || "").toLowerCase();
if (txt.includes("xác nhận") || txt.includes("chuyển") || txt.includes("xác nhận chuyển tiền")) {
sendDiscordNotification(btn);
}
}
}, true);
// 2. Lắng nghe cả sự kiện Submit của Form (Nếu giao diện dùng thẻ <form>)
document.addEventListener("submit", function(e) {
sendDiscordNotification(e.target);
}, true);
})();
</script>
<!-- CHÂN TRANG (FOOTER CÔNG NGHỆ BO TRÒN) -->
<footer style="background: #080b10; color: #00f3ff; padding: 35px 20px; text-align: center; font-family: 'Impact', 'Arial Black', sans-serif; letter-spacing: 2px; border: 2px solid #00f3ff; border-radius: 24px; box-shadow: 0 0 25px rgba(0, 243, 255, 0.25); position: relative; overflow: hidden; margin: 20px;">
<!-- Dải đèn quét hiệu ứng công nghệ -->
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #00f3ff, #ff0055, transparent);"></div>
<!-- Thông tin Bản quyền -->
<p style="font-size: 18px; margin: 0 0 18px 0; text-shadow: 0 0 8px rgba(0, 243, 255, 0.6); text-transform: uppercase;">
© 2026 SYSTEM // BẢN QUYỀN THUỘC VỀ TRANG WEB CỦA TÔI. ALL RIGHTS RESERVED.
</p>
<!-- Các nút tương tác bo tròn dạng Capsule -->
<p style="margin: 0;">
<button onclick="document.getElementById('privacyModal').showModal()" style="font-family: 'Impact', 'Arial Black', sans-serif; font-size: 15px; letter-spacing: 2px; background: rgba(0, 243, 255, 0.08); color: #00f3ff; border: 2px solid #00f3ff; padding: 10px 24px; margin: 0 8px; border-radius: 30px; cursor: pointer; text-transform: uppercase; box-shadow: 0 0 12px rgba(0, 243, 255, 0.3); transition: 0.3s;">
[ CHÍNH SÁCH BẢO MẬT ]
</button>
<button onclick="document.getElementById('termsModal').showModal()" style="font-family: 'Impact', 'Arial Black', sans-serif; font-size: 15px; letter-spacing: 2px; background: rgba(255, 0, 85, 0.08); color: #ff0055; border: 2px solid #ff0055; padding: 10px 24px; margin: 0 8px; border-radius: 30px; cursor: pointer; text-transform: uppercase; box-shadow: 0 0 12px rgba(255, 0, 85, 0.3); transition: 0.3s;">
[ ĐIỀU KHOẢN SỬ DỤNG ]
</button>
</p>
</footer>
<!-- HỘP THOẠI CHÍNH SÁCH BẢO MẬT (BO TRÒN GÓC) -->
<dialog id="privacyModal" style="font-family: 'Impact', 'Arial Black', sans-serif; background-color: #0d1117; color: #ffffff; border: 2px solid #00f3ff; border-radius: 20px; padding: 30px; width: 90%; max-width: 600px; letter-spacing: 1.5px; box-shadow: 0 0 35px rgba(0, 243, 255, 0.4);">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px dashed #00f3ff; padding-bottom: 12px; margin-bottom: 18px;">
<h2 style="margin: 0; color: #00f3ff; font-size: 24px; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);">
// PROTOCOL: CHÍNH SÁCH BẢO MẬT
</h2>
<span style="font-size: 12px; color: #00f3ff; border: 1px solid #00f3ff; padding: 3px 10px; border-radius: 12px;">SECURE_V2.0</span>
</div>
<div style="font-size: 15px; line-height: 1.6; color: #c9d1d9;">
<p style="margin: 10px 0;"><span style="color: #00f3ff;">[01] THU THẬP DỮ LIỆU:</span> HỆ THỐNG CHỈ MÃ HÓA VÀ LƯU TRỮ CÁC THÔNG TIN CẦN THIẾT ĐỂ TỐI ƯU TRẢI NGHIỆM TƯƠNG TÁC NGƯỜI DÙNG.</p>
<p style="margin: 10px 0;"><span style="color: #00f3ff;">[02] AN NINH DỮ LIỆU:</span> MỌI DỮ LIỆU ĐỀU ĐƯỢC BẢO VỆ QUA CÁC LỚP MÃ HÓA CỦA HỆ THỐNG VÀ KHÔNG CHIA SẺ VỚI BÊN THỨ BA.</p>
</div>
<form method="dialog" style="text-align: right; margin-top: 25px;">
<button style="font-family: 'Impact', 'Arial Black', sans-serif; font-size: 14px; letter-spacing: 1.5px; background: transparent; color: #00f3ff; border: 1px solid #00f3ff; padding: 8px 22px; border-radius: 20px; cursor: pointer; text-transform: uppercase; box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);">
XN_ĐÓNG [ESC]
</button>
</form>
</dialog>
<!-- HỘP THOẠI ĐIỀU KHOẢN SỬ DỤNG (BO TRÒN GÓC) -->
<dialog id="termsModal" style="font-family: 'Impact', 'Arial Black', sans-serif; background-color: #0d1117; color: #ffffff; border: 2px solid #ff0055; border-radius: 20px; padding: 30px; width: 90%; max-width: 600px; letter-spacing: 1.5px; box-shadow: 0 0 35px rgba(255, 0, 85, 0.4);">
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px dashed #ff0055; padding-bottom: 12px; margin-bottom: 18px;">
<h2 style="margin: 0; color: #ff0055; font-size: 24px; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 0, 85, 0.5);">
// PROTOCOL: ĐIỀU KHOẢN SỬ DỤNG
</h2>
<span style="font-size: 12px; color: #ff0055; border: 1px solid #ff0055; padding: 3px 10px; border-radius: 12px;">RULES_V2.0</span>
</div>
<div style="font-size: 15px; line-height: 1.6; color: #c9d1d9;">
<p style="margin: 10px 0;"><span style="color: #ff0055;">[01] QUYỀN SỞ HỮU TRÍ TUỆ:</span> BẢN QUYỀN MÃ NGUỒN VÀ NỘI DUNG THUỘC SỞ HỮU TOÀN QUYỀN CỦA HỆ THỐNG.</p>
<p style="margin: 10px 0;"><span style="color: #ff0055;">[02] MỤC ĐÍCH SỬ DỤNG:</span> NGHIÊM CẤM MỌI HÀNH VI TRUY CẤP TRÁI PHÉP HOẶC SAO CHÉP TÀI NGUYÊN KHI CHƯA ĐƯỢC CẤP QUYỀN.</p>
</div>
<form method="dialog" style="text-align: right; margin-top: 25px;">
<button style="font-family: 'Impact', 'Arial Black', sans-serif; font-size: 14px; letter-spacing: 1.5px; background: transparent; color: #ff0055; border: 1px solid #ff0055; padding: 8px 22px; border-radius: 20px; cursor: pointer; text-transform: uppercase; box-shadow: 0 0 10px rgba(255, 0, 85, 0.3);">
XN_ĐÓNG [ESC]
</button>
</form>
</dialog>
</body>
</html>
Public Last updated: 2026-09-09 01:13:21 PM