/* ==========================================================================
   TIỆM NÉT CỎ - CYBER ULTIMATE MOD (v1.0 PRO)
   Giao diện Cyber Gaming Đẳng Cấp Cho Ông Chủ Quán Nét
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&family=Chakra+Petch:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;600;700;800&family=VT323&display=swap');

/* --- 1. THEME DEFINITIONS & CSS VARIABLES --- */

/* ==========================================================================
   KHÓA CHẾ ĐỘ SÁNG - KHÔNG THEO TRÌNH DUYỆT (FORCE LIGHT MODE)
   ========================================================================== */
:root,
html,
body {
  color-scheme: light !important;
}

@media (prefers-color-scheme: dark) {
  :root,
  html,
  body {
    color-scheme: light !important;
  }
}

/* Theme Mặc Định: CHẾ ĐỘ SÁNG TIỆM NÉT (LIGHT MODE) */
/* Theme Mặc Định: BẢN GỐC ONLINE (DEFAULT) */
body[data-cyber-theme="default"] {
  /* Giữ nguyên 100% font Baloo 2 + Be Vietnam Pro và giao diện gốc của tiemnetco.com */
}

body[data-cyber-theme="light"] {
  --mod-primary: #f59e0b;
  --mod-secondary: #10b981;
  --mod-accent: #3b82f6;
  --mod-gold: #d97706;
  --mod-emerald: #059669;
  --mod-bg-glass: rgba(255, 248, 234, 0.96);
  --mod-panel-glass: rgba(255, 252, 246, 0.98);
  --mod-card-glass: #ffffff;
  --mod-border-glass: #e6d5b0;
  --mod-text-main: #2a1c1c;
  --mod-text-sub: #6b5a44;
  --mod-glow: 0 0 10px rgba(245, 158, 11, 0.25);
  --mod-glow-pink: 0 0 10px rgba(16, 185, 129, 0.25);

  /* Override Game Variables - Warm Ivory & Crisp Ink */
  --ink: #2a1c1c;
  --ink-2: #5a4a3a;
  --muted: #7a6a5a;
  --paper: #fff8ea;
  --paper-2: #fdefd2;
  --card: #ffffff;
  --line: #e6d5b0;
  --bar: #fff4dc;
  --bar-2: #f6e5c3;
  --bar-text: #2a1c1c;
  --bar-muted: #7a6a5a;
  --font: "Be Vietnam Pro", system-ui, sans-serif;
  --display: "Orbitron", "Rajdhani", system-ui, sans-serif;
}

/* Theme: Cyberpunk 2077 (Tùy chọn Tối Neon) */
body[data-cyber-theme="cyberpunk"] {
  --mod-primary: #00f2fe;
  --mod-secondary: #ff007f;
  --mod-accent: #7928ca;
  --mod-gold: #ffd700;
  --mod-emerald: #00ff87;
  --mod-bg-glass: rgba(13, 17, 30, 0.88);
  --mod-panel-glass: rgba(16, 22, 40, 0.92);
  --mod-card-glass: rgba(25, 33, 58, 0.78);
  --mod-border-glass: rgba(0, 242, 254, 0.35);
  --mod-text-main: #f0f6fc;
  --mod-text-sub: #8ba2c2;
  --mod-glow: 0 0 15px rgba(0, 242, 254, 0.45);
  --mod-glow-pink: 0 0 15px rgba(255, 0, 127, 0.45);

  /* Override Game Variables */
  --ink: #070b14;
  --ink-2: #8ba2c2;
  --muted: #64748b;
  --paper: var(--mod-panel-glass);
  --paper-2: var(--mod-card-glass);
  --card: var(--mod-card-glass);
  --line: rgba(0, 242, 254, 0.2);
  --bar: rgba(9, 13, 24, 0.94);
  --bar-2: rgba(18, 25, 46, 0.94);
  --bar-text: #00f2fe;
  --bar-muted: #8ba2c2;
  --font: "Chakra Petch", "Be Vietnam Pro", system-ui, sans-serif;
  --display: "Orbitron", "Rajdhani", system-ui, sans-serif;
}

