/* Cyber Punk Theme – scoped to body.theme-cyberpunk */

/* Optional: Headline font if network is available */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');

/* Palette and base vars */
body.theme-cyberpunk {
  --cp-bg: #05060b;
  --cp-surface: rgba(10, 14, 30, 0.55);
  --cp-panel: rgba(15, 22, 45, 0.65);
  --cp-cyan: #08f7fe;
  --cp-pink: #ff00e6;
  --cp-yellow: #f5d300;
  --cp-green: #39ff14;
  --cp-text: #e8f8ff;
  --cp-muted: #9fb2c1;
  --cp-border: rgba(8, 247, 254, 0.3);
  --cp-shadow: 0 0 24px rgba(8, 247, 254, 0.2), 0 0 42px rgba(255, 0, 230, 0.12);
  --cp-radius: 10px;
}

/* Full-scene background with subtle grid + scanlines */
body.theme-cyberpunk {
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255, 0, 230, 0.08), transparent 60%),
    radial-gradient(900px 600px at 90% 100%, rgba(8, 247, 254, 0.10), transparent 60%),
    linear-gradient(135deg, #060612 0%, #0a0d1a 100%);
  color: var(--cp-text);
  font-family: 'Share Tech Mono', system-ui, Segoe UI, Roboto, sans-serif;
  letter-spacing: 0.2px;
}

/* Remove global right scrollbar; internal containers handle scrolling */
body.theme-cyberpunk { overflow: hidden; }

body.theme-cyberpunk::before { /* scanlines */
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 3px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 0;
}

body.theme-cyberpunk::after { /* neon grid */
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8, 247, 254, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 0, 230, 0.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* Layout overhauls */
.theme-cyberpunk .cheat-menu {
  background: transparent !important;
  width: 100vw !important;
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 22px;
  padding: 22px 22px 86px 22px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.theme-cyberpunk .cheat-menu::before {
  background: linear-gradient(180deg, rgba(10, 14, 30, 0.35), rgba(10, 14, 30, 0.6)) !important;
}

/* removed left rail for cleaner layout */

.theme-cyberpunk .cheat-menu > .sidebar,
.theme-cyberpunk .cheat-menu > .content-area,
.theme-cyberpunk .cheat-menu > .status-bar {
  position: relative;
}

.theme-cyberpunk .sidebar {
  background: var(--cp-panel) !important;
  border: 1px solid var(--cp-border) !important;
  box-shadow: var(--cp-shadow) !important;
  border-radius: var(--cp-radius);
  padding: 20px 14px !important;
  height: auto !important;
}

.theme-cyberpunk .logo h1 {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 4px 10px 18px;
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(8, 247, 254, 0.45), 0 0 36px rgba(255, 0, 230, 0.25);
  animation: glowPulse 2.4s ease-in-out infinite;
}

.theme-cyberpunk .menu-list {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.theme-cyberpunk .menu-item {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-muted) !important;
  padding: 12px 14px !important;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: 160ms ease;
}

.theme-cyberpunk .menu-item:hover {
  color: var(--cp-text) !important;
  border-color: rgba(8, 247, 254, 0.28);
  box-shadow: 0 0 0 1px rgba(8, 247, 254, 0.15) inset, 0 0 18px rgba(8, 247, 254, 0.15);
  transform: translateX(2px);
}

.theme-cyberpunk .menu-item.active {
  color: var(--cp-text) !important;
  border-color: rgba(255, 0, 230, 0.35);
  background: linear-gradient(90deg, rgba(8, 247, 254, 0.12), rgba(255, 0, 230, 0.08));
  box-shadow: 0 0 18px rgba(255, 0, 230, 0.18), 0 0 0 1px rgba(255, 0, 230, 0.22) inset;
}

.theme-cyberpunk .content-area {
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 22px !important;
  overflow: auto;
}

.theme-cyberpunk .tab-content {
  background: linear-gradient(180deg, rgba(10, 14, 30, 0.65), rgba(6, 8, 18, 0.6));
  border: 1px solid rgba(8, 247, 254, 0.18);
  border-radius: 12px;
  padding: 22px;
  position: relative;
  box-shadow: 0 0 24px rgba(8, 247, 254, 0.08) inset;
}

.theme-cyberpunk .tab-content::before, .theme-cyberpunk .tab-content::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--cp-cyan);
  filter: drop-shadow(0 0 8px rgba(8, 247, 254, 0.6));
}
.theme-cyberpunk .tab-content::before { left: 10px; top: 10px; border-right: none; border-bottom: none; }
.theme-cyberpunk .tab-content::after { right: 10px; bottom: 10px; border-left: none; border-top: none; }

