/* ============================================
   DRAWEST THEME SWITCHER - 4 Themes
   Red | Light | Dark | Colorful (Art Canvas Theme)
   ============================================ */

/* ─── Theme Transition Animation ─── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease,
    fill 0.4s ease,
    stroke 0.4s ease,
    filter 0.4s ease !important;
}

/* ─── RED THEME (Kırmızı Mod) ─── */
/* Clean white bg, vibrant red navbar, subtle rose tints */
[data-theme="red"] {
  --bg: #fefafa;
  --bg-elevated: #ffffff;
  --text: #1f1215;
  --muted: #6b4f4f;
  --border: #f0d0cc;
  --hover: rgba(200, 30, 30, 0.04);
  --drawest-accent: #d42020;
  --badge-bg: #fde0dc;
  --card-bg: #ffffff;
  --hover-shadow: 0 4px 20px rgba(180, 30, 30, 0.08);
}

/* ─── RED: Body ─── */
[data-theme="red"] body {
  background: #f9f2f1;
  color: #1f1215;
}

/* ─── RED: Navbar — Vivid red gradient ─── */
[data-theme="red"] .space-navbar {
  background: linear-gradient(135deg, #c41919 0%, #a81515 100%) !important;
  border-bottom: none;
  box-shadow: 0 2px 20px rgba(180, 20, 20, 0.2);
}

[data-theme="red"] .space-nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-theme="red"] .space-nav-link:hover,
[data-theme="red"] .space-nav-link.active {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  border-radius: 10px;
}

[data-theme="red"] .space-nav-link::before {
  background: #ffffff;
}

