/* ═══════════════════════════════════════════════════════════════
   AstroFocus Elite — style.css
   Hệ thống 3 theme: cosmos / valley / sunset
   Sử dụng CSS Custom Properties để chuyển theme mượt mà
   Comment tiếng Việt đầy đủ cho phần phản biện STEAM
═══════════════════════════════════════════════════════════════ */

/* ── Reset cơ bản ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════
   HỆ THỐNG THEME — CSS Custom Properties
   Mỗi theme ghi đè các biến này, toàn bộ UI tự động cập nhật
══════════════════════════════════════════════════════════════ */

/* THEME 1: Vũ Trụ Huyền Ảo (mặc định) — không gian tím-xanh */
/* THEME 1: Vũ Trụ Huyền Ảo (mặc định) — không gian tím-xanh */
[data-theme="cosmos"] {
  --bg-primary: #070b14;
  --bg-card: #0d1628;
  --bg-panel: rgba(13, 22, 40, 0.45);
  --border-color: rgba(15, 244, 198, 0.2);
  --border-subtle: rgba(15, 244, 198, 0.08);
  --accent1: #0ff4c6;
  --accent2: #a855f7;
  --accent-text: #58b3ebe1;
  --accent-bg: rgba(8, 178, 144, 0.377);
  --gold-color: #f59e0b;
  --gold-bg: rgba(245, 158, 11, 0.12);
  --text-primary: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.4);
  --panel-title: #0ff4c6;
  --pulse-dot: #0ff4c6;
  --idle-emoji: "🌑";
  --grow-emoji: "🌍";
  --bloom-emoji: "✨";
  --break-emoji: "🌙";
  --header-bg: rgba(7, 11, 20, 0.45);
  --input-bg: rgba(7, 11, 20, 0.3);
  --btn-start-bg: rgba(15, 244, 198, 0.15);
  --btn-start-bd: #0ff4c6;
  --btn-start-txt: #0ff4c6;
  --btn-start-hov: #0ff4c6;
  --analytics-bg: rgba(15, 244, 198, 0.05);
  --progress-bar: linear-gradient(90deg, #0ff4c6, #a855f7);
  --progress-track: rgba(255, 255, 255, 0.05);
  --spotify-bg: rgba(29, 185, 84, 0.06);
  --spotify-border: rgba(29, 185, 84, 0.25);
  --logo-border: rgba(15, 244, 198, 0.4);
  --logo-bg: rgba(15, 244, 198, 0.1);

  /* Các biến hỗ trợ Kính mờ (Glassmorphism) */
  --glass-bg: rgba(7, 11, 20, 0.45);
  --glass-border: rgba(15, 244, 198, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --bg-image: url("https://i.pinimg.com/originals/fc/2d/1b/fc2d1b38064ba4032b8a5421e59e0758.gif");
}

/* THEME 2: Thung Lũng Bình Yên — Tone hồng, núi, rừng thông */
[data-theme="valley"] {
  --bg-primary: #160a14;
  --bg-card: #200e1c;
  --bg-panel: rgba(32, 14, 28, 0.45);
  --border-color: rgba(251, 113, 133, 0.25);
  --border-subtle: rgba(251, 113, 133, 0.08);
  --accent1: #fb7185;
  --accent2: #f97316;
  --accent-text: #fb7185;
  --accent-bg: rgba(251, 113, 133, 0.12);
  --gold-color: #fbbf24;
  --gold-bg: rgba(251, 191, 36, 0.12);
  --text-primary: #fff1f2;
  --text-muted: rgba(255, 241, 242, 0.45);
  --panel-title: #fb7185;
  --pulse-dot: #fb7185;
  --header-bg: rgba(22, 10, 20, 0.45);
  --input-bg: rgba(22, 10, 20, 0.3);
  --btn-start-bg: rgba(251, 113, 134, 0.33);
  --btn-start-bd: #fb7185;
  --btn-start-txt: #fb7185;
  --btn-start-hov: #fb7185;
  --analytics-bg: rgba(251, 113, 133, 0.06);
  --progress-bar: linear-gradient(90deg, #fb7185, #f97316);
  --progress-track: rgba(255, 255, 255, 0.05);
  --spotify-bg: rgba(29, 185, 84, 0.06);
  --spotify-border: rgba(29, 185, 84, 0.25);
  --logo-border: rgba(251, 113, 133, 0.4);
  --logo-bg: rgba(251, 113, 133, 0.1);

  /* Các biến hỗ trợ Kính mờ (Glassmorphism) */
  --glass-bg: rgba(22, 10, 20, 0.45);
  --glass-border: rgba(251, 113, 133, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.55);
  --bg-image: url("https://i.pinimg.com/originals/2f/10/ce/2f10ce69b96c0611989308b0abc68e70.gif");
}

/* THEME 3: Biển Xanh Nhiệt Đới — Tone xanh dương, cát, chòi lá */
[data-theme="sunset"] {
  --bg-primary: #0a1a24;
  --bg-card: #0e2230;
  --bg-panel: rgba(10, 26, 36, 0.45);
  --border-color: rgba(6, 182, 212, 0.25);
  --border-subtle: rgba(6, 182, 212, 0.08);
  --accent1: #06b6d4;
  --accent2: #10b981;
  --accent-text: #06b6d4;
  --accent-bg: rgba(6, 182, 212, 0.12);
  --gold-color: #fbbf24;
  --gold-bg: rgba(251, 191, 36, 0.12);
  --text-primary: #e0f2fe;
  --text-muted: rgba(224, 242, 254, 0.45);
  --panel-title: #06b6d4;
  --pulse-dot: #06b6d4;
  --header-bg: rgba(10, 26, 36, 0.45);
  --input-bg: rgba(10, 26, 36, 0.3);
  --btn-start-bg: rgba(6, 181, 212, 0.426);
  --btn-start-bd: #41d3ed;
  --btn-start-txt: #075881;
  --btn-start-hov: #06b6d4;
  --analytics-bg: rgba(6, 182, 212, 0.06);
  --progress-bar: linear-gradient(90deg, #06b6d4, #10b981);
  --progress-track: rgba(255, 255, 255, 0.05);
  --spotify-bg: rgba(29, 185, 84, 0.06);
  --spotify-border: rgba(29, 185, 84, 0.25);
  --logo-border: rgba(6, 182, 212, 0.4);
  --logo-bg: rgba(6, 182, 212, 0.1);

  /* Các biến hỗ trợ Kính mờ (Glassmorphism) */
  --glass-bg: rgba(10, 26, 36, 0.45);
  --glass-border: rgba(6, 182, 212, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --bg-image: url("https://i.pinimg.com/originals/73/ff/6a/73ff6aea8696ad3b919e4a6d7f8f92d5.gif");
}

/* THEME PREMIUM 1: Đêm Mưa Cyberpunk */
[data-theme="cyberpunk"] {
  --bg-primary: #0f051d;
  --bg-card: #1a0b32;
  --bg-panel: rgba(26, 11, 50, 0.45);
  --border-color: rgba(244, 63, 94, 0.25);
  --border-subtle: rgba(244, 63, 94, 0.08);
  --accent1: #f43f5e;
  --accent2: #06b6d4;
  --accent-text: #f43f5e;
  --accent-bg: rgba(244, 63, 94, 0.12);
  --gold-color: #fbbf24;
  --gold-bg: rgba(251, 191, 36, 0.12);
  --text-primary: #ffe4e6;
  --text-muted: rgba(255, 228, 230, 0.45);
  --panel-title: #f43f5e;
  --pulse-dot: #f43f5e;
  --header-bg: rgba(15, 5, 29, 0.45);
  --input-bg: rgba(15, 5, 29, 0.3);
  --btn-start-bg: rgba(244, 63, 93, 0.311);
  --btn-start-bd: #f43f5e;
  --btn-start-txt: #f43f5e;
  --btn-start-hov: #f43f5e;
  --analytics-bg: rgba(244, 63, 94, 0.06);
  --progress-bar: linear-gradient(90deg, #f43f5e, #06b6d4);
  --progress-track: rgba(255, 255, 255, 0.05);
  --spotify-bg: rgba(29, 185, 84, 0.06);
  --spotify-border: rgba(29, 185, 84, 0.25);
  --logo-border: rgba(244, 63, 94, 0.4);
  --logo-bg: rgba(244, 63, 94, 0.1);

  /* Các biến hỗ trợ Kính mờ (Glassmorphism) */
  --glass-bg: rgba(26, 11, 50, 0.45);
  --glass-border: rgba(244, 63, 94, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.55);
  --bg-image: url("https://i.pinimg.com/originals/1b/3c/58/1b3c5821c4ef798f196b30cc3eb46ac2.gif");
}

/* THEME PREMIUM 2: Quán Cà Phê / Tiệm Sách Cổ Kính */
[data-theme="library"] {
  --bg-primary: #1c1408;
  --bg-card: #2c2215;
  --bg-panel: rgba(44, 34, 21, 0.92);

  --border-color: rgba(251, 191, 36, 0.35);
  --border-subtle: rgba(251, 191, 36, 0.12);

  --accent1: #fbbf24;
  --accent2: #f59e0b;
  --accent-text: #fcd34d;
  --accent-bg: rgba(251, 191, 36, 0.18);

  --gold-color: #fbbf24;
  --gold-bg: rgba(251, 191, 36, 0.15);

  --text-primary: #f5e8c7;
  --text-muted: rgba(245, 232, 199, 0.65);

  --panel-title: #fbbf24;
  --pulse-dot: #fbbf24;

  --header-bg: rgba(28, 20, 8, 0.85);
  --input-bg: rgba(44, 34, 21, 0.6);

  --btn-start-bg: rgba(251, 191, 36, 0.15);
  --btn-start-bd: #fbbf24;
  --btn-start-txt: #fbbf24;
  --btn-start-hov: #fcd34d;

  /* Glassmorphism */
  --glass-bg: rgba(44, 34, 21, 0.85);
  --glass-border: rgba(251, 191, 36, 0.25);
  --glass-shadow: rgba(0, 0, 0, 0.6);

  /* Hình nền */
  --bg-image: url("https://i.pinimg.com/originals/4f/f0/88/4ff088795aff41e835671f1479fa0366.gif");
}

/* THEME PREMIUM 3: Tuyết rơi mùa đông*/
[data-theme="ocean"] {
  --bg-primary: #031020;
  --bg-card: #061a30;
  --bg-panel: rgba(6, 26, 48, 0.45);
  --border-color: rgba(56, 189, 248, 0.25);
  --border-subtle: rgba(56, 189, 248, 0.08);
  --accent1: #38bdf8;
  --accent2: #0d9488;
  --accent-text: #38bdf8;
  --accent-bg: rgba(56, 189, 248, 0.12);
  --gold-color: #fbbf24;
  --gold-bg: rgba(251, 191, 36, 0.12);
  --text-primary: #fffefe;
  --text-muted: rgba(224, 242, 254, 0.477);
  --panel-title: #38bdf8;
  --pulse-dot: #38bdf8;
  --header-bg: rgba(3, 16, 32, 0.45);
  --input-bg: rgba(3, 16, 32, 0.3);
  --btn-start-bg: rgba(60, 189, 244, 0.347);
  --btn-start-bd: #0e84b7;
  --btn-start-txt: #033b53e9;
  --btn-start-hov: #38bdf8;
  --analytics-bg: rgba(56, 189, 248, 0.06);
  --progress-bar: linear-gradient(90deg, #38bdf8, #0d9488);
  --progress-track: rgba(255, 255, 255, 0.05);
  --spotify-bg: rgba(29, 185, 84, 0.06);
  --spotify-border: rgba(29, 185, 84, 0.25);
  --logo-border: rgba(56, 189, 248, 0.4);
  --logo-bg: rgba(56, 189, 248, 0.1);

  /* Các biến hỗ trợ Kính mờ (Glassmorphism) */
  --glass-bg: rgba(6, 26, 48, 0.45);
  --glass-border: rgba(56, 189, 248, 0.18);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --bg-image: url("https://i.pinimg.com/originals/71/5a/3d/715a3d6dcdd4225528d79f104e2e0785.gif");
}

/* ── Áp dụng hình nền và phủ mờ cho body ── */
body {
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  transition:
    background-image 0.5s ease-in-out,
    background-color 0.5s,
    color 0.3s;
  position: relative;
  z-index: 0;
}
/* Lớp phủ nhẹ để giữ độ sáng gần với ảnh gốc */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.25) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT COMPONENTS (Glassmorphism & Shadows)
   ══════════════════════════════════════════════════════════════ */
.app-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    background 0.5s,
    border-color 0.5s;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT COMPONENTS
══════════════════════════════════════════════════════════════ */
.app-panel,
/* Override cho clock-panel: Xóa khung mờ (glass effect) */
.clock-panel {
  background: rgba(143, 143, 143, 0.41) !important; /* Nền tối hơn, ít mờ */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: none !important; /* Xóa blur */
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY — màu theo theme
══════════════════════════════════════════════════════════════ */
.accent-text {
  color: var(--accent1);
  transition: color 0.5s;
}
.gold-text {
  color: var(--gold-color);
  transition: color 0.5s;
}
.panel-title {
  color: var(--panel-title);
  transition: color 0.5s;
}
.pulse-dot {
  background-color: var(--pulse-dot);
  transition: background 0.5s;
}
.gold-dot {
  background-color: var(--gold-color);
  transition: background 0.5s;
}

/* ══════════════════════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════════════════════ */
.logo-orb {
  background: var(--logo-bg);
  border-color: var(--logo-border);
  color: var(--accent1);
  transition: all 0.5s;
}

/* ══════════════════════════════════════════════════════════════
   GOLD PILL (xu counter)
══════════════════════════════════════════════════════════════ */
.gold-pill {
  background: var(--gold-bg);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--gold-color);
  transition: all 0.5s;
}

/* ══════════════════════════════════════════════════════════════
   THEME PANEL
══════════════════════════════════════════════════════════════ */
.theme-btn {
  background: var(--accent-bg);
  border-color: var(--border-color);
  color: white;
  font-size: 11px;
}

.theme-btn:hover {
  filter: brightness(1.2);
}

#theme-panel {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.theme-option:hover {
  background: var(--accent-bg);
  border-color: var(--border-color);
}

.check-mark {
  color: var(--accent1);
  font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════
   PRESET TABS (Focus duration)
══════════════════════════════════════════════════════════════ */
.preset-tab {
  color: var(--text-muted);
}

.active-preset {
  background: var(--accent-bg);
  color: var(--accent-text);
  border: 1px solid var(--border-color);
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   TIMER DISPLAY — Neon glow theo theme
══════════════════════════════════════════════════════════════ */
.timer-glow {
  color: var(--text-primary);
  text-shadow:
    0 0 10px rgba(var(--accent-rgb, 15, 244, 198), 0.8),
    0 0 30px rgba(var(--accent-rgb, 15, 244, 198), 0.4),
    0 0 60px rgba(var(--accent-rgb, 15, 244, 198), 0.15);
  letter-spacing: 0.05em;
  transition:
    color 0.5s,
    text-shadow 0.5s;
}

/* Cosmos glow */
[data-theme="cosmos"] .timer-glow {
  text-shadow:
    0 0 10px rgba(15, 244, 198, 0.8),
    0 0 30px rgba(168, 85, 247, 0.5),
    0 0 70px rgba(15, 244, 198, 0.2);
}
/* Valley glow */
[data-theme="valley"] .timer-glow {
  text-shadow:
    0 0 10px rgba(251, 113, 133, 0.8),
    0 0 30px rgba(251, 191, 36, 0.5),
    0 0 70px rgba(251, 113, 133, 0.2);
}
/* Sunset glow */
[data-theme="sunset"] .timer-glow {
  text-shadow:
    0 0 10px rgba(6, 182, 212, 0.8),
    0 0 30px rgba(16, 185, 129, 0.5),
    0 0 70px rgba(6, 182, 212, 0.2);
}
/* Cyberpunk glow */
[data-theme="cyberpunk"] .timer-glow {
  text-shadow:
    0 0 10px rgba(244, 63, 94, 0.8),
    0 0 30px rgba(6, 182, 212, 0.5),
    0 0 70px rgba(244, 63, 94, 0.2);
}
/* Library glow */
[data-theme="library"] .timer-glow {
  text-shadow:
    0 0 10px rgba(251, 191, 36, 0.8),
    0 0 30px rgba(217, 119, 6, 0.5),
    0 0 70px rgba(251, 191, 36, 0.2);
}
/* Ocean glow */
[data-theme="ocean"] .timer-glow {
  text-shadow:
    0 0 10px rgba(56, 189, 248, 0.8),
    0 0 30px rgba(13, 148, 136, 0.5),
    0 0 70px rgba(56, 189, 248, 0.2);
}

/* Chế độ break — glow tím */
.timer-glow.break-mode {
  text-shadow:
    0 0 10px rgba(168, 85, 247, 0.8),
    0 0 30px rgba(168, 85, 247, 0.4),
    0 0 60px rgba(168, 85, 247, 0.2);
}

/* Urgent — nhấp nháy đỏ */
.timer-glow.urgent {
  animation: urgentPulse 0.8s ease-in-out infinite;
  color: #f43f5e;
  text-shadow:
    0 0 10px rgba(244, 63, 94, 0.9),
    0 0 30px rgba(244, 63, 94, 0.5);
}

@keyframes urgentPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* SVG ring track */
.arc-track {
  stroke: var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════
   PLANET / MASCOT STATES
══════════════════════════════════════════════════════════════ */
.planet-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.3s;
}

.planet-state.hidden {
  display: none !important;
}

.idle-orb {
  filter: brightness(0.5) saturate(0.3);
  transition: all 0.5s;
}

.growing-orb {
  filter: brightness(1.2) saturate(1.5);
  animation:
    planetPulse 2s ease-in-out infinite,
    floatAnim 3s ease-in-out infinite;
}

.bloomed-orb {
  filter: brightness(1.5) saturate(2);
  animation: bloomBounce 0.5s ease-in-out 4;
}

.broken-orb {
  filter: brightness(0.7) saturate(0.2) hue-rotate(30deg);
  animation: brokenShake 0.3s ease-in-out 4;
}

.break-orb {
  filter: brightness(0.95) saturate(1.2);
  animation: floatAnim 3.5s ease-in-out infinite;
}

.planet-orb-custom {
  filter: brightness(1.1) saturate(1.4);
  animation:
    planetPulse 2s ease-in-out infinite,
    floatAnim 3s ease-in-out infinite;
}

@keyframes planetPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

@keyframes floatAnim {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bloomBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.22);
  }
}

@keyframes brokenShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-7px) rotate(-4deg);
  }
  75% {
    transform: translateX(7px) rotate(4deg);
  }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn-accent {
  background: var(--accent-bg);
  border: 1px solid var(--border-color);
  color: var(--accent-text);
}
.btn-accent:hover {
  filter: brightness(1.2);
}

.btn-start-main {
  background: var(--btn-start-bg);
  border-color: var(--btn-start-bd);
  color: var(--btn-start-txt);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: all 0.22s ease-in-out;
}
.btn-start-main:hover {
  background: var(--btn-start-bd);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

/* Hiệu ứng viền phát sáng Neon đồng bộ từng theme cho nút START */
[data-theme="cosmos"] .btn-start-main {
  box-shadow: 0 0 15px rgba(15, 244, 198, 0.25);
}
[data-theme="cosmos"] .btn-start-main:hover {
  box-shadow: 0 0 25px rgba(15, 244, 198, 0.7);
}

[data-theme="valley"] .btn-start-main {
  box-shadow: 0 0 15px rgba(251, 113, 133, 0.25);
}
[data-theme="valley"] .btn-start-main:hover {
  box-shadow: 0 0 25px rgba(251, 113, 133, 0.7);
}

[data-theme="sunset"] .btn-start-main {
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.25);
}
[data-theme="sunset"] .btn-start-main:hover {
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.7);
}

[data-theme="cyberpunk"] .btn-start-main {
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.25);
}
[data-theme="cyberpunk"] .btn-start-main:hover {
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.7);
}

