:root {
    color-scheme: light;
    --theme-toggle-bg: rgba(255, 255, 255, 0.96);
    --theme-toggle-border: rgba(15, 23, 42, 0.12);
    --theme-toggle-color: #0f172a;
    --theme-toggle-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --dm-bg: #0d1117;
    --dm-bg-elevated: #161b22;
    --dm-bg-subtle: #21262d;
    --dm-bg-soft: #1c2128;
    --dm-text: #e6edf3;
    --dm-text-muted: #9da7b3;
    --dm-border: #30363d;
    --dm-link: #58a6ff;
    --dm-link-hover: #79c0ff;
    --dm-primary: #2f81f7;
    --dm-primary-hover: #1f6feb;
    --dm-secondary: #30363d;
    --dm-secondary-hover: #3d444d;
    --dm-success: #238636;
    --dm-success-hover: #2ea043;
    --dm-danger: #da3633;
    --dm-danger-hover: #f85149;
    --dm-warning: #d29922;
    --dm-warning-text: #0d1117;
    --dm-info: #1f6feb;
    --dm-shadow: 0 20px 42px rgba(1, 4, 9, 0.42);
    --theme-toggle-bg: rgba(22, 27, 34, 0.94);
    --theme-toggle-border: rgba(240, 246, 252, 0.1);
    --theme-toggle-color: #e6edf3;
    --theme-toggle-shadow: 0 16px 36px rgba(1, 4, 9, 0.45);
}

html,
body {
    transition: background-color 0.18s ease, color 0.18s ease;
}

body {
    position: relative;
    isolation: isolate;
}

#site-background-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    mix-blend-mode: normal;
}

#site-background-overlay-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 96vw;
    max-height: 96dvh;
    object-fit: contain;
    opacity: var(--site-overlay-opacity, 0.18);
    transform: scale(var(--site-overlay-scale, 1));
    transform-origin: center center;
    filter: saturate(0.95);
}

:root[data-theme="dark"] body {
    background: radial-gradient(circle at top, rgba(47, 129, 247, 0.14), transparent 24%), linear-gradient(180deg, #0d1117 0%, #11161d 100%) !important;
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] #site-background-overlay-image {
    filter: saturate(0.82) brightness(0.56);
}

@media (max-width: 860px) {
    #site-background-overlay-image {
        max-width: 92vw;
        max-height: 92dvh;
    }
}

@media (max-width: 860px) and (orientation: portrait) {
    #site-background-overlay-image {
        max-width: 84vw;
        max-height: 84dvh;
    }
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] dt,
:root[data-theme="dark"] dd,
:root[data-theme="dark"] label,
:root[data-theme="dark"] small,
:root[data-theme="dark"] span,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] legend,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th {
    color: var(--dm-text);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6 {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] a {
    color: var(--dm-link) !important;
}

:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] a:focus {
    color: var(--dm-link-hover) !important;
}

:root[data-theme="dark"] .container,
:root[data-theme="dark"] form,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .meta-card,
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .forwarding-section,
:root[data-theme="dark"] .interest-popover,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .jumbotron,
:root[data-theme="dark"] .note-editor,
:root[data-theme="dark"] .note-toolbar,
:root[data-theme="dark"] .note-statusbar,
:root[data-theme="dark"] .note-modal-content,
:root[data-theme="dark"] .select-selected,
:root[data-theme="dark"] .select-items,
:root[data-theme="dark"] #user-list,
:root[data-theme="dark"] #device-hint,
:root[data-theme="dark"] #drop-zone,
:root[data-theme="dark"] #nfc-status,
:root[data-theme="dark"] .fc-theme-standard td,
:root[data-theme="dark"] .fc-theme-standard th,
:root[data-theme="dark"] .fc-scrollgrid,
:root[data-theme="dark"] table,
:root[data-theme="dark"] .table {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] form,
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .forwarding-section,
:root[data-theme="dark"] .interest-popover,
:root[data-theme="dark"] .meta-card {
    border: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .fc-theme-standard td,
:root[data-theme="dark"] .fc-theme-standard th,
:root[data-theme="dark"] .fc-scrollgrid,
:root[data-theme="dark"] .dropdown-divider,
:root[data-theme="dark"] .note-editor.note-frame,
:root[data-theme="dark"] .note-toolbar {
    border-color: var(--dm-border) !important;
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary,
:root[data-theme="dark"] .text-body-secondary,
:root[data-theme="dark"] .meta,
:root[data-theme="dark"] .card-text,
:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] .device-meta,
:root[data-theme="dark"] .custom-qr-help,
:root[data-theme="dark"] #manualPorkbunInfo,
:root[data-theme="dark"] #scanExternalIpInfo,
:root[data-theme="dark"] #autoPorkbunInfo {
    color: var(--dm-text-muted) !important;
}

