h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: var(--lc-danger, #e50000);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* =========================================================
   Design tokens + theme palettes + base styles moved to
   wwwroot/css/01-tokens.css, 02-theme-dark.css, 03-theme-light.css, 04-base.css
   Loaded before this file via <link> tags in App.razor.
   ========================================================= */

/* =========================================================
   LifeCompanion components (`.lc-*` global classes)
   ========================================================= */

/* Card / glass surface */

.lc-card {
    background: rgba(var(--lc-fx-tint), 0.04);
    /* Blur radius reduced from 24px → 14px - 24px is compositor-expensive on mobile GPUs
       when many cards render at once; 14px reads as glass without the frame cost. */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid transparent;
    border-radius: var(--lc-radius-lg);
    padding: 1.5rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.15),
        inset 0 0 0 1px rgba(var(--lc-fx-tint), 0.06);
}

/* Light theme: solid --lc-surface-solid so cards lift above the gray-200 body, and
   drop both inset shadows - the dark-theme "top glass highlight" (--lc-fx-tint = white)
   inverts to a dark line on light theme (--lc-fx-tint = gray-900), reading as a top border. */
[data-bs-theme="light"] .lc-card {
    background: var(--lc-surface-solid);
    box-shadow: 0 8px 32px rgba(33, 37, 41, 0.12);
}

/* Image bleeds to card edges; margin values must match .lc-card padding. */
.lc-card__image {
    display: block;
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--lc-radius-lg) var(--lc-radius-lg) 0 0;
}

@supports not (backdrop-filter: blur(1px)) {
    .lc-card { background: var(--lc-surface-solid); }
}

@media (prefers-reduced-transparency: reduce) {
    .lc-card { background: var(--lc-surface-solid); backdrop-filter: none; }
}

/* =========================================================
   Mobile performance override

   Backdrop-filter is compositor-expensive on mobile GPUs; even the reduced
   14px radius costs enough per-frame to jitter scroll on mid-range phones.
   Below the tablet breakpoint we swap every glass surface for its opaque
   fallback: same visual mass, zero compositor blur, smooth scroll.
   The desktop keeps the full aurora glass aesthetic.
   ========================================================= */
@media (max-width: 767.98px) {
    .lc-card,
    .lc-topbar,
    .lc-sidebar,
    .lc-sidebar__user-menu,
    .lc-modal .modal-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* !important needed because the base .lc-sidebar / .lc-topbar rules appear later
           in this file (source order beats us on equal specificity). */
        background: var(--lc-surface-solid) !important;
    }

    .lc-topbar {
        background: var(--lc-bg) !important;
    }

    /* Kill 300ms tap delay + grey flash on every interactive primitive. */
    a, button, [role="button"], .nav-link, .dropdown-item, .lc-md-btn, .lc-check, .lc-sidebar__link, .lc-sidebar__sublink {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Overdue-reminder card (car dashboard): amber ring + slow pulse to draw the eye. */
.lc-reminder-card--due {
    border-color: color-mix(in oklab, var(--lc-warning) 55%, transparent);
    animation: lc-reminder-pulse 2.4s ease-in-out infinite;
}
@keyframes lc-reminder-pulse {
    0%, 100% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(var(--lc-fx-tint), 0.15),
            inset 0 0 0 1px rgba(var(--lc-fx-tint), 0.06),
            0 0 0 0 color-mix(in oklab, var(--lc-warning) 55%, transparent);
    }
    50% {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(var(--lc-fx-tint), 0.15),
            inset 0 0 0 1px rgba(var(--lc-fx-tint), 0.06),
            0 0 0 6px color-mix(in oklab, var(--lc-warning) 18%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lc-reminder-card--due {
        animation: none;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(var(--lc-fx-tint), 0.15),
            inset 0 0 0 1px rgba(var(--lc-fx-tint), 0.06),
            0 0 0 3px color-mix(in oklab, var(--lc-warning) 35%, transparent);
    }
}

/* Multi-alert editor (car reminder). Chip = toggleable preset lead-time. */
.lc-alert-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.lc-alert-editor__group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* Eyebrow-style section header used inside the per-reminder card to separate the
   reminder's what/when from its alert schedule. Hairline top border acts as the
   visual splitter; typography mirrors the .lc-table thead eyebrow. */
.lc-alert-editor__header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--lc-glass-border);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--lc-text-muted);
}
.lc-alert-editor__header .ti {
    font-size: 0.95rem;
}
.lc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    min-height: 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--lc-border);
    background: transparent;
    color: var(--lc-body);
    font-size: 0.85rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--lc-duration-fast) var(--lc-ease),
                color var(--lc-duration-fast) var(--lc-ease),
                border-color var(--lc-duration-fast) var(--lc-ease);
}
.lc-chip:hover {
    background: color-mix(in oklab, var(--lc-primary) 12%, transparent);
    border-color: color-mix(in oklab, var(--lc-primary) 45%, var(--lc-border));
}
.lc-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lc-chip--success {
    background: var(--lc-success);
    border-color: var(--lc-success);
    color: #fff;
}
.lc-chip--success::before {
    content: "\ea5e";
    font-family: 'tabler-icons';
    font-style: normal;
    font-weight: normal;
    margin-right: 0.35rem;
    line-height: 1;
}
.lc-chip--success:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-success) 85%, black);
    border-color: color-mix(in oklab, var(--lc-success) 85%, black);
    color: #fff;
}
.lc-chip--success:disabled {
    background: color-mix(in oklab, var(--lc-success) 70%, transparent);
    border-color: color-mix(in oklab, var(--lc-success) 70%, transparent);
    color: #fff;
    opacity: 1;
}
.lc-input--sm {
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
    min-height: 1.9rem;
}

/* Buttons */

.lc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-height: 2.75rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid transparent;
    font-weight: 500;
    transition: background-color var(--lc-duration-fast) var(--lc-ease),
                color var(--lc-duration-fast) var(--lc-ease),
                box-shadow var(--lc-duration-fast) var(--lc-ease),
                transform var(--lc-duration-fast) var(--lc-ease),
                filter var(--lc-duration-fast) var(--lc-ease);
    cursor: pointer;
    text-decoration: none;
    /* Kill the 300ms double-tap-to-zoom wait on mobile Safari + some Android browsers. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lc-btn--sm { padding: 0.25rem 0.625rem; min-height: 2rem; font-size: 0.875rem; }
.lc-btn--lg { padding: 0.75rem 1.5rem; min-height: 3.25rem; font-size: 1.125rem; }

.lc-btn--primary {
    background: color-mix(in oklab, var(--lc-accent) 30%, transparent);
    border-color: color-mix(in oklab, var(--lc-accent) 45%, transparent);
    color: var(--lc-text);
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        0 4px 16px color-mix(in oklab, var(--lc-accent) 18%, transparent);
}
.lc-btn--primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-accent) 88%, transparent);
    border-color: var(--lc-accent);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.3),
        0 8px 32px var(--lc-accent-glow);
    transform: translateY(-1px);
}
.lc-btn--primary:active:not(:disabled) { transform: translateY(0); }

.lc-btn--secondary {
    background: rgba(var(--lc-fx-tint), 0.03);
    border-color: rgba(var(--lc-fx-tint), 0.08);
    color: var(--lc-text-muted);
}
.lc-btn--secondary:hover:not(:disabled) {
    background: rgba(var(--lc-fx-tint), 0.1);
    border-color: rgba(var(--lc-fx-tint), 0.2);
    color: var(--lc-text);
    transform: translateY(-1px);
}

.lc-btn--ghost {
    background: rgba(var(--lc-fx-tint), 0.02);
    border-color: rgba(var(--lc-fx-tint), 0.04);
    color: var(--lc-text-muted);
}
.lc-btn--ghost:hover:not(:disabled) {
    background: rgba(var(--lc-fx-tint), 0.08);
    border-color: rgba(var(--lc-fx-tint), 0.12);
    color: var(--lc-text);
}

.lc-btn--danger {
    background: color-mix(in oklab, var(--lc-danger) 30%, transparent);
    border-color: color-mix(in oklab, var(--lc-danger) 45%, transparent);
    color: var(--lc-text);
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        0 4px 16px color-mix(in oklab, var(--lc-danger) 18%, transparent);
}
.lc-btn--danger:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-danger) 88%, transparent);
    border-color: var(--lc-danger);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.3),
        0 8px 32px rgba(244, 63, 94, 0.4);
    transform: translateY(-1px);
}

.lc-btn--success {
    background: color-mix(in oklab, var(--lc-success) 30%, transparent);
    border-color: color-mix(in oklab, var(--lc-success) 45%, transparent);
    color: var(--lc-text);
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        0 4px 16px color-mix(in oklab, var(--lc-success) 18%, transparent);
}
.lc-btn--success:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-success) 88%, transparent);
    border-color: var(--lc-success);
    color: white;
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.3),
        0 8px 32px color-mix(in oklab, var(--lc-success) 40%, transparent);
    transform: translateY(-1px);
}
.lc-btn--success:active:not(:disabled) { transform: translateY(0); }

/* Light theme buttons: solid filled variant with white text. Cyan / green base colors
   put white text below strict AA (1.8:1), same trade-off Bootstrap makes with its own
   .btn-info / .btn-success - the semantic hue is prioritized over strict contrast.
   Do NOT collapse this block back into the base `.lc-btn--*` rules - user-locked design. */