/* Status bar becomes a neon footer */
.theme-cyberpunk .status-bar {
  position: fixed !important;
  left: 16px !important; right: 16px !important; bottom: 16px !important;
  background: linear-gradient(90deg, rgba(8, 247, 254, 0.12), rgba(255, 0, 230, 0.12));
  border: 1px solid rgba(8, 247, 254, 0.25);
  border-radius: 10px;
  box-shadow: var(--cp-shadow);
  color: var(--cp-text) !important;
}

.theme-cyberpunk .status .status-indicator {
  background: radial-gradient(circle at 30% 30%, var(--cp-green), #0f0);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.8);
}

/* About Me: holographic avatar + glitchy headline */
.theme-cyberpunk .profile-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
}

.theme-cyberpunk .profile-avatar {
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(8, 247, 254, 0.5);
  box-shadow: 0 0 34px rgba(8, 247, 254, 0.35);
  position: relative;
  overflow: hidden;
}
.theme-cyberpunk .profile-avatar img { filter: contrast(1.05) saturate(1.1) hue-rotate(-6deg); }
.theme-cyberpunk .profile-avatar::after { /* scanning */
  content: '';
  position: absolute; left: 0; right: 0; top: -100%; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(8, 247, 254, 0.35), transparent);
  animation: cyberScan 3.8s linear infinite;
}

.theme-cyberpunk .profile-name {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-size: 36px;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 26px rgba(8, 247, 254, 0.4), 0 0 34px rgba(255, 0, 230, 0.2);
  animation: glitchShift 3.5s infinite;
}

.theme-cyberpunk .profile-status { color: var(--cp-muted); opacity: 0.95; }
.theme-cyberpunk .profile-social a { color: var(--cp-cyan); text-shadow: 0 0 10px rgba(8, 247, 254, 0.6); }
.theme-cyberpunk .profile-social a:hover { color: var(--cp-pink); }

/* Music Player: neon hardware look */
.theme-cyberpunk .music-player-container { margin-top: 6px; }
.theme-cyberpunk .music-player-header .music-player-title {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cp-text);
}

.theme-cyberpunk .music-player {
  background: linear-gradient(180deg, rgba(8, 12, 28, 0.6), rgba(8, 12, 28, 0.35));
  border: 1px solid rgba(8, 247, 254, 0.22);
  border-radius: 12px;
  box-shadow: var(--cp-shadow);
}

.theme-cyberpunk .album-art { margin-top: 18px !important; border: 1px solid rgba(8, 247, 254, 0.22) !important; box-shadow: 0 10px 28px rgba(8, 247, 254, 0.18) !important; }
.theme-cyberpunk .album-art img { border-top-left-radius: 10px; border-top-right-radius: 10px; }

.theme-cyberpunk .album-art img {
  border-radius: 10px;
  border: 1px solid rgba(255, 0, 230, 0.25);
  box-shadow: 0 12px 34px rgba(255, 0, 230, 0.18), 0 0 0 1px rgba(255, 0, 230, 0.25) inset;
  filter: saturate(1.15) hue-rotate(-10deg);
}

/* Replace remaining default red accents */
.theme-cyberpunk .music-player-container { border-color: rgba(8, 247, 254, 0.25) !important; box-shadow: var(--cp-shadow); }
.theme-cyberpunk .music-player-title { color: var(--cp-text) !important; }
.theme-cyberpunk .playlist-title { color: var(--cp-cyan) !important; text-shadow: 0 0 10px rgba(8,247,254,0.35); }
.theme-cyberpunk .control-button .material-icons { color: var(--cp-text) !important; }
.theme-cyberpunk .control-button:hover .material-icons { color: var(--cp-cyan) !important; }
.theme-cyberpunk .volume-icon { color: var(--cp-cyan) !important; text-shadow: 0 0 10px rgba(8,247,254,0.45); }
.theme-cyberpunk .profile-countdown { border-color: rgba(8, 247, 254, 0.25) !important; }
.theme-cyberpunk .social-icon span,
.theme-cyberpunk .profile-social .material-icons { color: var(--cp-cyan) !important; }
.theme-cyberpunk .social-icon:hover { background-color: rgba(8, 247, 254, 0.18) !important; box-shadow: 0 0 10px rgba(8, 247, 254, 0.5) !important; }
.theme-cyberpunk .option-label { color: var(--cp-text) !important; text-shadow: none !important; }
.theme-cyberpunk .select-styled { border-color: rgba(8, 247, 254, 0.25) !important; box-shadow: 0 0 6px rgba(8, 247, 254, 0.18) !important; }
.theme-cyberpunk .discord-presence { border-color: rgba(8, 247, 254, 0.25) !important; box-shadow: 0 0 16px rgba(8, 247, 254, 0.15) inset; }
.theme-cyberpunk .discord-avatar { border-color: rgba(8, 247, 254, 0.25) !important; }

