/* ==========================================================
   VTUBER THEME OVERRIDE: HAYASHI RUKI (SODA ICE POP CYAN)
   Tông màu xanh kem soda mát lạnh lấy cảm hứng từ que kem của Ruki
   ========================================================== */
:root {
  /* ==========================================================================
     1. TÔNG MÀU CHỦ ĐẠO (PRIMARY ACCENT - CYAN SODA ICE POP)
     ========================================================================== */
  --theme-primary: #2cb9d5;            /* Màu chủ đạo chính: Xanh cyan soda mát lạnh */
  --theme-primary-hover: #6ed0db;      /* Màu khi rê chuột (sáng hơn, như kem tan) */
  --theme-primary-active: #0685ba;     /* Màu khi nhấn giữ (xanh đại dương sâu) */
  --theme-primary-light: #cffafe;      /* Màu phụ sáng: Xanh kem soda nhạt, highlight */
  --theme-primary-dark: #08738a;       /* Tông xanh sẫm tạo chiều sâu gradient */
  --theme-primary-rgb: 44, 185, 213;
  --theme-primary-hover-rgb: 110, 208, 219;
  --theme-primary-active-rgb: 6, 133, 186;
  --theme-primary-light-rgb: 207, 250, 254;

  /* ==========================================================================
     2. TÔNG MÀU PHỤ (SECONDARY)
     ========================================================================== */
  --theme-secondary: #bae6fd;
  --theme-secondary-hover: #ffffff;
  --theme-secondary-muted: #94a3b8;
  --theme-secondary-rgb: 186, 230, 253;
  --theme-secondary-muted-rgb: 148, 163, 184;

  /* ==========================================================================
     3. MÀU NỀN TỔNG THỂ
     ========================================================================== */
  --theme-bg-body: #050d14;
  --theme-bg-rgb: 5, 13, 20;

  /* ==========================================================================
     4. HIỆU ỨNG THẺ KÍNH MỜ (GLASSMORPHISM)
     ========================================================================== */
  --theme-tint-card-start: rgba(10, 28, 38, 0.68);
  --theme-tint-card-end: rgba(5, 16, 24, 0.78);
  --theme-tint-card-hover-start: rgba(16, 42, 58, 0.84);
  --theme-tint-card-hover-end: rgba(8, 24, 34, 0.90);
  --theme-tint-popup-start: rgba(8, 26, 36, 0.97);
  --theme-tint-popup-end: rgba(5, 16, 24, 0.98);
  --theme-tint-header-start: rgba(5, 16, 24, 0.95);

  /* ==========================================================================
     5. ÁNH XẠ CHO TRANG QUẢN TRỊ ADMIN
     ========================================================================== */
  --gold: #2cb9d5;
  --gold-dark: #08738a;
  --gold-light: #6ed0db;
  --gold-glow: rgba(44, 185, 213, 0.35);
  --gold-glass: rgba(44, 185, 213, 0.12);
  --gold-text: #ffffff;

  /* ==========================================================================
     6. VÒNG QUAY GACHA THEME VARIABLES (RUKI CYAN SODA)
     ========================================================================== */
  --gacha-badge-bg: rgba(44, 185, 213, 0.28);
  --gacha-badge-border: rgba(110, 208, 219, 0.55);
  --gacha-badge-shadow: 0 4px 16px rgba(44, 185, 213, 0.45);
  --gacha-badge-color: #ffffff;
  --gacha-badge-text-shadow: 0 1px 6px rgba(44, 185, 213, 0.7);

  /* Chữ "vừa quay" và số tiền */
  --gacha-action-color: #cffafe;
  --gacha-amount-color: #6ed0db;
  --gacha-amount-shadow: 0 0 14px rgba(44, 185, 213, 0.6), 0 2px 8px rgba(0, 0, 0, 0.95);

  /* Kết quả bên dưới vòng quay */
  --gacha-result-title-color: #ffffff;
  --gacha-result-title-shadow: 0 0 18px rgba(44, 185, 213, 0.75), 0 2px 10px rgba(0, 0, 0, 0.95);
  --gacha-result-note-color: #cffafe;
  --gacha-result-note-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);

  /* ==========================================================================
     7. THANH TIẾN TRÌNH MỤC TIÊU (GOAL BAR - RUKI CYAN SODA)
     ========================================================================== */
  /* Khung thẻ kính Goal Card */
  --goal-card-bg: linear-gradient(135deg, rgba(8, 24, 34, 0.88), rgba(5, 15, 22, 0.94));
  --goal-card-border: 1.5px solid rgba(44, 185, 213, 0.4);
  --goal-card-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(44, 185, 213, 0.22);

  /* Tiêu đề & Icon */
  --goal-icon-color: #6ed0db;
  --goal-title-color: #ffffff;
  --goal-title-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

  /* Thanh tiến trình (Track & Fill) */
  --goal-track-bg: rgba(4, 12, 18, 0.75);
  --goal-track-border: 1px solid rgba(255, 255, 255, 0.12);
  --goal-fill-bg: linear-gradient(90deg, #08738a 0%, #2cb9d5 50%, #6ed0db 100%);
  --goal-fill-shadow: 0 0 18px rgba(44, 185, 213, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.35);

  /* Số tiền & Phần trăm */
  --goal-current-amount-color: #6ed0db;
  --goal-current-amount-shadow: 0 0 12px rgba(44, 185, 213, 0.55), 0 1px 3px rgba(0, 0, 0, 0.8);
  --goal-target-amount-color: rgba(255, 255, 255, 0.75);
  --goal-pct-badge-bg: rgba(44, 185, 213, 0.22);
  --goal-pct-badge-border: 1px solid rgba(44, 185, 213, 0.5);
  --goal-pct-badge-color: #ffffff;
  --goal-pct-badge-shadow: 0 2px 8px rgba(44, 185, 213, 0.25);

  /* Delta Pill (Thông báo cộng dồn donate mới) */
  --goal-delta-bg: linear-gradient(135deg, #2cb9d5, #08738a);
  --goal-delta-color: #ffffff;
  --goal-delta-shadow: 0 6px 18px rgba(44, 185, 213, 0.5);
}

/* ==========================================================
   QUY TẮC PHỐI MÀU: LUÔN CHỮ TRẮNG TRÊN NỀN CYAN
   ========================================================== */

/* 1. Nút phong cách Gold / Primary */
.btn-gold,
button.btn-gold,
.gacha-filter-btn.active,
.confirm-modal-btn-confirm.gold,
.confirm-modal-btn-confirm.primary {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

.btn-gold svg,
button.btn-gold svg {
  stroke: #ffffff !important;
}

.btn-gold:hover,
button.btn-gold:hover,
.gacha-filter-btn.active:hover {
  color: #ffffff !important;
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(44, 185, 213, 0.45);
}

/* 2. Nút Test Nạp (btn-amber) theo tông cyan của Ruki */
.btn-amber,
button.btn-amber {
  background: linear-gradient(135deg, #2cb9d5, #08738a) !important;
  box-shadow: 0 4px 14px rgba(44, 185, 213, 0.35) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-weight: 700;
}

.btn-amber:hover,
button.btn-amber:hover {
  background: linear-gradient(135deg, #6ed0db, #2cb9d5) !important;
  box-shadow: 0 8px 22px rgba(44, 185, 213, 0.5) !important;
}

.btn-amber svg,
button.btn-amber svg {
  stroke: #ffffff !important;
}

/* 3. Menu thanh bên (Sidebar) */
.bento-nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(44, 185, 213, 0.22), rgba(44, 185, 213, 0.10)) !important;
  border-color: rgba(44, 185, 213, 0.45) !important;
  box-shadow: 0 0 16px rgba(44, 185, 213, 0.18) !important;
}

.bento-nav-item.active .bento-nav-icon,
.bento-nav-item.active .bento-nav-icon svg {
  color: #cffafe !important;
  stroke: #cffafe !important;
}

/* 4. Huy hiệu (Badges & Pills) */
.bento-role-badge,
.badge-admin-pill,
.badge-admin {
  color: #ffffff !important;
  background: rgba(44, 185, 213, 0.2) !important;
  border-color: rgba(44, 185, 213, 0.45) !important;
  font-weight: 700 !important;
}

.obs-spec-val {
  color: #ffffff !important;
  background: rgba(44, 185, 213, 0.2) !important;
  border-color: rgba(44, 185, 213, 0.4) !important;
}

.btn-obs-specs-toggle {
  color: #f1f5f9 !important;
  background: rgba(44, 185, 213, 0.1) !important;
  border-color: rgba(44, 185, 213, 0.3) !important;
}

.btn-obs-specs-toggle:hover {
  color: #ffffff !important;
  background: rgba(44, 185, 213, 0.2) !important;
  border-color: rgba(44, 185, 213, 0.5) !important;
}

/* 5. Nút đăng xuất */
.btn-bento-logout {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.btn-bento-logout:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
}

/* 6. Tiêu đề chào streamer & điểm nhấn */
.text-gold {
  color: #cffafe !important;
  text-shadow: 0 0 16px rgba(44, 185, 213, 0.35);
}

.gacha-trigger-amount {
  color: #ffffff !important;
}

.gacha-trigger-amount span {
  color: #94a3b8 !important;
}

.stat-gold {
  color: #cffafe !important;
}

/* 7. Form và liên kết trang chủ / đăng nhập */
.donate-auth-link {
  color: #2cb9d5 !important;
}

.donate-auth-link:hover {
  color: #ffffff !important;
}

.donate-error-msg {
  color: #ffffff !important;
  background: rgba(44, 185, 213, 0.22) !important;
  border-color: rgba(44, 185, 213, 0.45) !important;
}

#subathonWidgetHint span,
#goalOverviewHint span {
  color: #cffafe !important;
}