[data-bs-theme="light"] .lc-btn--primary {
    background: var(--lc-btn-primary-bg);
    border-color: var(--lc-btn-primary-bg);
    color: white;
    box-shadow: 0 4px 16px color-mix(in oklab, var(--lc-btn-primary-bg) 25%, transparent);
}
[data-bs-theme="light"] .lc-btn--primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-btn-primary-bg), black 12%);
    border-color: color-mix(in oklab, var(--lc-btn-primary-bg), black 12%);
    color: white;
    box-shadow: 0 8px 32px color-mix(in oklab, var(--lc-btn-primary-bg) 40%, transparent);
}
[data-bs-theme="light"] .lc-btn--danger {
    background: var(--lc-btn-danger-bg);
    border-color: var(--lc-btn-danger-bg);
    color: white;
    box-shadow: 0 4px 16px color-mix(in oklab, var(--lc-btn-danger-bg) 25%, transparent);
}
[data-bs-theme="light"] .lc-btn--danger:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-btn-danger-bg), black 12%);
    border-color: color-mix(in oklab, var(--lc-btn-danger-bg), black 12%);
    color: white;
    box-shadow: 0 8px 32px color-mix(in oklab, var(--lc-btn-danger-bg) 40%, transparent);
}
[data-bs-theme="light"] .lc-btn--success {
    background: var(--lc-btn-success-bg);
    border-color: var(--lc-btn-success-bg);
    color: white;
    box-shadow: 0 4px 16px color-mix(in oklab, var(--lc-btn-success-bg) 25%, transparent);
}
[data-bs-theme="light"] .lc-btn--success:hover:not(:disabled) {
    background: color-mix(in oklab, var(--lc-btn-success-bg), black 12%);
    border-color: color-mix(in oklab, var(--lc-btn-success-bg), black 12%);
    color: white;
    box-shadow: 0 8px 32px color-mix(in oklab, var(--lc-btn-success-bg) 40%, transparent);
}
[data-bs-theme="light"] .lc-btn--secondary {
    background: var(--lc-surface-elevated);
    border-color: var(--lc-glass-border-strong);
    color: var(--lc-text);
}
[data-bs-theme="light"] .lc-btn--secondary:hover:not(:disabled) {
    background: var(--lc-surface-solid);
    border-color: rgba(33, 37, 41, 0.35);
    color: var(--lc-text);
}
[data-bs-theme="light"] .lc-btn--ghost {
    background: rgba(33, 37, 41, 0.04);
    border-color: rgba(33, 37, 41, 0.12);
    color: var(--lc-text-muted);
}
[data-bs-theme="light"] .lc-btn--ghost:hover:not(:disabled) {
    background: rgba(33, 37, 41, 0.08);
    border-color: rgba(33, 37, 41, 0.2);
    color: var(--lc-text);
}

/* Form group + input */

.lc-form-group {
    margin-bottom: 1rem;
}

.lc-form-label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--lc-text);
    font-weight: 500;
    font-size: 0.9rem;
}

.lc-form-hint {
    display: block;
    margin-top: 0.25rem;
    color: var(--lc-text-muted);
}

.lc-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--lc-fx-tint), 0.04);
    color: var(--lc-text);
    border: 1px solid rgba(var(--lc-fx-tint), 0.08);
    border-radius: var(--lc-radius-md);
    transition: border-color var(--lc-duration-fast) var(--lc-ease),
                background-color var(--lc-duration-fast) var(--lc-ease),
                box-shadow var(--lc-duration-fast) var(--lc-ease);
    font: inherit;
}

.lc-input:hover:not(:disabled) {
    background: rgba(var(--lc-fx-tint), 0.06);
    border-color: rgba(var(--lc-fx-tint), 0.14);
}

.lc-input:focus {
    outline: none;
    background: rgba(var(--lc-fx-tint), 0.06);
    border-color: color-mix(in oklab, var(--lc-accent) 60%, transparent);
    box-shadow: 0 0 0 3px var(--lc-accent-glow);
}

.lc-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lc-input::placeholder {
    color: var(--lc-text-subtle);
}

/* Alert */

.lc-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--lc-radius-md);
    border: 1px solid transparent;
    color: var(--lc-text);
    box-shadow: inset 0 1px 0 rgba(var(--lc-fx-tint), 0.05);
}

.lc-alert--info    { background: color-mix(in oklab, var(--lc-accent) 12%, var(--lc-surface-solid));  border-color: color-mix(in oklab, var(--lc-accent) 30%, transparent); }
.lc-alert--success { background: color-mix(in oklab, var(--lc-success) 12%, var(--lc-surface-solid)); border-color: color-mix(in oklab, var(--lc-success) 30%, transparent); }
.lc-alert--warning { background: color-mix(in oklab, var(--lc-warning) 12%, var(--lc-surface-solid)); border-color: color-mix(in oklab, var(--lc-warning) 30%, transparent); }
.lc-alert--danger  { background: color-mix(in oklab, var(--lc-danger) 12%, var(--lc-surface-solid));  border-color: color-mix(in oklab, var(--lc-danger) 30%, transparent); }

/* Blazor error UI + reconnect modal moved to wwwroot/css/06-overlays.css */


/* =========================================================
   Section (titled block wrapper)
   ========================================================= */

.lc-section { margin-bottom: 2.5rem; }

.lc-section__header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--lc-glass-border);
}

.lc-section__title { font-size: 1.375rem; font-weight: 600; color: var(--lc-text); margin: 0; }
.lc-section__description { color: var(--lc-text-muted); margin: 0.25rem 0 0 0; font-size: 0.9rem; }

/* =========================================================
   Icon button (square variant of .lc-btn)
   ========================================================= */

.lc-icon-btn { width: 2.75rem; height: 2.75rem; padding: 0; }
.lc-icon-btn.lc-btn--sm { width: 2rem;   height: 2rem;   min-height: 2rem; }
.lc-icon-btn.lc-btn--lg { width: 3.25rem; height: 3.25rem; min-height: 3.25rem; font-size: 1.25rem; }
.lc-icon-btn > i { font-size: 1rem; line-height: 1; }

/* =========================================================
   Badge
   ========================================================= */

.lc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.lc-badge--neutral { background: var(--lc-surface-elevated); color: var(--lc-text-muted); border: 1px solid var(--lc-glass-border); }
.lc-badge--info    { background: color-mix(in oklab, var(--lc-accent) 25%, transparent);  color: var(--lc-accent); }
.lc-badge--success { background: color-mix(in oklab, var(--lc-success) 25%, transparent); color: var(--lc-success); }
.lc-badge--warning { background: color-mix(in oklab, var(--lc-warning) 25%, transparent); color: var(--lc-warning); }
.lc-badge--danger  { background: color-mix(in oklab, var(--lc-danger) 25%, transparent);  color: var(--lc-danger); }

/* Light theme: semantic color at full saturation as text on its own 25%-tint bg drops
   below WCAG AA (e.g. #d63b57 on light pink ≈ 2.8:1). Mixing 50/50 with --lc-text (deep
   navy) darkens the hue enough to clear ~5:1 while keeping the semantic color legible. */
[data-bs-theme="light"] .lc-badge--info    { color: color-mix(in oklab, var(--lc-accent)  50%, var(--lc-text)); }
[data-bs-theme="light"] .lc-badge--success { color: color-mix(in oklab, var(--lc-success) 50%, var(--lc-text)); }
[data-bs-theme="light"] .lc-badge--warning { color: color-mix(in oklab, var(--lc-warning) 50%, var(--lc-text)); }
[data-bs-theme="light"] .lc-badge--danger  { color: color-mix(in oklab, var(--lc-danger)  50%, var(--lc-text)); }

/* =========================================================
   Spinner
   ========================================================= */

.lc-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--lc-glass-border);
    border-top-color: var(--lc-accent);
    border-radius: 50%;
    animation: lc-spin 0.75s linear infinite;
}
.lc-spinner--sm { width: 1rem;    height: 1rem;    border-width: 2px; }
.lc-spinner--lg { width: 2.5rem;  height: 2.5rem;  border-width: 3px; }
@keyframes lc-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Progress bar
   ========================================================= */

.lc-progress {
    width: 100%;
    height: 0.75rem;
    background: var(--lc-surface-elevated);
    border-radius: var(--lc-radius-sm);
    overflow: hidden;
    border: 1px solid var(--lc-glass-border);
}

.lc-progress__bar {
    height: 100%;
    background: var(--lc-accent);
    transition: width var(--lc-duration-med) var(--lc-ease);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
}

.lc-progress__bar--success { background: var(--lc-success); }
.lc-progress__bar--warning { background: var(--lc-warning); }
.lc-progress__bar--danger  { background: var(--lc-danger); }
.lc-progress__label { font-size: 0.65rem; color: var(--lc-bg); font-weight: 700; padding: 0 0.25rem; }

/* =========================================================
   Table
   ========================================================= */

/* Semantic table styled to sit inside .lc-card. Wrap in .table-responsive for horizontal scroll. */
.lc-table {
    width: 100%;
    color: var(--lc-text);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    margin: 0;
}

.lc-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lc-text-muted);
    padding: 0.65rem 0.9rem;
    background: rgba(var(--lc-fx-tint), 0.035);
    border-bottom: 1px solid var(--lc-glass-border);
    white-space: nowrap;
}

.lc-table thead th:first-child { border-top-left-radius: var(--lc-radius-md); }
.lc-table thead th:last-child  { border-top-right-radius: var(--lc-radius-md); }

.lc-table tbody td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(var(--lc-fx-tint), 0.05);
    vertical-align: middle;
}

.lc-table tbody tr:last-child td { border-bottom: none; }

/* Hover modifier - highlight rows for scannable lists. */
.lc-table--hover tbody tr {
    transition: background-color var(--lc-duration-fast) var(--lc-ease);
}
.lc-table--hover tbody tr:hover {
    background: rgba(var(--lc-fx-tint), 0.03);
}

/* Tight modifier - dense rows for high-density data. */
.lc-table--tight thead th { padding: 0.45rem 0.6rem; }
.lc-table--tight tbody td { padding: 0.4rem 0.6rem; }

/* Cell alignment helpers - column-level, not row-level. */
.lc-table th.lc-table__num,
.lc-table td.lc-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lc-table th.lc-table__center,
.lc-table td.lc-table__center {
    text-align: center;
}

/* Empty-state row spanning all columns. */
.lc-table__empty td {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--lc-text-muted);
}

/* Stack modifier: below md, rows become cards, cells become blocks with optional data-label prefix. */
@media (max-width: 767.98px) {
    .lc-table--stack { table-layout: auto; }
    .lc-table--stack thead { display: none; }
    .lc-table--stack tbody tr {
        display: block;
        padding: 0.6rem 0.15rem;
        border-bottom: 1px solid var(--lc-glass-border);
    }
    .lc-table--stack tbody tr:last-child { border-bottom: none; }
    .lc-table--stack tbody td {
        display: block;
        width: 100%;
        padding: 0.3rem 0;
        border: none;
        text-align: left;
    }
    .lc-table--stack tbody td.lc-table__num { text-align: left; }
    .lc-table--stack tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--lc-text-muted);
        margin-bottom: 0.2rem;
    }
}