.theme-cyberpunk .player-info .song-title { color: var(--cp-text); letter-spacing: 0.6px; }
.theme-cyberpunk .player-info .artist-name { color: var(--cp-muted); }

.theme-cyberpunk .progress-container { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.theme-cyberpunk .progress-container .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-pink));
  box-shadow: 0 0 12px rgba(8, 247, 254, 0.6), 0 0 18px rgba(255, 0, 230, 0.35);
}
.theme-cyberpunk .progress-container { margin: 10px 0 8px; }
.theme-cyberpunk .progress-bar::after {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  background: radial-gradient(circle at 40% 40%, #fff 0 30%, var(--cp-cyan) 31% 60%, var(--cp-pink) 61% 100%);
  box-shadow: 0 0 10px rgba(8, 247, 254, 0.6), 0 0 14px rgba(255, 0, 230, 0.5);
}
.theme-cyberpunk .time-info { color: var(--cp-muted); font-size: 12px; margin-bottom: 10px; }

.theme-cyberpunk .control-button { color: var(--cp-text); }
.theme-cyberpunk .control-button:hover { color: var(--cp-cyan); text-shadow: 0 0 12px rgba(8, 247, 254, 0.7); }

.theme-cyberpunk .volume-slider { background: rgba(255, 255, 255, 0.08); }
.theme-cyberpunk .volume-level { background: linear-gradient(90deg, var(--cp-yellow), var(--cp-pink)); box-shadow: 0 0 12px rgba(245, 211, 0, 0.45); }

.theme-cyberpunk .equalizer { filter: drop-shadow(0 0 12px rgba(8, 247, 254, 0.45)); }
.theme-cyberpunk .equalizer-bar {
  background: linear-gradient(180deg, var(--cp-cyan), var(--cp-pink));
  box-shadow: 0 0 10px rgba(8, 247, 254, 0.55), 0 0 14px rgba(255, 0, 230, 0.35);
  animation-duration: 1.15s !important;
}

/* Playlist */
.theme-cyberpunk .playlist-container { background: transparent; }
.theme-cyberpunk .playlist-item { border: 1px solid rgba(8, 247, 254, 0.12); border-radius: 8px; }
.theme-cyberpunk .playlist-item.active {
  background: linear-gradient(90deg, rgba(8, 247, 254, 0.10), rgba(255, 0, 230, 0.08));
  border-color: rgba(255, 0, 230, 0.28);
}
.theme-cyberpunk .playlist-item:hover { border-color: rgba(8, 247, 254, 0.22); }

/* Config */
.theme-cyberpunk .config-container {
  background: linear-gradient(180deg, rgba(10, 14, 30, 0.65), rgba(6, 8, 18, 0.5));
  border: 1px solid rgba(8, 247, 254, 0.2);
  border-radius: 12px;
  padding: 18px;
}
.theme-cyberpunk .config-header .config-title {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  letter-spacing: 1px; color: var(--cp-text);
}
.theme-cyberpunk .custom-select select.select-styled {
  background: rgba(8, 12, 28, 0.65);
  border: 1px solid rgba(8, 247, 254, 0.25);
  color: var(--cp-text);
}
.theme-cyberpunk .custom-select .select-arrow .material-icons { color: var(--cp-cyan); }
.theme-cyberpunk .save-message { color: var(--cp-green) !important; text-shadow: 0 0 8px rgba(57, 255, 20, 0.7); }

/* Loading overlay: cyberpunk text + custom loader */
.theme-cyberpunk .pentagram { display: none !important; }
.theme-cyberpunk .heart-path { display: none !important; }

/* Titles */
body.theme-cyberpunk .text-container .text {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px rgba(8, 247, 254, 0.45), 0 0 34px rgba(255, 0, 230, 0.25);
  opacity: 1; /* override base fade */
  animation: glitchShift 2.8s infinite;
}
body.theme-cyberpunk #click-message {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 10px rgba(8, 247, 254, 0.8), 0 0 18px rgba(255, 0, 230, 0.35) !important;
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
  animation: neonFlicker 2.6s infinite;
}

@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  19%, 24%, 55% { opacity: 0.55; }
}

