/* ChatGPT-Style Dark Theme with Colorful Orbs */
/* Base reset and dark theme */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main body with dark gradient */
body {
    background: #212121 !important;
    min-height: 100vh !important;
    color: #d1d5db !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    position: relative !important;
    overflow-x: hidden;
}

/* Cursor-attract variables (disabled by default) */
:root { --mx: 0; --my: 0; }

/* Colorful gradient orbs like ChatGPT */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Pink/Red orb */
        radial-gradient(circle at 85% 20%, rgba(236, 72, 153, 0.15) 0%, transparent 25%),
        /* Yellow/Orange orb */
        radial-gradient(circle at 15% 70%, rgba(250, 204, 21, 0.12) 0%, transparent 30%),
        /* Green orb */
        radial-gradient(circle at 65% 85%, rgba(34, 197, 94, 0.1) 0%, transparent 25%),
        /* Purple orb */
        radial-gradient(circle at 25% 25%, rgba(168, 85, 247, 0.12) 0%, transparent 30%),
        /* Blue orb */
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
        /* Additional pink */
        radial-gradient(circle at 90% 70%, rgba(244, 114, 182, 0.08) 0%, transparent 25%),
        /* Dark base gradient */
        linear-gradient(180deg, #212121 0%, #1a1a1a 50%, #171717 100%);
    pointer-events: none;
    z-index: 0;
}