/* Theme: VIP Obsidian & Gold */
body[data-cyber-theme="vip-gold"] {
  --mod-primary: #ffd700;
  --mod-secondary: #ffaa00;
  --mod-accent: #d4af37;
  --mod-gold: #ffe680;
  --mod-emerald: #50e3c2;
  --mod-bg-glass: rgba(18, 16, 12, 0.92);
  --mod-panel-glass: rgba(24, 21, 16, 0.95);
  --mod-card-glass: rgba(36, 31, 23, 0.85);
  --mod-border-glass: rgba(255, 215, 0, 0.4);
  --mod-text-main: #fffdf5;
  --mod-text-sub: #c8b898;
  --mod-glow: 0 0 15px rgba(255, 215, 0, 0.4);
  --mod-glow-pink: 0 0 15px rgba(255, 170, 0, 0.4);

  --ink: #0a0805;
  --bar: rgba(16, 14, 10, 0.95);
  --bar-2: rgba(30, 26, 18, 0.95);
  --bar-text: #ffd700;
  --bar-muted: #c8b898;
  --line: rgba(255, 215, 0, 0.2);
}

/* Theme: Retro 90s Vaporwave Net Cỏ */
body[data-cyber-theme="vaporwave"] {
  --mod-primary: #ff71ce;
  --mod-secondary: #01cdfe;
  --mod-accent: #b967ff;
  --mod-gold: #ffea79;
  --mod-emerald: #05ffa1;
  --mod-bg-glass: rgba(30, 16, 45, 0.9);
  --mod-panel-glass: rgba(38, 20, 58, 0.94);
  --mod-card-glass: rgba(54, 28, 80, 0.82);
  --mod-border-glass: rgba(255, 113, 206, 0.4);
  --mod-text-main: #fff5ff;
  --mod-text-sub: #d0aee8;
  --mod-glow: 0 0 15px rgba(255, 113, 206, 0.45);
  --mod-glow-pink: 0 0 15px rgba(1, 205, 254, 0.45);

  --ink: #140520;
  --bar: rgba(25, 12, 38, 0.95);
  --bar-2: rgba(45, 22, 68, 0.95);
  --bar-text: #ff71ce;
  --bar-muted: #d0aee8;
  --line: rgba(255, 113, 206, 0.25);
}

/* Theme: Matrix Hacker Terminal */
body[data-cyber-theme="matrix"] {
  --mod-primary: #00ff66;
  --mod-secondary: #00cc44;
  --mod-accent: #008822;
  --mod-gold: #88ff88;
  --mod-emerald: #33ff99;
  --mod-bg-glass: rgba(6, 18, 10, 0.92);
  --mod-panel-glass: rgba(10, 26, 15, 0.95);
  --mod-card-glass: rgba(15, 38, 22, 0.85);
  --mod-border-glass: rgba(0, 255, 102, 0.4);
  --mod-text-main: #e6ffe6;
  --mod-text-sub: #77cc88;
  --mod-glow: 0 0 15px rgba(0, 255, 102, 0.45);
  --mod-glow-pink: 0 0 15px rgba(0, 204, 68, 0.45);

  --ink: #020a04;
  --bar: rgba(4, 14, 8, 0.95);
  --bar-2: rgba(10, 28, 16, 0.95);
  --bar-text: #00ff66;
  --bar-muted: #77cc88;
  --line: rgba(0, 255, 102, 0.2);
}

/* Theme: Crystal Minimalist Glass */
body[data-cyber-theme="crystal"] {
  --mod-primary: #38bdf8;
  --mod-secondary: #818cf8;
  --mod-accent: #c084fc;
  --mod-gold: #facc15;
  --mod-emerald: #34d399;
  --mod-bg-glass: rgba(15, 23, 42, 0.85);
  --mod-panel-glass: rgba(15, 23, 42, 0.92);
  --mod-card-glass: rgba(30, 41, 59, 0.8);
  --mod-border-glass: rgba(255, 255, 255, 0.2);
  --mod-text-main: #f8fafc;
  --mod-text-sub: #94a3b8;
  --mod-glow: 0 0 12px rgba(56, 189, 248, 0.35);
  --mod-glow-pink: 0 0 12px rgba(129, 140, 248, 0.35);

  --ink: #0b0f19;
  --bar: rgba(15, 23, 42, 0.9);
  --bar-2: rgba(30, 41, 59, 0.9);
  --bar-text: #38bdf8;
  --bar-muted: #94a3b8;
  --line: rgba(255, 255, 255, 0.12);
}