/* =========================================================
   Empty state
   ========================================================= */

.lc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--lc-text-muted);
}
.lc-empty-state__icon { font-size: 3rem; margin-bottom: 0.75rem; opacity: 0.5; }
.lc-empty-state__title { font-size: 1.125rem; color: var(--lc-text); margin: 0 0 0.375rem 0; }
.lc-empty-state__description { margin: 0 0 1.25rem 0; max-width: 40ch; }
.lc-empty-state__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

/* =========================================================
   Avatar
   ========================================================= */

.lc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lc-surface-elevated);
    border: 1px solid var(--lc-glass-border);
    border-radius: 50%;
    color: var(--lc-text);
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}
.lc-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.7rem; }
.lc-avatar--md { width: 2.5rem;  height: 2.5rem;  font-size: 0.9rem; }
.lc-avatar--lg { width: 3.5rem;  height: 3.5rem;  font-size: 1.2rem; }
.lc-avatar__image { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Textarea (extends .lc-input)
   ========================================================= */

.lc-textarea { min-height: 5rem; resize: vertical; font-family: inherit; }

/* =========================================================
   Select (extends .lc-input)
   ========================================================= */

.lc-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%239098a1' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    padding-right: 2.5rem;
    cursor: pointer;
}
/* Fallback for browsers without appearance: base-select (Chrome <130, Safari <26). */
.lc-select option { background: var(--lc-surface-solid); color: var(--lc-text); }

/* Full popup styling - Chromium 130+, Firefox 132+, Safari 26+. Falls back to native on older browsers. */
@supports (appearance: base-select) {
    .lc-select {
        appearance: base-select;
        background-image: none;
    }

    .lc-select::picker-icon { color: rgb(144, 152, 161); }

    .lc-select::picker(select) {
        appearance: base-select;
        background: color-mix(in oklab, var(--lc-bg) 82%, transparent);
        backdrop-filter: blur(24px) saturate(160%);
        border: 1px solid rgba(var(--lc-fx-tint), 0.1);
        border-radius: var(--lc-radius-md);
        padding: 0.375rem;
        margin-top: 0.375rem;
        color: var(--lc-text);
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(var(--lc-fx-tint), 0.1);
    }

    .lc-select option {
        padding: 0.5rem 0.75rem;
        border-radius: var(--lc-radius-sm);
        background: transparent;
        color: var(--lc-text);
        cursor: pointer;
        transition: background var(--lc-duration-fast) var(--lc-ease);
    }

    .lc-select option:hover { background: rgba(var(--lc-fx-tint), 0.08); }

    .lc-select option:checked {
        background: color-mix(in oklab, var(--lc-accent) 30%, transparent);
        color: var(--lc-text);
    }

    .lc-select option::checkmark { display: none; }
}

/* =========================================================
   Search picker (combobox) — extends .lc-input
   ========================================================= */

.lc-picker {
    position: relative;
    width: 100%;
}

.lc-picker__popup {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 1040;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.375rem;
    margin: 0;
    list-style: none;
    background: color-mix(in oklab, var(--lc-bg) 82%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(var(--lc-fx-tint), 0.1);
    border-radius: var(--lc-radius-md);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.1);
    color: var(--lc-text);
}

.lc-picker__popup li { list-style: none; }

.lc-picker__option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--lc-text);
    border-radius: var(--lc-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background var(--lc-duration-fast) var(--lc-ease);
}

.lc-picker__option:hover,
.lc-picker__option--hi {
    background: rgba(var(--lc-fx-tint), 0.08);
}

.lc-picker__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-picker__secondary {
    flex: 0 0 auto;
    color: var(--lc-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.lc-picker__empty {
    padding: 0.5rem 0.75rem;
    color: var(--lc-text-muted);
    font-style: italic;
    font-size: 0.875rem;
}

/* Mobile: kill the glass (see repo memory css-glassmorphism-mobile-scroll-lag.md). */
@media (max-width: 767.98px) {
    .lc-picker__popup {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--lc-surface-solid);
    }
}

/* =========================================================
   Checkbox
   ========================================================= */

.lc-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.lc-check__input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--lc-accent);
    cursor: pointer;
    flex-shrink: 0;
}
.lc-check__input:disabled { opacity: 0.5; cursor: not-allowed; }
.lc-check__label { color: var(--lc-text); cursor: pointer; user-select: none; font-size: 0.95rem; }
.lc-check__input:disabled + .lc-check__label { color: var(--lc-text-muted); cursor: not-allowed; }

/* =========================================================
   Switch (variant of checkbox)
   ========================================================= */

.lc-switch__input {
    -webkit-appearance: none;
    appearance: none;
    width: 2.5rem;
    height: 1.25rem;
    background: var(--lc-surface-elevated);
    border: 1px solid var(--lc-glass-border);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background-color var(--lc-duration-fast) var(--lc-ease);
    flex-shrink: 0;
}
.lc-switch__input::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--lc-duration-fast) var(--lc-ease);
}
.lc-switch__input:checked { background: var(--lc-accent); border-color: var(--lc-accent); }
.lc-switch__input:checked::before { transform: translateX(1.25rem); }
.lc-switch__input:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================================
   Color swatch (design system showcase only)
   ========================================================= */

.lc-color-swatch {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-glass-border);
}


/* Modal (Bootstrap 5 wrappers) moved to wwwroot/css/06-overlays.css */

/* =========================================================
   Auth pages (login / register hero + password criteria)
   ========================================================= */

.lc-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--lc-accent) 22%, transparent);
    border: 1px solid color-mix(in oklab, var(--lc-accent) 40%, transparent);
    color: var(--lc-accent-hover);
    font-size: 1.5rem;
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        0 4px 16px var(--lc-accent-glow);
}

.lc-auth-required { max-width: 32rem; width: 100%; }

/* Constrain the mileage chart card so it doesn't render tall when the container is wide. */
.lc-mileage-chart-wrap {
    max-width: 800px;
    margin: 0 auto;
}
.lc-mileage-chart-wrap svg { max-height: 24rem; }

.lc-criteria {
    list-style: none;
    padding: 0;
    margin: 0.625rem 0 0 0;
    font-size: 0.85rem;
}

.lc-criteria li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    color: var(--lc-text-muted);
    transition: color var(--lc-duration-fast) var(--lc-ease);
}

.lc-criteria li i {
    font-size: 0.95rem;
    transition: color var(--lc-duration-fast) var(--lc-ease);
}

.lc-criteria .lc-criteria__item--met { color: var(--lc-success); }
[data-bs-theme="light"] .lc-criteria .lc-criteria__item--met { color: color-mix(in oklab, var(--lc-success) 50%, var(--lc-text)); }

/* Invite code display - long random string, needs to wrap and stay readable. */
.lc-invite-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    word-break: break-all;
    color: var(--lc-text);
    background: var(--lc-surface-elevated);
    padding: 0.5rem 0.75rem;
    border-radius: var(--lc-radius-sm);
    border: 1px solid var(--lc-glass-border);
    user-select: all;
}

/* 2FA setup - QR + status icons. */
.lc-qr-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: white;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-glass-border);
}
.lc-qr { display: inline-block; }
.lc-qr svg { display: block; max-width: 100%; height: auto; }

.lc-2fa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1.5rem;
}
.lc-2fa-icon--on {
    background: color-mix(in oklab, var(--lc-success) 22%, transparent);
    color: var(--lc-success);
    border: 1px solid color-mix(in oklab, var(--lc-success) 40%, transparent);
}
[data-bs-theme="light"] .lc-2fa-icon--on { color: color-mix(in oklab, var(--lc-success) 50%, var(--lc-text)); }
.lc-2fa-icon--off {
    background: color-mix(in oklab, var(--lc-text-muted) 15%, transparent);
    color: var(--lc-text-muted);
    border: 1px solid var(--lc-glass-border);
}

/* =========================================================
   Home hero + feature cards
   ========================================================= */

.lc-hero {
    padding: 1rem 0 3rem;
}

.lc-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--lc-accent) 22%, transparent);
    border: 1px solid color-mix(in oklab, var(--lc-accent) 40%, transparent);
    color: var(--lc-accent-hover);
    font-size: 2rem;
    box-shadow:
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        0 8px 32px var(--lc-accent-glow);
}

.lc-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    transition: transform var(--lc-duration-med) var(--lc-ease),
                box-shadow var(--lc-duration-med) var(--lc-ease);
}
.lc-feature:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        inset 0 0 0 1px rgba(var(--lc-fx-tint), 0.1);
}
[data-bs-theme="light"] .lc-feature:hover {
    box-shadow:
        0 16px 48px rgba(33, 37, 41, 0.16),
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.2),
        inset 0 0 0 1px rgba(var(--lc-fx-tint), 0.1);
}

.lc-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--lc-radius-md);
    background: color-mix(in oklab, var(--lc-accent) 20%, transparent);
    color: var(--lc-accent-hover);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Feature-per-row showcase on the home page. Each row alternates screenshot ↔ copy.
   Screenshots are portrait 390×700 PNGs captured at mobile viewport so they read
   on both desktop and mobile; light+dark variants swap via [data-bs-theme] rules.
   Rows can have multiple sub-feature tabs - chip buttons above the phone toggle
   which stacked image is visible. All imgs stay in the DOM so browser cache is
   warm before the first tab switch. */
.lc-feature-row {
    padding: 2.5rem 0;
}
.lc-feature-row + .lc-feature-row {
    border-top: 1px solid rgba(var(--lc-fx-tint), 0.08);
}
.lc-feature-copy .lc-feature__icon {
    margin-bottom: 0;
}