/* All content containers with glassmorphism */
.card, .period-selector, .metric-card, .chart-container, .monthly-breakdown, 
.detailed-breakdown, .income-breakdown, .financial-insights, 
.financial-summary-section, .report-actions, .profile-reports-section,
.page-header, .lookback-display, .custom-date-range, .no-data-message,
.feature-card, .auth-container, .alert, .navbar, .container > .row > .col,
.main-content, .sidebar, .content-wrapper, .form-container, .settings-card,
.subscription-card, .profile-card, .calculator-card, .guide-card {
    background: rgba(40, 40, 46, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    position: relative;
    z-index: 1;
}

/* Enhanced hover state for cards */
.card:hover, .period-selector:hover, .metric-card:hover, .feature-card:hover {
    background: rgba(40, 40, 46, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Navigation bar */
.navbar {
    background: rgba(32, 32, 36, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    z-index: 1000;
}

/* Ensure navbar text is white and readable */
.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: #ffffff !important;
}

/* All text elements */
h1, h2, h3, h4, h5, h6, p, span, div, label, a, li, td, th, strong, small {
    color: #d1d5db !important;
}

/* Expense category text specifically - FORCE WHITE */
.expense-category *, .expense-category, .expense-category strong, .expense-category small, 
.category-stats *, .category-stats, .category-stats strong, .category-stats small,
.expense-category .category-stats div, .expense-category .category-stats span,
.expense-category i, .category-stats i {
    color: #ffffff !important;
}

/* Override any Bootstrap text classes */
.text-info, .text-primary, .text-secondary, .text-success, .text-warning, .text-danger,
.text-muted, .category-amount, .fw-bold {
    color: #ffffff !important;
}

/* Nuclear option - override ALL inline styles in expense categories */
.expense-category [style*="color"], .category-stats [style*="color"] {
    color: #ffffff !important;
}

/* Preserve drag and drop visual feedback */
.expense-category.drag-over,
.expense-category.dragover {
    border-color: rgba(34, 197, 94, 0.8) !important;
    border-width: 4px !important;
    background-color: rgba(34, 197, 94, 0.1) !important;
    transform: scale(1.02) !important;
    transition: all 0.2s ease !important;
}

.expense-item.dragging {
    opacity: 0.5 !important;
    transform: rotate(2deg) scale(0.98) !important;
    z-index: 1000 !important;
}

/* Specific overrides for known problematic elements */
i[style*="color"], span[style*="color"], div[style*="color"] {
    color: #ffffff !important;
}

.text-muted {
    color: #9ca3af !important;
}

/* Buttons */
.btn {
    background: rgba(55, 55, 63, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn:hover {
    background: rgba(65, 65, 73, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.btn.active, .btn-primary.active, .period-btn.active {
    background: rgba(75, 75, 83, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.08) !important;
}

.btn-primary {
    background: rgba(59, 130, 246, 0.6) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.btn-primary:hover {
    background: rgba(59, 130, 246, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

.btn-success {
    background: rgba(34, 197, 94, 0.6) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.6) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Button variants for consistent styling */
.btn-info {
    background: rgba(13, 202, 240, 0.6) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
}

.btn-info:hover {
    background: rgba(13, 202, 240, 0.8) !important;
    border-color: rgba(13, 202, 240, 0.5) !important;
}

.btn-warning {
    background: rgba(255, 193, 7, 0.6) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}

.btn-warning:hover {
    background: rgba(255, 193, 7, 0.8) !important;
    border-color: rgba(255, 193, 7, 0.5) !important;
}

/* Form controls */
.form-control, .form-select, input, select, textarea {
    background: rgba(30, 30, 34, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #d1d5db !important;
    border-radius: 8px !important;
}

.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    background: rgba(30, 30, 34, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05) !important;
    outline: none !important;
}

/* Tables */
.table {
    background: transparent !important;
    color: #d1d5db !important;
}

.table th {
    background: rgba(40, 40, 46, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #d1d5db !important;
    font-weight: 600;
}

.table td {
    background: rgba(30, 30, 34, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #d1d5db !important;
}

.table tbody tr:hover td {
    background: rgba(40, 40, 46, 0.6) !important;
}

/* Alerts and badges */
.alert {
    background: rgba(40, 40, 46, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #d1d5db !important;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}

.alert-danger, .alert-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fde68a !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

.badge {
    background: rgba(65, 65, 73, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
}

/* Progress bars */
.progress {
    background: rgba(30, 30, 34, 0.6) !important;
    border-radius: 4px !important;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.6), rgba(59, 130, 246, 0.6)) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.10) !important; /* 90% transparent */
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important;
}

.dropdown-item {
    color: #d1d5db !important;
}

.dropdown-item:hover {
    background: rgba(55, 55, 63, 0.6) !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(30, 30, 34, 0.4);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(75, 75, 83, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(95, 95, 103, 0.7);
}

/* Main container adjustments */
.main-container, .content-area {
    position: relative;
    z-index: 1;
    padding: 14px 16px !important;
}

.page-header {
    margin-bottom: 12px !important;
    padding: 14px 16px !important;
}

/* Compact spacing defaults for cards/rows */
.card .card-header { padding: 10px 14px !important; }
.card .card-body { padding: 14px !important; }
.content-area > .row { margin-bottom: 0.75rem !important; }
.mt-4 { margin-top: 0.75rem !important; }

/* Remove any white backgrounds */
.bg-white, .bg-light, .bg-primary, .card-header {
    background: rgba(40, 40, 46, 0.5) !important;
}

/* Force card backgrounds */
.card, .card-body, .card-header, .card-footer {
    background: rgba(40, 40, 46, 0.5) !important;
    color: #d1d5db !important;
}

/* Override Bootstrap color utilities */
.text-white, .text-dark, .text-primary, .text-secondary, .text-info, .text-warning, .text-success, .text-danger {
    color: #d1d5db !important;
}

/* Override any remaining white/light backgrounds */
div, section, header, footer, main, article, aside {
    background-color: transparent !important;
}

div[style*="background"], section[style*="background"] {
    background: rgba(40, 40, 46, 0.5) !important;
}

/* Links */
a {
    color: #93c5fd !important;
    text-decoration: none;
}

a:hover {
    color: #bfdbfe !important;
    text-decoration: underline;
}

/* Icon styling */
.fas, .far, .fab {
    color: #9ca3af;
}

/* Form switches/checkboxes */
.form-check-input {
    background-color: rgba(55, 55, 63, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.form-check-input:checked {
    background-color: rgba(59, 130, 246, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card, .period-selector, .metric-card, .feature-card {
    animation: fadeIn 0.5s ease-out;
}

/* Global animation utilities (from Account Management page, generalized) */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 0.9; }
}

/* Softer, slower pulse for decorative icons */
@keyframes softPulse {
    0% { transform: scale(1); opacity: 0.96; }
    50% { transform: scale(1.01); opacity: 1; }
    100% { transform: scale(1); opacity: 0.96; }
}

@keyframes slideInRight {
    from { transform: translateX(6px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.anim-pulse { animation: softPulse 8s ease-in-out infinite; }
.anim-slide-in { animation: slideInRight 0.5s ease both; }
.loading-shimmer {
    animation: shimmer 4s infinite;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    background-size: 1000px 100%;
}

/* Disable shimmer sweep to avoid perceived flashing while moving cursor */
.card::before, .feature-card::before, .metric-card::before { content: none; }

/* Animated brand badges (no lateral motion; gentle fade-in) */
.brand-subtitle .badge-surface { animation: fadeIn 0.6s ease-out both; }
.brand-subtitle .badge-surface:nth-child(1) { animation-delay: 0.05s; }
.brand-subtitle .badge-surface:nth-child(2) { animation-delay: 0.12s; }
.brand-subtitle .badge-surface:nth-child(3) { animation-delay: 0.18s; }

/* Subtle movement towards cursor (opt-in only) */
@media (pointer: fine) {
  body[data-cursor-attract="true"] .brand-subtitle .badge-surface {
    transform: translate3d(calc(var(--mx) * 0.8px), calc(var(--my) * 0.8px), 0);
    transition: transform 200ms ease-out;
    will-change: transform;
  }
  body[data-cursor-attract="true"] .brand-mark { transform: translate3d(calc(var(--mx) * 0.4px), calc(var(--my) * 0.4px), 0); transition: transform 200ms ease-out; }
}

/* Auto-activate animations on common elements app-wide */
.badge:not(.no-anim) { animation: fadeIn 0.6s ease-out both; }
.navbar-brand .fas:not(.no-anim),
.brand-mark i:not(.no-anim) { animation: softPulse 8s ease-in-out infinite; }

/* Large feature icons inside cards */
.card .fa-2x:not(.no-anim),
.card .fa-3x:not(.no-anim),
.card .fa-4x:not(.no-anim) { animation: softPulse 12s ease-in-out infinite; }

/* Skeleton/placeholder helpers */
.skeleton, .loading, .loading-placeholder { 
  animation: shimmer 4s infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  background-size: 1000px 100%;
}

/* Respect OS reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .anim-pulse,
  .brand-subtitle .badge-surface,
  .badge:not(.no-anim),
  .navbar-brand .fas:not(.no-anim),
  .brand-mark i:not(.no-anim),
  .card .fa-2x:not(.no-anim),
  .card .fa-3x:not(.no-anim),
  .card .fa-4x:not(.no-anim),
  .loading-shimmer,
  .skeleton, .loading, .loading-placeholder {
    animation: none !important;
    transition: none !important;
  }
}

/* Shared brand-lockup styles (used across all pages) */
.brand-lockup { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 24px); padding: clamp(6px, 1vw, 10px) clamp(10px, 2vw, 16px); border-radius: 18px; background: transparent; box-shadow: 0 8px 28px rgba(0,0,0,0.12); border: none; }
.brand-mark { position: relative; width: clamp(64px, 8.5vw, 92px); height: clamp(64px, 8.5vw, 92px); border-radius: 12px; background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 45%, rgba(0,0,0,0.18) 100%); border: 1px solid rgba(255,255,255,0.25); box-shadow: inset 0 6px 22px rgba(255,255,255,0.15), 0 10px 28px rgba(0,0,0,0.35); display: grid; place-items: center; overflow: hidden; }
.brand-mark::before { content: ''; position: absolute; inset: -2px; border-radius: 10px; background: conic-gradient(from 210deg, rgba(0,212,255,0.28), rgba(111,66,193,0.28), rgba(40,167,69,0.28), rgba(0,123,255,0.28), rgba(0,212,255,0.28)); mask: radial-gradient(circle 70% at 50% 50%, transparent 60%, black 62%); opacity: 0.28; filter: blur(0.6px); }
.brand-flag { position: absolute; right: -4px; top: -4px; width: clamp(22px, 2.6vw, 28px); height: clamp(22px, 2.6vw, 28px); display: grid; place-items: center; background: rgba(255,255,255,0.98); border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 16px rgba(0,0,0,0.25); z-index: 2; transform: rotate(-8deg); }
.badge-surface { display: inline-block; padding: 4px 10px; margin: 3px 4px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.92); font-weight: 500; backdrop-filter: blur(4px); }
.brand-title { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.78) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }

/* Center brand headers across all pages */
.page-header { text-align: center; }
.page-header .brand-lockup { display: inline-flex; margin-left: auto; margin-right: auto; }

/* Compact top spacing across most pages (exclude dashboard which has its own layout) */
body:not(.index-dashboard-page) .main-container { padding-top: 10px !important; }
body:not(.index-dashboard-page) .content-area { padding-top: 8px !important; }
body:not(.index-dashboard-page) .page-header { margin: 10px auto 8px !important; padding: 10px 14px !important; }
body:not(.index-dashboard-page) .page-header > p { margin-top: 4px !important; margin-bottom: 0 !important; }

/* Fallback for pages without main-container/content-area wrappers */
body:not(.index-dashboard-page) .container, 
body:not(.index-dashboard-page) .container-fluid {
  padding-top: 10px !important;
}

/* Subtle, elegant micro-interactions */
.card, .btn, .brand-lockup { transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease; }

/* Soft sheen on cards (no movement, no sweep) */
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; }
.card:hover::after { opacity: 1; }

/* Gentle hover ring on brand header */
.brand-lockup:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.22), 0 0 0 8px rgba(255,255,255,0.04); }

/* Buttons: soft elevation and ring on hover/focus */
.btn:hover, .btn:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,0.22), 0 0 0 6px rgba(13,110,253,0.08) !important; }
.btn:focus-visible { outline: none !important; }

/* Dropdown items: elegant focus state */
.dropdown-menu .dropdown-item:focus-visible { outline: none; box-shadow: inset 0 0 0 6px rgba(13,110,253,0.08); border-radius: 8px; }

/* Consistent light user account dropdown across pages */
.navbar .dropdown-menu {
  background: rgba(255, 255, 255, 0.10) !important; /* 90% transparent */
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  min-width: 260px !important;
  margin-top: 8px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.navbar .dropdown-menu.show { animation: dropdownSoft 240ms ease-out; transform-origin: top right; }
.navbar .dropdown-menu .dropdown-item {
  color: #e5e7eb !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.navbar .dropdown-menu .dropdown-item i { color: #cbd5e1 !important; font-size: 0.95rem; width: 18px; text-align: center; }
.navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.12) !important; color: #f8fafc !important; }
.navbar .dropdown-menu .dropdown-item:hover i { color: #e2e8f0 !important; }
.navbar .dropdown-menu .dropdown-item.text-danger { color: #b91c1c !important; }
.navbar .dropdown-menu .dropdown-item.text-danger:hover { background: rgba(185,28,28,0.08) !important; color: #7f1d1d !important; }
.navbar .dropdown-divider { border-top-color: rgba(0,0,0,0.08) !important; margin: 6px 8px !important; }
.navbar .dropdown-header { color: #6b7280 !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 10px !important; }

@keyframes dropdownSoft { from { opacity: 0; transform: translateY(-2px) scale(0.995); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Specific component overrides */
#taxProfileGuidanceBanner {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.metric-value {
    font-size: 2.2rem;
    font-weight: 600;
    color: #e5e7eb !important;
}

.month-row, .expense-item, .income-item, .insight-item {
    background: rgba(35, 35, 41, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-bottom: 8px;
    border-radius: 8px;
    padding: 12px;
}

.month-row:hover, .expense-item:hover, .income-item:hover, .insight-item:hover {
    background: rgba(40, 40, 46, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Breadcrumb specific */
.breadcrumb {
    background: rgba(40, 40, 46, 0.5) !important;
    backdrop-filter: blur(10px) !important;
}

.breadcrumb-item a {
    color: #9ca3af !important;
    text-decoration: none;
}

.breadcrumb-item.active {
    color: #d1d5db !important;
}

/* Modal dialogs */
.modal-content {
    background: rgba(40, 40, 46, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* List groups */
.list-group-item {
    background: rgba(30, 30, 34, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #d1d5db !important;
}

.list-group-item:hover {
    background: rgba(40, 40, 46, 0.6) !important;
}

/* Tabs */
.nav-tabs .nav-link {
    background: rgba(30, 30, 34, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

.nav-tabs .nav-link.active {
    background: rgba(59, 130, 246, 0.6) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #ffffff !important;
}

/* Accordion */
.accordion-item {
    background: rgba(40, 40, 46, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.accordion-header button {
    background: rgba(30, 30, 34, 0.6) !important;
    color: #d1d5db !important;
    border: none !important;
}

.accordion-body {
    background: rgba(35, 35, 41, 0.4) !important;
    color: #d1d5db !important;
}