/* --- 2. GLOBAL & CANVAS REFINEMENTS --- */
body:not([data-cyber-theme="default"]) {
  font-family: var(--font) !important;
  background: var(--paper, #fff8ea) !important;
  color: var(--mod-text-main, #2a1c1c) !important;
  overflow: hidden !important;
}

body[data-cyber-theme="light"] {
  background: #fff8ea !important;
  color: #2a1c1c !important;
}

#game {
  transition: filter 0.3s ease;
}

/* Canvas Visual Filters */
body.filter-vibrant #game {
  filter: contrast(1.1) saturate(1.28) brightness(1.04);
}
body.filter-bloom #game {
  filter: contrast(1.15) brightness(1.08) drop-shadow(0 0 6px rgba(0, 242, 254, 0.35));
}
body.filter-crt #game {
  filter: contrast(1.12) saturate(1.2);
}

/* CRT Scanlines Overlay */
body.filter-crt::after {
  content: " ";
  display: block;
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
  z-index: 100;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.85;
}

/* RGB Rainbow Animation */
@keyframes cyber-rgb-border {
  0% { border-color: #00f2fe; box-shadow: 0 0 14px rgba(0, 242, 254, 0.45); }
  25% { border-color: #ff007f; box-shadow: 0 0 14px rgba(255, 0, 127, 0.45); }
  50% { border-color: #ffd700; box-shadow: 0 0 14px rgba(255, 215, 0, 0.45); }
  75% { border-color: #00ff87; box-shadow: 0 0 14px rgba(0, 255, 135, 0.45); }
  100% { border-color: #00f2fe; box-shadow: 0 0 14px rgba(0, 242, 254, 0.45); }
}

@keyframes cyber-rainbow-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body:not([data-cyber-theme="default"]) {
/* --- 3. HUD (TOP BAR) OVERHAUL --- */
#hud {
  background: var(--bar) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border-bottom: 2px solid var(--mod-border-glass) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
  padding: 0 16px !important;
  transition: all 0.3s ease;
  position: fixed;
  z-index: 50;
}

/* RGB Strip on Bottom of HUD */
body.rgb-active #hud::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f2fe, #ff007f, #ffd700, #00ff87, #00f2fe);
  background-size: 300% 300%;
  animation: cyber-rainbow-flow 4s ease infinite;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.6);
}

/* Time & Day Badge */
#hud-daybox {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--mod-border-glass) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) inset !important;
}

#hud-day {
  font-family: var(--display) !important;
  color: var(--mod-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

#hud-clock {
  font-family: 'VT323', monospace !important;
  font-size: 19px !important;
  color: #00ff87 !important;
  text-shadow: 0 0 8px rgba(0, 255, 135, 0.6) !important;
  padding-left: 6px;
}

/* Money Display */
#hud-money {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(0, 0, 0, 0.5)) !important;
  border: 1.5px solid var(--mod-gold) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  padding: 4px 14px !important;
  backdrop-filter: blur(8px);
}

#hud-money-v {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: #fffbdf !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7) !important;
  letter-spacing: 0.5px;
}

/* Stats Badges */
.hud-stat {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: var(--mod-text-main) !important;
  transition: all 0.2s ease !important;
  backdrop-filter: blur(6px);
}

.hud-stat:hover {
  background: rgba(0, 242, 254, 0.15) !important;
  border-color: var(--mod-primary) !important;
  box-shadow: var(--mod-glow) !important;
  transform: translateY(-1px);
}