[data-theme="library"] .btn-start-main {
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.25);
}
[data-theme="library"] .btn-start-main:hover {
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.7);
}

[data-theme="ocean"] .btn-start-main {
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
}
[data-theme="ocean"] .btn-start-main:hover {
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.7);
}

/* Vòng tròn tiến trình phát sáng Neon */
#progress-arc {
  filter: drop-shadow(0 0 8px var(--accent1));
  transition:
    stroke-dashoffset 1s linear,
    filter 0.5s;
}

/* ══════════════════════════════════════════════════════════════
   TODO LIST
══════════════════════════════════════════════════════════════ */
.todo-input,
.spotify-select,
.spotify-input {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
  transition: all 0.25s ease-in-out;
}
.todo-input::placeholder,
.spotify-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}
.todo-input:focus,
.spotify-select:focus,
.spotify-input:focus {
  border-color: var(--accent1) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35) !important;
  outline: none;
}

.filter-btn {
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
.active-filter {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-color: var(--border-color);
  opacity: 1 !important;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  transition: all 0.2s ease;
  animation: slideIn 0.2s ease;
}

.todo-item:hover {
  border-color: var(--border-color);
}

.todo-item.completed {
  opacity: 0.5;
}
.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Custom checkbox */
.todo-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
}
.todo-checkbox:checked {
  background: var(--accent1);
  border-color: var(--accent1);
}
.todo-checkbox:checked::after {
  content: "✓";
  position: absolute;
  top: -1px;
  left: 2px;
  color: var(--bg-primary);
  font-size: 12px;
  font-weight: bold;
}
.todo-checkbox:hover {
  border-color: var(--accent1);
}

