/* ==========================================================
   VTUBER THEME OVERRIDE: KANEZUKI AKIRA (SOFT ROSE BLUSH)
   Tông đỏ nhạt hồng đào dịu dàng (Soft Rose / Blush Pink), êm mắt, không chói
   ========================================================== */
:root {
  /* ==========================================================================
     1. TÔNG MÀU CHỦ ĐẠO (PRIMARY ACCENT - ĐỎ NHẠT HỒNG ĐÀO / SOFT ROSE BLUSH)
     ========================================================================== */
  --theme-primary: #e8607a;            /* Màu chủ đạo chính: Đỏ nhạt hồng đào dịu dàng */
  --theme-primary-hover: #f07a90;      /* Màu khi rê chuột (hover) vào nút/thẻ (sáng hơn nhẹ nhàng) */
  --theme-primary-active: #c94e66;     /* Màu khi nhấn giữ (click/active) nút (tông đỏ hồng trầm) */
  --theme-primary-light: #fde8ed;      /* Màu phụ sáng phớt hồng: Chữ nhấn mạnh, badge dịu mắt, highlight */
  --theme-primary-dark: #a83a52;       /* Tông đỏ hồng sẫm: Dùng cho góc tối của gradient tạo chiều sâu */
  
  /* Kênh RGB tương ứng của màu chủ đạo (dùng để ghép hàm rgba() tạo độ trong suốt mờ ảo) */
  --theme-primary-rgb: 232, 96, 122;
  --theme-primary-hover-rgb: 240, 122, 144;
  --theme-primary-active-rgb: 201, 78, 102;
  --theme-primary-light-rgb: 253, 232, 237;

  /* ==========================================================================
     2. TÔNG MÀU PHỤ / KIM LOẠI (SECONDARY / ACCENT - ÁNH BẠCH KIM / PLATINUM)
     ========================================================================== */
  --theme-secondary: #e2e8f0;          /* Màu phụ phối cùng: Ánh bạch kim sáng, tương phản sang trọng với hồng đào */
  --theme-secondary-hover: #ffffff;    /* Màu phụ khi rê chuột (trắng thuần tinh khiết) */
  --theme-secondary-muted: #94a3b8;    /* Màu phụ sắc xám bạc: Viền phụ mờ, văn bản mô tả ít quan trọng */
  --theme-secondary-rgb: 226, 232, 240;      /* Kênh RGB màu phụ cho viền kính mờ */
  --theme-secondary-muted-rgb: 148, 163, 184;/* Kênh RGB màu phụ trầm */

  /* ==========================================================================
     3. MÀU NỀN TỔNG THỂ (BACKGROUND & SPACE)
     ========================================================================== */
  --theme-bg-body: #0c0a13;            /* Màu nền tổng thể trang web (đen thạch anh huyền bí / obsidian midnight) */
  --theme-bg-rgb: 12, 10, 19;          /* Kênh RGB của nền để phối gradient lớp phủ và hiệu ứng hạt canvas */

  /* ==========================================================================
     4. HIỆU ỨNG THẺ KÍNH MỜ (GLASSMORPHISM TINT GRADIENTS) - Trong suốt hơn
     ========================================================================== */
  --theme-tint-card-start: rgba(20, 16, 26, 0.55);        /* Điểm bắt đầu gradient nền thẻ card (kính khói tối - trong suốt hơn) */
  --theme-tint-card-end: rgba(12, 9, 16, 0.65);          /* Điểm kết thúc gradient nền thẻ card */
  --theme-tint-card-hover-start: rgba(28, 22, 36, 0.68);  /* Màu thẻ card kính khi rê chuột vào */
  --theme-tint-card-hover-end: rgba(16, 12, 22, 0.75);
  --theme-tint-popup-start: rgba(22, 17, 30, 0.97);       /* Nền hộp thoại modal / popup (đậm đặc hơn để đọc chữ rõ) */
  --theme-tint-popup-end: rgba(14, 10, 20, 0.98);
  --theme-tint-header-start: rgba(14, 10, 20, 0.90);      /* Nền thanh điều hướng Header trên cùng */

  /* ==========================================================================
     5. ÁNH XẠ CHO TRANG QUẢN TRỊ ADMIN (ADMIN DASHBOARD TOKENS)
     ========================================================================== */
  --gold: #e8607a;                     /* Ánh xạ màu chủ đạo cho Admin (đỏ nhạt hồng đào) */
  --gold-dark: #c94e66;                /* Tông tối của nút/thẻ Admin */
  --gold-light: #f07a90;               /* Tông sáng của nút/thẻ Admin */
  --gold-glow: rgba(232, 96, 122, 0.18);/* Hào quang phát sáng dịu */
  --gold-glass: rgba(232, 96, 122, 0.08);/* Lớp tráng kính mờ ánh hồng đào */
  --gold-text: #ffffff;                /* Màu chữ trên nút/thẻ chủ đạo (luôn là màu trắng tinh để chống chói/dễ đọc) */
}

/* ==========================================================
   QUY TẮC PHỐI MÀU: TUYỆT ĐỐI KHÔNG VIỀN ĐỎ CHỮ ĐEN / VIỀN ĐEN CHỮ ĐỎ
   - Nút nền đỏ/viền đỏ: Luôn dùng chữ trắng thuần (#ffffff), icon trắng sáng.
   - Thẻ tối/nền tối: Không dùng chữ đỏ trên nền đen hoặc viền đỏ chữ đỏ.
     Dùng chữ trắng sáng rõ (#ffffff / #fce7f3), điểm xuyết icon màu nhung đỏ.
   ========================================================== */