.hud-stat .num {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* Status: Ping / Temp / Power */
#hud-status {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 2px 4px !important;
}

#hud-status .st {
  color: var(--mod-text-sub) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
}

#hud-ping-v {
  color: #00ff87 !important;
  text-shadow: 0 0 6px rgba(0, 255, 135, 0.5);
}

#hud-temp-v {
  color: #ffaa00 !important;
}

#hud-power-v {
  color: var(--mod-primary) !important;
}

/* HUD Buttons */
.hud-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid var(--mod-border-glass) !important;
  border-radius: 10px !important;
  color: var(--mod-primary) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
}

.hud-btn:hover {
  background: var(--mod-primary) !important;
  color: #070b14 !important;
  box-shadow: var(--mod-glow) !important;
  transform: scale(1.08) !important;
}

/* --- 4. BOTTOM DOCK (MENU DƯỚI) --- */
#bottom-bar {
  background: var(--bar) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1.5px solid var(--mod-border-glass) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 242, 254, 0.15) !important;
  padding: 8px 12px !important;
  gap: 10px !important;
}

body.rgb-active #bottom-bar {
  animation: cyber-rgb-border 6s linear infinite !important;
}

/* Bottom Bar Buttons */
.bb-btn {
  border-radius: 12px !important;
  transition: all 0.22s cubic-bezier(0.2, 1, 0.3, 1) !important;
  border: 1px solid transparent !important;
}

.bb-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--mod-primary) !important;
  box-shadow: var(--mod-glow) !important;
}

.bb-btn:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* Badges on Dock */
.bb-btn .badge {
  background: linear-gradient(135deg, #ff007f, #ff4757) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.7) !important;
  border: 1px solid #fff !important;
  font-family: var(--display) !important;
}

/* --- 5. SIDE PANEL & POPUPS & MODALS --- */
#panel {
  background: var(--mod-panel-glass) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1.5px solid var(--mod-border-glass) !important;
  border-radius: 20px !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 242, 254, 0.12) !important;
}

body.rgb-active #panel {
  border-color: var(--mod-primary) !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.85), var(--mod-glow) !important;
}

.panel-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
  border-bottom: 1.5px solid var(--mod-border-glass) !important;
  padding: 10px 16px !important;
}

.panel-head h2 {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: var(--mod-primary) !important;
  text-shadow: var(--mod-glow) !important;
}

/* Panel Tabs */
.panel-tabs {
  background: rgba(0, 0, 0, 0.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 12px !important;
}

.panel-tabs button {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--mod-text-sub) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease !important;
}

.panel-tabs button:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.panel-tabs button.active {
  background: rgba(0, 242, 254, 0.15) !important;
  border-color: var(--mod-primary) !important;
  color: var(--mod-primary) !important;
  box-shadow: var(--mod-glow) !important;
}

/* Cards inside Panel & Shop */
.card,
.item,
.modal {
  background: var(--mod-card-glass) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: var(--mod-text-main) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease !important;
}

.card:hover {
  border-color: var(--mod-primary) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 242, 254, 0.2) !important;
  transform: translateY(-2px);
}

/* Popups & Modals */
#popup,
.modal {
  background: var(--mod-panel-glass) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1.5px solid var(--mod-border-glass) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), var(--mod-glow) !important;
  color: var(--mod-text-main) !important;
}

/* --- 6. GENERAL BUTTONS (SCI-FI GAMING BUTTONS) --- */
.btn {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  text-transform: uppercase;
  transition: all 0.2s cubic-bezier(0.2, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}

.btn:hover::after {
  left: 150%;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.15) !important;
}