/* ─── RED: Dropdown Menus ─── */
[data-theme="red"] .space-dropdown-menu {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

[data-theme="red"] .space-dropdown-item {
  color: #1f1215;
}

[data-theme="red"] .space-dropdown-item:hover {
  background: #fff0ee;
  color: #c41919;
}

/* ─── RED: Cards & Sections ─── */
[data-theme="red"] .dw-section,
[data-theme="red"] .dw-widget {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

[data-theme="red"] .dw-section:hover,
[data-theme="red"] .dw-widget:hover {
  box-shadow: 0 4px 20px rgba(180, 30, 30, 0.06);
}

[data-theme="red"] .dw-card {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  color: #1f1215;
}

[data-theme="red"] .dw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(180, 30, 30, 0.1);
  border-color: #e0a8a3;
}

/* ─── RED: Section Headers ─── */
[data-theme="red"] .dw-section-header {
  border-bottom: 3px solid #d42020;
  background: linear-gradient(135deg, #d42020 0%, #b81818 100%);
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
  margin: -1px -1px 15px -1px;
}

[data-theme="red"] .dw-section-title {
  color: #ffffff;
}

[data-theme="red"] .dw-view-all {
  background: rgba(255, 255, 255, 0.92);
  color: #c41919;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border: none;
}

[data-theme="red"] .dw-view-all:hover {
  background: #ffffff;
  color: #a81515;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ─── RED: Stat Cards ─── */
[data-theme="red"] .dw-stat-card {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .dw-stat-card:hover {
  box-shadow: 0 4px 20px rgba(180, 30, 30, 0.08);
}

/* ─── RED: Hero Banner ─── */
[data-theme="red"] .dw-hero-banner {
  background: linear-gradient(135deg, rgba(212, 32, 32, 0.08) 0%, rgba(180, 30, 30, 0.05) 100%);
}

/* ─── RED: Featured Flow ─── */
[data-theme="red"] .dw-featured-flow {
  background: linear-gradient(135deg, rgba(212, 32, 32, 0.06) 0%, rgba(180, 30, 30, 0.03) 100%);
  border: 1px solid #f0d0cc;
}

/* ─── RED: Latest Items & Ranking ─── */
[data-theme="red"] .dw-latest-item {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .dw-latest-item:hover {
  background: #fff8f7;
  border-color: #e0a8a3;
}

[data-theme="red"] .dw-ranking-item {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .dw-ranking-item:hover {
  background: #fff8f7;
  border-color: #e0a8a3;
}

/* ─── RED: Category Tags ─── */
[data-theme="red"] .dw-category-tag {
  background: #fff0ee;
  border: 1px solid #f0d0cc;
  color: #b81818;
}

[data-theme="red"] .dw-category-tag:hover {
  background: #d42020;
  border-color: #d42020;
  color: #ffffff;
}

/* ─── RED: Buttons ─── */
[data-theme="red"] .btn-primary {
  background: #d42020 !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(212, 32, 32, 0.2);
}

[data-theme="red"] .btn-primary:hover {
  background: #b81818 !important;
  box-shadow: 0 4px 16px rgba(180, 20, 20, 0.25);
}

[data-theme="red"] .btn-outline-primary {
  border-color: #d42020 !important;
  color: #d42020 !important;
}

[data-theme="red"] .btn-outline-primary:hover {
  background: #d42020 !important;
  color: #ffffff !important;
}

/* ─── RED: Offcanvas / Mobile Menu ─── */
[data-theme="red"] .space-offcanvas-menu {
  background: #ffffff !important;
}

[data-theme="red"] .space-offcanvas-menu .offcanvas-header {
  border-bottom: 3px solid #d42020;
  color: #ffffff;
  background: linear-gradient(135deg, #c41919 0%, #a81515 100%);
}

[data-theme="red"] .space-offcanvas-menu .offcanvas-header .btn-close {
  filter: invert(1) brightness(2);
}

[data-theme="red"] .space-menu-list .list-group-item {
  color: #1f1215;
  border-color: #f0d0cc;
}

[data-theme="red"] .space-menu-list .list-group-item:hover {
  background: #fff0ee;
  color: #c41919;
}

[data-theme="red"] .space-offcanvas-bottom.space-sheet {
  background: #ffffff;
  color: #1f1215;
}

/* ─── RED: Accordion ─── */
[data-theme="red"] .accordion-button {
  color: #1f1215;
  background: #ffffff;
}

[data-theme="red"] .accordion-button:not(.collapsed) {
  background: #fff0ee;
  color: #c41919;
}

/* ─── RED: Bootstrap Overrides ─── */
[data-theme="red"] .card {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .card:hover {
  box-shadow: 0 4px 20px rgba(180, 30, 30, 0.06);
}

[data-theme="red"] .card-title,
[data-theme="red"] .card-text,
[data-theme="red"] .card-body {
  color: #1f1215;
}

[data-theme="red"] .form-control,
[data-theme="red"] .form-select {
  background: #ffffff;
  border: 1px solid #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .form-control::placeholder {
  color: #a08080;
}

[data-theme="red"] .form-control:focus,
[data-theme="red"] .form-select:focus {
  border-color: #d42020;
  box-shadow: 0 0 0 3px rgba(212, 32, 32, 0.1);
  background: #ffffff;
}

[data-theme="red"] .form-label {
  color: #1f1215;
}

[data-theme="red"] .table {
  --bs-table-bg: #ffffff;
  --bs-table-border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .table th {
  color: #b81818;
  background: #fff0ee;
}

[data-theme="red"] .modal-content {
  background: #ffffff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .modal-header,
[data-theme="red"] .modal-footer {
  border-color: #f0d0cc;
}

[data-theme="red"] .modal-title {
  color: #1f1215;
}

/* ─── RED: Text Colors ─── */
[data-theme="red"] .text-muted {
  color: #6b4f4f !important;
}

[data-theme="red"] .text-body {
  color: #1f1215 !important;
}

[data-theme="red"] .text-dark {
  color: #1f1215 !important;
}

[data-theme="red"] h1,
[data-theme="red"] h2,
[data-theme="red"] h3,
[data-theme="red"] h4,
[data-theme="red"] h5,
[data-theme="red"] h6 {
  color: #1f1215;
}

[data-theme="red"] p {
  color: #2a1a1a;
}

[data-theme="red"] label {
  color: #1f1215;
}

[data-theme="red"] small {
  color: #6b4f4f;
}

[data-theme="red"] a {
  color: #c41919;
}

[data-theme="red"] a:hover {
  color: #a81515;
}

/* ─── RED: Badges ─── */
[data-theme="red"] .badge.bg-primary {
  background: #d42020 !important;
  color: #fff !important;
}

[data-theme="red"] .badge.bg-success {
  background: #16a34a !important;
  color: #fff !important;
}

[data-theme="red"] .badge.bg-warning {
  background: #d97706 !important;
  color: #fff !important;
}

[data-theme="red"] .badge.bg-danger {
  background: #dc2626 !important;
  color: #fff !important;
}

[data-theme="red"] .badge.bg-info {
  background: #0284c7 !important;
  color: #fff !important;
}

[data-theme="red"] .badge.bg-secondary {
  background: #fde0dc !important;
  color: #b81818 !important;
}

[data-theme="red"] .badge.bg-dark {
  background: #991b1b !important;
  color: #fff !important;
}

[data-theme="red"] .badge.bg-light {
  background: #fff0ee !important;
  color: #b81818 !important;
}

/* ─── RED: Tags & Announcement ─── */
[data-theme="red"] .space-tag {
  background: #fff0ee;
  color: #b81818;
  border: 1px solid #f0d0cc;
}

[data-theme="red"] .space-ann-box {
  background: #fffbea;
  border: 1px solid #fde68a;
  color: #92400e;
}

/* ─── RED: Scrollbar ─── */
[data-theme="red"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="red"] ::-webkit-scrollbar-track {
  background: #faf0ee;
}

[data-theme="red"] ::-webkit-scrollbar-thumb {
  background: #e0a8a3;
  border-radius: 4px;
}

[data-theme="red"] ::-webkit-scrollbar-thumb:hover {
  background: #d42020;
}

/* ─── RED: Footer ─── */
[data-theme="red"] .site-footer {
  background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%) !important;
  border-top: 3px solid #d42020;
  color: #fecaca;
}

[data-theme="red"] .site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(252, 165, 165, 0.4) 25%, rgba(254, 202, 202, 0.6) 50%, rgba(252, 165, 165, 0.4) 75%, transparent);
  height: 3px;
}

[data-theme="red"] .brand-name {
  background: linear-gradient(135deg, #fecaca 0%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme="red"] .social-link {
  background: rgba(255, 255, 255, 0.1);
  color: #fecaca;
}

[data-theme="red"] .social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

[data-theme="red"] .section-title {
  color: #fecaca;
}

[data-theme="red"] .section-title::after {
  background: linear-gradient(90deg, #fca5a5, transparent);
}

[data-theme="red"] .footer-nav .nav-link {
  color: rgba(254, 202, 202, 0.8);
}

[data-theme="red"] .footer-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

[data-theme="red"] .copyright,
[data-theme="red"] .made-with,
[data-theme="red"] .footer-text {
  color: rgba(254, 202, 202, 0.6);
}

[data-theme="red"] .copyright strong {
  color: #fecaca;
}

[data-theme="red"] .brand-tagline {
  color: rgba(254, 202, 202, 0.7);
}

[data-theme="red"] .btn-reset {
  border-color: rgba(252, 165, 165, 0.3);
  color: rgba(254, 202, 202, 0.7);
}

[data-theme="red"] .btn-reset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ─── RED: Alerts ─── */
[data-theme="red"] .alert-warning {
  background: #fffbea;
  border: 1px solid #fde68a;
  color: #92400e;
}

[data-theme="red"] .alert-info {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

[data-theme="red"] .alert-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}

[data-theme="red"] .alert-danger {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

/* ─── RED: Selection ─── */
[data-theme="red"] ::selection {
  background: rgba(212, 32, 32, 0.15);
  color: #1f1215;
}

/* ─── RED: Glass ─── */
[data-theme="red"] .glass-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

/* ─── RED: Pagination ─── */
[data-theme="red"] .page-link {
  color: #c41919;
  border-color: #f0d0cc;
  background: #fff;
}

[data-theme="red"] .page-link:hover {
  background: #d42020;
  border-color: #d42020;
  color: #fff;
}

[data-theme="red"] .page-item.active .page-link {
  background: #d42020;
  border-color: #d42020;
  color: #fff;
}

/* ─── RED: Manga/Series Variables ─── */
[data-theme="red"] {
  --manga-bg: #f9f2f1;
  --manga-card-bg: #ffffff;
  --manga-hover-bg: #fff8f7;
  --manga-text: #1f1215;
  --manga-text-muted: #6b4f4f;
  --manga-border: #f0d0cc;
}

/* ─── RED: DW Glass Variables ─── */
[data-theme="red"] {
  --dw-glass: #ffffff;
  --dw-glass-border: #f0d0cc;
  --dw-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  --dw-shadow-hover: 0 4px 20px rgba(180, 30, 30, 0.08);
}

/* ─── RED: Forum ─── */
[data-theme="red"] .f-search input {
  background: #fff;
  border-color: #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .f-search input::placeholder {
  color: #a08080;
}

[data-theme="red"] .f-search input:focus {
  border-color: #d42020;
  box-shadow: 0 0 0 3px rgba(212, 32, 32, 0.08);
}

[data-theme="red"] .f-search i {
  color: #a08080;
}

[data-theme="red"] .f-btn-new {
  background: #d42020;
  color: #fff;
  border: none;
}

[data-theme="red"] .f-btn-new:hover {
  background: #b81818;
}

[data-theme="red"] .f-tabs {
  border-bottom-color: #f0d0cc;
}

[data-theme="red"] .f-tab {
  color: #6b4f4f;
}

[data-theme="red"] .f-tab:hover {
  color: #d42020;
}

[data-theme="red"] .f-tab.active {
  color: #d42020;
  border-bottom-color: #d42020;
}

[data-theme="red"] .f-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .f-card:hover {
  background: #fff8f7;
  border-color: #e0a8a3;
}

[data-theme="red"] .f-card-title {
  color: #1f1215;
}

[data-theme="red"] .f-card-snippet {
  color: #4a3030;
}

[data-theme="red"] .f-card-meta {
  color: #6b4f4f;
}

[data-theme="red"] .f-card-thumb {
  background: #fff0ee;
}

[data-theme="red"] .f-card-thumb-placeholder {
  background: #fff0ee;
  color: #d42020;
}

[data-theme="red"] .f-card-cat {
  background: #fff0ee;
  color: #b81818;
}

[data-theme="red"] .f-card-mp {
  background: #d42020;
  color: #fff;
}

[data-theme="red"] .f-cat-dropdown .dropdown-toggle {
  background: #fff;
  border-color: #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .f-cat-dropdown .dropdown-menu {
  background: #fff;
  border-color: #e0b8b3;
}

[data-theme="red"] .f-cat-dropdown .dropdown-item {
  color: #1f1215;
}

[data-theme="red"] .f-cat-dropdown .dropdown-item:hover {
  background: #fff0ee;
  color: #c41919;
}

[data-theme="red"] .f-mp-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .f-mp-card:hover {
  border-color: #e0a8a3;
}

[data-theme="red"] .f-mp-body h6 {
  color: #1f1215;
}

[data-theme="red"] .f-mp-price {
  color: #d42020;
}

[data-theme="red"] .f-mp-seller {
  color: #6b4f4f;
}

[data-theme="red"] .f-mp-img {
  background: #fff0ee;
}

[data-theme="red"] .f-pagination .page-link {
  background: #fff;
  border-color: #f0d0cc;
  color: #c41919;
}

[data-theme="red"] .f-pagination .page-item.active .page-link {
  background: #d42020;
  border-color: #d42020;
  color: #fff;
}

[data-theme="red"] .f-mobile-menu {
  background: #fff;
  border-top: 2px solid #d42020;
}

[data-theme="red"] .f-mobile-item {
  color: #6b4f4f;
}

[data-theme="red"] .f-mobile-item.active {
  color: #d42020;
}

[data-theme="red"] .f-empty {
  color: #6b4f4f;
}

[data-theme="red"] .f-top-left h2 {
  color: #1f1215;
}

[data-theme="red"] .f-top-stats {
  color: #4a3030;
}

/* ─── RED: Shots / Photography ─── */
[data-theme="red"] .photo-card {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .photo-card:hover {
  box-shadow: 0 4px 20px rgba(180, 30, 30, 0.06);
}

[data-theme="red"] .photo-title {
  color: #1f1215;
}

[data-theme="red"] .photo-meta {
  color: #6b4f4f;
}

[data-theme="red"] .action-bar {
  background: #fff8f7;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .ref-card {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .ref-card:hover {
  border-color: #e0a8a3;
}

[data-theme="red"] .search-input {
  background: #fff;
  border-color: #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .search-input::placeholder {
  color: #a08080;
}

[data-theme="red"] .search-icon {
  color: #a08080;
}

[data-theme="red"] .filter-pill {
  background: #fff;
  border-color: #e0b8b3;
  color: #2a1a1a;
}

[data-theme="red"] .filter-pill:hover {
  background: #fff0ee;
  color: #c41919;
  border-color: #e0a8a3;
}

[data-theme="red"] .filter-pill.active {
  background: #d42020;
  border-color: #d42020;
  color: #fff;
}

/* ─── RED: Common Bootstrap ─── */
[data-theme="red"] .bg-light {
  background-color: #fff8f7 !important;
}

[data-theme="red"] .bg-white {
  background-color: #ffffff !important;
}

[data-theme="red"] .border {
  border-color: #f0d0cc !important;
}

[data-theme="red"] .border-bottom {
  border-color: #f0d0cc !important;
}

[data-theme="red"] .shadow-sm {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="red"] .dropdown-menu {
  background-color: #fff;
  border-color: #f0d0cc;
}

[data-theme="red"] .dropdown-item {
  color: #1f1215;
}

[data-theme="red"] .dropdown-item:hover {
  background: #fff0ee;
  color: #c41919;
}

[data-theme="red"] .btn-outline-secondary {
  color: #4a3030;
  border-color: #e0b8b3;
}

[data-theme="red"] .btn-outline-secondary:hover {
  background: #fff0ee;
  color: #c41919;
}

/* ─── RED: List Group ─── */
[data-theme="red"] .list-group-item {
  background: transparent;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .list-group-item:hover {
  background: #fff8f7;
}

/* ─── RED: Nav Pills/Tabs ─── */
[data-theme="red"] .nav-link {
  color: #4a3030;
}

[data-theme="red"] .nav-pills .nav-link.active {
  background: #d42020;
  color: #fff;
}

[data-theme="red"] .nav-tabs .nav-link.active {
  border-color: #d42020;
  color: #d42020;
  background: #fff;
}

/* ─── RED: Progress & Breadcrumb ─── */
[data-theme="red"] .progress {
  background: #fde0dc;
}

[data-theme="red"] .progress-bar {
  background: #d42020;
}

[data-theme="red"] .breadcrumb-item {
  color: #4a3030;
}

[data-theme="red"] .breadcrumb-item a {
  color: #d42020;
}

[data-theme="red"] .breadcrumb-item.active {
  color: #6b4f4f;
}

/* ─── RED: Auth / Comments ─── */
[data-theme="red"] .auth-card,
[data-theme="red"] .login-card,
[data-theme="red"] .register-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .comment-box,
[data-theme="red"] .comment-item {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .comment-item:hover {
  background: #fff8f7;
}

[data-theme="red"] .comment-author {
  color: #c41919;
}

[data-theme="red"] .comment-date {
  color: #a08080;
}

[data-theme="red"] .comment-content {
  color: #2a1a1a;
}

/* ─── RED: Series / Manga ─── */
[data-theme="red"] .series-header,
[data-theme="red"] .manga-header {
  background: linear-gradient(135deg, #c41919 0%, #a81515 100%);
  color: #fff;
}

[data-theme="red"] .chapter-list-item {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .chapter-list-item:hover {
  background: #fff8f7;
  border-color: #e0a8a3;
}

/* ─── RED: Component Cards ─── */
[data-theme="red"] .profile-card,
[data-theme="red"] .user-card,
[data-theme="red"] .playlist-card,
[data-theme="red"] .game-card,
[data-theme="red"] .team-card,
[data-theme="red"] .rank-card,
[data-theme="red"] .ranking-card,
[data-theme="red"] .panel-card,
[data-theme="red"] .admin-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .playlist-card:hover,
[data-theme="red"] .game-card:hover,
[data-theme="red"] .team-card:hover {
  border-color: #e0a8a3;
  box-shadow: 0 4px 20px rgba(180, 30, 30, 0.06);
}

/* ─── RED: Shop / Payment ─── */
[data-theme="red"] .shop-card,
[data-theme="red"] .payment-card,
[data-theme="red"] .coin-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .shop-card:hover,
[data-theme="red"] .coin-card:hover {
  border-color: #e0a8a3;
}

/* ─── RED: Messages ─── */
[data-theme="red"] .drawverse-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .message-card,
[data-theme="red"] .thread-card {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .message-bubble {
  background: #fff0ee;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .message-bubble.own {
  background: #d42020;
  color: #fff;
  border-color: #b81818;
}

/* ─── RED: Video / Tooltip / Toast ─── */
[data-theme="red"] .video-card,
[data-theme="red"] .animation-card {
  background: #fff;
  border: 1px solid #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .video-card:hover,
[data-theme="red"] .animation-card:hover {
  border-color: #e0a8a3;
}

[data-theme="red"] .tooltip-inner {
  background: #7f1d1d;
  color: #fecaca;
}

[data-theme="red"] .popover {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .toast {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

/* ─── RED: Quick Access ─── */
[data-theme="red"] .dw-quick-card {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .dw-quick-card:hover {
  border-color: #e0a8a3;
}

[data-theme="red"] .dw-quick-title {
  color: #1f1215;
}

[data-theme="red"] .dw-quick-desc {
  color: #4a3030;
}

/* ─── RED: Updates/Ranking Tabs ─── */
[data-theme="red"] .dw-updates-tabs,
[data-theme="red"] .dw-ranking-tabs {
  background: linear-gradient(135deg, #d42020 0%, #b81818 100%);
  border-radius: 8px;
}

[data-theme="red"] .dw-updates-tab,
[data-theme="red"] .dw-ranking-tab {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="red"] .dw-updates-tab:hover,
[data-theme="red"] .dw-ranking-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="red"] .dw-updates-tab.active,
[data-theme="red"] .dw-ranking-tab.active {
  background: #fff;
  color: #d42020;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ─── RED: Text helpers ─── */
[data-theme="red"] .text-secondary {
  color: #6b4f4f !important;
}

[data-theme="red"] .text-primary {
  color: #d42020 !important;
}

[data-theme="red"] .text-success {
  color: #16a34a !important;
}

[data-theme="red"] .text-danger {
  color: #dc2626 !important;
}

[data-theme="red"] .text-warning {
  color: #d97706 !important;
}

[data-theme="red"] .text-info {
  color: #0284c7 !important;
}

/* ─── RED: Footer content border ─── */
[data-theme="red"] .footer-content {
  border-bottom-color: rgba(252, 165, 165, 0.15);
}

/* ─── RED: Global Catch-All ─── */
[data-theme="red"] .text-muted,
[data-theme="red"] .small.text-muted,
[data-theme="red"] span.text-muted {
  color: #6b4f4f !important;
}

[data-theme="red"] .card-subtitle,
[data-theme="red"] .card-footer,
[data-theme="red"] figcaption,
[data-theme="red"] .caption,
[data-theme="red"] .meta,
[data-theme="red"] .date,
[data-theme="red"] .time-ago,
[data-theme="red"] .post-meta {
  color: #6b4f4f;
}

[data-theme="red"] .container,
[data-theme="red"] .container-fluid,
[data-theme="red"] .row,
[data-theme="red"] .col,
[data-theme="red"] main,
[data-theme="red"] section,
[data-theme="red"] article {
  color: #1f1215;
}

/* Page-specific catch-alls */
[data-theme="red"] .watch-card,
[data-theme="red"] .rank-item,
[data-theme="red"] .playlist-item,
[data-theme="red"] .series-card,
[data-theme="red"] .ep-card,
[data-theme="red"] .match-container,
[data-theme="red"] .product-card,
[data-theme="red"] .card-box {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .msg-hub,
[data-theme="red"] .ct-header,
[data-theme="red"] .ct-footer,
[data-theme="red"] .ct-body {
  background: #fff;
  color: #1f1215;
  border-color: #f0d0cc;
}

[data-theme="red"] .msg-textarea {
  background: #fff8f7;
  color: #1f1215;
  border-color: #e0b8b3;
}

[data-theme="red"] .msg-row.other .msg-bubble {
  background: #fff0ee;
  color: #1f1215;
}

[data-theme="red"] .thr.active {
  background: #fff0ee;
}

[data-theme="red"] .search-box {
  background: #fff;
  border-color: #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .ctx-menu {
  background: #fff;
  border-color: #f0d0cc;
  color: #1f1215;
}

[data-theme="red"] .ctx-item:hover {
  background: #fff0ee;
  color: #c41919;
}

[data-theme="red"] .drop-zone {
  background: #fff8f7;
  border-color: #e0b8b3;
  color: #1f1215;
}

[data-theme="red"] .drop-zone:hover {
  background: #fff0ee;
}

[data-theme="red"] .tool-btn {
  background: #fff0ee;
  color: #4a2020;
}

[data-theme="red"] .tool-btn:hover {
  background: #fde0dc;
}

[data-theme="red"] .tag-ongoing {
  background: #f0fdf4;
  color: #166534;
}

[data-theme="red"] .tag-completed {
  background: #eff6ff;
  color: #1e40af;
}

[data-theme="red"] .tag-cancelled {
  background: #fef2f2;
  color: #991b1b;
}

[data-theme="red"] .input-group-text {
  background: #fff0ee;
  border-color: #e0b8b3;
  color: #4a3030;
}

[data-theme="red"] .reader-container,
[data-theme="red"] .reader-controls {
  background: #fefafa;
  color: #1f1215;
}

/* ─── COLORFUL THEME ─── */
[data-theme="colorful"] {
  /* Core backgrounds */
  --bg: #faf5ff;
  --bg-elevated: #ffffff;
  --text: #1e1030;
  --muted: #5b4a6f;
  --border: #d8b4fe;
  --hover: #f3e8ff;
  --drawest-accent: #8b5cf6;
  --badge-bg: #f472b6;
  --card-bg: #fdf4ff;
  --hover-shadow: 0 8px 32px rgba(139, 92, 246, 0.25);
}

/* ─── COLORFUL: Body & Background ─── */
[data-theme="colorful"] body {
  background: #f5f0ff;
  color: #1e1030;
}

/* ─── COLORFUL: Navbar ─── */
[data-theme="colorful"] .space-navbar {
  background: #f3e8ff !important;
  border-bottom: 1px solid #c084fc;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.1);
}

[data-theme="colorful"] .space-nav-link {
  color: #3b1764;
}

[data-theme="colorful"] .space-nav-link:hover,
[data-theme="colorful"] .space-nav-link.active {
  background: #ede9fe;
  color: #6d28d9;
  border-radius: 12px;
}

[data-theme="colorful"] .space-nav-link::before {
  background: #8b5cf6;
}

/* ─── COLORFUL: Dropdown Menus ─── */
[data-theme="colorful"] .space-dropdown-menu {
  background: #ffffff;
  border: 1px solid #d8b4fe;
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.12);
  border-radius: 16px;
}

[data-theme="colorful"] .space-dropdown-item {
  color: #1e1030;
}

[data-theme="colorful"] .space-dropdown-item:hover {
  background: #f3e8ff;
  color: #6d28d9;
}

/* ─── COLORFUL: Cards & Sections ─── */
[data-theme="colorful"] .dw-section,
[data-theme="colorful"] .dw-widget {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
}

[data-theme="colorful"] .dw-section:hover,
[data-theme="colorful"] .dw-widget:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
  border-color: #c084fc;
}

[data-theme="colorful"] .dw-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.06);
  color: #1e1030;
}

[data-theme="colorful"] .dw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.15);
  border-color: #a78bfa;
}

/* ─── COLORFUL: Section Headers ─── */
[data-theme="colorful"] .dw-section-header {
  border-bottom: 2px solid #e9d5ff;
}

[data-theme="colorful"] .dw-section-title {
  color: #6d28d9;
}

[data-theme="colorful"] .dw-view-all {
  background: #8b5cf6;
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

[data-theme="colorful"] .dw-view-all:hover {
  background: #7c3aed;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}

/* ─── COLORFUL: Stat Cards ─── */
[data-theme="colorful"] .dw-stat-card {
  background: #fdf4ff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
  color: #1e1030;
}

[data-theme="colorful"] .dw-stat-card:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
  border-color: #c084fc;
}

/* ─── COLORFUL: Hero Banner ─── */
[data-theme="colorful"] .dw-hero-banner {
  background: #ede9fe;
  color: #1e1030;
}

/* ─── COLORFUL: Featured Flow ─── */
[data-theme="colorful"] .dw-featured-flow {
  background: #faf5ff;
  border: 1px solid #e9d5ff;
}

/* ─── COLORFUL: Latest Items ─── */
[data-theme="colorful"] .dw-latest-item {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .dw-latest-item:hover {
  background: #faf5ff;
  border-color: #c084fc;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}

/* ─── COLORFUL: Ranking Items ─── */
[data-theme="colorful"] .dw-ranking-item {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .dw-ranking-item:hover {
  background: #fffbeb;
  border-color: #fbbf24;
}

/* ─── COLORFUL: Category Tags ─── */
[data-theme="colorful"] .dw-category-tag {
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  color: #3b1764;
}

[data-theme="colorful"] .dw-category-tag:hover {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

/* ─── COLORFUL: Buttons & Links ─── */
[data-theme="colorful"] .btn-primary {
  background: #8b5cf6 !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

[data-theme="colorful"] .btn-primary:hover {
  background: #7c3aed !important;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.35);
}

[data-theme="colorful"] .btn-outline-primary {
  border-color: #8b5cf6 !important;
  color: #7c3aed !important;
}

[data-theme="colorful"] .btn-outline-primary:hover {
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
}

/* ─── COLORFUL: Offcanvas / Mobile Menu ─── */
[data-theme="colorful"] .space-offcanvas-menu {
  background: #faf5ff !important;
}

[data-theme="colorful"] .space-offcanvas-menu .offcanvas-header {
  border-bottom: 2px solid #d8b4fe;
  color: #1e1030;
}

[data-theme="colorful"] .space-menu-list .list-group-item {
  color: #1e1030;
}

[data-theme="colorful"] .space-menu-list .list-group-item:hover {
  background: #f3e8ff;
  color: #6d28d9;
}

[data-theme="colorful"] .space-offcanvas-bottom.space-sheet {
  background: #faf5ff;
  color: #1e1030;
}

/* ─── COLORFUL: Accordion ─── */
[data-theme="colorful"] .accordion-button {
  color: #1e1030;
}

[data-theme="colorful"] .accordion-button:not(.collapsed) {
  background: #f3e8ff;
  color: #6d28d9;
}

/* ─── COLORFUL: Bootstrap Overrides ─── */
[data-theme="colorful"] .card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.05);
  color: #1e1030;
}

[data-theme="colorful"] .card:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.1);
  border-color: #c084fc;
}

[data-theme="colorful"] .card-title,
[data-theme="colorful"] .card-text,
[data-theme="colorful"] .card-body {
  color: #1e1030;
}

[data-theme="colorful"] .form-control,
[data-theme="colorful"] .form-select {
  background: #ffffff;
  border: 1px solid #d8b4fe;
  color: #1e1030;
}

[data-theme="colorful"] .form-control::placeholder {
  color: #7c6a8f;
}

[data-theme="colorful"] .form-control:focus,
[data-theme="colorful"] .form-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  background: #ffffff;
}

[data-theme="colorful"] .form-label {
  color: #1e1030;
}

[data-theme="colorful"] .table {
  --bs-table-bg: #ffffff;
  --bs-table-border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .table th {
  color: #3b1764;
}

[data-theme="colorful"] .modal-content {
  background: #ffffff;
  border: 1px solid #d8b4fe;
  color: #1e1030;
}

[data-theme="colorful"] .modal-header,
[data-theme="colorful"] .modal-footer {
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .modal-title {
  color: #1e1030;
}

/* ─── COLORFUL: Text Colors ─── */
[data-theme="colorful"] .text-muted {
  color: #5b4a6f !important;
}

[data-theme="colorful"] .text-body {
  color: #1e1030 !important;
}

[data-theme="colorful"] .text-dark {
  color: #1e1030 !important;
}

[data-theme="colorful"] h1,
[data-theme="colorful"] h2,
[data-theme="colorful"] h3,
[data-theme="colorful"] h4,
[data-theme="colorful"] h5,
[data-theme="colorful"] h6 {
  color: #1e1030;
}

[data-theme="colorful"] p {
  color: #2d1b4e;
}

[data-theme="colorful"] label {
  color: #1e1030;
}

[data-theme="colorful"] small {
  color: #5b4a6f;
}

[data-theme="colorful"] a {
  color: #7c3aed;
}

[data-theme="colorful"] a:hover {
  color: #6d28d9;
}

/* ─── COLORFUL: Badges ─── */
[data-theme="colorful"] .badge.bg-primary {
  background: #8b5cf6 !important;
  color: #fff !important;
}

[data-theme="colorful"] .badge.bg-success {
  background: #10b981 !important;
  color: #fff !important;
}

[data-theme="colorful"] .badge.bg-warning {
  background: #f59e0b !important;
  color: #1e1030 !important;
}

[data-theme="colorful"] .badge.bg-danger {
  background: #ef4444 !important;
  color: #fff !important;
}

[data-theme="colorful"] .badge.bg-info {
  background: #06b6d4 !important;
  color: #fff !important;
}

[data-theme="colorful"] .badge.bg-secondary {
  background: #a78bfa !important;
  color: #fff !important;
}

[data-theme="colorful"] .badge.bg-dark {
  background: #3b1764 !important;
  color: #fff !important;
}

[data-theme="colorful"] .badge.bg-light {
  background: #f3e8ff !important;
  color: #3b1764 !important;
}

/* ─── COLORFUL: Tags ─── */
[data-theme="colorful"] .space-tag {
  background: #f3e8ff;
  color: #3b1764;
  border: 1px solid #d8b4fe;
}

/* ─── COLORFUL: Announcement Box ─── */
[data-theme="colorful"] .space-ann-box {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #78350f;
}

/* ─── COLORFUL: Scrollbar ─── */
[data-theme="colorful"] ::-webkit-scrollbar {
  width: 10px;
}

[data-theme="colorful"] ::-webkit-scrollbar-track {
  background: #f3e8ff;
}

[data-theme="colorful"] ::-webkit-scrollbar-thumb {
  background: #a78bfa;
  border-radius: 5px;
}

[data-theme="colorful"] ::-webkit-scrollbar-thumb:hover {
  background: #8b5cf6;
}

/* ─── COLORFUL: Footer ─── */
[data-theme="colorful"] .site-footer {
  background: #f3e8ff !important;
  border-top: 3px solid #c084fc;
  color: #1e1030;
}

[data-theme="colorful"] .site-footer::before {
  background: #c084fc;
  height: 3px;
}

[data-theme="colorful"] .brand-name {
  color: #6d28d9;
}

[data-theme="colorful"] .social-link {
  background: #ede9fe;
  color: #6d28d9;
}

[data-theme="colorful"] .social-link:hover {
  background: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

[data-theme="colorful"] .section-title {
  color: #3b1764;
}

[data-theme="colorful"] .section-title::after {
  background: #c084fc;
}

[data-theme="colorful"] .footer-nav .nav-link {
  color: #3b1764;
}

[data-theme="colorful"] .footer-nav .nav-link:hover {
  background: #ede9fe;
  color: #6d28d9;
}

[data-theme="colorful"] .copyright,
[data-theme="colorful"] .made-with,
[data-theme="colorful"] .footer-text {
  color: #5b4a6f;
}

[data-theme="colorful"] .copyright strong {
  color: #3b1764;
}

[data-theme="colorful"] .btn-reset {
  border-color: #ec4899;
  color: #ec4899;
}

[data-theme="colorful"] .btn-reset:hover {
  background: #ec4899;
  border-color: #ec4899;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

/* ─── COLORFUL: Alert/Notification Overrides ─── */
[data-theme="colorful"] .alert-warning {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #78350f;
}

[data-theme="colorful"] .alert-info {
  background: #e0f2fe;
  border: 1px solid #38bdf8;
  color: #0c4a6e;
}

[data-theme="colorful"] .alert-success {
  background: #dcfce7;
  border: 1px solid #4ade80;
  color: #14532d;
}

[data-theme="colorful"] .alert-danger {
  background: #fef2f2;
  border: 1px solid #f87171;
  color: #7f1d1d;
}

/* ─── COLORFUL: Selection Color ─── */
[data-theme="colorful"] ::selection {
  background: rgba(139, 92, 246, 0.25);
  color: #1e1030;
}

/* ─── COLORFUL: Glassmorphism Helper Classes ─── */
[data-theme="colorful"] .glass-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
  color: #1e1030;
}

/* ─── COLORFUL: Pagination ─── */
[data-theme="colorful"] .page-link {
  color: #6d28d9;
  border-color: #d8b4fe;
  background: #ffffff;
}

[data-theme="colorful"] .page-link:hover {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #ffffff;
}

[data-theme="colorful"] .page-item.active .page-link {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #ffffff;
}

/* ─── COLORFUL: Manga/Series specific ─── */
[data-theme="colorful"] {
  --manga-bg: #faf5ff;
  --manga-card-bg: #ffffff;
  --manga-hover-bg: #f3e8ff;
  --manga-text: #1e1030;
  --manga-text-muted: #5b4a6f;
  --manga-border: #e9d5ff;
}

/* ─── COLORFUL: DW Index Glass Variables ─── */
[data-theme="colorful"] {
  --dw-glass: #ffffff;
  --dw-glass-border: #e9d5ff;
  --dw-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
  --dw-shadow-hover: 0 8px 24px rgba(139, 92, 246, 0.12);
}

/* ============================================
   THEME TOGGLE BUTTON STYLES (3-way)
   ============================================ */

.theme-switcher-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  padding: 0;
}

.theme-switcher-btn:hover {
  background: var(--hover);
  border-color: var(--drawest-accent);
  transform: scale(1.08);
}

.theme-switcher-btn .theme-icon {
  font-size: 1.2rem;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
}

.theme-switcher-btn .theme-icon.active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.theme-switcher-btn .theme-icon:not(.active) {
  opacity: 0;
  transform: scale(0.3) rotate(180deg);
  pointer-events: none;
}

/* Red theme button special style */
[data-theme="red"] .theme-switcher-btn {
  border: 2px solid #f0d0cc;
  background: #fff0ee;
}

[data-theme="red"] .theme-switcher-btn:hover {
  background: #fde0dc;
  border-color: #d42020;
}

/* Colorful theme button special style */
[data-theme="colorful"] .theme-switcher-btn {
  border: 2px solid #c084fc;
  background: #f3e8ff;
}

[data-theme="colorful"] .theme-switcher-btn:hover {
  background: #ede9fe;
  border-color: #8b5cf6;
}

/* ─── Tooltip for theme name ─── */
.theme-switcher-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1100;
}

.theme-switcher-btn:hover[data-tooltip]::after {
  opacity: 1;
}

/* ─── Smooth Transition for Theme Changes ─── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-duration: 0.4s !important;
}

/* ============================================
   PAGE-SPECIFIC COLORFUL THEME OVERRIDES
   ============================================ */

/* ─── COLORFUL: Forum Page ─── */
[data-theme="colorful"] .f-search input {
  background: #ffffff;
  border-color: #d8b4fe;
  color: #1e1030;
}

[data-theme="colorful"] .f-search input::placeholder {
  color: #7c6a8f;
}

[data-theme="colorful"] .f-search input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

[data-theme="colorful"] .f-search i {
  color: #7c6a8f;
}

[data-theme="colorful"] .f-btn-new {
  background: #8b5cf6;
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

[data-theme="colorful"] .f-btn-new:hover {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.3);
}

[data-theme="colorful"] .f-tabs {
  border-bottom-color: #e9d5ff;
}

[data-theme="colorful"] .f-tab {
  color: #5b4a6f;
}

[data-theme="colorful"] .f-tab:hover {
  color: #6d28d9;
}

[data-theme="colorful"] .f-tab.active {
  color: #6d28d9;
  border-bottom-color: #8b5cf6;
}

[data-theme="colorful"] .f-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .f-card:hover {
  background: #fdf4ff;
  border-color: #c084fc;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.08);
  color: #1e1030;
}

[data-theme="colorful"] .f-card-title {
  color: #1e1030;
}

[data-theme="colorful"] .f-card-snippet {
  color: #5b4a6f;
}

[data-theme="colorful"] .f-card-meta {
  color: #7c6a8f;
}

[data-theme="colorful"] .f-card-thumb {
  background: #ede9fe;
}

[data-theme="colorful"] .f-card-thumb-placeholder {
  background: #f3e8ff;
  color: #8b5cf6;
}

[data-theme="colorful"] .f-card-cat {
  background: #f3e8ff;
  color: #6d28d9;
}

[data-theme="colorful"] .f-card-mp {
  background: #8b5cf6;
  color: #fff;
}

[data-theme="colorful"] .f-cat-dropdown .dropdown-toggle {
  background: #ffffff;
  border-color: #d8b4fe;
  color: #3b1764;
}

[data-theme="colorful"] .f-cat-dropdown .dropdown-menu {
  background: #ffffff;
  border-color: #d8b4fe;
}

[data-theme="colorful"] .f-cat-dropdown .dropdown-item {
  color: #3b1764;
}

[data-theme="colorful"] .f-cat-dropdown .dropdown-item:hover {
  background: #f3e8ff;
  color: #6d28d9;
}

[data-theme="colorful"] .f-mp-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .f-mp-card:hover {
  border-color: #c084fc;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.08);
  color: #1e1030;
}

[data-theme="colorful"] .f-mp-body h6 {
  color: #1e1030;
}

[data-theme="colorful"] .f-mp-price {
  color: #6d28d9;
}

[data-theme="colorful"] .f-mp-seller {
  color: #5b4a6f;
}

[data-theme="colorful"] .f-mp-img {
  background: #ede9fe;
}

[data-theme="colorful"] .f-pagination .page-link {
  background: #ffffff;
  border-color: #d8b4fe;
  color: #6d28d9;
}

[data-theme="colorful"] .f-pagination .page-item.active .page-link {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
}

[data-theme="colorful"] .f-mobile-menu {
  background: #faf5ff;
  border-top: 2px solid #c084fc;
  box-shadow: 0 -2px 12px rgba(139, 92, 246, 0.06);
}

[data-theme="colorful"] .f-mobile-item {
  color: #5b4a6f;
}

[data-theme="colorful"] .f-mobile-item.active {
  color: #6d28d9;
}

[data-theme="colorful"] .f-empty {
  color: #7c6a8f;
}

[data-theme="colorful"] .f-top-left h2 {
  color: #1e1030;
}

[data-theme="colorful"] .f-top-stats {
  color: #5b4a6f;
}

/* ─── COLORFUL: Shots / Photography Pages ─── */
[data-theme="colorful"] .photo-card {
  background: #ffffff;
  border-color: #e9d5ff;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.05);
  color: #1e1030;
}

[data-theme="colorful"] .photo-card:hover {
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.1);
  border-color: #c084fc;
}

[data-theme="colorful"] .photo-title {
  color: #1e1030;
}

[data-theme="colorful"] .photo-meta {
  color: #5b4a6f;
}

[data-theme="colorful"] .action-bar {
  background: #faf5ff;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .ref-card {
  background: #ffffff;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .ref-card:hover {
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

[data-theme="colorful"] .search-input {
  background: #ffffff;
  border-color: #d8b4fe;
  color: #1e1030;
}

[data-theme="colorful"] .search-input::placeholder {
  color: #7c6a8f;
}

[data-theme="colorful"] .search-icon {
  color: #7c6a8f;
}

[data-theme="colorful"] .filter-pill {
  background: #ffffff;
  border-color: #d8b4fe;
  color: #3b1764;
}

[data-theme="colorful"] .filter-pill:hover {
  background: #f3e8ff;
  color: #6d28d9;
  border-color: #c084fc;
}

[data-theme="colorful"] .filter-pill.active {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
}

[data-theme="colorful"] input[type=range].custom-range {
  background: #ede9fe;
}

/* ─── COLORFUL: Common Bootstrap Dark-Override Equivalents ─── */
[data-theme="colorful"] .bg-light {
  background-color: #f3e8ff !important;
}

[data-theme="colorful"] .bg-white {
  background-color: #ffffff !important;
}

[data-theme="colorful"] .border {
  border-color: #e9d5ff !important;
}

[data-theme="colorful"] .border-bottom {
  border-color: #e9d5ff !important;
}

[data-theme="colorful"] .shadow-sm {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.06) !important;
}

[data-theme="colorful"] .dropdown-menu {
  background-color: #ffffff;
  border-color: #d8b4fe;
}

[data-theme="colorful"] .dropdown-item {
  color: #1e1030;
}

[data-theme="colorful"] .dropdown-item:hover {
  background: #f3e8ff;
  color: #6d28d9;
}

[data-theme="colorful"] .btn-outline-secondary {
  color: #5b4a6f;
  border-color: #d8b4fe;
}

[data-theme="colorful"] .btn-outline-secondary:hover {
  background: #f3e8ff;
  color: #6d28d9;
  border-color: #c084fc;
}

/* ─── COLORFUL: List Group ─── */
[data-theme="colorful"] .list-group-item {
  background: transparent;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .list-group-item:hover {
  background: #f3e8ff;
}

/* ─── COLORFUL: Nav Pills/Tabs ─── */
[data-theme="colorful"] .nav-link {
  color: #5b4a6f;
}

[data-theme="colorful"] .nav-pills .nav-link.active {
  background: #8b5cf6;
  color: #ffffff;
}

[data-theme="colorful"] .nav-tabs .nav-link.active {
  border-color: #8b5cf6;
  color: #6d28d9;
  background: #ffffff;
}

/* ─── COLORFUL: Progress bars ─── */
[data-theme="colorful"] .progress {
  background: #ede9fe;
}

[data-theme="colorful"] .progress-bar {
  background: #8b5cf6;
}

/* ─── COLORFUL: Breadcrumb ─── */
[data-theme="colorful"] .breadcrumb-item {
  color: #5b4a6f;
}

[data-theme="colorful"] .breadcrumb-item a {
  color: #7c3aed;
}

[data-theme="colorful"] .breadcrumb-item.active {
  color: #5b4a6f;
}

/* ─── COLORFUL: Login/Register specific ─── */
[data-theme="colorful"] .auth-card,
[data-theme="colorful"] .login-card,
[data-theme="colorful"] .register-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.08);
  color: #1e1030;
}

/* ─── COLORFUL: Comments Section ─── */
[data-theme="colorful"] .comment-box,
[data-theme="colorful"] .comment-item {
  background: #ffffff;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .comment-item:hover {
  background: #faf5ff;
}

[data-theme="colorful"] .comment-author {
  color: #3b1764;
}

[data-theme="colorful"] .comment-date {
  color: #7c6a8f;
}

[data-theme="colorful"] .comment-content {
  color: #2d1b4e;
}

/* ─── COLORFUL: Series / Manga Page ─── */
[data-theme="colorful"] .series-header,
[data-theme="colorful"] .manga-header {
  background: #f3e8ff;
  color: #1e1030;
}

[data-theme="colorful"] .chapter-list-item {
  background: #ffffff;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .chapter-list-item:hover {
  background: #faf5ff;
  border-color: #c084fc;
}

/* ─── COLORFUL: User Profile ─── */
[data-theme="colorful"] .profile-card,
[data-theme="colorful"] .user-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

/* ─── COLORFUL: Playlist / Music ─── */
[data-theme="colorful"] .playlist-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .playlist-card:hover {
  border-color: #c084fc;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.08);
}

/* ─── COLORFUL: Games Page ─── */
[data-theme="colorful"] .game-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .game-card:hover {
  border-color: #c084fc;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.1);
}

/* ─── COLORFUL: Team Page ─── */
[data-theme="colorful"] .team-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
  border-color: #c084fc;
}

/* ─── COLORFUL: Ranking Page ─── */
[data-theme="colorful"] .rank-card,
[data-theme="colorful"] .ranking-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

/* ─── COLORFUL: Creator/Admin Panels ─── */
[data-theme="colorful"] .panel-card,
[data-theme="colorful"] .admin-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

/* ─── COLORFUL: Payment/Shop ─── */
[data-theme="colorful"] .shop-card,
[data-theme="colorful"] .payment-card,
[data-theme="colorful"] .coin-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.05);
  color: #1e1030;
}

[data-theme="colorful"] .shop-card:hover,
[data-theme="colorful"] .coin-card:hover {
  border-color: #c084fc;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.1);
}

/* ─── COLORFUL: Drawverse ─── */
[data-theme="colorful"] .drawverse-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

/* ─── COLORFUL: Messages ─── */
[data-theme="colorful"] .message-card,
[data-theme="colorful"] .thread-card {
  background: #ffffff;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .message-bubble {
  background: #f3e8ff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .message-bubble.own {
  background: #ede9fe;
}

/* ─── COLORFUL: animations/Watch ─── */
[data-theme="colorful"] .video-card,
[data-theme="colorful"] .animation-card {
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .video-card:hover,
[data-theme="colorful"] .animation-card:hover {
  border-color: #c084fc;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.1);
}

/* ─── COLORFUL: Tooltip / Popover / Toast ─── */
[data-theme="colorful"] .tooltip-inner {
  background: #6d28d9;
  color: #ffffff;
}

[data-theme="colorful"] .popover {
  background: #ffffff;
  border-color: #d8b4fe;
  color: #1e1030;
}

[data-theme="colorful"] .toast {
  background: #ffffff;
  border-color: #e9d5ff;
  color: #1e1030;
}

/* ─── COLORFUL: Quick Access Cards (index) ─── */
[data-theme="colorful"] .dw-quick-card {
  background: #ffffff;
  border-color: #e9d5ff;
  color: #1e1030;
}

[data-theme="colorful"] .dw-quick-card:hover {
  border-color: #8b5cf6;
}

[data-theme="colorful"] .dw-quick-title {
  color: #1e1030;
}

[data-theme="colorful"] .dw-quick-desc {
  color: #5b4a6f;
}

/* ─── COLORFUL: Updates Tabs (index) ─── */
[data-theme="colorful"] .dw-updates-tabs,
[data-theme="colorful"] .dw-ranking-tabs {
  background: #f3e8ff;
}

[data-theme="colorful"] .dw-updates-tab,
[data-theme="colorful"] .dw-ranking-tab {
  color: #5b4a6f;
}

[data-theme="colorful"] .dw-updates-tab:hover,
[data-theme="colorful"] .dw-ranking-tab:hover {
  color: #6d28d9;
  background: #ede9fe;
}

[data-theme="colorful"] .dw-updates-tab.active,
[data-theme="colorful"] .dw-ranking-tab.active {
  background: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

/* ─── COLORFUL: Various text/span helpers ─── */
[data-theme="colorful"] .text-secondary {
  color: #5b4a6f !important;
}

[data-theme="colorful"] .text-primary {
  color: #7c3aed !important;
}

[data-theme="colorful"] .text-success {
  color: #059669 !important;
}

[data-theme="colorful"] .text-danger {
  color: #dc2626 !important;
}

[data-theme="colorful"] .text-warning {
  color: #d97706 !important;
}

[data-theme="colorful"] .text-info {
  color: #0891b2 !important;
}