/* 1. Tất cả nút phong cách Gold / Primary: Nền đỏ nhung thì chữ PHẢI TRẮNG TINH, không bao giờ chữ đen */
.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(232, 96, 122, 0.45);
}

.btn-amber,
button.btn-amber {
  background: linear-gradient(135deg, #e8607a, #c94e66) !important;
  box-shadow: 0 4px 14px rgba(232, 96, 122, 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, #f07a90, #e8607a) !important;
  box-shadow: 0 8px 22px rgba(232, 96, 122, 0.5) !important;
}

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

/* 2. Menu thanh bên (Sidebar): Mục đang chọn dùng chữ trắng sáng (#ffffff), không dùng chữ đỏ gắt trên nền tối */
.bento-nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(232, 96, 122, 0.22), rgba(232, 96, 122, 0.10)) !important;
  border-color: rgba(232, 96, 122, 0.45) !important;
  box-shadow: 0 0 16px rgba(232, 96, 122, 0.18) !important;
}

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

/* 3. Các huy hiệu (Badges & Pills): Tránh viền đỏ chữ đỏ trên nền đen, dùng chữ trắng sáng dễ đọc */
.bento-role-badge,
.badge-admin-pill,
.badge-admin {
  color: #ffffff !important;
  background: rgba(232, 96, 122, 0.2) !important;
  border-color: rgba(232, 96, 122, 0.45) !important;
  font-weight: 700 !important;
}

.obs-spec-val {
  color: #ffffff !important;
  background: rgba(232, 96, 122, 0.2) !important;
  border-color: rgba(232, 96, 122, 0.4) !important;
}

.btn-obs-specs-toggle {
  color: #f1f5f9 !important;
  background: rgba(232, 96, 122, 0.1) !important;
  border-color: rgba(232, 96, 122, 0.3) !important;
}

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

/* 4. Nút đăng xuất & các nút cảnh báo: Chữ trắng trên nền đỏ trong suốt, không chữ đỏ chìm vào nền đen */
.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;
}

/* 5. Tiêu đề chào streamer & số tiền kích hoạt: Chuyển sang ánh bạc phớt hồng (Platinum Velvet), êm dịu, không chữ đỏ gắt trên nền đen */
.text-gold {
  color: #fce7f3 !important;
  text-shadow: 0 0 16px rgba(232, 96, 122, 0.35);
}

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

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

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

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

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

.donate-error-msg {
  color: #ffffff !important;
  background: rgba(232, 96, 122, 0.22) !important;
  border-color: rgba(232, 96, 122, 0.45) !important;
}

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

/* ==========================================================
   7. TÙY CHỈNH VÒNG QUAY GACHA THEO KHÁCH HÀNG (AKIRA CUSTOM THEME)
   ========================================================== */
:root {
  /* Badge tiêu đề "VÒNG QUAY TIME" */
  --gacha-badge-bg: rgba(232, 96, 122, 0.28);
  --gacha-badge-border: rgba(240, 122, 144, 0.55);
  --gacha-badge-shadow: 0 4px 16px rgba(232, 96, 122, 0.45);
  --gacha-badge-color: #ffffff;
  --gacha-badge-text-shadow: 0 1px 6px rgba(232, 96, 122, 0.7);

  /* Chữ "vừa quay" và số tiền */
  --gacha-action-color: #fce7f3;
  --gacha-amount-color: #ff758f;
  --gacha-amount-shadow: 0 0 14px rgba(232, 96, 122, 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(232, 96, 122, 0.75), 0 2px 10px rgba(0, 0, 0, 0.95);
  --gacha-result-note-color: #fce7f3;
  --gacha-result-note-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);

  /* ==========================================================
     8. TÙY CHỈNH THANH TIẾN TRÌNH MỤC TIÊU (AKIRA THEME)
     Tông đỏ nhạt hồng đào dịu dàng (Soft Rose / Blush Pink)
     ========================================================== */
  /* Khung thẻ kính Goal Card */
  --goal-card-bg: linear-gradient(135deg, rgba(24, 18, 28, 0.88), rgba(16, 11, 20, 0.94));
  --goal-card-border: 1.5px solid rgba(232, 96, 122, 0.4);
  --goal-card-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(232, 96, 122, 0.22);

  /* Tiêu đề & Icon */
  --goal-icon-color: #f07a90;
  --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(10, 8, 14, 0.75);
  --goal-track-border: 1px solid rgba(255, 255, 255, 0.12);
  --goal-fill-bg: linear-gradient(90deg, #c94e66 0%, #e8607a 50%, #f07a90 100%);
  --goal-fill-shadow: 0 0 18px rgba(232, 96, 122, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.35);

  /* Số tiền & Phần trăm */
  --goal-current-amount-color: #f07a90;
  --goal-current-amount-shadow: 0 0 12px rgba(232, 96, 122, 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(232, 96, 122, 0.22);
  --goal-pct-badge-border: 1px solid rgba(232, 96, 122, 0.5);
  --goal-pct-badge-color: #ffffff;
  --goal-pct-badge-shadow: 0 2px 8px rgba(232, 96, 122, 0.25);

  /* Delta Pill (Thông báo cộng dồn donate mới) */
  --goal-delta-bg: linear-gradient(135deg, #e8607a, #c94e66);
  --goal-delta-color: #ffffff;
  --goal-delta-shadow: 0 6px 18px rgba(232, 96, 122, 0.5);
}