.lc-feature-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
}
.lc-feature-tab {
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid var(--lc-glass-border);
    background: transparent;
    color: var(--lc-text-muted);
    cursor: pointer;
    transition: color var(--lc-duration-fast) var(--lc-ease),
                background var(--lc-duration-fast) var(--lc-ease),
                border-color var(--lc-duration-fast) var(--lc-ease);
}
.lc-feature-tab:hover {
    color: var(--lc-text);
    border-color: var(--lc-glass-border-strong);
}
.lc-feature-tab--active {
    background: var(--lc-accent);
    color: #fff;
    border-color: var(--lc-accent);
}
.lc-feature-tab--active:hover {
    color: #fff;
    border-color: var(--lc-accent);
}

.lc-feature-shot {
    position: relative;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 390 / 700;
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--lc-surface-solid);
    border: 1px solid var(--lc-glass-border);
    box-shadow: var(--lc-shadow-lg);
    transition: transform var(--lc-duration-med) var(--lc-ease),
                box-shadow var(--lc-duration-med) var(--lc-ease);
}
.lc-feature-shot:hover {
    transform: translateY(-3px);
    border-color: var(--lc-glass-border-strong);
}
.lc-feature-shot__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.lc-feature-shot__img--light { display: none; }
[data-bs-theme="light"] .lc-feature-shot__img--dark { display: none; }
[data-bs-theme="light"] .lc-feature-shot__img--light { display: block; }
.lc-feature-shot__img--hidden { display: none !important; }

.lc-planned-section {
    padding: 3rem 0 2rem;
    border-top: 1px solid rgba(var(--lc-fx-tint), 0.08);
    margin-top: 1rem;
}

.lc-final-cta {
    padding: 3rem 0;
    border-top: 1px solid rgba(var(--lc-fx-tint), 0.08);
}

@media (max-width: 767.98px) {
    .lc-feature-row { padding: 1.75rem 0; }
    .lc-feature-shot { max-width: 220px; border-radius: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lc-feature-shot { transition: none; }
    .lc-feature-shot:hover { transform: none; }
}

/* =========================================================
   Top bar (mobile/tablet burger + logo for authed users; public bar for anons)

   Two variants share the .lc-topbar shell:
   - Default: sticky, sits above the offcanvas sidebar on <lg. Hidden on >=lg
     via `d-lg-none` because the sidebar itself carries the logo up there.
   - Anonymous visitors get the same topbar layout - the sidebar body swaps
     to a sign-in / register pitch instead of the nav links.
   ========================================================= */

.lc-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--lc-topbar-height);
    padding: 0.375rem 0.75rem;
    background: color-mix(in oklab, var(--lc-bg) 75%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(var(--lc-fx-tint), 0.06);
}

.lc-topbar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--lc-text);
    background: rgba(var(--lc-fx-tint), 0.05);
    border: 1px solid rgba(var(--lc-fx-tint), 0.08);
    border-radius: var(--lc-radius-sm);
    font-size: 1.15rem;
    transition: background var(--lc-duration-fast) var(--lc-ease);
}
.lc-topbar__burger:hover { background: rgba(var(--lc-fx-tint), 0.1); }
.lc-topbar__burger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--lc-accent-glow);
}

.lc-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: var(--lc-text);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: var(--lc-radius-sm);
    transition: color var(--lc-duration-fast) var(--lc-ease);
}
.lc-topbar__brand i {
    color: var(--lc-accent);
    font-size: 1.35rem;
    transition: transform var(--lc-duration-med) var(--lc-ease),
                filter var(--lc-duration-med) var(--lc-ease);
}
.lc-topbar__brand:hover { color: var(--lc-text); }
.lc-topbar__brand:hover i {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--lc-accent-glow));
}

/* Compact right-aligned actions in the shared topbar (theme toggle + optional bell). */
.lc-topbar__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 0;
}

/* =========================================================
   Sidebar (vertical nav - fixed on >=lg, off-canvas drawer on <lg)

   Uses Bootstrap 5.3's `offcanvas-lg` responsive offcanvas: below lg the
   element behaves as an off-canvas drawer (backdrop, slide-in, aria wiring
   all handled by bundled bootstrap.bundle.min.js); at >=lg the offcanvas
   behavior strips away and it's just a normal block element, which we then
   pin with `position: fixed` to keep it out of the scroll flow.
   ========================================================= */

.lc-sidebar {
    display: flex;
    flex-direction: column;
    color: var(--lc-text);
    background: color-mix(in oklab, var(--lc-bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-right: 1px solid rgba(var(--lc-fx-tint), 0.08);
}

/* Bootstrap responsive-offcanvas overrides for the <lg drawer state.
   Keep the drawer transparent so our own background reads through, and pick a
   width that fits phones without eating the whole viewport on tablets. */
.lc-sidebar.offcanvas-lg {
    --bs-offcanvas-width: 17rem;
    --bs-offcanvas-bg: transparent;
    --bs-offcanvas-color: var(--lc-text);
    --bs-offcanvas-border-width: 0;
}

@media (min-width: 992px) {
    .lc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--lc-sidebar-width);
        z-index: 1035;
    }
}

.lc-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(var(--lc-fx-tint), 0.06);
}

.lc-sidebar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    color: var(--lc-text);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: color var(--lc-duration-fast) var(--lc-ease);
}
.lc-sidebar__brand i {
    color: var(--lc-accent);
    font-size: 1.35rem;
    transition: transform var(--lc-duration-med) var(--lc-ease),
                filter var(--lc-duration-med) var(--lc-ease);
}
.lc-sidebar__brand:hover { color: var(--lc-text); }
.lc-sidebar__brand:hover i {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--lc-accent-glow));
}

.lc-sidebar__close {
    padding: 0.375rem;
    border-radius: var(--lc-radius-sm);
}

/* Nav list scrolls internally if the item count outgrows the viewport. */
.lc-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.5rem 1rem;
}

.lc-sidebar__list,
.lc-sidebar__sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lc-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    color: var(--lc-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: var(--lc-radius-md);
    cursor: pointer;
    transition: color var(--lc-duration-fast) var(--lc-ease),
                background var(--lc-duration-fast) var(--lc-ease);
}
.lc-sidebar__link i {
    flex-shrink: 0;
    width: 1.4rem;
    color: inherit;
    font-size: 1.2rem;
}
.lc-sidebar__link > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-sidebar__link:hover,
.lc-sidebar__link:focus-visible {
    color: var(--lc-text);
    background: rgba(var(--lc-fx-tint), 0.06);
    outline: none;
}
.lc-sidebar__link.active {
    color: var(--lc-text);
    background: color-mix(in oklab, var(--lc-accent) 20%, transparent);
    box-shadow: inset 3px 0 0 var(--lc-accent);
}

/* Rotating chevron for the collapsible Maistas group. */
.lc-sidebar__link--parent .lc-sidebar__caret {
    margin-left: auto;
    color: inherit;
    font-size: 0.9rem;
    transition: transform 0.2s var(--lc-ease);
}
.lc-sidebar__link--parent[aria-expanded="true"] .lc-sidebar__caret {
    transform: rotate(180deg);
}

.lc-sidebar__sublist {
    padding: 0.25rem 0 0.25rem 2.15rem;
}

.lc-sidebar__sublink {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    color: var(--lc-text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: var(--lc-radius-sm);
    transition: color var(--lc-duration-fast) var(--lc-ease),
                background var(--lc-duration-fast) var(--lc-ease);
}
.lc-sidebar__sublink i {
    color: inherit;
    font-size: 1rem;
}
.lc-sidebar__sublink:hover,
.lc-sidebar__sublink:focus-visible {
    color: var(--lc-text);
    background: rgba(var(--lc-fx-tint), 0.05);
    outline: none;
}
.lc-sidebar__sublink.active {
    color: var(--lc-text);
    background: color-mix(in oklab, var(--lc-accent) 15%, transparent);
}

/* Sidebar footer: theme toggle + user dropdown pinned to the bottom. */
.lc-sidebar__footer {
    flex: 0 0 auto;
    padding: 0.5rem;
    border-top: 1px solid rgba(var(--lc-fx-tint), 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lc-sidebar__theme {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
}

/* Anon sidebar body - sign-in / register CTAs shown when the user isn't authed. */
.lc-sidebar__anon {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem;
    text-align: center;
}
.lc-sidebar__anon-pitch {
    color: var(--lc-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}
.lc-sidebar__anon-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Bell button that opens the notifications drawer. Lives beside the theme toggle
   at the bottom of the sidebar. Badge is a small pill in the top-right corner. */
.lc-notifications-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(var(--lc-fx-tint), 0.06);
    border: 1px solid rgba(var(--lc-fx-tint), 0.08);
    border-radius: 999px;
    color: var(--lc-text);
    cursor: pointer;
    transition: background var(--lc-duration-fast) var(--lc-ease),
                color var(--lc-duration-fast) var(--lc-ease);
}
.lc-notifications-bell:hover {
    background: rgba(var(--lc-fx-tint), 0.12);
    color: var(--lc-accent);
}
.lc-notifications-bell i { font-size: 1.05rem; }

.lc-notifications-bell__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.05rem;
    color: #fff;
    background: var(--lc-danger);
    border: 2px solid var(--lc-bg);
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
}

/* Push the mobile topbar bell to the right so it sits opposite the burger. */
.lc-topbar__bell { margin-left: auto; }

/* =========================================================
   Notifications modal (Bootstrap modal + list styling)
   Aurora-glass shell + mobile solid fallback come from .lc-modal.
   ========================================================= */

.lc-notifications-modal .modal-dialog {
    max-width: 520px;
}

.lc-notifications__list { max-height: none; }

.lc-notifications__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--lc-fx-tint), 0.04);
    border: 1px solid rgba(var(--lc-fx-tint), 0.06);
    border-radius: var(--lc-radius-md);
    color: var(--lc-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--lc-duration-fast) var(--lc-ease),
                border-color var(--lc-duration-fast) var(--lc-ease);
    width: 100%;
}
.lc-notifications__item:hover {
    background: rgba(var(--lc-fx-tint), 0.09);
    border-color: rgba(var(--lc-fx-tint), 0.14);
}
.lc-notifications__item--unread {
    background: color-mix(in oklab, var(--lc-accent) 12%, transparent);
    border-color: color-mix(in oklab, var(--lc-accent) 25%, transparent);
}
.lc-notifications__item--unread:hover {
    background: color-mix(in oklab, var(--lc-accent) 18%, transparent);
}