.btn-green {
  background: linear-gradient(135deg, #00ff87, #00b862) !important;
  color: #051a0d !important;
  border-color: #5effb1 !important;
  box-shadow: 0 4px 20px rgba(0, 255, 135, 0.4) !important;
}

.btn-orange {
  background: linear-gradient(135deg, #ff9900, #ff5500) !important;
  color: #fff !important;
  border-color: #ffbb66 !important;
  box-shadow: 0 4px 20px rgba(255, 120, 0, 0.4) !important;
}

.btn-blue {
  background: linear-gradient(135deg, #00f2fe, #4facfe) !important;
  color: #061928 !important;
  border-color: #8beaff !important;
  box-shadow: 0 4px 20px rgba(0, 242, 254, 0.4) !important;
}

.btn-yellow {
  background: linear-gradient(135deg, #ffd700, #ffaa00) !important;
  color: #1a1202 !important;
  border-color: #ffe877 !important;
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4) !important;
}

/* --- 7. TITLE SCREEN (MÀN HÌNH CHÍNH GAME ĐỈNH CAO) --- */
#title-screen {
  background: radial-gradient(ellipse at center, rgba(16, 26, 50, 0.85) 0%, rgba(5, 7, 14, 0.97) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.title-box {
  background: var(--mod-panel-glass) !important;
  border: 1.5px solid var(--mod-border-glass) !important;
  border-radius: 24px !important;
  padding: 30px 24px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), var(--mod-glow) !important;
  backdrop-filter: blur(25px) saturate(200%) !important;
  position: relative;
  overflow: hidden;
}

body.rgb-active .title-box {
  animation: cyber-rgb-border 6s linear infinite !important;
}

.logo-main {
  font-family: var(--display) !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  background: linear-gradient(135deg, #00f2fe 0%, #ffffff 50%, #ff007f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(0, 242, 254, 0.6)) !important;
  margin-bottom: 6px !important;
}

.logo-sub {
  font-family: var(--display) !important;
  font-size: 15px !important;
  letter-spacing: 5px !important;
  color: var(--mod-gold) !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.title-version {
  font-family: 'VT323', monospace !important;
  font-size: 18px !important;
  color: var(--mod-text-sub) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  display: inline-block !important;
}

/* Online Auth Box */
.online-auth {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--mod-border-glass) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}

.online-pulse {
  background: #00ff87 !important;
  box-shadow: 0 0 10px #00ff87 !important;
}


}

/* --- 8. MOD CONTROL DECK (FLOATING CYBER HUB) --- */
#cyber-mod-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f2fe, #7928ca);
  border: 2px solid #ffffff;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.7), 0 6px 16px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99999;
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.25s;
  user-select: none;
}

#cyber-mod-launcher:hover {
  transform: scale(1.15) rotate(15deg);
  box-shadow: 0 0 30px rgba(0, 242, 254, 1), 0 8px 24px rgba(0,0,0,0.6);
}

#cyber-mod-launcher svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Mod Overlay Menu */
#cyber-mod-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: rgba(11, 15, 28, 0.96);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 2px solid var(--mod-primary);
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), var(--mod-glow);
  z-index: 100000;
  padding: 24px;
  color: #fff;
  font-family: "Chakra Petch", sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1, 0.3, 1);
}

#cyber-mod-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

#cyber-mod-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#cyber-mod-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Header */
.cm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 18px;
}

.cm-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--mod-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: var(--mod-glow);
}

.cm-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
}

.cm-close:hover {
  background: #ff007f;
  border-color: #ff007f;
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.6);
  transform: rotate(90deg);
}

/* Section */
.cm-section {
  margin-bottom: 20px;
}

.cm-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--mod-gold);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Theme Picker Grid */
.cm-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cm-theme-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.cm-theme-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.cm-theme-btn.active {
  border-color: var(--mod-primary);
  background: rgba(0, 242, 254, 0.15);
  box-shadow: var(--mod-glow);
}

.cm-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Toggles & Sliders */
.cm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.cm-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.cm-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cm-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #2b334a;
  transition: .3s;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cm-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .cm-slider {
  background-color: var(--mod-primary);
  box-shadow: var(--mod-glow);
}

input:checked + .cm-slider:before {
  transform: translateX(20px);
  background-color: #0b0f19;
}

/* Speed Controls */
.cm-speed-btns {
  display: flex;
  gap: 6px;
}

.cm-speed-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px 10px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cm-speed-btn:hover {
  background: rgba(0, 242, 254, 0.2);
}

