:root {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

.app-theme-toggle {
    position: fixed;
    z-index: 1080;
    bottom: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid rgba(33, 211, 187, 0.5);
    border-radius: 50%;
    background: #182222;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    color: #75f5e0;
}

.app-theme-toggle:hover,
.app-theme-toggle:focus-visible {
    border-color: #75f5e0;
    background: #203030;
    color: #fff;
}

html[data-theme="dark"] body {
    background-color: #111818 !important;
    background-image:
        linear-gradient(rgba(159, 215, 198, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(159, 215, 198, 0.04) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    color: #dce7df;
}

html[data-theme="dark"] .main-header,
html[data-theme="dark"] .navbar {
    background: #182222 !important;
    border-color: rgba(183, 220, 208, 0.2) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .main-header .navbar-collapse.show {
    background: #203030 !important;
    border-color: rgba(183, 220, 208, 0.2) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .migration-card,
html[data-theme="dark"] .character-preview,
html[data-theme="dark"] .character-list-card,
html[data-theme="dark"] .character-card,
html[data-theme="dark"] .security-info,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .contact-info,
html[data-theme="dark"] .reset-card,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .photo-frame,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .dashboard-header,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .admin-actions,
html[data-theme="dark"] .search-filters,
html[data-theme="dark"] .contacts-table,
html[data-theme="dark"] .log-filters,
html[data-theme="dark"] .log-viewer,
html[data-theme="dark"] .users-table,
html[data-theme="dark"] .scenario-variant-item,
html[data-theme="dark"] .search-form,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .user-info,
html[data-theme="dark"] .area-img,
html[data-theme="dark"] .area-energy,
html[data-theme="dark"] .area-basic,
html[data-theme="dark"] .area-stats,
html[data-theme="dark"] .area-power,
html[data-theme="dark"] .area-memo,
html[data-theme="dark"] .area-scenario,
html[data-theme="dark"] .area-growth,
html[data-theme="dark"] .content-container,
html[data-theme="dark"] .error-card {
    background-color: #182222 !important;
    border-color: rgba(183, 220, 208, 0.2) !important;
    color: #dce7df !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .section-header,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .table-light {
    background-color: #203030 !important;
    border-color: rgba(183, 220, 208, 0.2) !important;
    color: #dce7df !important;
}

html[data-theme="dark"] .marketing h2,
html[data-theme="dark"] .cta-section h3 {
    color: #edf6f0 !important;
}

html[data-theme="dark"] .marketing p,
html[data-theme="dark"] .cta-section p {
    color: #c2d1ca !important;
}

html[data-theme="dark"] .feature-icon {
    background: #15373b;
    color: #75f5e0;
}

html[data-theme="dark"] .contact-info h3,
html[data-theme="dark"] .info-box h6 {
    color: #75f5e0;
}

html[data-theme="dark"] .contact-info .info-item,
html[data-theme="dark"] .info-box li,
html[data-theme="dark"] .form-floating > label,
html[data-theme="dark"] .password-toggle-btn,
html[data-theme="dark"] .back-link a {
    color: #c2d1ca !important;
}

html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .dashboard-header h1,
html[data-theme="dark"] .stat-number,
html[data-theme="dark"] .activity-title,
html[data-theme="dark"] .activity-card h3,
html[data-theme="dark"] .summary-card h3,
html[data-theme="dark"] .admin-actions h3,
html[data-theme="dark"] .scenario-variant-title,
html[data-theme="dark"] .attention-title {
    color: #edf6f0 !important;
}

html[data-theme="dark"] .settings-card .info-item,
html[data-theme="dark"] .activity-item:hover,
html[data-theme="dark"] .log-line:hover {
    background-color: #203030 !important;
}

html[data-theme="dark"] .attention-item.warning,
html[data-theme="dark"] .log-line.warning {
    background-color: #463615 !important;
    border-color: #9a772d !important;
}

html[data-theme="dark"] .attention-item.danger,
html[data-theme="dark"] .log-line.error {
    background-color: #461f25 !important;
    border-color: #a4434e !important;
}

html[data-theme="dark"] .attention-item.healthy {
    background-color: #193c2b !important;
    border-color: #397857 !important;
}

html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .area-power thead th,
html[data-theme="dark"] .area-scenario thead th,
html[data-theme="dark"] .area-growth thead th {
    background-color: #203030 !important;
    border-color: rgba(183, 220, 208, 0.2) !important;
    color: #dce7df !important;
}

html[data-theme="dark"] .area-img .ch-image-container,
html[data-theme="dark"] .area-img .character-image-placeholder {
    background-color: #111818 !important;
    border-color: rgba(183, 220, 208, 0.28) !important;
}

html[data-theme="dark"] .regular-image-slot-chip,
html[data-theme="dark"] .regular-image-slot-thumb,
html[data-theme="dark"] .area-energy .bg-white {
    background-color: #203030 !important;
    border-color: rgba(183, 220, 208, 0.28) !important;
    color: #dce7df !important;
}

html[data-theme="dark"] .regular-image-slot-chip.is-active {
    background-color: #15373b !important;
    border-color: #21d3bb !important;
    color: #75f5e0 !important;
}

html[data-theme="dark"] .character-no-image,
html[data-theme="dark"] .no-image {
    background-color: #203030 !important;
    border-color: rgba(183, 220, 208, 0.28) !important;
    color: #9eb2aa !important;
}

html[data-theme="dark"] .character-detail-page {
    --paper: #182222;
    --paper-line: #58736c;
    --ink: #dce7df;
    --muted: #9eb2aa;
    --accent: #75f5e0;
    --gold: #ffdb8a;
    --shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .character-detail-page .sheet,
html[data-theme="dark"] .character-detail-page .sheet-inner {
    background: #182222 !important;
}

html[data-theme="dark"] .character-detail-page .mode-badge,
html[data-theme="dark"] .character-detail-page .summary-chip,
html[data-theme="dark"] .character-detail-page .hero-tag,
html[data-theme="dark"] .character-detail-page .aptitude-check,
html[data-theme="dark"] .character-detail-page .note-toggle-indicator,
html[data-theme="dark"] .character-detail-page .note-box {
    background-color: #203030 !important;
    border-color: rgba(183, 220, 208, 0.28) !important;
    color: #dce7df;
}

html[data-theme="dark"] .character-detail-page .ability-card.body {
    background: linear-gradient(180deg, rgba(183, 58, 50, 0.2), transparent) !important;
}

html[data-theme="dark"] .character-detail-page .ability-card.mental {
    background: linear-gradient(180deg, rgba(39, 87, 182, 0.22), transparent) !important;
}

html[data-theme="dark"] .character-detail-page .ability-card.environment {
    background: linear-gradient(180deg, rgba(52, 128, 88, 0.22), transparent) !important;
}

html[data-theme="dark"] .character-detail-page .note-panel,
html[data-theme="dark"] .character-detail-page .collapsible-content {
    background: linear-gradient(180deg, rgba(198, 146, 43, 0.16), transparent) !important;
}

html[data-theme="dark"] .data-table td {
    border-color: rgba(183, 220, 208, 0.2) !important;
    color: #dce7df;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-check-input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #111818 !important;
    border-color: rgba(183, 220, 208, 0.28) !important;
    color: #edf6f0 !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8fa49c !important;
}

html[data-theme="dark"] .form-floating > .form-control::placeholder {
    color: transparent !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #21d3bb !important;
    box-shadow: 0 0 0 0.2rem rgba(33, 211, 187, 0.15) !important;
}

html[data-theme="dark"] .form-check-input:checked {
    background-color: #198754 !important;
    border-color: #2fa36b !important;
}

html[data-theme="dark"] .auth-card .nav-tabs {
    background-color: #111818;
    border-color: rgba(183, 220, 208, 0.2);
}

html[data-theme="dark"] .auth-card .nav-tabs .nav-link.active {
    background-color: #203030;
    color: #75f5e0;
}

html[data-theme="dark"] .social-divider span {
    background-color: #182222;
    color: #9eb2aa;
}

html[data-theme="dark"] .btn-google {
    background-color: #182222;
    color: #ff9a8d;
    border-color: #e76d5c;
}

html[data-theme="dark"] .featured-card {
    background-color: #182222 !important;
    border-color: rgba(183, 220, 208, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .featured-card-title {
    color: #edf6f0 !important;
}

html[data-theme="dark"] .featured-card-meta {
    color: #9eb2aa !important;
}

html[data-theme="dark"] .featured-system {
    color: #75f5e0 !important;
}

html[data-theme="dark"] .featured-image-placeholder {
    background-color: #203030 !important;
    color: #75f5e0 !important;
}

html[data-theme="dark"] .featured-section .btn-outline-primary {
    border-color: #21d3bb;
    color: #75f5e0;
}

html[data-theme="dark"] .featured-section .btn-outline-primary:hover,
html[data-theme="dark"] .featured-section .btn-outline-primary:focus-visible {
    background-color: #21d3bb;
    border-color: #21d3bb;
    color: #111818;
}

html[data-theme="dark"] .featured-section .btn-outline-secondary {
    border-color: rgba(183, 220, 208, 0.45);
    color: #dce7df;
}

html[data-theme="dark"] .featured-section .btn-outline-secondary:hover,
html[data-theme="dark"] .featured-section .btn-outline-secondary:focus-visible {
    background-color: #203030;
    border-color: #75f5e0;
    color: #75f5e0;
}

html[data-theme="dark"] .featured-section .carousel-control-prev-icon,
html[data-theme="dark"] .featured-section .carousel-control-next-icon {
    background-color: #203030;
    border: 1px solid rgba(183, 220, 208, 0.35);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .form-text {
    color: #9eb2aa !important;
}

html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dce7df;
    --bs-table-border-color: rgba(183, 220, 208, 0.2);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
    --bs-table-hover-bg: rgba(33, 211, 187, 0.08);
    color: #dce7df;
}

html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .pagination .page-link {
    border-color: rgba(183, 220, 208, 0.2) !important;
}

html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .pagination .page-link,
html[data-theme="dark"] .dropdown-item {
    background-color: #182222;
    color: #dce7df;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: #203030;
    color: #75f5e0;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] hr {
    border-color: rgba(183, 220, 208, 0.2) !important;
}

html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-secondary {
    background-color: #203030;
    border-color: rgba(183, 220, 208, 0.2);
    color: #dce7df;
}

html[data-theme="dark"] .alert-info {
    background-color: #15373b;
    border-color: #2c7378;
    color: #dcf7f4;
}

html[data-theme="dark"] .alert-success {
    background-color: #193c2b;
    border-color: #397857;
    color: #e0f7e9;
}

html[data-theme="dark"] .alert-warning {
    background-color: #463615;
    border-color: #9a772d;
    color: #fff0c7;
}

html[data-theme="dark"] .alert-danger {
    background-color: #461f25;
    border-color: #a4434e;
    color: #ffe2e4;
}

html[data-theme="dark"] code,
html[data-theme="dark"] kbd {
    background-color: #111818;
    color: #ffdb8a;
}

html[data-theme="dark"] mark {
    background-color: #f5bb5b;
    color: #1b1a13;
}

html[data-theme="dark"] .error-message,
html[data-theme="dark"] .error-details {
    color: #dce7df !important;
}

@media (max-width: 767.98px) {
    .app-theme-toggle {
        bottom: 0.75rem;
        left: 0.75rem;
    }

    .admin-page {
        padding-top: 0 !important;
    }

    .admin-page .navbar.fixed-top {
        position: static !important;
    }
}