.lc-notifications__source {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    flex-shrink: 0;
    background: color-mix(in oklab, var(--lc-accent) 20%, transparent);
    color: var(--lc-accent);
}
.lc-notifications__source i { font-size: 1rem; }
.lc-notifications__source--cars { background: color-mix(in oklab, #f59e0b 22%, transparent); color: #f59e0b; }
.lc-notifications__source--food { background: color-mix(in oklab, #22c55e 22%, transparent); color: #22c55e; }
.lc-notifications__source--sports { background: color-mix(in oklab, #ef4444 22%, transparent); color: #ef4444; }
.lc-notifications__source--consumables { background: color-mix(in oklab, #a855f7 22%, transparent); color: #a855f7; }
.lc-notifications__source--notes { background: color-mix(in oklab, #06b6d4 22%, transparent); color: #06b6d4; }
.lc-notifications__source--friends { background: color-mix(in oklab, #ec4899 22%, transparent); color: #ec4899; }
.lc-notifications__source--admin { background: color-mix(in oklab, #64748b 22%, transparent); color: #94a3b8; }
.lc-notifications__source--test { background: color-mix(in oklab, var(--lc-warning) 22%, transparent); color: var(--lc-warning); }

.lc-notifications__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex-grow: 1;
}
.lc-notifications__title {
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}
.lc-notifications__text {
    font-size: 0.875rem;
    color: var(--lc-text-muted);
    line-height: 1.35;
    word-break: break-word;
}
.lc-notifications__meta {
    font-size: 0.75rem;
    color: var(--lc-text-muted);
    opacity: 0.85;
    margin-top: 0.25rem;
}

.lc-notifications__dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--lc-accent);
    border-radius: 999px;
    margin-top: 0.4rem;
    flex-shrink: 0;
}

.lc-sidebar__user-dropdown { width: 100%; }

.lc-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    color: var(--lc-text);
    text-align: left;
    background: rgba(var(--lc-fx-tint), 0.04);
    border: 1px solid rgba(var(--lc-fx-tint), 0.06);
    border-radius: var(--lc-radius-md);
    cursor: pointer;
    transition: background var(--lc-duration-fast) var(--lc-ease);
}
.lc-sidebar__user:hover,
.lc-sidebar__user:focus-visible {
    background: rgba(var(--lc-fx-tint), 0.08);
    outline: none;
}
.lc-sidebar__user .lc-sidebar__user-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.95rem;
}
.lc-sidebar__user-caret {
    margin-left: auto;
    color: var(--lc-text-muted);
    font-size: 0.9rem;
    transition: transform 0.2s var(--lc-ease);
}
.lc-sidebar__user[aria-expanded="true"] .lc-sidebar__user-caret {
    transform: rotate(180deg);
}

/* User dropdown menu (opens upward via .dropup). Uses Popper strategy=fixed
   to escape the sidebar's flex overflow context. */
.lc-sidebar__user-menu {
    min-width: 14rem;
    padding: 0.375rem;
    color: var(--lc-text);
    background: color-mix(in oklab, var(--lc-bg) 88%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(var(--lc-fx-tint), 0.08);
    border-radius: var(--lc-radius-md);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(var(--lc-fx-tint), 0.08);
    animation: lcSidebarFade 0.16s var(--lc-ease);
    transform-origin: bottom center;
}
@keyframes lcSidebarFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lc-sidebar__user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--lc-text-muted);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--lc-radius-sm);
    font: inherit;
    transition: color var(--lc-duration-fast) var(--lc-ease),
                background var(--lc-duration-fast) var(--lc-ease);
}
.lc-sidebar__user-menu .dropdown-item:hover,
.lc-sidebar__user-menu .dropdown-item:focus {
    background: rgba(var(--lc-fx-tint), 0.08);
    color: var(--lc-text);
}
.lc-sidebar__user-menu .dropdown-item.active {
    background: color-mix(in oklab, var(--lc-accent) 25%, transparent);
    color: var(--lc-text);
}
.lc-sidebar__user-menu .dropdown-divider {
    border-top: 1px solid rgba(var(--lc-fx-tint), 0.08);
    margin: 0.375rem 0;
}

.lc-sidebar__user-header { padding: 0.5rem 0.75rem; }
.lc-sidebar__user-label {
    margin-bottom: 0.125rem;
    color: var(--lc-text-subtle);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lc-sidebar__user-name-full {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lc-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.lc-sidebar__signout { color: var(--lc-text-muted); }
.lc-sidebar__signout:hover,
.lc-sidebar__signout:focus {
    background: color-mix(in oklab, var(--lc-danger) 18%, transparent) !important;
    color: var(--lc-danger) !important;
}
[data-bs-theme="light"] .lc-sidebar__signout:hover,
[data-bs-theme="light"] .lc-sidebar__signout:focus {
    color: color-mix(in oklab, var(--lc-danger) 50%, var(--lc-text)) !important;
}

@supports not (backdrop-filter: blur(1px)) {
    .lc-sidebar,
    .lc-topbar,
    .lc-sidebar__user-menu {
        background: var(--lc-surface-solid);
    }
}

/* =========================================================
   Notes module
   ========================================================= */

/* Notes list */

.lc-notes-list-item {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}
.lc-notes-list-item .lc-card {
    height: 100%;
    cursor: pointer;
    transition: transform var(--lc-duration-fast) var(--lc-ease),
                border-color var(--lc-duration-fast) var(--lc-ease);
}
.lc-notes-list-item:hover .lc-card {
    transform: translateY(-2px);
    border: 1px solid var(--lc-glass-border-strong);
}
.lc-notes-list-item h3 { color: var(--lc-text); }

.lc-note-card__preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 4.5em;
    line-height: 1.5;
    margin: 0;
}

/* Note editor */

.lc-breadcrumb a {
    color: var(--lc-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color var(--lc-duration-fast) var(--lc-ease);
}
.lc-breadcrumb a:hover { color: var(--lc-text); }

.lc-note-editor__save-state { min-width: 4rem; text-align: right; }

.lc-note-editor__title-input {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-color: transparent !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    color: var(--lc-text) !important;
}
.lc-note-editor__title-input:hover:not(:disabled),
.lc-note-editor__title-input:focus {
    border-color: var(--lc-glass-border) !important;
    background: rgba(var(--lc-fx-tint), 0.02) !important;
}

/* Detail-page owner action pair (share + delete). Desktop: `display: contents`
   so both buttons sit inline with the other action items in the parent flex row.
   Mobile: wraps to a dedicated full-width row with share pinned left and
   delete pinned right, so the thumb hits opposite sides of the screen.
   Pair with `.lc-page-actions` on the parent so the wrapped line spans the
   full viewport width, not just the parent's content width. */
.lc-owner-actions { display: contents; }

@media (max-width: 767.98px) {
    .lc-page-actions { flex: 1 1 100%; }
    .lc-owner-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1 0 100%;
        justify-content: space-between;
    }
}

/* WYSIWYG editor - Simple mode. Rendered content edited in a contenteditable div. */
.lc-wysiwyg {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lc-wysiwyg__content {
    min-height: 24rem;
    padding: 1rem 1.25rem;
    line-height: 1.65;
    font-family: inherit;
    font-size: 1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    resize: vertical;
    overflow-y: auto;
    outline: none;
    cursor: text;
}
.lc-wysiwyg__content:focus {
    box-shadow: inset 0 0 0 1px var(--lc-accent-glow);
}
/* Placeholder shown when the editable div is empty. */
.lc-wysiwyg__content:empty::before {
    content: attr(data-placeholder);
    color: var(--lc-text-subtle);
    pointer-events: none;
}
/* Task-list styling inherited from .lc-markdown; enable native (editable) checkboxes here.
   Override the read-only view's absolute-positioned checkbox with flex layout - contenteditable
   plays badly with position:absolute (browser inserts <br>/<div> that pushes text below the
   absolutely-positioned checkbox), so we lay them out inline with flex baseline alignment. */
.lc-wysiwyg__content li.task-list-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: static;
    margin-left: 0;
    padding-left: 0;
    min-height: 1.65em;
}
.lc-wysiwyg__content li.task-list-item > input[type="checkbox"] {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}
/* Give the text side of the flex row room to wrap without breaking under the checkbox. */
.lc-wysiwyg__content li.task-list-item > *:not(input[type="checkbox"]) {
    min-width: 0;
}
/* Nested lists inside a task item wrap to their own line, indented past the checkbox. */
.lc-wysiwyg__content li.task-list-item > ul,
.lc-wysiwyg__content li.task-list-item > ol {
    flex-basis: 100%;
    margin: 0;
    padding-left: 1.5rem;
}

/* Markdown editor */

.lc-md-editor {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lc-md-editor__toolbar {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem;
    background: rgba(var(--lc-fx-tint), 0.03);
    border: 1px solid var(--lc-glass-border);
    border-bottom: none;
    border-top-left-radius: var(--lc-radius-md);
    border-top-right-radius: var(--lc-radius-md);
}
.lc-md-editor__sep {
    display: inline-block;
    width: 1px;
    height: 1.5rem;
    background: var(--lc-glass-border-strong, var(--lc-glass-border));
    margin: 0 0.5rem;
    opacity: 0.75;
}
.lc-md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    color: var(--lc-text-muted);
    border: none;
    border-radius: var(--lc-radius-sm);
    cursor: pointer;
    transition: background var(--lc-duration-fast) var(--lc-ease),
                color var(--lc-duration-fast) var(--lc-ease),
                transform var(--lc-duration-fast) var(--lc-ease);
}
@media (max-width: 767.98px) {
    .lc-md-btn { width: 2.75rem; height: 2.75rem; }
}
.lc-md-btn:hover { background: var(--lc-surface-elevated); color: var(--lc-text); }
.lc-md-btn:active { transform: scale(0.94); }
.lc-md-editor__textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    resize: vertical;
}

/* Rendered markdown */

.lc-markdown { line-height: 1.65; color: var(--lc-text); }
.lc-markdown > *:first-child { margin-top: 0; }
.lc-markdown > *:last-child { margin-bottom: 0; }
.lc-markdown h1,
.lc-markdown h2,
.lc-markdown h3,
.lc-markdown h4 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    color: var(--lc-text);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.lc-markdown h1 { font-size: 1.75rem; }
.lc-markdown h2 { font-size: 1.375rem; }
.lc-markdown h3 { font-size: 1.125rem; }
.lc-markdown h4 { font-size: 1rem; }
.lc-markdown p { margin: 0.75em 0; }
.lc-markdown ul,
.lc-markdown ol { padding-left: 1.5rem; margin: 0.75em 0; }
.lc-markdown li { margin: 0.25em 0; }
.lc-markdown li.task-list-item {
    list-style: none;
    margin-left: -1.5rem;
    padding-left: 1.5rem;
    position: relative;
}
.lc-markdown li.task-list-item input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.35em;
    accent-color: var(--lc-success);
    cursor: pointer;
}
.lc-markdown li.task-list-item input[type="checkbox"]:disabled {
    cursor: default;
}
.lc-markdown code {
    background: var(--lc-surface-elevated);
    padding: 0.1em 0.35em;
    border-radius: var(--lc-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}
.lc-markdown pre {
    background: var(--lc-surface-elevated);
    padding: 1rem;
    border-radius: var(--lc-radius-md);
    overflow-x: auto;
    border: 1px solid var(--lc-glass-border);
    margin: 0.75em 0;
}
.lc-markdown pre code { background: transparent; padding: 0; font-size: 0.875em; }
.lc-markdown blockquote {
    border-left: 3px solid var(--lc-accent);
    padding-left: 1rem;
    margin: 0.75em 0;
    color: var(--lc-text-muted);
}
.lc-markdown a { color: var(--lc-accent); text-decoration: none; }
.lc-markdown a:hover { color: var(--lc-accent-hover); text-decoration: underline; }
.lc-markdown hr {
    border: 0;
    border-top: 1px solid var(--lc-glass-border);
    margin: 1.5em 0;
}



/* =========================================================
   Consumables module
   ========================================================= */

.lc-consumable {
    padding: 1.25rem;
}

.lc-consumable__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lc-consumable__info {
    flex: 1 1 220px;
    min-width: 0;
}

.lc-consumable__name {
    color: var(--lc-text);
    word-break: break-word;
}

.lc-consumable__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}

.lc-consumable__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lc-text);
    font-variant-numeric: tabular-nums;
}

.lc-consumable__amount {
    color: var(--lc-text);
    font-variant-numeric: tabular-nums;
}

.lc-consumable__edit {
    border-top: 1px solid var(--lc-glass-border);
}

.lc-consumable--low {
    border-color: color-mix(in oklab, var(--lc-warning) 45%, var(--lc-glass-border));
    background: color-mix(in oklab, var(--lc-warning) 6%, var(--lc-surface));
}

/* =========================================================
   Draggable list rows (Cars item library, extendable)
   ========================================================= */

.lc-item-row { transition: opacity var(--lc-duration-fast) var(--lc-ease); }
.lc-item-row__grip {
    color: var(--lc-text-subtle);
    cursor: grab;
    font-size: 1.25rem;
    padding: 0.25rem;
    line-height: 1;
    user-select: none;
}
.lc-item-row__grip:hover { color: var(--lc-text); }
.lc-item-row__grip:active { cursor: grabbing; }
.lc-item-row--dragging > .lc-card { opacity: 0.45; }
.lc-item-row--drag-over > .lc-card {
    outline: 2px dashed var(--lc-accent);
    outline-offset: 2px;
}

/* Segmented control (Bootstrap btn-check inputs styled to the design system). */
.lc-segmented {
    display: inline-flex;
    padding: 0.2rem;
    background: color-mix(in oklab, var(--lc-surface-elevated) 55%, transparent);
    border: 1px solid var(--lc-glass-border);
    border-radius: 0.75rem;
    gap: 0.15rem;
    flex-wrap: wrap;
}
.lc-segmented__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.55rem;
    color: var(--lc-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    margin: 0;
    min-height: 2rem;
    background: transparent;
    border: 0;
    transition: background var(--lc-duration-fast) var(--lc-ease),
                color var(--lc-duration-fast) var(--lc-ease),
                box-shadow var(--lc-duration-fast) var(--lc-ease);
}
.lc-segmented__option:hover { color: var(--lc-text); }
.lc-segmented__option--active,
.lc-segmented input.btn-check:checked + .lc-segmented__option {
    background: color-mix(in oklab, var(--lc-accent) 22%, var(--lc-surface-elevated));
    color: var(--lc-text);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lc-accent) 45%, var(--lc-glass-border));
}
.lc-segmented__option:focus-visible,
.lc-segmented input.btn-check:focus-visible + .lc-segmented__option {
    outline: 2px solid var(--lc-accent);
    outline-offset: 2px;
}
.lc-segmented__option:disabled,
.lc-segmented input.btn-check:disabled + .lc-segmented__option {
    opacity: 0.55;
    cursor: not-allowed;
}

/* =========================================================
   Food module
   ========================================================= */

.lc-food-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--lc-surface-elevated) 60%, transparent);
    border: 1px solid var(--lc-glass-border);
    color: var(--lc-text);
    font-variant-numeric: tabular-nums;
}

