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;
}

/* =========================================================
   LifeCompanion design tokens
   ========================================================= */

:root,
[data-bs-theme="dark"] {
    /* Base surfaces — blue-tinted dark, layered for depth */
    --lc-bg: #0a0e1a;
    --lc-surface-solid: #131a2a;
    --lc-surface: color-mix(in oklab, var(--lc-surface-solid) 75%, transparent);
    --lc-surface-elevated: #1a2237;
    --lc-glass-blur: 24px;
    --lc-glass-border: rgba(148, 163, 184, 0.16);
    --lc-glass-border-strong: rgba(148, 163, 184, 0.28);

    /* Text — higher contrast */
    --lc-text: #f8fafc;
    --lc-text-muted: #94a3b8;
    --lc-text-subtle: #64748b;

    /* Accents — vibrant electric blue */
    --lc-accent: #3b82f6;
    --lc-accent-hover: #60a5fa;
    --lc-accent-fg: white;
    --lc-accent-glow: rgba(59, 130, 246, 0.35);
    --lc-danger: #f43f5e;
    --lc-danger-hover: #fb7185;
    --lc-success: #22c55e;
    --lc-warning: #f59e0b;
    --lc-info: #06b6d4;

    /* Motion */
    --lc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --lc-duration-fast: 0.15s;
    --lc-duration-med: 0.3s;

    /* Shape — chunky glass radii */
    --lc-radius-sm: 0.5rem;
    --lc-radius-md: 0.875rem;
    --lc-radius-lg: 1.5rem;

    /* Elevation */
    --lc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --lc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --lc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="light"] {
    /* Placeholder. Populate when the light theme lands (Phase 2). */
}

body {
    background:
        radial-gradient(ellipse 55% 45% at 15% 15%, rgba(59, 130, 246, 0.32), transparent 55%),
        radial-gradient(ellipse 45% 55% at 85% 30%, rgba(139, 92, 246, 0.24), transparent 55%),
        radial-gradient(ellipse 55% 45% at 60% 90%, rgba(236, 72, 153, 0.18), transparent 55%),
        var(--lc-bg);
    background-attachment: fixed;
    color: var(--lc-text);
    min-height: 100vh;
    transition: background-color var(--lc-duration-med) var(--lc-ease),
                color var(--lc-duration-med) var(--lc-ease);
}

h1 {
    background: linear-gradient(135deg, var(--lc-text) 20%, var(--lc-accent-hover) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

main {
    padding: 1.5rem 0 3rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

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

/* Card / glass surface */

.lc-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px) saturate(160%);
    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(255, 255, 255, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* 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; }
}

/* 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;
}

.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);
    backdrop-filter: blur(20px);
    border-color: color-mix(in oklab, var(--lc-accent) 45%, transparent);
    color: var(--lc-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--lc-text-muted);
}
.lc-btn--secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--lc-text);
    transform: translateY(-1px);
}

.lc-btn--ghost {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.04);
    color: var(--lc-text-muted);
}
.lc-btn--ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--lc-text);
}

.lc-btn--danger {
    background: color-mix(in oklab, var(--lc-danger) 30%, transparent);
    backdrop-filter: blur(20px);
    border-color: color-mix(in oklab, var(--lc-danger) 45%, transparent);
    color: var(--lc-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 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(255, 255, 255, 0.3),
        0 8px 32px rgba(244, 63, 94, 0.4);
    transform: translateY(-1px);
}

/* 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(255, 255, 255, 0.04);
    color: var(--lc-text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--lc-radius-md);
    backdrop-filter: blur(16px);
    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(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.lc-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 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(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
}

.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 (migrated from MainLayout.razor.css — see design-system.md rule against .razor.css). Hidden until Blazor triggers it. */

#blazor-error-ui {
    background: var(--lc-surface-elevated, #14171c);
    color: var(--lc-text, #e6e8eb);
    border-top: 3px solid var(--lc-danger, #ff6b6b);
    bottom: 0;
    left: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* =========================================================
   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); }

/* =========================================================
   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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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; }
}

/* =========================================================
   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%;
    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 modal + Aurora glass overrides)
   ========================================================= */

.lc-modal .modal-content {
    background: color-mix(in oklab, var(--lc-bg) 82%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border: none;
    border-radius: var(--lc-radius-lg);
    color: var(--lc-text);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lc-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.25rem 1.5rem;
}

.lc-modal .modal-body { padding: 1.5rem; }

.lc-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem 1.5rem;
    gap: 0.5rem;
}

.lc-modal .btn-close {
    filter: invert(1) grayscale(1) opacity(0.6);
    transition: opacity var(--lc-duration-fast) var(--lc-ease);
}
.lc-modal .btn-close:hover { filter: invert(1) grayscale(1) opacity(0.9); }

/* Global backdrop — blurred + dimmed, matches Aurora Glass mood. */
.modal-backdrop {
    background: rgba(5, 8, 15, 0.6);
    backdrop-filter: blur(8px);
}
.modal-backdrop.show { opacity: 1; }

/* =========================================================
   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(255, 255, 255, 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); }

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

.lc-hero {
    padding: 4rem 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(255, 255, 255, 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(255, 255, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 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;
}

/* =========================================================
   Navbar (Bootstrap 5 navbar + Aurora glass overrides)
   ========================================================= */

.lc-navbar {
    background: color-mix(in oklab, var(--lc-bg) 60%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.5rem 1rem;
    z-index: 1030;
}

.lc-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lc-text);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    padding: 0.375rem 0;
}
.lc-navbar__brand i {
    color: var(--lc-accent);
    font-size: 1.35rem;
}
.lc-navbar__brand:hover { color: var(--lc-text); }

.lc-navbar .navbar-nav .nav-link {
    position: relative;
    color: var(--lc-text-muted);
    padding: 0.75rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border-radius: 0;
    transition: color var(--lc-duration-fast) var(--lc-ease);
}

/* Animated bottom underline, slides in from left on hover / active / open dropdown. */
.lc-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lc-accent), var(--lc-accent-hover));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--lc-ease);
}