:root[data-theme="dark"] .hero {
    background: linear-gradient(180deg, #161b22 0%, #11161d 100%) !important;
}

:root[data-theme="dark"] .title,
:root[data-theme="dark"] .month-year,
:root[data-theme="dark"] .date-num {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .calendar-container {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

:root[data-theme="dark"] .calendar-header {
    background: linear-gradient(180deg, #161b22 0%, #11161d 100%) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] .nav-btn {
    background: var(--dm-bg-subtle) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] .nav-btn:hover {
    background: #262c36 !important;
    border-color: #3b4552 !important;
}

:root[data-theme="dark"] thead tr,
:root[data-theme="dark"] thead th {
    background: #11161d !important;
    color: var(--dm-text-muted) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] tbody td {
    background: var(--dm-bg-elevated) !important;
    border-right: 1px solid var(--dm-border) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] tbody td:hover {
    background: #1b222c !important;
}

:root[data-theme="dark"] .other-month {
    background: #11161d !important;
    opacity: 0.72;
}

:root[data-theme="dark"] .event a {
    background: rgba(47, 129, 247, 0.16) !important;
    border: 1px solid rgba(88, 166, 255, 0.34) !important;
    color: #c9e6ff !important;
}

:root[data-theme="dark"] .event a:hover {
    background: rgba(47, 129, 247, 0.26) !important;
    border-color: rgba(121, 192, 255, 0.56) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .section,
:root[data-theme="dark"] .meta-card {
    background: var(--dm-bg-elevated) !important;
}

:root[data-theme="dark"] .forwarding-section {
    background: rgba(31, 111, 235, 0.08) !important;
    border-style: dashed !important;
}

:root[data-theme="dark"] .interest-trigger {
    background: var(--dm-bg-subtle) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] .interest-trigger:hover {
    background: #262c36 !important;
    border-color: #3b4552 !important;
}

:root[data-theme="dark"] .interest-popover li:nth-child(odd) {
    background: var(--dm-bg-subtle) !important;
}

:root[data-theme="dark"] .label,
:root[data-theme="dark"] .meta-label,
:root[data-theme="dark"] .forwarding-label,
:root[data-theme="dark"] .interest-popover h4 {
    color: var(--dm-text-muted) !important;
}

:root[data-theme="dark"] .description,
:root[data-theme="dark"] .location-text,
:root[data-theme="dark"] .meta-value,
:root[data-theme="dark"] .forwarding-label span,
:root[data-theme="dark"] .event-instructions-content,
:root[data-theme="dark"] #interestEmptyText {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .status.live {
    color: #3fb950 !important;
    background: rgba(63, 185, 80, 0.15) !important;
    border-color: rgba(63, 185, 80, 0.35) !important;
}

:root[data-theme="dark"] .status.soon {
    color: #79c0ff !important;
    background: rgba(88, 166, 255, 0.14) !important;
    border-color: rgba(88, 166, 255, 0.3) !important;
}

:root[data-theme="dark"] .status.ended {
    color: #ff7b72 !important;
    background: rgba(248, 81, 73, 0.14) !important;
    border-color: rgba(248, 81, 73, 0.32) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable,
:root[data-theme="dark"] .note-modal-content input,
:root[data-theme="dark"] .note-modal-content textarea,
:root[data-theme="dark"] #verification-code,
:root[data-theme="dark"] #code-input,
:root[data-theme="dark"] #user-input,
:root[data-theme="dark"] .link-row input {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 1;
}

:root[data-theme="dark"] .select-items div,
:root[data-theme="dark"] .user-item,
:root[data-theme="dark"] .dropdown-item {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .select-items div:hover,
:root[data-theme="dark"] .select-items .same-as-selected,
:root[data-theme="dark"] .user-item:hover,
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
    background: var(--dm-bg-subtle) !important;
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] button,
:root[data-theme="dark"] input[type="submit"],
:root[data-theme="dark"] .btn-submit,
:root[data-theme="dark"] .copy-btn,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-outline-primary {
    background: var(--dm-primary) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240, 246, 252, 0.08) !important;
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] input[type="submit"]:hover,
:root[data-theme="dark"] .btn-submit:hover,
:root[data-theme="dark"] .copy-btn:hover,
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--dm-primary-hover) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-dark,
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark {
    background: var(--dm-secondary) !important;
    color: var(--dm-text) !important;
    border: 1px solid var(--dm-border) !important;
}

:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-dark:hover,
:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-dark:hover {
    background: var(--dm-secondary-hover) !important;
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .btn-success,
:root[data-theme="dark"] .btn-outline-success {
    background: var(--dm-success) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240, 246, 252, 0.08) !important;
}

:root[data-theme="dark"] .btn-success:hover,
:root[data-theme="dark"] .btn-outline-success:hover {
    background: var(--dm-success-hover) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .btn-outline-danger,
:root[data-theme="dark"] .btn-closed {
    background: var(--dm-danger) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240, 246, 252, 0.08) !important;
}

:root[data-theme="dark"] .btn-danger:hover,
:root[data-theme="dark"] .btn-outline-danger:hover,
:root[data-theme="dark"] .btn-closed:hover {
    background: var(--dm-danger-hover) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .btn-warning,
:root[data-theme="dark"] .btn-outline-warning {
    background: var(--dm-warning) !important;
    color: var(--dm-warning-text) !important;
    border: 1px solid rgba(13, 17, 23, 0.12) !important;
}

:root[data-theme="dark"] .btn-warning:hover,
:root[data-theme="dark"] .btn-outline-warning:hover {
    filter: brightness(1.04);
    color: var(--dm-warning-text) !important;
}

:root[data-theme="dark"] .btn-info,
:root[data-theme="dark"] .btn-outline-info {
    background: var(--dm-info) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240, 246, 252, 0.08) !important;
}

:root[data-theme="dark"] .btn-info:hover,
:root[data-theme="dark"] .btn-outline-info:hover {
    filter: brightness(1.05);
    color: #ffffff !important;
}

:root[data-theme="dark"] .map-btn {
    background: linear-gradient(180deg, #238636 0%, #2ea043 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240, 246, 252, 0.08) !important;
}

:root[data-theme="dark"] .map-btn:hover {
    background: linear-gradient(180deg, #2ea043 0%, #3fb950 100%) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] button:disabled,
:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] input[type="submit"]:disabled {
    background: #484f58 !important;
    color: #c9d1d9 !important;
    border-color: #484f58 !important;
    opacity: 1;
}

:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .alert,
:root[data-theme="dark"] .event-status-badge {
    border-color: var(--dm-border) !important;
}

:root[data-theme="dark"] .badge.badge-secondary,
:root[data-theme="dark"] .badge.badge-pill,
:root[data-theme="dark"] .badge.text-bg-light,
:root[data-theme="dark"] .badge.badge-light {
    background: var(--dm-bg-subtle) !important;
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .alert-light,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .text-success,
:root[data-theme="dark"] .success {
    color: #56d364 !important;
}

:root[data-theme="dark"] .text-danger,
:root[data-theme="dark"] .failed,
:root[data-theme="dark"] .error-message {
    color: #ff7b72 !important;
}

:root[data-theme="dark"] .text-warning {
    color: #e3b341 !important;
}

:root[data-theme="dark"] .text-info {
    color: #79c0ff !important;
}

:root[data-theme="dark"] .close,
:root[data-theme="dark"] button.close {
    color: var(--dm-text) !important;
    text-shadow: none !important;
    opacity: 0.8;
}

:root[data-theme="dark"] .close:hover,
:root[data-theme="dark"] button.close:hover {
    opacity: 1;
}

:root[data-theme="dark"] .fc-col-header-cell-cushion,
:root[data-theme="dark"] .fc-daygrid-day-number,
:root[data-theme="dark"] .fc-toolbar-title {
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] .fc-daygrid-day,
:root[data-theme="dark"] .fc-scrollgrid-section > *,
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background: var(--dm-bg-soft) !important;
}

:root[data-theme="dark"] .fc-event,
:root[data-theme="dark"] .fc-daygrid-event {
    background: rgba(88, 166, 255, 0.18) !important;
    border-color: rgba(88, 166, 255, 0.45) !important;
    color: var(--dm-text) !important;
}

:root[data-theme="dark"] #drop-zone {
    border: 2px dashed #58a6ff !important;
    color: var(--dm-link) !important;
}

:root[data-theme="dark"] #drop-zone.drag-over {
    background: rgba(88, 166, 255, 0.12) !important;
    border-color: #79c0ff !important;
}

:root[data-theme="dark"] #nfc-status {
    background: rgba(210, 153, 34, 0.12) !important;
    color: #f2cc60 !important;
    border: 1px solid rgba(210, 153, 34, 0.45) !important;
}

#theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483647;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 1px solid var(--theme-toggle-border);
    background: var(--theme-toggle-bg);
    color: var(--theme-toggle-color);
    box-shadow: var(--theme-toggle-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: transform 0.14s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#theme-toggle:focus,
#theme-toggle:active,
#theme-toggle:hover,
#theme-toggle:focus-visible {
    transform: translateY(-1px);
    outline: none;
    box-shadow: var(--theme-toggle-shadow);
}

#theme-toggle .theme-toggle-icon-dark,
:root[data-theme="dark"] #theme-toggle .theme-toggle-icon-light {
    display: none;
}

:root[data-theme="dark"] #theme-toggle .theme-toggle-icon-dark {
    display: inline-block;
}

#theme-toggle .theme-toggle-icon-light {
    display: inline-block;
}

@media (max-width: 640px) {
    #theme-toggle {
        right: 14px;
        bottom: 14px;
        width: 46px;
        height: 46px;
    }
}