.lc-food-chip--kcal {
    background: color-mix(in oklab, var(--lc-accent) 18%, var(--lc-surface-elevated));
    border-color: color-mix(in oklab, var(--lc-accent) 45%, var(--lc-glass-border));
    font-weight: 600;
}

.lc-food-edit {
    border-top: 1px solid var(--lc-glass-border);
}

.lc-food-summary {
    padding: 0.5rem 0;
}

.lc-food-summary + .lc-food-summary {
    border-top: 1px solid var(--lc-glass-border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
}

.lc-food-summary__label {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.lc-food-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    flex-wrap: wrap;
}

.lc-food-entry + .lc-food-entry {
    border-top: 1px solid var(--lc-glass-border);
}

.lc-food-entry--editing {
    background: color-mix(in oklab, var(--lc-accent) 6%, transparent);
}

.lc-food-entry__main {
    flex: 1 1 220px;
    min-width: 0;
}

.lc-food-entry__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.lc-food-entry__qty {
    width: 5rem;
}

.lc-food-add {
    border-top: 1px solid var(--lc-glass-border);
}

/* --- MyFitnessPal-style food diary redesign --- */

.lc-food-datenav {
    padding: 0.5rem 0.75rem;
}

.lc-cal-remaining {
    padding: 0.9rem 1rem;
}
.lc-cal-remaining__title {
    color: var(--lc-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}
.lc-cal-remaining__formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.lc-cal-remaining__part {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.5rem;
}
.lc-cal-remaining__val {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}
.lc-cal-remaining__lbl {
    font-size: 0.75rem;
    color: var(--lc-text-muted);
    margin-top: 0.15rem;
    text-transform: lowercase;
}
.lc-cal-remaining__op {
    font-size: 1.5rem;
    color: var(--lc-text-muted);
    font-weight: 300;
}

/* Desktop diary table */
.lc-food-diary {
    padding: 0;
    overflow-x: auto;
}
.lc-food-diary__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.lc-food-diary__table th,
.lc-food-diary__table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--lc-glass-border);
    vertical-align: middle;
}
.lc-food-diary__table thead th {
    background: color-mix(in oklab, var(--lc-accent) 15%, var(--lc-surface-elevated));
    color: var(--lc-text);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    border-bottom: 1px solid var(--lc-glass-border-strong, var(--lc-glass-border));
}
.lc-food-diary__table thead th:first-child { text-align: left; }
.lc-food-diary__meal-head td {
    background: color-mix(in oklab, var(--lc-surface-elevated) 55%, transparent);
    font-weight: 600;
    font-size: 1rem;
    padding-top: 0.85rem;
    padding-bottom: 0.5rem;
    color: var(--lc-text);
    border-bottom: 1px solid var(--lc-glass-border);
}
.lc-food-diary__entry td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.lc-food-diary__entry--editing td { background: color-mix(in oklab, var(--lc-accent) 6%, transparent); }
.lc-food-diary__subtotal td {
    background: color-mix(in oklab, var(--lc-surface-elevated) 30%, transparent);
    color: var(--lc-accent);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.lc-food-diary__addrow td {
    background: color-mix(in oklab, var(--lc-surface-elevated) 40%, transparent);
    padding: 0.75rem 0.6rem;
}
.lc-food-diary__totals th,
.lc-food-diary__totals td { padding-top: 0.7rem; padding-bottom: 0.5rem; font-weight: 600; border-top: 2px solid var(--lc-glass-border-strong, var(--lc-glass-border)); border-bottom: 0; }
.lc-food-diary__goal th,
.lc-food-diary__goal td { padding-top: 0.3rem; padding-bottom: 0.3rem; color: var(--lc-text-muted); border-bottom: 0; }
.lc-food-diary__remaining th,
.lc-food-diary__remaining td { padding-top: 0.3rem; padding-bottom: 0.7rem; font-weight: 600; border-bottom: 0; }
.lc-food-diary__table tfoot th { background: color-mix(in oklab, var(--lc-accent) 10%, var(--lc-surface-elevated)); text-align: right; }
.lc-food-diary__qty { width: 5rem; }

/* Mobile meal cards */
.lc-meal-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.lc-meal-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.15rem 0;
    color: var(--lc-text);
}
.lc-meal-card__macros {
    color: var(--lc-text-muted);
    font-size: 0.8rem;
}
.lc-meal-card__kcal {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--lc-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lc-meal-card__entries { display: flex; flex-direction: column; }
.lc-meal-entry {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "main kcal"
        "actions actions";
    row-gap: 0.35rem;
    column-gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--lc-glass-border);
}
.lc-meal-entry__main { grid-area: main; min-width: 0; }
.lc-meal-entry__kcal {
    grid-area: kcal;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--lc-text);
}
.lc-meal-entry__actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    align-items: center;
}
.lc-meal-entry__name {
    color: var(--lc-text);
    font-weight: 500;
    word-break: break-word;
}
.lc-meal-entry__desc {
    color: var(--lc-text-muted);
    font-size: 0.85rem;
    word-break: break-word;
}
.lc-meal-entry--editing { background: color-mix(in oklab, var(--lc-accent) 6%, transparent); border-radius: 0.5rem; }
.lc-meal-card__foot {
    border-top: 1px solid var(--lc-glass-border);
    padding-top: 0.6rem;
    margin-top: 0.35rem;
}
.lc-meal-card__addform {
    border-top: 1px solid var(--lc-glass-border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

/* Mobile totals block */
.lc-food-mobile-totals__row {
    padding: 0.5rem 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.lc-food-mobile-totals__row + .lc-food-mobile-totals__row {
    border-top: 1px solid var(--lc-glass-border);
}

/* Calorie stats bar chart legend */
.lc-calchart__legend {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.lc-calchart__legend--success { background: var(--bs-success, #198754); }
.lc-calchart__legend--warning { background: var(--bs-warning, #ffc107); }
.lc-calchart__legend--danger  { background: var(--bs-danger, #dc3545); }
.lc-calchart__legend--goal {
    background: transparent;
    border-top: 2px dashed var(--bs-primary, #4a90e2);
    border-radius: 0;
    height: 2px;
    width: 16px;
}

/* Auto-computed kcal target callout (Mitybos tikslai modal) */
.lc-computed-kcal {
    background: color-mix(in oklab, var(--lc-accent) 12%, var(--lc-surface-elevated));
    border: 1px solid color-mix(in oklab, var(--lc-accent) 35%, var(--lc-glass-border));
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lc-food-atwater-btn {
    background: none;
    border: 0;
    padding: 0 0.25rem;
    color: var(--lc-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--lc-duration-fast) var(--lc-ease);
}

.lc-food-atwater-btn:hover {
    color: var(--lc-accent);
}

.lc-food-atwater--mismatch {
    color: color-mix(in oklab, var(--lc-warning) 70%, var(--lc-text));
}

.lc-recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.lc-recipe-card {
    display: flex;
    flex-direction: column;
    background: var(--lc-surface);
    border: 1px solid var(--lc-glass-border);
    border-radius: 0.9rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--lc-duration-fast) var(--lc-ease), transform var(--lc-duration-fast) var(--lc-ease);
}

.lc-recipe-card:hover {
    border-color: var(--lc-glass-border-strong);
    transform: translateY(-1px);
}

.lc-recipe-card__photo {
    aspect-ratio: 4 / 3;
    background: color-mix(in oklab, var(--lc-surface-elevated) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lc-text-subtle);
    font-size: 2.5rem;
    overflow: hidden;
    position: relative;
}

.lc-recipe-card__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc-recipe-card__body {
    padding: 0.8rem 0.9rem 1rem;
}

.lc-recipe-card__name {
    font-weight: 600;
    color: var(--lc-text);
    margin-bottom: 0.15rem;
    word-break: break-word;
}

.lc-recipe-card__meta {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.lc-recipe-ing {
    display: grid;
    grid-template-columns: 1fr 6rem auto auto;
    gap: 0.5rem;
    align-items: center;
}

.lc-recipe-ing--head {
    padding: 0 0.25rem 0.25rem;
    border-bottom: 1px solid var(--lc-glass-border);
}

.lc-recipe-photo {
    width: 12rem;
    height: 9rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: color-mix(in oklab, var(--lc-surface-elevated) 45%, transparent);
    border: 1px solid var(--lc-glass-border);
    flex-shrink: 0;
}
.lc-recipe-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lc-recipe-photo__ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lc-text-subtle);
    font-size: 2.5rem;
}

.lc-recipe-ing__unit {
    padding-right: 0.25rem;
}

.lc-recipe-totals {
    border-top: 1px solid var(--lc-glass-border);
}

.lc-cart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.lc-cart-card {
    background: var(--lc-surface);
    border: 1px solid var(--lc-glass-border);
    border-radius: 0.9rem;
    transition: border-color var(--lc-duration-fast) var(--lc-ease), transform var(--lc-duration-fast) var(--lc-ease);
    overflow: hidden;
}

.lc-cart-card:hover {
    border-color: var(--lc-glass-border-strong);
    transform: translateY(-1px);
}

.lc-cart-card__body {
    padding: 1rem 1.25rem 1.1rem;
    cursor: pointer;
}

.lc-cart-card__name {
    color: var(--lc-text);
    word-break: break-word;
}

.lc-cart-card__chevron {
    color: var(--lc-text-subtle);
    font-size: 1.1rem;
    align-self: center;
}

.lc-cart-card__preview {
    border-top: 1px dashed var(--lc-glass-border);
    padding-top: 0.6rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lc-cart-card__preview-row {
    display: grid;
    grid-template-columns: 1rem 1fr auto;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.lc-cart-card__preview-row--done {
    opacity: 0.55;
}

.lc-cart-card__preview-row--done .lc-cart-card__preview-name {
    text-decoration: line-through;
}

.lc-cart-card__preview-icon {
    color: var(--lc-text-subtle);
    font-size: 0.85rem;
}

.lc-cart-card__preview-name {
    color: var(--lc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-cart-amount {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--lc-accent) 18%, var(--lc-surface-elevated));
    border: 1px solid color-mix(in oklab, var(--lc-accent) 40%, var(--lc-glass-border));
    color: var(--lc-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.lc-cart-amount--sm {
    padding: 0.05rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: color-mix(in oklab, var(--lc-surface-elevated) 70%, transparent);
    border-color: var(--lc-glass-border);
}

.lc-cart-row2 {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 0.25rem;
    border-radius: 0.5rem;
    transition: background var(--lc-duration-fast) var(--lc-ease);
}

.lc-cart-row2 + .lc-cart-row2 {
    border-top: 1px solid var(--lc-glass-border);
}

.lc-cart-row2:hover {
    background: color-mix(in oklab, var(--lc-surface-elevated) 40%, transparent);
}

.lc-cart-row2--done {
    opacity: 0.6;
}

.lc-cart-row2--done .lc-cart-row2__name {
    text-decoration: line-through;
    color: var(--lc-text-muted);
}

.lc-cart-row2__grip-placeholder {
    width: 1.75rem;
}

.lc-cart-row2__check {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.lc-cart-row2__check .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--lc-accent);
}

.lc-cart-row2__kind {
    color: var(--lc-text-subtle);
    font-size: 1rem;
}

.lc-cart-row2__name {
    color: var(--lc-text);
    font-weight: 500;
    word-break: break-word;
    min-width: 0;
}

/* Click-to-edit variant of __name. Styled to look like plain text; the pencil hint
   fades in on hover / focus so idle rows stay clean. */
.lc-cart-row2__name--editable {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    margin: -0.15rem -0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    text-align: left;
    cursor: text;
    font: inherit;
    color: inherit;
    transition: background var(--lc-duration-fast) var(--lc-ease),
                border-color var(--lc-duration-fast) var(--lc-ease);
}

.lc-cart-row2__name--editable:hover,
.lc-cart-row2__name--editable:focus-visible {
    background: color-mix(in oklab, var(--lc-surface-elevated) 60%, transparent);
    border-color: var(--lc-glass-border);
    outline: none;
}

.lc-cart-row2__name-edit-hint {
    font-size: 0.75rem;
    color: var(--lc-text-subtle);
    opacity: 0;
    transition: opacity var(--lc-duration-fast) var(--lc-ease);
}

.lc-cart-row2__name--editable:hover .lc-cart-row2__name-edit-hint,
.lc-cart-row2__name--editable:focus-visible .lc-cart-row2__name-edit-hint {
    opacity: 1;
}

.lc-cart-row2__name-edit {
    min-width: 0;
}

.lc-input--inline {
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
}

/* Generic click-to-edit inline title (used by car reminders; mirrors the cart
   item name pattern). Renders as plain text; a pencil hint fades in on hover
   or keyboard focus so idle cards stay clean. */
.lc-editable-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    margin: -0.15rem -0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    text-align: left;
    cursor: text;
    font: inherit;
    color: inherit;
    transition: background var(--lc-duration-fast) var(--lc-ease),
                border-color var(--lc-duration-fast) var(--lc-ease);
}
.lc-editable-title:hover,
.lc-editable-title:focus-visible {
    background: color-mix(in oklab, var(--lc-surface-elevated) 60%, transparent);
    border-color: var(--lc-glass-border);
    outline: none;
}
.lc-editable-title-hint {
    font-size: 0.75rem;
    color: var(--lc-text-subtle);
    opacity: 0;
    transition: opacity var(--lc-duration-fast) var(--lc-ease);
}
.lc-editable-title:hover .lc-editable-title-hint,
.lc-editable-title:focus-visible .lc-editable-title-hint {
    opacity: 1;
}

.lc-cart-row2__qty-edit {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 8rem;
}

.lc-cart-row2__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .lc-cart-row2 {
        grid-template-columns: auto auto auto 1fr auto;
        grid-template-areas:
            "grip check kind name name"
            ".    .     .    qty  actions";
        row-gap: 0.25rem;
        column-gap: 0.5rem;
        padding: 0.4rem 0.25rem;
    }
    .lc-item-row__grip,
    .lc-cart-row2__grip-placeholder { grid-area: grip; }
    .lc-cart-row2__check { grid-area: check; }
    .lc-cart-row2__kind { grid-area: kind; }
    .lc-cart-row2__name,
    .lc-cart-row2__name-edit { grid-area: name; }
    .lc-cart-row2__qty-edit,
    .lc-cart-amount { grid-area: qty; justify-self: end; width: auto; }
    .lc-cart-row2__actions { grid-area: actions; justify-self: end; }
}

.lc-cart-done {
    background: color-mix(in oklab, var(--lc-surface-solid) 60%, transparent);
}

.lc-plan__cart-picker {
    max-width: 12rem;
}

.lc-spin {
    animation: lc-spin 0.8s linear infinite;
}

@keyframes lc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* == Friends + Sharing ==================================================== */

/* Pill-style tab strip. Shared between Friends and Settings pages. */
.lc-friends-tabs .nav-link,
.lc-settings-tabs .nav-link {
    color: var(--lc-text-muted);
    background: transparent;
    border: 1px solid transparent;
}
.lc-friends-tabs .nav-link:hover,
.lc-settings-tabs .nav-link:hover { color: var(--lc-text); }
.lc-friends-tabs .nav-link.active,
.lc-settings-tabs .nav-link.active {
    background: var(--lc-glass-bg);
    color: var(--lc-text);
    border-color: var(--lc-glass-border);
}

.lc-friend-lookup {
    padding: 1rem;
    border: 1px solid var(--lc-glass-border);
    border-radius: 0.5rem;
    background: rgba(var(--lc-fx-tint), 0.02);
}

.lc-share-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 24rem;
    overflow-y: auto;
}
.lc-share-list__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--lc-glass-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.lc-share-list__row:hover { background: rgba(var(--lc-fx-tint), 0.03); }
.lc-share-list__row input[type="checkbox"] { margin: 0; }
.lc-share-list__name { flex-grow: 1; }

.lc-recipe-ing-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.9;
}


/* == Collab presence chips ================================================ */

.lc-presence-row {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.25rem;
}

/* Empty roster must not eat flex column-gap next to sibling action buttons. */
.lc-presence-row:empty {
    display: none;
}

.lc-presence-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    border: 2px solid var(--lc-bg, #0a0e1a);
    margin-left: -0.35rem;
    box-shadow: 0 0 0 1px rgba(var(--lc-fx-tint),0.15);
}

.lc-presence-chip:first-child { margin-left: 0; }

.lc-share-list__row {
    flex-wrap: wrap;
}
.lc-share-list__check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    cursor: pointer;
}
.lc-share-list__perm {
    margin-left: 2.75rem;
    flex: 0 0 auto;
}

/* =========================================================
   Theme toggle - pill with sun+moon, active option highlighted.
   ========================================================= */

.lc-theme-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    gap: 0.1rem;
    background: rgba(var(--lc-fx-tint), 0.05);
    border: 1px solid var(--lc-glass-border);
    border-radius: 999px;
    line-height: 1;
}

.lc-theme-toggle__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: var(--lc-text-subtle);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    transition: color var(--lc-duration-fast) var(--lc-ease),
                background var(--lc-duration-fast) var(--lc-ease),
                box-shadow var(--lc-duration-fast) var(--lc-ease);
}

.lc-theme-toggle__opt i { font-size: 0.95rem; line-height: 1; }

.lc-theme-toggle__opt:hover { color: var(--lc-text); }

.lc-theme-toggle__opt:focus-visible {
    outline: 2px solid var(--lc-accent);
    outline-offset: 2px;
}

/* Active option = the one matching the current theme. */
[data-bs-theme="dark"] .lc-theme-toggle__opt--dark,
[data-bs-theme="light"] .lc-theme-toggle__opt--light {
    background: color-mix(in oklab, var(--lc-accent) 22%, transparent);
    color: var(--lc-accent-hover);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lc-accent) 45%, transparent);
}

[data-bs-theme="light"] .lc-theme-toggle__opt--dark,
[data-bs-theme="dark"] .lc-theme-toggle__opt--light {
    color: var(--lc-text-subtle);
}
[data-bs-theme="light"] .lc-theme-toggle__opt--dark:hover,
[data-bs-theme="dark"] .lc-theme-toggle__opt--light:hover {
    color: var(--lc-text);
}


/* In-app push toast moved to wwwroot/css/06-overlays.css */


/* =========================================================================
 * Progression chart (per-CycleExercise weight history)
 * ========================================================================= */

.lc-progression-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: color-mix(in oklab, var(--lc-surface-elevated) 60%, transparent);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
}

.lc-progression-chart__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--lc-text-muted);
}

.lc-progression-chart__count { white-space: nowrap; }

.lc-progression-chart__delta {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: color-mix(in oklab, var(--lc-accent) 15%, transparent);
    color: var(--lc-accent);
}
.lc-progression-chart__delta--up   { background: color-mix(in oklab, #10b981 18%, transparent); color: #10b981; }
.lc-progression-chart__delta--down { background: color-mix(in oklab, #f43f5e 18%, transparent); color: #f43f5e; }

.lc-progression-chart__svg {
    width: 100%;
    height: auto;
    max-height: 260px;
    display: block;
    overflow: visible;
}

.lc-progression-chart__grid {
    stroke: var(--lc-border);
    stroke-width: 1;
    opacity: 0.5;
}
.lc-progression-chart__grid--x { opacity: 0.25; }

.lc-progression-chart__axis-label {
    fill: var(--lc-text-muted);
    font-size: 12px;
    font-family: inherit;
}

.lc-progression-chart__line {
    stroke: var(--lc-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.lc-progression-chart__dot {
    fill: var(--lc-accent);
    stroke: var(--lc-surface-solid);
    stroke-width: 1.5;
}


/* =========================================================
   Discount cards (loyalty cards). Grid tiles + info modal barcode.
   ========================================================= */
.lc-dc-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
    width: 100%;
    padding: 1rem;
    cursor: pointer;
    background: var(--lc-surface);
    color: inherit;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    transition:
        transform var(--lc-duration-fast) var(--lc-ease),
        border-color var(--lc-duration-fast) var(--lc-ease),
        box-shadow var(--lc-duration-fast) var(--lc-ease);
}
.lc-dc-tile:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--lc-primary) 40%, var(--lc-border));
    box-shadow: var(--lc-shadow-sm);
}
.lc-dc-tile__title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--lc-text);
    line-height: 1.25;
}
.lc-dc-tile__cat {
    line-height: 1.25;
}

.lc-dc__barcode-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: #ffffff;
    border-radius: var(--lc-radius-md);
    border: 1px solid var(--lc-border);
}
.lc-dc__barcode {
    display: block;
    width: 100%;
    max-width: 20rem;
}
.lc-dc__barcode svg {
    display: block;
    max-width: 100%;
    height: auto;
}
.lc-barcode__error {
    margin: 0;
    color: var(--lc-danger);
    font-size: 0.85rem;
}
.lc-dc__digits {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    background: var(--lc-surface-alt);
    border: 1px dashed var(--lc-border);
    border-radius: var(--lc-radius-md);
    color: var(--lc-text);
    cursor: copy;
    touch-action: manipulation;
    transition: background-color var(--lc-duration-fast) var(--lc-ease);
}
.lc-dc__digits:hover {
    background: color-mix(in oklab, var(--lc-primary) 8%, var(--lc-surface-alt));
}
.lc-dc__notes {
    white-space: pre-wrap;
    color: var(--lc-text);
    font-size: 0.95rem;
}