.lc-navbar .navbar-nav .nav-link:hover,
.lc-navbar .navbar-nav .nav-link:focus-visible {
    color: var(--lc-text);
    background: transparent;
}

.lc-navbar .navbar-nav .nav-link.active,
.lc-navbar .navbar-nav .nav-link.show {
    color: var(--lc-text);
    background: transparent;
}

.lc-navbar .navbar-nav .nav-link:hover::after,
.lc-navbar .navbar-nav .nav-link:focus-visible::after,
.lc-navbar .navbar-nav .nav-link.active::after,
.lc-navbar .navbar-nav .nav-link.show::after {
    transform: scaleX(1);
}

.lc-navbar__brand {
    transition: color var(--lc-duration-fast) var(--lc-ease);
}
.lc-navbar__brand i {
    transition: transform var(--lc-duration-med) var(--lc-ease),
                filter var(--lc-duration-med) var(--lc-ease);
}
.lc-navbar__brand:hover i {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px var(--lc-accent-glow));
}

/* Hide Bootstrap default caret \u2014 we render a rotating chevron icon ourselves. */
.lc-navbar .dropdown-toggle::after { display: none; }

.lc-navbar__caret {
    margin-left: 0.25rem;
    font-size: 0.85rem;
    color: var(--lc-text-muted);
    transition: transform 0.2s var(--lc-ease),
                color var(--lc-duration-fast) var(--lc-ease);
}
.lc-navbar .nav-link.show .lc-navbar__caret {
    transform: rotate(180deg);
    color: var(--lc-text);
}
.lc-navbar .nav-link:hover .lc-navbar__caret { color: var(--lc-text); }

/* Truncate long usernames in the trigger so they don't blow up the nav. */
.lc-navbar__user-name-trigger {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* User dropdown header block (warzone pattern \u2014 "signed in as" cue). */
.lc-navbar__user-menu { min-width: 14rem; }
.lc-navbar__user-header {
    padding: 0.625rem 0.75rem 0.5rem;
}
.lc-navbar__user-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lc-text-subtle);
    margin-bottom: 0.125rem;
}
.lc-navbar__user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lc-text);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Language dropdown items \u2014 right-aligned 2-letter code chip. */
.lc-navbar__lang { min-width: 4.5rem; }
.lc-navbar .dropdown-item .lc-navbar__lang-code {
    margin-left: auto;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--lc-text-subtle);
}

/* Fade-in on dropdown open. Bootstrap toggles display, so this replays each open. */
.lc-navbar .dropdown-menu {
    animation: lcNavbarFade 0.16s var(--lc-ease);
    transform-origin: top center;
}
@keyframes lcNavbarFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lc-navbar .dropdown-toggle::after { margin-left: 0.375rem; }

.lc-navbar .dropdown-menu {
    background: color-mix(in oklab, var(--lc-bg) 82%, transparent);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--lc-radius-md);
    padding: 0.375rem;
    color: var(--lc-text);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    margin-top: 0.375rem;
    min-width: 12rem;
}
.lc-navbar .dropdown-item {
    color: var(--lc-text-muted);
    padding: 0.5rem 0.75rem;
    border-radius: var(--lc-radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--lc-duration-fast) var(--lc-ease),
                background var(--lc-duration-fast) var(--lc-ease);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font: inherit;
}
.lc-navbar .dropdown-item:hover,
.lc-navbar .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--lc-text);
}
.lc-navbar .dropdown-item.active {
    background: color-mix(in oklab, var(--lc-accent) 25%, transparent);
    color: var(--lc-text);
}
.lc-navbar .lc-navbar__signout { color: var(--lc-text-muted); }
.lc-navbar .lc-navbar__signout:hover,
.lc-navbar .lc-navbar__signout:focus {
    background: color-mix(in oklab, var(--lc-danger) 18%, transparent);
    color: var(--lc-danger);
}
.lc-navbar .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0.375rem 0;
}

/* Mobile burger button — glass tint. */
.lc-navbar .navbar-toggler {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--lc-text);
    padding: 0.375rem 0.625rem;
    border-radius: var(--lc-radius-sm);
}
.lc-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--lc-accent-glow); }
.lc-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 235, 245, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}



/* =========================================================
   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;
    margin-bottom: 1rem !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(255, 255, 255, 0.02) !important;
}

/* 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(255, 255, 255, 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.25rem;
}

.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;
}

.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 { 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); }
}