.cm-speed-btn.active {
  background: var(--mod-primary);
  color: #050811;
  border-color: #fff;
  box-shadow: var(--mod-glow);
}

/* Action Buttons (Screenshot, Auto-Collect) */
.cm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.cm-act-btn {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.2), rgba(121, 40, 202, 0.25));
  border: 1.5px solid var(--mod-primary);
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.cm-act-btn:hover {
  background: linear-gradient(135deg, #00f2fe, #7928ca);
  color: #070b14;
  box-shadow: var(--mod-glow);
  transform: translateY(-2px);
}

/* Footer note */
.cm-footer {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--mod-text-sub);
  letter-spacing: 0.5px;
}

/* Triệt tiêu hoàn toàn modal phiên chơi trực tuyến */
.modal.play-session,
.modal.play-session *,
[data-session-message],
[data-session-retry] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ==========================================================================
   CHI TIẾT GIAO DIỆN CHẾ ĐỘ SÁNG (LIGHT MODE SPECIFIC STYLES)
   ========================================================================== */
body[data-cyber-theme="light"] {
  --line: #e6d5b0;
  --paper: #fff8ea;
  --card: #ffffff;
}

/* 1. HUD Chế Độ Sáng */
body[data-cyber-theme="light"] #hud {
  background: rgba(255, 248, 234, 0.96) !important;
  border-bottom: 2px solid #e6d5b0 !important;
  box-shadow: 0 4px 16px rgba(120, 80, 20, 0.08), 0 1px 0 #fff inset !important;
}

body[data-cyber-theme="light"] #hud-daybox {
  background: #fbf0dc !important;
  border: 1.5px solid #d9c298 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) inset !important;
}

body[data-cyber-theme="light"] #hud-day {
  color: #d97706 !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] #hud-dayname {
  color: #7a6a5a !important;
}

body[data-cyber-theme="light"] #hud-clock {
  color: #059669 !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] #hud-stage .hs-name {
  color: #2a1c1c !important;
}

body[data-cyber-theme="light"] #hud-stage .hs-prog {
  background: #fbf0dc !important;
  border: 1.5px solid #d9c298 !important;
  color: #2a1c1c !important;
}

body[data-cyber-theme="light"] #hud-stage .hs-lv {
  color: #d97706 !important;
}

body[data-cyber-theme="light"] #hud-stage .hs-xp {
  background: #e6d5b0 !important;
}

body[data-cyber-theme="light"] #hud-stage .hs-xp i {
  background: linear-gradient(90deg, #f59e0b, #ef4444) !important;
}

body[data-cyber-theme="light"] #hud-stage .hs-num {
  color: #d97706 !important;
}

body[data-cyber-theme="light"] #hud-money {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15) !important;
}

body[data-cyber-theme="light"] #hud-money-v {
  color: #b45309 !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] .hud-stat {
  background: #fbf0dc !important;
  border: 1.5px solid #d9c298 !important;
  color: #2a1c1c !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

body[data-cyber-theme="light"] .hud-stat:hover {
  background: #ffffff !important;
  border-color: #f59e0b !important;
}

body[data-cyber-theme="light"] #hud-rating-v,
body[data-cyber-theme="light"] #hud-fame-v,
body[data-cyber-theme="light"] #hud-beauty-v {
  color: #2a1c1c !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] #hud-status {
  background: #fbf0dc !important;
  border: 1.5px solid #d9c298 !important;
}

body[data-cyber-theme="light"] #hud-ping-v {
  color: #059669 !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] #hud-temp-v {
  color: #d97706 !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] #hud-power-v {
  color: #2563eb !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] .hud-btn {
  background: #fbf0dc !important;
  border: 1.5px solid #d9c298 !important;
  color: #2a1c1c !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body[data-cyber-theme="light"] .hud-btn:hover {
  background: #ffffff !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}

/* 2. Menu Dưới (Bottom Bar) */
body[data-cyber-theme="light"] #bottom-bar {
  background: rgba(255, 248, 234, 0.96) !important;
  border: 2px solid #d9c298 !important;
  box-shadow: 0 8px 30px rgba(100, 60, 20, 0.12) !important;
}