.lc-dc-cat-row {
    padding: 0.75rem 1rem;
}

/* App-wide scanner overlay - full-screen fixed backdrop + centered glass card. Stacks
   above Bootstrap modals (z-index 1055) so it works even when invoked from an already-
   open edit form. Mounted once in MainLayout via <LcScanner />. */
.lc-scanner-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lc-scanner-overlay__card {
    width: 100%;
    max-width: 32rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--lc-surface);
    border: 1px solid var(--lc-glass-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lc-scanner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lc-scanner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lc-scanner__stage {
    position: relative;
    background: #000;
    border-radius: var(--lc-radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-height: 60vh;
}
.lc-scanner__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lc-scanner__guide {
    position: absolute;
    inset: 15% 10%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}
.lc-scanner__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Photo cropper overlay - full-screen dimmed backdrop + glass card. Same z-index tier as the
   scanner (1100) so it stacks above Bootstrap modals. DOM is created / destroyed by
   lc-photo-crop.js; these classes are the only contract between the two. */
.lc-photocrop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Give the user's finger something to swipe on without accidentally scrolling the page
       behind the overlay. */
    touch-action: none;
}
.lc-photocrop-card {
    width: 100%;
    max-width: 32rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--lc-surface);
    border: 1px solid var(--lc-glass-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}
.lc-photocrop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.lc-photocrop-title {
    font-weight: 600;
    display: flex;
    align-items: center;
}
.lc-photocrop-close {
    background: transparent;
    border: 1px solid var(--lc-glass-border);
    color: var(--lc-text);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lc-photocrop-close:hover {
    background: color-mix(in oklab, var(--lc-surface-elevated) 60%, transparent);
}
.lc-photocrop-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: var(--lc-radius-md);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.lc-photocrop-frame:active { cursor: grabbing; }
.lc-photocrop-img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    max-height: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.lc-photocrop-hint {
    font-size: 0.8rem;
    color: var(--lc-text-subtle);
    text-align: center;
}
.lc-photocrop-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lc-photocrop-slider {
    flex-grow: 1;
    accent-color: var(--lc-primary);
}
.lc-photocrop-icon-btn {
    background: transparent;
    border: 1px solid var(--lc-glass-border);
    color: var(--lc-text);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.lc-photocrop-icon-btn:hover {
    background: color-mix(in oklab, var(--lc-surface-elevated) 60%, transparent);
}
.lc-photocrop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* In-app camera capture overlay. Same z-index tier + card shell as the cropper. Sits UPSTREAM
   of the cropper - user takes a shot, then the still image feeds into the crop overlay. */
.lc-photocam-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    touch-action: none;
}
.lc-photocam-card {
    width: 100%;
    max-width: 34rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--lc-surface);
    border: 1px solid var(--lc-glass-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}
.lc-photocam-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.lc-photocam-title {
    font-weight: 600;
    display: flex;
    align-items: center;
}
.lc-photocam-stage {
    position: relative;
    background: #000;
    border-radius: var(--lc-radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-height: 65vh;
}
.lc-photocam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lc-photocam-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.lc-photocam-spacer {
    /* Same nominal width as the Atšaukti button so the shutter stays centered. */
    width: 5.5rem;
    flex-shrink: 0;
}
.lc-photocam-shutter {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.lc-photocam-shutter__ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--lc-text);
    border-radius: 999px;
    pointer-events: none;
}
.lc-photocam-shutter__core {
    position: absolute;
    inset: 6px;
    background: var(--lc-text);
    border-radius: 999px;
    transition: transform 0.1s ease, background 0.1s ease;
    pointer-events: none;
}
.lc-photocam-shutter:hover .lc-photocam-shutter__core {
    background: var(--lc-primary);
}
.lc-photocam-shutter:active .lc-photocam-shutter__core {
    transform: scale(0.85);
}