.todo-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

.todo-delete {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.todo-delete:hover {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
}

/* Priority badge */
.priority-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "Orbitron", monospace;
  font-weight: 700;
  flex-shrink: 0;
}
.priority-high {
  background: rgba(244, 63, 94, 0.2);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.4);
}
.priority-medium {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.priority-low {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════════════════════════
   ANALYTICS WIDGET
══════════════════════════════════════════════════════════════ */
.analytics-card {
  background: var(--analytics-bg);
  border-color: var(--border-color);
  transition: all 0.5s;
}

.progress-track {
  background: var(--progress-track);
}

.progress-bar {
  background: var(--progress-bar);
}

/* ══════════════════════════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  transition: all 0.2s;
}
.stat-card:hover {
  border-color: var(--border-color);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   SHOP
══════════════════════════════════════════════════════════════ */
.shop-tab {
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
.active-shop-tab {
  background: var(--gold-bg);
  color: var(--gold-color);
  border-color: rgba(245, 158, 11, 0.4);
  opacity: 1 !important;
}

.shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 12px;
  transition: all 0.2s ease;
}
.shop-item:hover {
  border-color: var(--border-color);
}
.shop-item.owned {
  border-color: var(--border-color);
  background: var(--accent-bg);
}

.shop-icon {
  font-size: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  flex-shrink: 0;
}
.shop-info {
  flex: 1;
  min-width: 0;
}
.shop-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-desc {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.shop-price {
  font-size: 11px;
  color: var(--gold-color);
  font-family: "Orbitron", monospace;
  font-weight: 700;
  margin-top: 2px;
}
.shop-price.owned-label {
  color: var(--accent-text);
  font-family: "Montserrat", sans-serif;
  
}

.btn-buy {
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  background: transparent;
  flex-shrink: 0;
}
.btn-buy.can-buy {
  color: var(--gold-color);
  border-color: rgba(245, 158, 11, 0.5);
}
.btn-buy.can-buy:hover {
  background: var(--gold-bg);
  transform: scale(1.05);
}
.btn-buy.owned-state {
  color: var(--accent-text);
  border-color: var(--border-color);
  cursor: default;
}
.btn-buy.no-gold {
  color: var(--text-muted);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}
.btn-buy.active-state {
  color: var(--accent-text);
  border-color: var(--border-color);
  background: var(--accent-bg);
}

/* ══════════════════════════════════════════════════════════════
   SPOTIFY WIDGET
══════════════════════════════════════════════════════════════ */
.spotify-widget {
  background: var(--spotify-bg);
  border-color: var(--spotify-border);
  transition: all 0.5s;
}

/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════════ */
.toast {
  background: rgba(10, 15, 30, 0.95);
  border-radius: 12px;
  padding: 10px 20px;
  font-family: 'Lexend', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  backdrop-filter: blur(16px);
  animation:
    toastIn 0.3s ease,
    toastOut 0.3s ease 2.2s forwards;
  pointer-events: none;
  white-space: nowrap;
}
.toast-success {
  color: var(--accent1);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 20px var(--accent-bg);
}
.toast-gold {
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}
.toast-error {
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.5);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.2);
}
.toast-info {
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}

/* ══════════════════════════════════════════════════════════════
   GOLD COUNTER PULSE
══════════════════════════════════════════════════════════════ */
@keyframes goldPulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
  }
  100% {
    transform: scale(1);
  }
}
.gold-pulse {
  animation: goldPulse 0.4s ease;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM SCROLLBAR
══════════════════════════════════════════════════════════════ */
.custom-scroll::-webkit-scrollbar {
  width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 2px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

/* Panel divider */
.panel-divider {
  border-color: var(--border-subtle);
}

/* ══════════════════════════════════════════════════════════════
   FIREWORKS CANVAS — pháo hoa CSS particle
══════════════════════════════════════════════════════════════ */
#fireworks-canvas {
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile / Tablet
══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  main {
    grid-template-columns: 1fr !important;
  }

  aside:first-child,
  aside:last-child {
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    max-height: 50vh;
    overflow-y: auto;
  }

  #timer-display {
    font-size: 3.5rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION — a11y
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
  }
}
/* NEW FLOATING CAPSULE STYLES */
.capsule-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.capsule-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.floating-panel {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: blur(24px);
  box-shadow:
    0 25px 50px -12px rgb(0 0 0 / 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: panelDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes panelDrop {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Neon focus for todo input */
.neon-focus {
  transition: all 0.2s;
}
.neon-focus:focus {
  box-shadow: 0 0 0 3px rgba(15, 244, 198, 0.3);
  border-color: var(--accent1);
}

/* Tab active state inside right panel */
.tab-active {
  border-bottom: 3px solid var(--accent1);
  color: var(--accent-text);
  font-weight: 700;
}

/* Make center area take full space */
main {
  grid-template-columns: 1fr !important;
  padding-top: 90px; /* space for capsules */
}

/* Hide old sidebars if still present (you can remove them from HTML) */
aside {
  display: none !important;
}
/* ══════════════════════════════════════════════════════════════
   PRIORITY DROPDOWN
══════════════════════════════════════════════════════════════ */
.priority-dropdown {
  position: absolute;
  z-index: 300;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid var(--accent1);
  color: white;
  border-radius: 12px;
  padding: 6px 8px;
  font-family: 'Lexend', sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  min-width: 110px;
  outline: none;
  cursor: pointer;
}

.priority-dropdown option {
  background: #1e2937;
  color: white;
  padding: 8px 12px;
}

.priority-dropdown:focus {
  border-color: #0ff4c6;
  box-shadow: 0 0 0 3px rgba(15, 244, 198, 0.3);
}

/* Hiệu ứng hover cho badge */
.priority-badge {
  transition: all 0.2s ease;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.priority-badge:hover {
  transform: scale(1.08);
  filter: brightness(1.2);
}
/* ══════════════════════════════════════════════════════════════
   CUSTOM PRIORITY DROPDOWN
══════════════════════════════════════════════════════════════ */
.custom-priority-dropdown {
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(15, 244, 198, 0.4);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(16px);
  min-width: 130px;
  overflow: hidden;
  animation: dropdownPop 0.2s ease;
}

@keyframes dropdownPop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.priority-option {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.priority-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.priority-option.active {
  background: rgba(15, 244, 198, 0.15);
  font-weight: 700;
}

.priority-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.priority-dot.high {
  background: #f43f5e;
  box-shadow: 0 0 6px #f43f5e;
}
.priority-dot.medium {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}
.priority-dot.low {
  background: #22d3ee;
  box-shadow: 0 0 6px #22d3ee;
}
/* Nút ÁP DỤNG Theme - con trỏ chuột đẹp + hover effect */
.btn-buy.owned-state {
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.btn-buy.owned-state:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--accent1);
  filter: brightness(1.15);
}

/* Đặc biệt cho nút ÁP DỤNG Theme */
.shop-item .btn-buy:has(.text-content:contains("ÁP DỤNG")),
.btn-buy:contains("ÁP DỤNG") {
  cursor: pointer !important;
}
/* ====================== SPOTIFY SELECT - ĐẸP HƠN ====================== */
.spotify-select {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 14px !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23a1a1aa' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
}

.spotify-select:hover {
  border-color: var(--accent1) !important;
  box-shadow: 0 0 0 3px rgba(15, 244, 198, 0.2);
  transform: translateY(-1px);
}

.spotify-select:focus {
  outline: none;
  border-color: var(--accent1) !important;
  box-shadow: 0 0 0 4px rgba(15, 244, 198, 0.3);
}

/* Style cho dropdown options */
.spotify-select option {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px 16px;
  font-family: "Inter", sans-serif;
}

.spotify-select option:checked,
.spotify-select option:hover {
  background: var(--accent-bg) !important;
  color: var(--accent-text) !important;
}

/* Highlight option đang chọn */
.spotify-select option[value=""],
.spotify-select option:first-child {
  color: #94a3b8;
}
/* Làm nổi bật mục Mặc Định */
.shop-item:first-child .shop-icon {
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color: white;
  font-size: 26px;
}
/* ====================== PRESET TABS - NỔI BẬT HƠN ====================== */
.preset-tab {
  color: rgb(0, 0, 0) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.25s ease;
  font-weight: 600;
}

.preset-tab:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.active-preset {
  background: var(--accent-bg) !important;
  color: rgb(255, 255, 255);
  border: 2px solid var(--accent1) !important;
  box-shadow: 0 0 12px rgba(var(--accent1-rgb, 15, 244, 198), 0.5) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Tăng độ nổi bật cho BREAK */
#btn-break-mode.active-preset {
  color: white !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.6) !important;
}
/* ====================== LÀM ĐẬM CHỮ FOCUS VÀ PHIÊN - CHUỖI ====================== */

/* Timer label (FOCUS XX MIN) */
#mode-label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
}

/* Phiên và Chuỗi */
.z-10.flex.gap-4.text-xs.font-Montserrat.tracking-widest.opacity-40 {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Làm đậm số Phiên và Chuỗi */
#session-count,
#streak-count {
  font-weight: 800 !important;
  color: var(--accent-text) !important;
}
/* ====================== THEME MUSIC TOGGLE - Glassmorphism + Neon ====================== */
.theme-music-bar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.theme-music-switch {
  user-select: none;
}

.theme-music-slider {
  position: relative;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-music-knob {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Theme-specific neon colors */
[data-theme="cosmos"] .theme-music-slider.peer-checked {
  background: linear-gradient(90deg, #a855f7, #0ff4c6) !important;
}

[data-theme="valley"] .theme-music-slider.peer-checked {
  background: linear-gradient(90deg, #fb7185, #f97316) !important;
}

[data-theme="sunset"] .theme-music-slider.peer-checked {
  background: linear-gradient(90deg, #06b6d4, #10b981) !important;
}

[data-theme="cyberpunk"] .theme-music-slider.peer-checked {
  background: linear-gradient(90deg, #f43f5e, #06b6d4) !important;
}

[data-theme="library"] .theme-music-slider.peer-checked {
  background: linear-gradient(90deg, #fbbf24, #f59e0b) !important;
}

[data-theme="ocean"] .theme-music-slider.peer-checked {
  background: linear-gradient(90deg, #38bdf8, #0d9488) !important;
}

/* ====================== SỬA LỖI CŨ ====================== */
/* Xóa hoặc thay thế rule lỗi :contains() */
.shop-item .btn-buy.owned-state {
  cursor: pointer !important;
}

.btn-buy.owned-state:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--accent1);
  filter: brightness(1.15);
}
/* AI CAPSULE POSITIONING */
#ai-capsule-wrapper {
  top: 148px !important; /* Xích sát dưới capsule Stats */
  z-index: 110;
}

/* Đảm bảo không bị đè */
#right-capsule-wrapper {
  z-index: 100;
}

/* Panel AI mượt hơn */
#ai-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

/* Toggle đẹp hơn theo theme */
.ai-slider.peer-checked {
  background: linear-gradient(90deg, var(--accent1), var(--accent2)) !important;
}
/* FIX VỊ TRÍ AI CAPSULE */
#ai-capsule-wrapper {
  top: 168px !important;
  z-index: 95;
}

/* Đảm bảo right panel có độ ưu tiên cao hơn khi mở */
#right-panel {
  z-index: 120 !important;
}

/* Panel AI đồng bộ theme */
#ai-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* Toggle theo theme */
.ai-slider.peer-checked {
  background: linear-gradient(90deg, var(--accent1), var(--accent2)) !important;
}

/* ====================== NAV: LOGO LINK + VỀ DỰ ÁN ====================== */
.nav-logo-link {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.nav-logo-link:hover {
  opacity: 0.85;
}
.nav-project-link {
  display: inline-flex;
  align-items: center;
}
/* ═══════════════════════════════════════════════════════════════
   MODAL ANIMATIONS & PET BUBBLE
═══════════════════════════════════════════════════════════════ */
@keyframes modalIn {
  from { opacity:0; transform: scale(0.92) translateY(12px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* Pet name input */
#pet-name-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
  flex: 1;
}
#pet-name-input::placeholder { color: var(--text-muted); }
#pet-name-input:focus {
  border-color: var(--accent1);
  box-shadow: 0 0 0 2px rgba(15,244,198,0.12);
}

/* Pet status bubble */
#pet-status-bubble {
  transition: opacity 0.4s ease;
}

/* Pet pencil btn */
.pet-edit-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--accent1);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.pet-edit-btn:hover { background: rgba(255,255,255,0.14); }

/* Footer style duplicated from hdsd.html */
.vda-footer {
  background: #2e5aa7;
  color: #fff;
  padding: 2.5rem 0 1.5rem 0;
  margin-top: 3rem;
  width: 100%;
}
.vda-footer-inner {
  max-width: 100%;
  padding: 0 3rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.vda-footer-brand {
  font-family: "Orbitron", monospace;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.vda-footer-brand .accent {
  color: #ffa62b;
}
.vda-footer-info {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  font-size: 0.85rem;
  margin-left: auto;
}
.vda-footer-info div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  white-space: nowrap;
}
.vda-footer-info span.label {
  font-family: "Montserrat", sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  opacity: 0.6;
  text-transform: uppercase;
}
.vda-footer-info span.label-feedback a {
  color: #fff;
  text-decoration: none;
}
.vda-footer-info span.label-feedback a:hover {
  text-decoration: underline;
}
.vda-footer-info span.label-feedback:hover {
  color: orange;
  transition: transform 0.3s ease;
  transform: scale(1.05);
}
.vda-footer-bottom {
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.55;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .vda-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}