:root {
    color-scheme: light;
    --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --indigo-100: #e0e7ff;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --green-600: #16a34a;
    --surface: #ffffff;
    --page: var(--gray-100);
    --text: var(--gray-900);
    --muted: var(--gray-600);
    --border: var(--gray-200);
    --container: 80rem;
    --radius: .375rem;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; font-family: var(--font-sans); line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--page); font-size: .875rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font: inherit; }
button, [role="button"] { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1rem; }

/* Lithe logo */
.lithe-logo { display: block; width: auto; height: auto; color: var(--gray-800); overflow: visible; }
.lithe-logo-nav { width: 7rem; min-width: 7rem; height: 2.625rem; }
.lithe-logo-guest { width: 10rem; }
.lithe-logo-start { width: clamp(17rem, 38vw, 31rem); }

/* Public welcome page */
.start-body { min-height: 100vh; color: var(--gray-900); background: #fff; }
.start-page { min-height: 100vh; display: grid; place-items: center; padding: 6rem 1.5rem 2rem; }
.start-actions { position: fixed; z-index: 20; top: 1.5rem; right: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.start-actions > a:not(.button) { color: var(--gray-700); font-weight: 500; }
.start-actions > a:not(.button):hover { color: var(--gray-900); }

/* Controls matching the native Breeze Blade scaffold */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.375rem;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: #fff;
    background: var(--gray-800);
    box-shadow: var(--shadow-sm);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.25rem;
    text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.button:hover, .button:focus { background: var(--gray-700); }
.button:active { background: var(--gray-900); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .user-trigger:focus-visible, .mobile-toggle:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--indigo-500), 0 0 0 4px #fff;
}
.button-small { min-height: 2.25rem; padding: .375rem 1.25rem; font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.button-secondary { color: var(--gray-700); background: #fff; border-color: var(--gray-300); }
.button-secondary:hover, .button-secondary:focus { color: var(--gray-800); background: var(--gray-50); }
.button-danger { background: var(--red-600); }
.button-danger:hover, .button-danger:focus { background: var(--red-500); }
.button-danger:active { background: var(--red-700); }
.text-button, .inline-button { padding: 0; border: 0; color: var(--gray-600); background: transparent; text-decoration: underline; text-underline-offset: 2px; }
.text-button:hover, .inline-button:hover { color: var(--gray-900); }
.text-link { color: var(--gray-600); font-size: .875rem; text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--gray-900); }

.field { display: grid; gap: .5rem; }
.field label { color: var(--gray-700); font-size: .875rem; font-weight: 500; line-height: 1.25rem; }
input, select, textarea {
    width: 100%;
    min-height: 2.625rem;
    padding: .5rem .75rem;
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--indigo-500); outline: none; box-shadow: 0 0 0 1px var(--indigo-500); }
input::placeholder, textarea::placeholder { color: var(--gray-400); }
.field-error { margin: 0; color: var(--red-600); font-size: .875rem; }
.form-stack { display: grid; gap: 1rem; }
.form-intro { margin: 0 0 1rem; color: var(--gray-600); line-height: 1.5; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-actions-end { justify-content: flex-end; margin-top: .25rem; }
.checkbox-row { display: inline-flex; width: max-content; align-items: center; gap: .5rem; color: var(--gray-600); }
.checkbox-row input { width: 1rem; height: 1rem; min-height: 1rem; margin: 0; border-radius: .25rem; accent-color: var(--indigo-600); }
.save-row { display: flex; align-items: center; gap: 1rem; }
.saved-message { color: var(--gray-600); font-size: .875rem; }
.split-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }

/* Guest authentication layout */
.guest-body { min-height: 100vh; color: var(--gray-900); background: var(--gray-100); }
.guest-page { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.guest-shell { width: 100%; max-width: 28rem; }
.guest-logo { display: flex; width: max-content; margin: 0 auto 1.5rem; align-items: center; justify-content: center; }
.guest-card { width: 100%; padding: 1rem 1.5rem; overflow: hidden; background: #fff; border-radius: 0; box-shadow: var(--shadow-md); }
.alert { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: var(--radius); font-size: .875rem; line-height: 1.5; }
.alert-success { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }

/* Authenticated application layout */
.app-body { min-height: 100vh; background: var(--gray-100); }
.app-shell { min-height: 100vh; background: var(--gray-100); }
.app-nav { position: relative; z-index: 30; background: #fff; border-bottom: 1px solid var(--gray-100); }
.app-nav-inner { display: flex; height: 4rem; align-items: center; justify-content: space-between; }
.app-nav-start { display: flex; height: 100%; align-items: center; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.desktop-nav { display: none; height: 100%; align-items: stretch; margin-left: 2.5rem; gap: 2rem; }
.nav-link { display: inline-flex; align-items: center; padding: .25rem 0 0; border-bottom: 2px solid transparent; color: var(--gray-500); font-size: .875rem; font-weight: 500; line-height: 1.25rem; transition: color .15s ease, border-color .15s ease; }
.nav-link:hover { color: var(--gray-700); border-bottom-color: var(--gray-300); }
.nav-link.is-active { color: var(--gray-900); border-bottom-color: var(--indigo-400); }
.desktop-user { display: none; position: relative; margin-left: 1.5rem; }
.user-trigger { display: inline-flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border: 0; border-radius: var(--radius); color: var(--gray-500); background: #fff; font-size: .875rem; font-weight: 500; line-height: 1rem; transition: color .15s ease; }
.user-trigger:hover { color: var(--gray-700); }
.user-trigger .dropdown-chevron { width: 1rem; height: 1rem; margin-left: -.25rem; transition: transform .15s ease; }
[data-dropdown].is-open .user-trigger .dropdown-chevron { transform: rotate(180deg); }
.nav-avatar, .mobile-avatar, .profile-avatar { display: block; flex: 0 0 auto; border-radius: .375rem; background: var(--gray-200); }
.nav-avatar { width: 2rem; height: 2rem; }
.dropdown-menu { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 50; width: 12rem; padding: .25rem 0; overflow: hidden; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.dropdown-menu::before { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05); content: ""; pointer-events: none; }
.dropdown-menu a, .dropdown-menu button { position: relative; display: block; width: 100%; padding: .5rem 1rem; border: 0; color: var(--gray-700); background: transparent; font-size: .875rem; line-height: 1.25rem; text-align: left; transition: color .15s ease, background-color .15s ease; }
.dropdown-menu a:hover, .dropdown-menu button:hover { color: var(--gray-900); background: var(--gray-100); }
.mobile-toggle { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; padding: .5rem; border: 0; border-radius: var(--radius); color: var(--gray-400); background: transparent; transition: color .15s ease, background-color .15s ease; }
.mobile-toggle:hover, .mobile-toggle:focus { color: var(--gray-500); background: var(--gray-100); }
.mobile-toggle svg { width: 1.5rem; height: 1.5rem; }
.mobile-toggle .icon-close { display: none; }
.mobile-toggle.is-open .icon-open { display: none; }
.mobile-toggle.is-open .icon-close { display: block; }
.mobile-nav { padding: .5rem 0 .25rem; background: #fff; }
.mobile-nav-links { display: grid; gap: .25rem; padding-bottom: .75rem; }
.mobile-nav-link { display: block; width: 100%; padding: .625rem 1rem; border: 0; border-left: 4px solid transparent; color: var(--gray-600); background: transparent; font-size: 1rem; font-weight: 500; line-height: 1.5rem; text-align: left; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.mobile-nav-link:hover { color: var(--gray-800); background: var(--gray-50); border-left-color: var(--gray-300); }
.mobile-nav-link.is-active { color: var(--indigo-700, #4338ca); background: #eef2ff; border-left-color: var(--indigo-400); }
.mobile-user-block { padding: 1rem 0 .25rem; border-top: 1px solid var(--gray-200); }
.mobile-user-profile { display: flex; align-items: center; gap: .75rem; padding: 0 1rem; }
.mobile-user-details { display: grid; min-width: 0; gap: .125rem; padding: 0; }
.mobile-user-details strong { color: var(--gray-800); font-size: 1rem; font-weight: 500; line-height: 1.5rem; }
.mobile-user-details span { color: var(--gray-500); font-size: .875rem; font-weight: 500; line-height: 1.25rem; }
.mobile-user-actions { display: grid; gap: .25rem; margin-top: .75rem; }
.page-header { background: #fff; box-shadow: var(--shadow-sm); }
.page-header h1 { margin: 0; padding: 1.5rem 0; color: var(--gray-800); font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; }
.page-main { padding: 3rem 0; }
.page-main > .app-container { padding-inline: 0; }
.content-stack, .profile-stack { display: grid; gap: 1.5rem; }
.panel { overflow: hidden; background: #fff; border-radius: .5rem; box-shadow: var(--shadow-sm); }
.panel-body { padding: 1.5rem; color: var(--gray-900); }
.panel-padded { padding: 2rem; }
.panel p { margin: 0; }
.form-width { width: 100%; max-width: 36rem; }

.profile-avatar-row { display: flex; align-items: center; gap: 1.5rem; }
.profile-avatar { width: 6rem; height: 6rem; box-shadow: 0 0 0 1px rgb(17 24 39 / .08); }
.profile-avatar-copy { display: grid; justify-items: start; gap: .5rem; min-width: 0; }
.profile-avatar-copy strong { color: var(--gray-900); font-size: 1rem; font-weight: 600; }
.profile-avatar-copy p { max-width: 32rem; color: var(--gray-600); line-height: 1.5; }
.section-heading { margin-bottom: 1.5rem; }
.section-heading h2 { margin: 0; color: var(--gray-900); font-size: 1.125rem; font-weight: 500; line-height: 1.75rem; }
.section-heading p { margin: .25rem 0 0; color: var(--gray-600); font-size: .875rem; line-height: 1.5rem; }
.verification-note { margin: 0; color: var(--gray-600); font-size: .875rem; }

/* Delete account dialog */
.dialog { width: min(calc(100% - 2rem), 36rem); padding: 0; border: 0; border-radius: .5rem; background: transparent; box-shadow: var(--shadow-lg); }
.dialog::backdrop { background: rgb(17 24 39 / .55); }
.dialog-card { padding: 1.5rem; background: #fff; border-radius: .5rem; }
.dialog-card .field { margin-bottom: 1.5rem; }

/* Production error page */
.error-body { display: grid; min-height: 100vh; place-items: center; margin: 0; color: #0f172a; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.error-content { display: flex; align-items: center; gap: 1.5rem; }
.error-content strong, .error-content h1 { font-size: 1.5rem; line-height: 1; }
.error-content strong { font-weight: 700; }
.error-content span { width: 1px; height: 2rem; background: #cbd5e1; }
.error-content h1 { margin: 0; font-weight: 400; }

@media (min-width: 40rem) {
    .app-container { padding-inline: 1.5rem; }
    .page-main > .app-container { padding-inline: 1.5rem; }
    .desktop-nav, .desktop-user { display: flex; align-items: center; }
    .mobile-toggle { display: none; }
    .guest-page { padding-top: 0; }
    .guest-card { border-radius: .5rem; }
    .panel-padded { padding: 2rem; }
}

@media (min-width: 64rem) {
    .app-container { padding-inline: 2rem; }
    .page-main > .app-container { padding-inline: 2rem; }
}

@media (max-width: 39.99rem) {
    .page-main { padding: 2rem 0; }
    .panel { border-radius: 0; }
    .panel-padded { padding: 1rem; }
    .panel-body { padding: 1.5rem; }
    .form-actions-end { align-items: stretch; flex-direction: column-reverse; }
    .form-actions-end .button { width: 100%; }
    .split-actions { align-items: stretch; flex-direction: column; }
    .profile-avatar-row { align-items: flex-start; flex-direction: column; }
    .split-actions .button { width: 100%; }
    .start-actions { top: 1rem; right: 1rem; }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --surface: var(--gray-800);
        --page: var(--gray-900);
        --text: var(--gray-100);
        --muted: var(--gray-400);
        --border: var(--gray-700);
    }

    .start-body { color: var(--gray-100); background: #0a0a0a; }
    .start-actions > a:not(.button) { color: var(--gray-300); }
    .start-actions > a:not(.button):hover { color: #fff; }
    .lithe-logo { color: var(--gray-200); }
    .guest-body, .guest-page, .app-body, .app-shell { background: var(--gray-900); }
    .guest-card, .app-nav, .mobile-nav, .page-header, .panel, .dialog-card, .dropdown-menu, .user-trigger { background: var(--gray-800); }
    .app-nav { border-bottom-color: var(--gray-700); }
    .page-header h1, .section-heading h2, .panel-body, .mobile-user-details strong, .profile-avatar-copy strong { color: var(--gray-200); }
    .section-heading p, .form-intro, .verification-note, .saved-message, .checkbox-row, .text-link, .text-button, .inline-button, .profile-avatar-copy p { color: var(--gray-400); }
    .text-link:hover, .text-button:hover, .inline-button:hover { color: var(--gray-100); }
    .field label { color: var(--gray-300); }
    input, select, textarea { color: var(--gray-300); background: var(--gray-900); border-color: var(--gray-700); }
    .button { color: var(--gray-800); background: var(--gray-200); }
    .button:hover, .button:focus { background: #fff; }
    .button:active { background: var(--gray-300); }
    .button-secondary { color: var(--gray-300); background: var(--gray-800); border-color: var(--gray-600); }
    .button-secondary:hover { background: var(--gray-700); }
    .button-danger { color: #fff; background: var(--red-600); }
    .user-trigger { color: var(--gray-400); }
    .user-trigger:hover { color: var(--gray-300); }
    .nav-link { color: var(--gray-400); }
    .nav-link:hover { color: var(--gray-300); border-bottom-color: var(--gray-700); }
    .nav-link.is-active { color: var(--gray-200); border-bottom-color: var(--indigo-400); }
    .dropdown-menu a, .dropdown-menu button { color: var(--gray-300); }
    .dropdown-menu a:hover, .dropdown-menu button:hover { color: #fff; background: var(--gray-700); }
    .mobile-toggle:hover, .mobile-toggle:focus { color: var(--gray-400); background: var(--gray-900); }
    .mobile-user-block { border-top-color: var(--gray-600); }
    .mobile-nav-link { color: var(--gray-400); }
    .mobile-nav-link:hover { color: var(--gray-200); background: var(--gray-900); border-left-color: var(--gray-600); }
    .mobile-nav-link.is-active { color: var(--indigo-100); background: rgb(49 46 129 / .5); border-left-color: var(--indigo-400); }
    .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .user-trigger:focus-visible, .mobile-toggle:focus-visible { box-shadow: 0 0 0 2px var(--indigo-500), 0 0 0 4px var(--gray-800); }
}
/* Lithe Debug */
.debug-body { min-height: 100vh; margin: 0; color: #e5e7eb; background: #090d12; }
.debug-shell { width: min(calc(100% - 2rem), 72rem); margin-inline: auto; padding: 3rem 0 5rem; }
.debug-eyebrow { margin: 0 0 .65rem; color: #93c5fd; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.debug-shell > h1 { max-width: 60rem; margin: 0; font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.2; }
.debug-location { margin: 1rem 0 2rem; color: #9ca3af; }
.debug-location strong { color: #f9fafb; }
.debug-card { margin-top: 1.25rem; overflow: hidden; border: 1px solid #263241; border-radius: .75rem; background: #0f1620; }
.debug-card > header { padding: .75rem 1rem; border-bottom: 1px solid #263241; color: #cbd5e1; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.source-code { margin: 0; padding: .8rem 0; overflow: auto; font-size: .82rem; line-height: 1.65; }
.source-code span { display: block; min-width: max-content; padding: 0 1rem; }
.source-code span.is-active { color: #fff; background: #7f1d1d; }
.source-code b { display: inline-block; margin-right: .85rem; color: #64748b; font-weight: 400; user-select: none; }
.trace-list { margin: 0; padding: 0; list-style: none; }
.trace-list li { display: grid; gap: .25rem; padding: .85rem 1rem; border-bottom: 1px solid #1f2937; }
.trace-list li:last-child { border-bottom: 0; }
.trace-list code { color: #e5e7eb; }
.trace-list span { color: #7c8a9e; font-size: .78rem; }
.framework-frame { opacity: .62; }

@media (max-width: 30rem) {
    .error-content { gap: 1rem; }
    .error-content strong, .error-content h1 { font-size: 1.25rem; }
}

.debug-card-body {
    padding: 1rem 1.25rem;
}

.debug-card-body > * {
    margin-top: 0;
}

.debug-card-body > *:last-child {
    margin-bottom: 0;
}

.debug-solution pre {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    background: #f4f4f5;
    border-radius: 0.375rem;
}

/* Account settings */
.settings-page { display: grid; gap: 2rem; }
.settings-heading h1 { margin: 0; font-size: 1.35rem; line-height: 1.8rem; }
.settings-heading p { margin: .25rem 0 0; color: var(--muted); }
.settings-layout { display: grid; grid-template-columns: 12rem minmax(0, 44rem); gap: 3rem; align-items: start; }
.settings-nav { display: grid; gap: .25rem; position: sticky; top: 1rem; }
.settings-nav-link { padding: .55rem .75rem; border-radius: var(--radius); color: var(--muted); font-weight: 500; }
.settings-nav-link:hover { color: var(--text); background: rgb(107 114 128 / .08); }
.settings-nav-link.is-active { color: var(--text); background: rgb(107 114 128 / .12); }
.settings-content { min-width: 0; }
.settings-section { padding: 0 0 2.75rem; }
.settings-section + .settings-section { padding-top: 2.75rem; border-top: 1px solid var(--border); }
.settings-section .form-stack { max-width: 38rem; }
.danger-section h2 { color: var(--red-600); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.button-full { width: 100%; }
.muted-copy { color: var(--muted); }
.password-control { position: relative; }
.password-control input { padding-right: 3rem; }
.password-toggle { position: absolute; top: 50%; right: .45rem; width: 2rem; height: 2rem; padding: 0; border: 0; transform: translateY(-50%); color: var(--muted); background: transparent; border-radius: var(--radius); }
.security-status { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green-600); }
.passkey-list { display: grid; gap: .75rem; margin: 1rem 0 1.25rem; }
.passkey-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); }
.passkey-icon { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border-radius: .6rem; color: var(--muted); background: rgb(107 114 128 / .08); font-size: 1.5rem; }
.passkey-copy { display: grid; min-width: 0; flex: 1; gap: .18rem; color: var(--muted); font-size: .8rem; }
.passkey-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; color: var(--text); font-size: .95rem; }
.passkey-provider { padding: .12rem .45rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.icon-danger { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 0; border-radius: var(--radius); color: var(--red-600); background: transparent; font-size: 1.35rem; }
.icon-danger:hover { background: rgb(220 38 38 / .08); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; }
.dialog-header h2 { margin: 0; font-size: 1.15rem; }
.dialog-header p { margin: .35rem 0 0; color: var(--muted); }
.dialog-close { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius); color: var(--muted); background: transparent; font-size: 1.35rem; }
.dialog-close:hover { background: rgb(107 114 128 / .1); }
.two-factor-dialog { width: min(calc(100vw - 2rem), 28rem); text-align: center; }
.two-factor-dialog .dialog-header { text-align: left; }
.qr-frame { width: max-content; margin-inline: auto; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff; }
.qr-frame img { width: 14rem; height: 14rem; }
.manual-secret { display: grid; gap: .55rem; color: var(--muted); }
.manual-secret > div { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: .55rem; overflow: hidden; }
.manual-secret code { min-width: 0; flex: 1; padding: .75rem; color: var(--text); background: transparent; overflow-wrap: anywhere; }
.copy-button { padding: .5rem .75rem; border: 0; border-left: 1px solid var(--border); color: var(--text); background: transparent; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: 1rem; border: 1px solid var(--border); border-radius: .55rem; }
.recovery-codes code { text-align: center; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--muted); font-size: .78rem; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.guest-card-heading { margin-bottom: 1.5rem; }
.guest-card-heading h1 { margin: 0; font-size: 1.25rem; }
.guest-card-heading p { margin: .35rem 0 0; color: var(--muted); }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.appearance-option { display: grid; gap: .65rem; padding: .75rem; border: 1px solid var(--border); border-radius: .65rem; color: var(--text); background: var(--surface); text-align: left; }
.appearance-option.is-selected { border-color: var(--indigo-500); box-shadow: 0 0 0 1px var(--indigo-500); }
.appearance-preview { display: block; height: 6rem; border: 1px solid var(--border); border-radius: .45rem; }
.appearance-light { background: linear-gradient(135deg, #fff 0 67%, #e5e7eb 67%); }
.appearance-dark { background: linear-gradient(135deg, #111827 0 67%, #374151 67%); }
.appearance-system { background: linear-gradient(135deg, #fff 0 48%, #d1d5db 48% 52%, #111827 52%); }

html[data-theme="light"] { color-scheme: light; --surface: #fff; --page: var(--gray-100); --text: var(--gray-900); --muted: var(--gray-600); --border: var(--gray-200); }
html[data-theme="dark"] { color-scheme: dark; --surface: var(--gray-800); --page: var(--gray-900); --text: var(--gray-100); --muted: var(--gray-400); --border: var(--gray-700); }
html[data-theme="dark"] .guest-body,
html[data-theme="dark"] .guest-page,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] .app-shell { background: var(--gray-900); }
html[data-theme="dark"] .guest-card,
html[data-theme="dark"] .app-nav,
html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dialog-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .user-trigger,
html[data-theme="dark"] .passkey-item,
html[data-theme="dark"] .appearance-option { background: var(--gray-800); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color: var(--gray-200); background: var(--gray-900); border-color: var(--gray-700); }
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .settings-heading h1,
html[data-theme="dark"] .passkey-title-row,
html[data-theme="dark"] .profile-avatar-copy strong { color: var(--gray-100); }
html[data-theme="dark"] .button-secondary { color: var(--gray-200); background: var(--gray-800); border-color: var(--gray-600); }

@media (max-width: 48rem) {
    .settings-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .settings-nav { position: static; display: flex; overflow-x: auto; padding-bottom: .25rem; }
    .settings-nav-link { flex: 0 0 auto; }
    .appearance-options { grid-template-columns: 1fr; }
    .settings-section { padding-bottom: 2rem; }
    .settings-section + .settings-section { padding-top: 2rem; }
}

/* Explicit light mode must override the operating-system dark preference. */
html[data-theme="light"] .start-body { color: var(--gray-900); background: #fff; }
html[data-theme="light"] .start-actions > a:not(.button) { color: var(--gray-600); }
html[data-theme="light"] .start-actions > a:not(.button):hover { color: var(--gray-900); }
html[data-theme="light"] .lithe-logo { color: var(--gray-800); }
html[data-theme="light"] .guest-body,
html[data-theme="light"] .guest-page,
html[data-theme="light"] .app-body,
html[data-theme="light"] .app-shell { background: var(--gray-100); }
html[data-theme="light"] .guest-card,
html[data-theme="light"] .app-nav,
html[data-theme="light"] .mobile-nav,
html[data-theme="light"] .page-header,
html[data-theme="light"] .panel,
html[data-theme="light"] .dialog-card,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .user-trigger,
html[data-theme="light"] .passkey-item,
html[data-theme="light"] .appearance-option { background: #fff; }
html[data-theme="light"] .app-nav { border-bottom-color: var(--gray-200); }
html[data-theme="light"] .page-header h1,
html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .settings-heading h1,
html[data-theme="light"] .panel-body,
html[data-theme="light"] .mobile-user-details strong,
html[data-theme="light"] .profile-avatar-copy strong,
html[data-theme="light"] .passkey-title-row { color: var(--gray-900); }
html[data-theme="light"] .section-heading p,
html[data-theme="light"] .form-intro,
html[data-theme="light"] .verification-note,
html[data-theme="light"] .saved-message,
html[data-theme="light"] .checkbox-row,
html[data-theme="light"] .text-link,
html[data-theme="light"] .text-button,
html[data-theme="light"] .inline-button,
html[data-theme="light"] .profile-avatar-copy p { color: var(--gray-600); }
html[data-theme="light"] .text-link:hover,
html[data-theme="light"] .text-button:hover,
html[data-theme="light"] .inline-button:hover { color: var(--gray-900); }
html[data-theme="light"] .field label { color: var(--gray-700); }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color: var(--gray-900); background: #fff; border-color: var(--gray-300); }
html[data-theme="light"] .button { color: #fff; background: var(--gray-900); }
html[data-theme="light"] .button:hover,
html[data-theme="light"] .button:focus { background: #000; }
html[data-theme="light"] .button:active { background: var(--gray-700); }
html[data-theme="light"] .button-secondary { color: var(--gray-800); background: #fff; border-color: var(--gray-300); }
html[data-theme="light"] .button-secondary:hover { background: var(--gray-100); }
html[data-theme="light"] .button-danger { color: #fff; background: var(--red-600); }
html[data-theme="light"] .user-trigger,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .mobile-nav-link { color: var(--gray-600); }
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .mobile-nav-link:hover { color: var(--gray-900); }
html[data-theme="light"] .dropdown-menu a,
html[data-theme="light"] .dropdown-menu button { color: var(--gray-800); }
html[data-theme="light"] .dropdown-menu a:hover,
html[data-theme="light"] .dropdown-menu button:hover { color: var(--gray-900); background: var(--gray-100); }
html[data-theme="light"] .button:focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] .user-trigger:focus-visible,
html[data-theme="light"] .mobile-toggle:focus-visible { box-shadow: 0 0 0 2px var(--indigo-500), 0 0 0 4px #fff; }

/* --------------------------------------------------------------------------
   Neutral black theme
   Keeps the existing class structure and replaces the blue-tinted dark palette.
   This block intentionally comes last so it overrides the older dark rules.
   -------------------------------------------------------------------------- */

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

    --page: #09090b;
    --surface: #111113;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --border: #2a2a2e;

    --dark-raised: #18181b;
    --dark-hover: #202024;
    --dark-border-strong: #3f3f46;
    --dark-input: #0d0d0f;
    --dark-subtle: #71717a;
}

/* System appearance: use the same neutral palette when the OS is dark. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;

        --page: #09090b;
        --surface: #111113;
        --text: #f4f4f5;
        --muted: #a1a1aa;
        --border: #2a2a2e;

        --dark-raised: #18181b;
        --dark-hover: #202024;
        --dark-border-strong: #3f3f46;
        --dark-input: #0d0d0f;
        --dark-subtle: #71717a;
    }
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .guest-body,
html[data-theme="dark"] .guest-page {
    color: var(--text);
    background: var(--page);
}

html[data-theme="dark"] .app-nav,
html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .page-header {
    background: var(--page);
    border-color: var(--border);
    box-shadow: none;
}

html[data-theme="dark"] .guest-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dialog-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .user-trigger,
html[data-theme="dark"] .passkey-item,
html[data-theme="dark"] .appearance-option {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

html[data-theme="dark"] .settings-heading h1,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .passkey-title-row,
html[data-theme="dark"] .profile-avatar-copy strong,
html[data-theme="dark"] .mobile-user-details strong {
    color: var(--text);
}

html[data-theme="dark"] .settings-heading p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .form-intro,
html[data-theme="dark"] .verification-note,
html[data-theme="dark"] .saved-message,
html[data-theme="dark"] .checkbox-row,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .inline-button,
html[data-theme="dark"] .profile-avatar-copy p,
html[data-theme="dark"] .muted-copy,
html[data-theme="dark"] .passkey-copy,
html[data-theme="dark"] .manual-secret,
html[data-theme="dark"] .auth-divider {
    color: var(--muted);
}

html[data-theme="dark"] .field label {
    color: #d4d4d8;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--text);
    background: var(--dark-input);
    border-color: var(--dark-border-strong);
    box-shadow: none;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--dark-subtle);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #71717a;
    outline: none;
    box-shadow: 0 0 0 3px rgb(113 113 122 / .18);
}

html[data-theme="dark"] .password-toggle {
    color: var(--muted);
}

html[data-theme="dark"] .password-toggle:hover {
    color: var(--text);
    background: var(--dark-raised);
}

html[data-theme="dark"] .button {
    color: #09090b;
    background: #f4f4f5;
    border-color: #f4f4f5;
    box-shadow: none;
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .button:focus {
    color: #09090b;
    background: #e4e4e7;
    border-color: #e4e4e7;
}

html[data-theme="dark"] .button:active {
    background: #d4d4d8;
    border-color: #d4d4d8;
}

html[data-theme="dark"] .button-secondary {
    color: var(--text);
    background: var(--dark-raised);
    border-color: var(--dark-border-strong);
}

html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .button-secondary:focus {
    color: #fff;
    background: var(--dark-hover);
    border-color: #52525b;
}

html[data-theme="dark"] .button-danger {
    color: #fff;
    background: var(--red-600);
    border-color: var(--red-600);
}

html[data-theme="dark"] .settings-nav-link {
    color: var(--muted);
}

html[data-theme="dark"] .settings-nav-link:hover {
    color: var(--text);
    background: var(--dark-raised);
}

html[data-theme="dark"] .settings-nav-link.is-active {
    color: #fff;
    background: #1c1c1f;
}

html[data-theme="dark"] .settings-section + .settings-section {
    border-top-color: var(--border);
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .user-trigger,
html[data-theme="dark"] .mobile-nav-link {
    color: var(--muted);
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .user-trigger:hover,
html[data-theme="dark"] .mobile-nav-link:hover {
    color: var(--text);
}

html[data-theme="dark"] .nav-link.is-active {
    color: #fff;
    border-bottom-color: #a1a1aa;
}

html[data-theme="dark"] .dropdown-menu a,
html[data-theme="dark"] .dropdown-menu button {
    color: #d4d4d8;
}

html[data-theme="dark"] .dropdown-menu a:hover,
html[data-theme="dark"] .dropdown-menu button:hover {
    color: #fff;
    background: var(--dark-hover);
}

html[data-theme="dark"] .passkey-icon {
    color: #d4d4d8;
    background: var(--dark-raised);
}

html[data-theme="dark"] .passkey-provider,
html[data-theme="dark"] .recovery-codes,
html[data-theme="dark"] .manual-secret > div,
html[data-theme="dark"] .qr-frame {
    border-color: var(--border);
}

html[data-theme="dark"] .manual-secret code,
html[data-theme="dark"] .copy-button,
html[data-theme="dark"] .recovery-codes code {
    color: var(--text);
}

html[data-theme="dark"] .copy-button {
    border-left-color: var(--border);
}

html[data-theme="dark"] .copy-button:hover,
html[data-theme="dark"] .dialog-close:hover,
html[data-theme="dark"] .icon-danger:hover {
    background: var(--dark-raised);
}

html[data-theme="dark"] .appearance-dark {
    background: linear-gradient(135deg, #09090b 0 67%, #27272a 67%);
}

html[data-theme="dark"] .button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] .user-trigger:focus-visible,
html[data-theme="dark"] .mobile-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #71717a, 0 0 0 4px var(--page);
}

/* Match the same component colors in System mode when the OS is dark. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body,
    html:not([data-theme="light"]) .app-body,
    html:not([data-theme="light"]) .app-shell,
    html:not([data-theme="light"]) .guest-body,
    html:not([data-theme="light"]) .guest-page {
        color: var(--text);
        background: var(--page);
    }

    html:not([data-theme="light"]) .app-nav,
    html:not([data-theme="light"]) .mobile-nav,
    html:not([data-theme="light"]) .page-header {
        background: var(--page);
        border-color: var(--border);
        box-shadow: none;
    }

    html:not([data-theme="light"]) .guest-card,
    html:not([data-theme="light"]) .panel,
    html:not([data-theme="light"]) .dialog-card,
    html:not([data-theme="light"]) .dropdown-menu,
    html:not([data-theme="light"]) .user-trigger,
    html:not([data-theme="light"]) .passkey-item,
    html:not([data-theme="light"]) .appearance-option {
        color: var(--text);
        background: var(--surface);
        border-color: var(--border);
    }

    html:not([data-theme="light"]) input,
    html:not([data-theme="light"]) select,
    html:not([data-theme="light"]) textarea {
        color: var(--text);
        background: var(--dark-input);
        border-color: var(--dark-border-strong);
        box-shadow: none;
    }

    html:not([data-theme="light"]) input::placeholder,
    html:not([data-theme="light"]) textarea::placeholder {
        color: var(--dark-subtle);
    }

    html:not([data-theme="light"]) input:focus,
    html:not([data-theme="light"]) select:focus,
    html:not([data-theme="light"]) textarea:focus {
        border-color: #71717a;
        outline: none;
        box-shadow: 0 0 0 3px rgb(113 113 122 / .18);
    }

    html:not([data-theme="light"]) .button {
        color: #09090b;
        background: #f4f4f5;
        border-color: #f4f4f5;
        box-shadow: none;
    }

    html:not([data-theme="light"]) .button-secondary {
        color: var(--text);
        background: var(--dark-raised);
        border-color: var(--dark-border-strong);
    }

    html:not([data-theme="light"]) .settings-nav-link.is-active {
        color: #fff;
        background: #1c1c1f;
    }

    html:not([data-theme="light"]) .settings-section + .settings-section {
        border-top-color: var(--border);
    }
}