:root {
    --surface: #fff;
    --surface_soft: #f7fafc;
    --ink: #172033;
    --muted: #788398;
    --border: #e8edf3;
    --accent: #2f80ff;
}
.appearance_control,
.language_control {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.appearance_label,
.language_control {
    position: relative;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    padding-inline-start: 9px;
    min-height: 36px;
}
.appearance_label {
    display: inline-flex;
    align-items: center;
}
.appearance_label svg,
.language_control svg {
    width: 15px;
    height: 15px;
    flex: none;
}
.appearance_label select,
.language_control select {
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: inherit !important;
    padding: 7px 6px 7px 0 !important;
    font-size: 11px !important;
    height: 34px;
    min-width: 0;
    margin: 0 !important;
}
.language_control .login_language {
    position: static !important;
    width: auto !important;
    float: none !important;
}
.login_heading .appearance_control,
.login_heading .language_control {
    margin-bottom: 18px;
    margin-inline-end: 8px;
}
.login_heading > .badge {
    display: block;
    clear: both;
}
.appearance_label:focus-within,
.language_control:focus-within {
    outline: 3px solid #86b9ff;
    outline-offset: 2px;
}
html[data-theme='dark'] {
    --surface: #17202d;
    --surface_soft: #111923;
    --ink: #e9eef8;
    --muted: #9aa9bf;
    --border: #2a3748;
    --accent: #7aaeff;
    background: var(--surface_soft);
    color: var(--ink);
}
html[data-theme='dark'] body {
    background: var(--surface_soft);
    color: var(--ink);
}
html[data-theme='dark'] body.app_page {
    --line: var(--border);
    color: var(--ink);
    background: var(--surface_soft);
}
html[data-theme='dark'] body.app_page .topbar,
html[data-theme='dark'] body.app_page .sidebar,
html[data-theme='dark'] .board_card,
html[data-theme='dark'] .profile_photo_card,
html[data-theme='dark'] .profile_form,
html[data-theme='dark'] .portal_card,
html[data-theme='dark'] .portal_table_wrap,
html[data-theme='dark'] .app_page .nav_group .nav_dropdown,
html[data-theme='dark'] .app_page .reservation_panel,
html[data-theme='dark'] .login_card {
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink);
}
html[data-theme='dark'] .board_heading h2,
html[data-theme='dark'] .board_card h3,
html[data-theme='dark'] .profile_form h2,
html[data-theme='dark'] .profile_photo_card h2,
html[data-theme='dark'] .app_page .page_heading h1,
html[data-theme='dark'] .app_page .brand,
html[data-theme='dark'] .header_company strong {
    color: var(--ink);
}
html[data-theme='dark'] .board_hint,
html[data-theme='dark'] .header_company > span,
html[data-theme='dark'] .profile_field,
html[data-theme='dark'] .app_page .page_heading p:last-child,
html[data-theme='dark'] .nav_group > summary,
html[data-theme='dark'] .nav_subgroup > summary,
html[data-theme='dark'] .app_page .nav_group .nav_dropdown a,
html[data-theme='dark'] .user_profile_link,
html[data-theme='dark'] .logout_button,
html[data-theme='dark'] .profile_preference {
    color: var(--muted);
}
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea,
html[data-theme='dark'] .profile_field input,
html[data-theme='dark'] .profile_field select,
html[data-theme='dark'] .board_refresh,
html[data-theme='dark'] .profile_button,
html[data-theme='dark'] .reference_button {
    background: var(--surface_soft);
    border-color: var(--border);
    color: var(--ink);
}
html[data-theme='dark'] select option {
    background: var(--surface);
    color: var(--ink);
}
html[data-theme='dark'] .profile_button.primary {
    background: #347ded;
    color: white;
    border-color: #347ded;
}
html[data-theme='dark'] .app_page .portal_table th,
html[data-theme='dark'] .board_table_scroll thead th {
    background: #1d2a3a;
    color: var(--ink);
}
html[data-theme='dark'] .portal_table td,
html[data-theme='dark'] .portal_table th,
html[data-theme='dark'] .profile_actions {
    border-color: var(--border);
}
html[data-theme='dark'] .movement_track {
    background: #263448;
}
html[data-theme='dark'] .movement_caption,
html[data-theme='dark'] .room_status_counts dt {
    color: var(--muted);
}
html[data-theme='dark'] .movement_caption strong,
html[data-theme='dark'] .room_status_counts dd {
    color: var(--ink);
}
html[data-theme='dark'] .quick_card,
html[data-theme='dark'] .module_card,
html[data-theme='dark'] .report_shortcut,
html[data-theme='dark'] .nano_workspace_card {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
html[data-theme='dark'] .user_avatar,
html[data-theme='dark'] .profile_portrait {
    background: #243e60;
    color: #a5cbff;
}
html[data-theme='dark'] .app_page .nav_group > summary:hover,
html[data-theme='dark'] .app_page .nav_group[open] > summary,
html[data-theme='dark'] .app_page .nav_group .nav_dropdown a:hover {
    background: #24354e;
    color: #a5cbff;
}
html[data-theme='dark'] .login_panel {
    background: radial-gradient(circle at 90% 8%, #203e4b, transparent 40%), #111923;
}
html[data-theme='dark'] .login_heading h2,
html[data-theme='dark'] .field label {
    color: var(--ink);
}
html[data-theme='dark'] .login_heading p,
html[data-theme='dark'] .remember_hint,
html[data-theme='dark'] .security_note,
html[data-theme='dark'] .login_session_note,
html[data-theme='dark'] .checkbox {
    color: var(--muted);
}
html[data-theme='dark'] .form_error {
    background: #39252d;
    color: #ffb3b9;
}
html[data-theme='dark'] .login_card .badge {
    background: #224451;
    color: #9bdfdc;
}
html[data-theme='dark'] .site_copyright,
html[data-theme='dark'] .site_copyright span {
    color: var(--muted);
}
@media (max-width: 760px) {
    .appearance_label {
        padding: 0;
    }
    .appearance_label svg {
        display: none;
    }
    .appearance_label select {
        max-width: 67px;
        padding: 6px !important;
    }
    .language_control {
        padding-inline-start: 6px;
        gap: 3px;
    }
    .language_control svg {
        width: 13px;
        height: 13px;
    }
    .language_control select {
        max-width: 63px;
    }
    .app_page .topbar_actions {
        gap: 4px;
    }
    .app_page .header_company {
        min-width: 0;
    }
    .app_page .user_avatar {
        width: 30px;
        height: 30px;
    }
    .app_page .topbar .logout_button {
        display: none;
    }
    .login_heading .appearance_label svg {
        display: block;
    }
    .login_heading .appearance_label {
        padding-inline-start: 8px;
    }
    .login_heading .appearance_label select {
        max-width: none;
    }
}
@media screen {
    html[data-appearance_mode='ocean'] {
        --surface: #ffffff;
        --surface_soft: #edf7fa;
        --ink: #173747;
        --muted: #587787;
        --border: #cde3eb;
        --accent: #087f9b;
    }
    html[data-appearance_mode='forest'] {
        --surface: #ffffff;
        --surface_soft: #f0f6f1;
        --ink: #20392c;
        --muted: #627a69;
        --border: #d4e4d7;
        --accent: #28744b;
    }
    html[data-appearance_mode='sand'] {
        --surface: #fffdf8;
        --surface_soft: #f7f2e8;
        --ink: #43382a;
        --muted: #80725c;
        --border: #e7dcc8;
        --accent: #95631a;
    }
    html[data-appearance_mode='midnight'] {
        --surface: #1c203a;
        --surface_soft: #12162b;
        --ink: #eff0ff;
        --muted: #adb3d1;
        --border: #343b5b;
        --accent: #b1a1ff;
    }
    html[data-appearance_mode] {
        --text: var(--ink);
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        body {
        background: var(--surface_soft);
        color: var(--ink);
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        body.app_page {
        --line: var(--border);
        --accent: inherit;
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        :is(
            .topbar,
            .sidebar,
            .login_card,
            .portal_card,
            .board_card,
            .profile_form,
            .reservation_panel,
            .reference_panel,
            .wf_panel
        ) {
        background: var(--surface);
        border-color: var(--border);
        color: var(--ink);
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        :is(.page_heading h1, .brand, .header_company strong, .board_card h3, .login_heading h1) {
        color: var(--ink);
    }
    html:is([data-appearance_mode='ocean'], [data-appearance_mode='forest'], [data-appearance_mode='sand'])
        :is(input, select, textarea) {
        background-color: var(--surface);
        border-color: var(--border);
        color: var(--ink);
        accent-color: var(--accent);
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        :is(.reference_button.primary, .wf_button.primary, .profile_button.primary, .login_button) {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--surface_soft);
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        .eta_tabs
        a.active {
        color: #fff;
    }
    html[data-appearance_mode='midnight'] .eta_tabs a.active {
        color: #171a30;
    }
    html:is(
            [data-appearance_mode='ocean'],
            [data-appearance_mode='forest'],
            [data-appearance_mode='sand'],
            [data-appearance_mode='midnight']
        )
        :is(.wf_table th, .portal_table th) {
        background: var(--surface_soft);
        color: var(--muted);
        border-color: var(--border);
    }
}

@media print {
    .appearance_control {
        display: none;
    }
    html[data-theme='dark'] body {
        background: white;
        color: black;
    }
}

/* Non-blocking colored progress indicator. */
html.nano_loading::after {
    content: '';
    position: fixed;
    z-index: 2147483647;
    inset: 0 0 auto;
    height: 4px;
    pointer-events: none;
    background: linear-gradient(90deg, #2563eb, #22c55e, #f59e0b, #ec4899, #2563eb);
    background-size: 200% 100%;
    animation: nano_loading_colors 1.2s linear infinite;
    box-shadow: 0 1px 6px #2563eb66;
}
@keyframes nano_loading_colors { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    html.nano_loading::after { animation: none; }
}