/* Loader: cyberpunk loading bar */
@property --cp-num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.theme-cyberpunk .cyber-loader { display: grid; place-items: center; width: min(680px, 88vw); margin: 10px auto 0; }
.theme-cyberpunk .cyber-loader .flex { display: flex; }
.theme-cyberpunk .cp-loader { width: 100%; display: flex; flex-direction: column; gap: 8px; animation: glowPulse 2.4s ease-in-out infinite; }
.theme-cyberpunk .cp-title { align-items: center; gap: 10px; }
.theme-cyberpunk .cp-title .loading-text { font-family: 'Orbitron', 'Share Tech Mono', monospace; letter-spacing: 0.3rem; color: var(--cp-text); }
.theme-cyberpunk .cp-title .therefore { font-size: 20px; color: var(--cp-pink); animation: spinCw 1.2s linear infinite; filter: drop-shadow(0 0 8px rgba(255,0,230,0.6)); }
.theme-cyberpunk .cp-title .loading-number { margin-left: auto; font-family: 'Orbitron', 'Share Tech Mono', monospace; counter-reset: num var(--cp-num); }
.theme-cyberpunk .cp-title .loading-number::before { content: counter(num); }
.theme-cyberpunk .cp-title .loading-number { --cp-num: 0; animation: cp-counting 3s ease-in-out forwards; }

.theme-cyberpunk .cp-bar-border { padding: 3px; border-radius: 6px; border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.35); background: linear-gradient(180deg, rgba(8,12,28,0.4), rgba(8,12,28,0.2)); }
.theme-cyberpunk .cp-bar { height: 0.6rem; margin: 1px 0; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--cp-cyan), var(--cp-pink)); box-shadow: 0 0 14px rgba(8,247,254,0.55), 0 0 20px rgba(255,0,230,0.35); animation: cp-charging 3s ease-in-out forwards; }

.theme-cyberpunk .cp-warning { display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', 'Share Tech Mono', monospace; color: var(--cp-muted); }
.theme-cyberpunk .cp-warning .exclamation { width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center; background: var(--cp-text); color: #000; border-radius: 3px; font-weight: 700; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.theme-cyberpunk .cp-line-cascades::after { content: ""; white-space: pre; font-size: 12px; color: #b5c7d6; animation: cp-initText 3s ease forwards; }

@keyframes cp-counting { 0% { --cp-num: 0 } 60% { --cp-num: 66 } 100% { --cp-num: 100 } }
@keyframes cp-charging { 0% { width: 0% } 60% { width: 66% } 100% { width: 100% } }
@keyframes spinCw { to { transform: rotate(360deg); } }

@keyframes cp-initText {
  0% { content:"Initializing system . . ." }
  20% { content:"Initializing system . . . \00000a Loading core modules . . ." }
  35% { content:"Loading core modules . . . \00000a Verifying user permissions . . ." }
  55% { content:"Verifying user permissions . . . \00000a Running diagnostics . . ." }
  75% { content:"Running diagnostics . . . \00000a Establishing secure connection . . ." }
  100% { content:"Establishing secure connection . . . \00000a Loading user interface . . ." }
}

/* Scrollbars */
body.theme-cyberpunk *::-webkit-scrollbar { height: 10px; width: 10px; }
/* Hide scrollbars but allow scrolling */
body.theme-cyberpunk { -ms-overflow-style: none; scrollbar-width: none; }
body.theme-cyberpunk::-webkit-scrollbar { width: 0; height: 0; }
.theme-cyberpunk .content-area { -ms-overflow-style: none; scrollbar-width: none; }
.theme-cyberpunk .content-area::-webkit-scrollbar { width: 0; height: 0; }
.theme-cyberpunk .sidebar { -ms-overflow-style: none; scrollbar-width: none; }
.theme-cyberpunk .sidebar::-webkit-scrollbar { width: 0; height: 0; }
.theme-cyberpunk .playlist-items { -ms-overflow-style: none; scrollbar-width: none; }
.theme-cyberpunk .playlist-items::-webkit-scrollbar { width: 0; height: 0; }

/* Animations */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(8, 247, 254, 0.35)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 0, 230, 0.4)); }
}

@keyframes cyberScan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

@keyframes glitchShift {
  0% { text-shadow: 2px 0 rgba(8, 247, 254, 0.5), -2px 0 rgba(255, 0, 230, 0.5); }
  20% { text-shadow: -2px 0 rgba(8, 247, 254, 0.5), 2px 0 rgba(255, 0, 230, 0.5); }
  40% { text-shadow: 2px 0 rgba(8, 247, 254, 0.4), -2px 0 rgba(255, 0, 230, 0.4); }
  60% { text-shadow: -2px 0 rgba(8, 247, 254, 0.6), 2px 0 rgba(255, 0, 230, 0.6); }
  80% { text-shadow: 3px 0 rgba(8, 247, 254, 0.45), -3px 0 rgba(255, 0, 230, 0.45); }
  100% { text-shadow: 2px 0 rgba(8, 247, 254, 0.5), -2px 0 rgba(255, 0, 230, 0.5); }
}