body[data-cyber-theme="light"] #bottom-bar button {
  background: #ffffff !important;
  border: 1.5px solid #e6d5b0 !important;
  color: #2a1c1c !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

body[data-cyber-theme="light"] #bottom-bar button:hover {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
  color: #d97706 !important;
}

body[data-cyber-theme="light"] #bottom-bar button.active {
  background: #f59e0b !important;
  color: #ffffff !important;
  border-color: #d97706 !important;
}

/* 3. Panel Quản Lý Phải */
body[data-cyber-theme="light"] #panel {
  background: rgba(255, 252, 247, 0.98) !important;
  border: 2px solid #d9c298 !important;
  box-shadow: 0 15px 45px rgba(100, 60, 20, 0.15) !important;
  color: #2a1c1c !important;
}

body[data-cyber-theme="light"] .panel-head {
  background: linear-gradient(180deg, #fef5e6, #fbf0dc) !important;
  border-bottom: 2px solid #d9c298 !important;
  color: #2a1c1c !important;
}

body[data-cyber-theme="light"] .panel-tabs {
  background: #fdf7eb !important;
  border-bottom: 1.5px solid #e6d5b0 !important;
}

body[data-cyber-theme="light"] .panel-tabs button {
  color: #7a6a5a !important;
}

body[data-cyber-theme="light"] .panel-tabs button:hover {
  color: #2a1c1c !important;
  background: #fef0d5 !important;
}

body[data-cyber-theme="light"] .panel-tabs button.active {
  background: #ffffff !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2) !important;
}

body[data-cyber-theme="light"] .card,
body[data-cyber-theme="light"] .item,
body[data-cyber-theme="light"] .modal {
  background: #ffffff !important;
  border: 1.5px solid #e6d5b0 !important;
  color: #2a1c1c !important;
  box-shadow: 0 4px 16px rgba(100, 60, 20, 0.08) !important;
}

body[data-cyber-theme="light"] .card:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 6px 20px rgba(100, 60, 20, 0.15) !important;
}

/* 4. Màn Hình Chính (Title Screen) */
body[data-cyber-theme="light"] #title-screen {
  background: radial-gradient(circle at center, rgba(255, 248, 234, 0.95), rgba(246, 230, 200, 0.98)) !important;
}

body[data-cyber-theme="light"] #title-screen .title-box {
  background: #ffffff !important;
  border: 3px solid #d97706 !important;
  box-shadow: 0 15px 50px rgba(150, 90, 20, 0.18) !important;
}

body[data-cyber-theme="light"] #title-screen .logo-sub {
  color: #d97706 !important;
  text-shadow: none !important;
}

body[data-cyber-theme="light"] #title-screen .logo-main {
  color: #b45309 !important;
  text-shadow: 3px 3px 0px #fed7aa !important;
}

body[data-cyber-theme="light"] #title-screen .title-version {
  color: #059669 !important;
}

body[data-cyber-theme="light"] #title-screen .online-auth {
  background: #fffbeb !important;
  border: 1.5px solid #fcd34d !important;
  color: #92400e !important;
}

body[data-cyber-theme="light"] #title-screen .online-status {
  color: #059669 !important;
}

/* 5. Menu Cyber Mod Deck Chế Độ Sáng */
body[data-cyber-theme="light"] #cyber-mod-modal {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2.5px solid #f59e0b !important;
  color: #1e1313 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-header {
  border-bottom: 1.5px solid #f3f4f6 !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-title {
  color: #d97706 !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-close {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border-color: #d1d5db !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-label {
  color: #d97706 !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-row {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-theme-btn {
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  color: #374151 !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-theme-btn:hover {
  background: #f3f4f6 !important;
  border-color: #f59e0b !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-theme-btn.active {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-speed-btn {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-speed-btn.active {
  background: #f59e0b !important;
  color: #fff !important;
  border-color: #d97706 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

body[data-cyber-theme="light"] #cyber-mod-modal .cm-footer {
  color: #6b7280 !important;
}