/* * BookIt — client-facing dark mode * Activated by: html[data-theme="dark"] * Set by the anti-FOUC script in base.html.twig * Admin dark mode is separate (EasyAdmin / data-bs-theme on ) */ /* ─── Dark color tokens ───────────────────────────────────────────────────── --page-bg #0d0c11 main page background --surface-1 #141320 sections sitting on the page bg --surface-2 #1c1a2c raised cards / form containers --surface-3 #221f34 inputs, inner cards --border #2d2a40 standard border --border-hi #3a3654 slightly lighter border --text-1 #eeecf5 headings --text-2 #c4bed6 body text --text-3 #857d9e muted --purple #a07aff brand accent on dark bg --purple-tint rgba(160,122,255,0.12) ──────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; } /* ─── Body ───────────────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background-color: #0d0c11; color: #c4bed6; } /* ─── Theme-toggle button (base styles for both modes) ───────────────────── */ .bookit-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid #e5e7eb; border-radius: 8px; color: #374151; font-size: 1rem; cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; } .bookit-theme-toggle:hover { background: #f3f4f6; border-color: #d1d5db; color: #111827; } .bookit-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); } .bookit-theme-toggle i { pointer-events: none; } /* Icon swap — no JS needed; CSS reads html[data-theme] */ .bookit-icon-when-dark { display: none; } html[data-theme="dark"] .bookit-icon-when-dark { display: inline; } html[data-theme="dark"] .bookit-icon-when-light { display: none; } html[data-theme="dark"] .bookit-theme-toggle { border-color: #2d2a40; color: #a07aff; background: transparent; } html[data-theme="dark"] .bookit-theme-toggle:hover { background: #2d2a40; border-color: #3a3654; color: #eeecf5; } /* ─── Navbar / header ────────────────────────────────────────────────────── */ html[data-theme="dark"] .bookit-header, html[data-theme="dark"] .bookit-header.bg-white { background-color: #141320 !important; border-bottom-color: #2d2a40 !important; } html[data-theme="dark"] .bookit-brand { color: #eeecf5 !important; } html[data-theme="dark"] .bookit-nav-link { color: #c4bed6 !important; } html[data-theme="dark"] .bookit-nav-link:hover { color: #eeecf5 !important; } html[data-theme="dark"] .bookit-login { color: #c4bed6 !important; } html[data-theme="dark"] .bookit-login:hover { background: #2d2a40; color: #eeecf5 !important; } html[data-theme="dark"] .navbar-toggler .bi-list { color: #c4bed6 !important; } /* Mobile navbar collapse bg */ html[data-theme="dark"] .navbar-collapse.show, html[data-theme="dark"] .navbar-collapse.collapsing { background-color: #141320; padding: 0 12px 12px; border-radius: 0 0 12px 12px; } /* ─── Dropdown (user menu) ───────────────────────────────────────────────── */ html[data-theme="dark"] .dropdown-menu { background-color: #1c1a2c; border-color: #2d2a40; } html[data-theme="dark"] .dropdown-item { color: #c4bed6; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: #2d2a40; color: #eeecf5; } html[data-theme="dark"] .dropdown-item.text-danger { color: #f87171 !important; } html[data-theme="dark"] .dropdown-item.text-danger:hover { background-color: #2d1515; color: #fca5a5 !important; } html[data-theme="dark"] .dropdown-divider { border-color: #2d2a40; } html[data-theme="dark"] .dropdown-menu .fw-semibold { color: #eeecf5 !important; } html[data-theme="dark"] .dropdown-menu .border-bottom { border-color: #2d2a40 !important; } /* ─── Footer ─────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .bookit-footer { background: #141320; border-top-color: #2d2a40; color: #c4bed6; } html[data-theme="dark"] .bookit-footer a { color: #c4bed6; } html[data-theme="dark"] .bookit-footer a:hover { color: #eeecf5; } html[data-theme="dark"] .bookit-footer .muted { color: #857d9e; } html[data-theme="dark"] .bookit-footer h6 { color: #eeecf5 !important; } html[data-theme="dark"] .bookit-footer .border-top { border-color: #2d2a40 !important; } html[data-theme="dark"] .bookit-footer .btn[style*="background:#f3f4f6"] { background: #2d2a40 !important; } html[data-theme="dark"] .bookit-footer .btn[style*="background:#f3f4f6"] i { color: #c4bed6 !important; } /* ─── Hero section (home.css) ────────────────────────────────────────────── */ html[data-theme="dark"] .hero { background: #0d0c11; } html[data-theme="dark"] .hero::before { background: radial-gradient(circle, rgba(160, 122, 255, 0.13) 0%, transparent 70%); } html[data-theme="dark"] .hero::after { background: radial-gradient(circle, rgba(245, 158, 11, 0.07) 0%, transparent 70%); } html[data-theme="dark"] .hero-headline { color: #eeecf5; } html[data-theme="dark"] .hero-sub { color: #857d9e; } html[data-theme="dark"] .hero-btn-ghost { color: #c4bed6 !important; border-color: #2d2a40; } html[data-theme="dark"] .hero-btn-ghost:hover { border-color: #a07aff; color: #a07aff !important; background: rgba(160, 122, 255, 0.08); } html[data-theme="dark"] .hero-trust-item { color: #857d9e; } html[data-theme="dark"] .hero-trust-item i { color: #a07aff; } html[data-theme="dark"] .hero-trust-divider { background: #2d2a40; } html[data-theme="dark"] .hero-kicker { background: rgba(160, 122, 255, 0.12); border-color: rgba(160, 122, 255, 0.22); color: #a07aff; } html[data-theme="dark"] .hero-main-card { background: #1c1a2c; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .hero-main-card-label { color: #554f6a; } html[data-theme="dark"] .hero-main-card-title { color: #eeecf5; } html[data-theme="dark"] .hero-main-card-desc { color: #857d9e; } html[data-theme="dark"] .hero-main-card-rev { color: #554f6a; } html[data-theme="dark"] .hero-badge { background: #1c1a2c; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .hero-badge-body-title { color: #eeecf5; } html[data-theme="dark"] .hero-badge-body-sub { color: #554f6a; } html[data-theme="dark"] .hero-badge-icon.purple { background: rgba(160, 122, 255, 0.15); color: #a07aff; } html[data-theme="dark"] .hero-badge-icon.amber { background: rgba(245, 158, 11, 0.12); color: #fbbf24; } html[data-theme="dark"] .hero-badge-icon.green { background: rgba(16, 185, 129, 0.12); color: #34d399; } /* ─── Services section (base.css) ───────────────────────────────────────── */ html[data-theme="dark"] .services-section { background: #141320; } html[data-theme="dark"] .services-kicker { background: rgba(160, 122, 255, 0.12); border-color: rgba(160, 122, 255, 0.22); color: #a07aff; } html[data-theme="dark"] .services-title { color: #eeecf5; } html[data-theme="dark"] .services-subtitle { color: #857d9e; } html[data-theme="dark"] .services-empty { color: #554f6a; } html[data-theme="dark"] .carousel-arrow { background: #1c1a2c; border-color: #2d2a40; color: #c4bed6; } html[data-theme="dark"] .carousel-arrow:hover { background: #2d2a40; color: #a07aff; border-color: #3a3654; } html[data-theme="dark"] .service-card { background: #1c1a2c; border-color: #2d2a40; } html[data-theme="dark"] .service-card:hover { border-color: rgba(160, 122, 255, 0.3); box-shadow: 0 12px 36px rgba(160, 122, 255, 0.10); } html[data-theme="dark"] .service-card-icon { background: rgba(160, 122, 255, 0.12); color: #a07aff; } html[data-theme="dark"] .service-card-name { color: #eeecf5; } html[data-theme="dark"] .service-card-desc { color: #857d9e; } html[data-theme="dark"] .service-card-meta { border-top-color: #2d2a40; } html[data-theme="dark"] .service-card-duration { color: #857d9e; } html[data-theme="dark"] .service-card-duration i { color: #a07aff; } html[data-theme="dark"] .service-card-price { color: #a07aff; } /* ─── Booking section (booking.css) ─────────────────────────────────────── */ html[data-theme="dark"] .booking-section { background: radial-gradient(circle at top right, rgba(160, 122, 255, 0.10), transparent 28%), radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.08), transparent 24%), #0d0c11; } html[data-theme="dark"] .booking-form-card { background: rgba(20, 18, 32, 0.92); border-color: rgba(45, 42, 64, 0.9); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .booking-form { background: #1c1a2c; } html[data-theme="dark"] .booking-form-title { color: #eeecf5; } html[data-theme="dark"] .booking-title { color: #f5f3ff; text-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .booking-list-note { background: #1c1a2c; border-color: #2d2a40; color: #857d9e; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .booking-list-note i { color: #a07aff; } html[data-theme="dark"] .booking-list-item { background: #1c1a2c; border-color: #2d2a40; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .booking-list-date { color: #eeecf5; } html[data-theme="dark"] .booking-list-date i { color: #a07aff; } html[data-theme="dark"] .booking-list-time, html[data-theme="dark"] .booking-list-sub { color: #857d9e; } html[data-theme="dark"] .booking-detail-label { color: #857d9e; } html[data-theme="dark"] .booking-detail-value { color: #eeecf5; } html[data-theme="dark"] .booking-status-new { background: rgba(160, 122, 255, 0.16); color: #a07aff; border-color: rgba(160, 122, 255, 0.4); } html[data-theme="dark"] .booking-status-confirmed { background: rgba(52, 211, 153, 0.16); color: #34d399; border-color: rgba(52, 211, 153, 0.35); } html[data-theme="dark"] .booking-status-cancelled { background: rgba(248, 113, 113, 0.18); color: #f87171; border-color: rgba(248, 113, 113, 0.4); } html[data-theme="dark"] .booking-list-empty { background: linear-gradient(180deg, #1c1a2c 0%, #19172a 100%); border-color: #2d2a40; } html[data-theme="dark"] .booking-list-empty-icon { background: rgba(160, 122, 255, 0.16); color: #a07aff; } html[data-theme="dark"] .booking-list-empty-title { color: #eeecf5; } html[data-theme="dark"] .booking-list-empty-copy { color: #857d9e; } html[data-theme="dark"] .booking-confirmation-title { color: #eeecf5; } html[data-theme="dark"] .booking-confirmation-lead { color: #857d9e; } html[data-theme="dark"] .booking-confirmation-icon { background: linear-gradient(135deg, rgba(52, 211, 153, 0.2) 0%, rgba(160, 122, 255, 0.18) 100%); color: #34d399; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .booking-confirmation-panel { background: linear-gradient(180deg, #1c1a2c 0%, #19172a 100%); border-color: #2d2a40; box-shadow: inset 0 1px 0 rgba(34, 31, 52, 0.9); } html[data-theme="dark"] .booking-confirmation-panel-title { color: #eeecf5; } html[data-theme="dark"] .booking-confirmation-list li { color: #c4bed6; } html[data-theme="dark"] .booking-confirmation-list-icon { background: rgba(160, 122, 255, 0.2); color: #a07aff; } html[data-theme="dark"] .booking-ghost-btn { background: #1c1a2c; border-color: #2d2a40; color: #c4bed6 !important; } html[data-theme="dark"] .booking-ghost-btn:hover { border-color: #a07aff; color: #a07aff !important; background: rgba(160, 122, 255, 0.08); } html[data-theme="dark"] .booking-list-cancel-btn { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.35); color: #f87171 !important; } html[data-theme="dark"] .booking-list-cancel-btn:hover { background: rgba(248, 113, 113, 0.18); border-color: #f87171; } html[data-theme="dark"] .booking-danger-btn { background: #dc2626; border-color: #dc2626; color: #ffffff; box-shadow: 0 12px 28px rgba(220, 38, 38, 0.35); } html[data-theme="dark"] .booking-danger-btn:hover { background: #b91c1c; border-color: #b91c1c; box-shadow: 0 16px 32px rgba(185, 28, 28, 0.4); } html[data-theme="dark"] .booking-cancel-icon { background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(245, 158, 11, 0.12) 100%); color: #f87171; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .booking-cancel-invalid-icon { background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(248, 113, 113, 0.12) 100%); color: #fbbf24; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .booking-cancel-success-icon { background: linear-gradient(135deg, rgba(52, 211, 153, 0.18) 0%, rgba(160, 122, 255, 0.14) 100%); color: #34d399; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .booking-lines-title { color: #eeecf5; } html[data-theme="dark"] .booking-lines-copy { color: #857d9e; } html[data-theme="dark"] .form-row label { color: #eeecf5; } /* Inputs & selects */ html[data-theme="dark"] .booking-input-wrap input[type="text"], html[data-theme="dark"] .booking-input-wrap input[type="email"], html[data-theme="dark"] .booking-input-wrap input[type="tel"], html[data-theme="dark"] .booking-input-wrap input[type="datetime-local"], html[data-theme="dark"] .booking-input-wrap input[type="date"], html[data-theme="dark"] .booking-input-wrap input[type="time"], html[data-theme="dark"] .booking-input-wrap input[type="number"], html[data-theme="dark"] .booking-input-wrap select, html[data-theme="dark"] .booking-input-wrap textarea { border-color: #3d2d7a; background: linear-gradient(180deg, #221f34 0%, #1e1c2d 100%); color: #eeecf5; } html[data-theme="dark"] .booking-input-wrap input::placeholder, html[data-theme="dark"] .booking-input-wrap textarea::placeholder { color: #554f6a; } html[data-theme="dark"] .booking-input-wrap input:focus, html[data-theme="dark"] .booking-input-wrap select:focus, html[data-theme="dark"] .booking-input-wrap textarea:focus { border-color: #a07aff; box-shadow: 0 0 0 4px rgba(160, 122, 255, 0.15); background: #221f34; } html[data-theme="dark"] .booking-input-wrap-select select { background: linear-gradient(180deg, #221f34 0%, #1e1c2d 100%); color: #eeecf5; } html[data-theme="dark"] .booking-input-wrap-select:hover select { border-color: #a07aff; } html[data-theme="dark"] .booking-input-wrap-select select option { background: #1c1a2c; color: #eeecf5; } html[data-theme="dark"] .booking-input-wrap-select select option:checked { background: #2e2450; color: #a07aff; } html[data-theme="dark"] .booking-input-wrap-select select option:disabled { color: #554f6a; } html[data-theme="dark"] .booking-select-arrow { color: #857d9e; } html[data-theme="dark"] .booking-input-wrap-select:focus-within .booking-select-arrow { color: #a07aff; } html[data-theme="dark"] .booking-input-icon { color: #a07aff; } /* Booking line items */ html[data-theme="dark"] .booking-line-item { background: linear-gradient(180deg, #1c1a2c 0%, #19172a 100%); border-color: #2e2450; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .booking-line-title { color: #eeecf5; } html[data-theme="dark"] .booking-line-remove { background: #221f34; border-color: #2d2a40; color: #857d9e; } html[data-theme="dark"] .booking-line-remove:hover { border-color: #7f1d1d; color: #f87171; background: #2d1515; } html[data-theme="dark"] .booking-add-line-btn { border-color: rgba(160, 122, 255, 0.25); background: rgba(160, 122, 255, 0.10); color: #a07aff; } html[data-theme="dark"] .booking-add-line-btn:hover { border-color: rgba(160, 122, 255, 0.4); background: rgba(160, 122, 255, 0.15); } /* Alerts / error boxes */ html[data-theme="dark"] .booking-flash-success { background: linear-gradient(180deg, #0d2d1e 0%, #0f2e20 100%); border-color: rgba(16, 185, 129, 0.25); color: #34d399; } html[data-theme="dark"] .booking-form-errors { background: #2d1515; border-color: #7f1d1d; color: #f87171; } html[data-theme="dark"] .booking-check-slots-btn { border-color: rgba(160, 122, 255, 0.25); background: rgba(160, 122, 255, 0.10); color: #a07aff; } html[data-theme="dark"] .booking-check-slots-btn:hover { border-color: rgba(160, 122, 255, 0.4); background: rgba(160, 122, 255, 0.15); color: #c4b5fd; } html[data-theme="dark"] .booking-slots-backdrop { background: rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .booking-slots-panel { background: #1c1a2c; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .booking-slots-panel-header { border-bottom-color: #2d2a40; } html[data-theme="dark"] .booking-slots-panel-title { color: #eeecf5; } html[data-theme="dark"] .booking-slots-toggle { background: #2d2a40; border-color: #3a3654; } html[data-theme="dark"] .booking-slots-toggle-btn { color: #857d9e; } html[data-theme="dark"] .booking-slots-toggle-btn.is-active { background: #1c1a2c; color: #eeecf5; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .booking-slots-close { background: #2d2a40; color: #857d9e; } html[data-theme="dark"] .booking-slots-close:hover { background: #3a3654; color: #a07aff; } html[data-theme="dark"] .booking-slots-placeholder { color: #857d9e; } /* FullCalendar inside the dark availability modal */ html[data-theme="dark"] .availabilityCalendar .fc { --fc-border-color: #3a3654; --fc-page-bg-color: transparent; --fc-neutral-bg-color: #1c1a2c; --fc-neutral-text-color: #c9c4dc; --fc-list-event-hover-bg-color: #2d2a40; --fc-today-bg-color: rgba(160, 122, 255, 0.08); --fc-now-indicator-color: #f59e0b; color: #eeecf5; } html[data-theme="dark"] .availabilityCalendar .fc .fc-toolbar-title, html[data-theme="dark"] .availabilityCalendar .fc .fc-col-header-cell-cushion, html[data-theme="dark"] .availabilityCalendar .fc .fc-timegrid-axis-cushion, html[data-theme="dark"] .availabilityCalendar .fc .fc-timegrid-slot-label-cushion { color: #eeecf5; } html[data-theme="dark"] .availabilityCalendar .fc .fc-col-header-cell { background: #221f34; } html[data-theme="dark"] .availabilityCalendar .fc .fc-col-header-cell a { color: #eeecf5; text-decoration: none; } html[data-theme="dark"] .availabilityCalendar .fc .fc-button { background: #2d2a40; border-color: #3a3654; color: #eeecf5; box-shadow: none; } html[data-theme="dark"] .availabilityCalendar .fc .fc-button:hover, html[data-theme="dark"] .availabilityCalendar .fc .fc-button:focus { background: #3a3654; border-color: #4a4665; color: #ffffff; } html[data-theme="dark"] .availabilityCalendar .fc .fc-button-primary:not(:disabled).fc-button-active, html[data-theme="dark"] .availabilityCalendar .fc .fc-button-primary:not(:disabled):active { background: #a07aff; border-color: #a07aff; color: #14122a; } html[data-theme="dark"] .availabilityCalendar .fc .fc-timegrid-slot { border-color: #2d2a40; } html[data-theme="dark"] .availabilityCalendar .fc .fc-scrollgrid, html[data-theme="dark"] .availabilityCalendar .fc .fc-scrollgrid td, html[data-theme="dark"] .availabilityCalendar .fc .fc-scrollgrid th { border-color: #3a3654; } html[data-theme="dark"] .availabilityCalendar .fc .fc-event { box-shadow: 0 0 0 1.5px rgba(20, 18, 32, 0.85), 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); } html[data-theme="dark"] .availabilityCalendar .fc .fc-event:hover, html[data-theme="dark"] .availabilityCalendar .fc .fc-event:focus-visible { box-shadow: 0 0 0 1.5px rgba(20, 18, 32, 1), 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); } html[data-theme="dark"] .availabilityCalendar .fc .fc-event-custom { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .availabilityCalendar .fc .fc-event-unavailable { background-color: rgba(45, 42, 64, 0.95) !important; border-color: rgba(58, 54, 84, 0.95) !important; color: #c9c4dc !important; text-shadow: none; box-shadow: 0 0 0 1px rgba(20, 18, 32, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-theme="dark"] .availabilityCalendar .fc .fc-event-available_all { background-color: #15803d !important; border-color: #166534 !important; } html[data-theme="dark"] .booking-slot-details { border-color: #3a3654; background: #1c1a2c; } html[data-theme="dark"] .booking-slot-details-title, html[data-theme="dark"] .booking-slot-details-list dd { color: #eeecf5; } html[data-theme="dark"] .booking-slot-details-list dt { color: #857d9e; } html[data-theme="dark"] .booking-slot-details-list div { border-color: #2d2a40; } html[data-theme="dark"] .booking-slot-details-close { background: #2d2a40; color: #857d9e; } html[data-theme="dark"] .booking-slot-details-close:hover { background: #3a3654; color: #a07aff; } html[data-theme="dark"] .fc .fc-timegrid-event[data-event-tooltip]:hover::after, html[data-theme="dark"] .fc .fc-timegrid-event[data-event-tooltip]:focus-visible::after { background: #eeecf5; color: #1c1a2c; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] .fc .fc-timegrid-event[data-event-tooltip]:hover::before, html[data-theme="dark"] .fc .fc-timegrid-event[data-event-tooltip]:focus-visible::before { border-top-color: #eeecf5; } html[data-theme="dark"] .form-row ul, html[data-theme="dark"] .form-row .form-error, html[data-theme="dark"] .form-errors { color: #f87171; } /* ─── Auth pages (auth.css) ─────────────────────────────────────────────── */ html[data-theme="dark"] .auth-section { background: radial-gradient(circle at top right, rgba(160, 122, 255, 0.10), transparent 28%), radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.08), transparent 24%), #0d0c11; } html[data-theme="dark"] .auth-card { background: rgba(20, 18, 32, 0.88); border-color: rgba(45, 42, 64, 0.85); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .auth-kicker { background: rgba(160, 122, 255, 0.12); border-color: rgba(160, 122, 255, 0.22); color: #a07aff; } html[data-theme="dark"] .auth-title { color: #eeecf5; } html[data-theme="dark"] .auth-subtitle { color: #857d9e; } html[data-theme="dark"] .auth-label { color: #eeecf5; } html[data-theme="dark"] .auth-input-wrap input[type="text"], html[data-theme="dark"] .auth-input-wrap input[type="email"], html[data-theme="dark"] .auth-input-wrap input[type="password"], html[data-theme="dark"] .auth-input-wrap input[type="tel"] { border-color: #3d2d7a; background: linear-gradient(180deg, #221f34 0%, #1e1c2d 100%); color: #eeecf5; } html[data-theme="dark"] .auth-input-wrap input::placeholder { color: #554f6a; } html[data-theme="dark"] .auth-input-wrap input:focus { border-color: #a07aff; box-shadow: 0 0 0 4px rgba(160, 122, 255, 0.15); background: #221f34; } html[data-theme="dark"] .auth-input-icon { color: #a07aff; } html[data-theme="dark"] .auth-pw-toggle { color: #554f6a; } html[data-theme="dark"] .auth-pw-toggle:hover { color: #a07aff; background: rgba(160, 122, 255, 0.10); } html[data-theme="dark"] .auth-strength-bar span { background: #2d2a40; } html[data-theme="dark"] .auth-alert-error { background: #2d1515; border-color: #7f1d1d; color: #f87171; } html[data-theme="dark"] .auth-alert-error ul { color: #f87171; } html[data-theme="dark"] .auth-alert-success { background: linear-gradient(180deg, #0d2d1e 0%, #0f2e20 100%); border-color: rgba(16, 185, 129, 0.25); color: #34d399; } html[data-theme="dark"] .auth-alert-success a { color: #34d399; } html[data-theme="dark"] .auth-checkbox-row { color: #c4bed6; } html[data-theme="dark"] .auth-link { color: #c4bed6; text-decoration-color: #3a3654; } html[data-theme="dark"] .auth-link:hover { color: #a07aff; text-decoration-color: #a07aff; } html[data-theme="dark"] .auth-form-row ul, html[data-theme="dark"] .auth-form-row .form-error, html[data-theme="dark"] .auth-checkbox-row ul { color: #f87171; } /* Error 404 page (error.css) */ html[data-theme="dark"] .error404-section { background: radial-gradient(circle at top right, rgba(160, 122, 255, 0.12), transparent 32%), radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.08), transparent 28%), #0d0c11; } html[data-theme="dark"] .error404-code { color: #a07aff; background: rgba(160, 122, 255, 0.12); border-color: rgba(160, 122, 255, 0.24); } html[data-theme="dark"] .error404-title { color: #eeecf5; } html[data-theme="dark"] .error404-copy { color: #857d9e; } html[data-theme="dark"] .error404-reasons-title { color: #eeecf5; } html[data-theme="dark"] .error404-reasons { color: #c4bed6; } html[data-theme="dark"] .error404-btn-primary { box-shadow: 0 12px 30px rgba(77, 31, 182, 0.45); } html[data-theme="dark"] .error404-btn-ghost { background: #1c1a2c; border-color: #2d2a40; color: #c4bed6 !important; } html[data-theme="dark"] .error404-btn-ghost:hover { border-color: #a07aff; color: #a07aff !important; background: rgba(160, 122, 255, 0.08); } html[data-theme="dark"] .error404-halo { background: linear-gradient(145deg, #4c1d95 0%, #7c3aed 100%); } html[data-theme="dark"] .error404-panel-icon { background: rgba(160, 122, 255, 0.15); color: #a07aff; } html[data-theme="dark"] .error500-halo { background: linear-gradient(145deg, #7f1d1d 0%, #dc2626 100%); } html[data-theme="dark"] .error500-panel-icon { background: rgba(248, 113, 113, 0.15); color: #f87171; } html[data-theme="dark"] .error500-badge { background: #b91c1c; box-shadow: 0 18px 34px rgba(185, 28, 28, 0.45); } html[data-theme="dark"] .error500-ring { border-color: rgba(248, 113, 113, 0.22); } html[data-theme="dark"] .error404-panel, html[data-theme="dark"] .error404-chip { background: #1c1a2c; border-color: #2d2a40; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .error404-panel-pill { background: rgba(160, 122, 255, 0.28); } html[data-theme="dark"] .error404-panel-line { background: #2d2a40; } html[data-theme="dark"] .error404-badge { background: #8b5cf6; box-shadow: 0 18px 34px rgba(67, 24, 155, 0.45); } html[data-theme="dark"] .error404-ring { border-color: rgba(160, 122, 255, 0.3); }