/* ==========================================================================
   Editorial Kitchen — Design System CSS
   Cooking.toto-land.fr
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   -------------------------------------------------------------------------- */

:root {
    /* Colors — Primary (Terracotta) */
    --de-primary: #9b452e;
    --de-primary-container: #ffad97;
    --de-on-primary: #ffffff;

    /* Colors — Secondary (Sage) */
    --de-secondary: #2f5e4a;
    --de-secondary-container: #c0f4d9;
    --de-on-secondary-container: #2f5e4a;

    /* Colors — Surfaces */
    --de-surface: #faf9f8;
    --de-surface-container-lowest: #ffffff;
    --de-surface-container-low: #f4f3f2;
    --de-surface-container-high: #e7e8e7;

    /* Colors — On-Surface */
    --de-on-surface: #303333;
    --de-on-surface-variant: #5d605f;
    --de-outline-variant: #b0b2b1;

    /* Colors — Semantic */
    --de-error: #ac3434;

    /* Typography */
    --de-font-editorial: 'Noto Serif', serif;
    --de-font-functional: 'Manrope', sans-serif;

    /* Shadows */
    --de-shadow-atmospheric: 0 4px 24px rgba(48, 51, 51, 0.04);
    --de-shadow-elevated: 0 8px 32px rgba(48, 51, 51, 0.08);

    /* Radii */
    --de-radius-md: 0.75rem;
    --de-radius-xl: 1.5rem;
    --de-radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */

.de-display-lg {
    font-family: var(--de-font-editorial);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--de-on-surface);
}

.de-headline-md {
    font-family: var(--de-font-editorial);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--de-on-surface);
}

.de-headline-sm {
    font-family: var(--de-font-editorial);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--de-on-surface);
}

.de-body-lg {
    font-family: var(--de-font-functional);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--de-on-surface);
}

.de-label-md {
    font-family: var(--de-font-functional);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--de-on-surface);
}

.de-label-sm {
    font-family: var(--de-font-functional);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--de-on-surface-variant);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.de-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border: none;
    border-radius: var(--de-radius-full);
    font-family: var(--de-font-functional);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.de-btn:active {
    transform: scale(0.98);
}

/* Primary — Terracotta solid */
.de-btn--primary {
    background-color: var(--de-primary);
    color: var(--de-on-primary);
}

.de-btn--primary:hover {
    background-color: #8c3923;
}

/* Secondary — Surface bg */
.de-btn--secondary {
    background-color: var(--de-surface-container-high);
    color: var(--de-on-surface-variant);
}

.de-btn--secondary:hover {
    background-color: #dcdedd;
}

/* Ghost — Transparent */
.de-btn--ghost {
    background-color: transparent;
    color: var(--de-on-surface-variant);
}

.de-btn--ghost:hover {
    background-color: rgba(48, 51, 51, 0.05);
}

/* CTA — Gradient hero */
.de-btn--cta {
    background: linear-gradient(135deg, var(--de-primary), var(--de-primary-container));
    color: var(--de-on-primary);
    padding: 0.875rem 2rem;
    font-size: 1rem;
    box-shadow: var(--de-shadow-elevated);
}

.de-btn--cta:hover {
    box-shadow: 0 10px 40px rgba(155, 69, 46, 0.25);
}

/* Google — White with border */
.de-btn--google {
    background-color: var(--de-surface-container-lowest);
    color: var(--de-on-surface);
    border: 1px solid var(--de-outline-variant);
    width: 100%;
}

.de-btn--google:hover {
    background-color: var(--de-surface-container-low);
}

/* Icon-only variant */
.de-btn--icon {
    padding: 0.5rem;
    border-radius: var(--de-radius-full);
    background: transparent;
    border: none;
    color: var(--de-on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.de-btn--icon:hover {
    background-color: rgba(48, 51, 51, 0.05);
}

/* --------------------------------------------------------------------------
   4. Inputs
   -------------------------------------------------------------------------- */

.de-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

.de-input-label {
    font-family: var(--de-font-functional);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--de-on-surface);
}

.de-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--de-surface-container-high);
    border: 2px solid transparent;
    border-radius: var(--de-radius-md);
    font-family: var(--de-font-functional);
    font-size: 0.9375rem;
    color: var(--de-on-surface);
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.de-input::placeholder {
    color: var(--de-outline-variant);
}

.de-input:focus {
    background-color: var(--de-surface-container-lowest);
    border-color: rgba(155, 69, 46, 0.2);
}

.de-input-wrapper {
    position: relative;
    width: 100%;
}

.de-input-wrapper .de-input {
    padding-right: 3rem;
}

.de-input-action {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.de-input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.de-input-link {
    font-family: var(--de-font-functional);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--de-primary);
    text-decoration: none;
    letter-spacing: 0.04em;
}

.de-input-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Cards & Glass
   -------------------------------------------------------------------------- */

.de-card {
    background-color: var(--de-surface-container-lowest);
    border-radius: var(--de-radius-xl);
    box-shadow: var(--de-shadow-atmospheric);
    padding: 2rem;
}

.de-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--de-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   6. Error message
   -------------------------------------------------------------------------- */

.de-error-message {
    background-color: rgba(172, 52, 52, 0.08);
    color: var(--de-error);
    padding: 0.75rem 1rem;
    border-radius: var(--de-radius-md);
    font-family: var(--de-font-functional);
    font-size: 0.875rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Separator ("OR USE EMAIL")
   -------------------------------------------------------------------------- */

.de-separator {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.de-separator::before,
.de-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--de-outline-variant);
    opacity: 0.4;
}

.de-separator span {
    font-family: var(--de-font-functional);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--de-outline-variant);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.de-footer {
    font-family: var(--de-font-functional);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--de-outline-variant);
    text-align: center;
}

/* --------------------------------------------------------------------------
   9. Full-Screen Layouts
   -------------------------------------------------------------------------- */

/* Base full-screen wrapper — isolates from Radzen styles */
.de-fullscreen {
    min-height: 100vh;
    background-color: var(--de-surface);
    font-family: var(--de-font-functional);
    color: var(--de-on-surface);
    display: flex;
    flex-direction: column;
}

.de-fullscreen *,
.de-fullscreen *::before,
.de-fullscreen *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   10. Login Page
   -------------------------------------------------------------------------- */

.de-login {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* Gradient background */
.de-login::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(192, 244, 217, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 70%, rgba(255, 173, 151, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(192, 244, 217, 0.3) 0%, transparent 40%),
        linear-gradient(135deg, var(--de-surface) 0%, #f0eeeb 100%);
    filter: blur(0px);
}

/* Left panel — login form */
.de-login__form {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.de-login__logo {
    font-family: var(--de-font-editorial);
    font-size: 1.75rem;
    font-weight: 400;
    font-style: italic;
    color: var(--de-primary);
    text-decoration: none;
}

.de-login__subtitle {
    font-family: var(--de-font-functional);
    font-size: 0.9375rem;
    color: var(--de-on-surface-variant);
    margin-top: -0.75rem;
}

.de-login__form-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.de-login__submit {
    width: 100%;
    margin-top: 0.5rem;
}

.de-login__create-account {
    font-family: var(--de-font-functional);
    font-size: 0.875rem;
    color: var(--de-on-surface-variant);
    text-align: center;
}

.de-login__create-account a {
    color: var(--de-on-surface);
    font-weight: 700;
    text-decoration: none;
}

.de-login__create-account a:hover {
    text-decoration: underline;
}

/* Right panel — quote */
.de-login__aside {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.de-login__quote-card {
    max-width: 380px;
    padding: 2.5rem;
    text-align: left;
}

.de-login__quote-icon {
    font-size: 1.5rem;
    color: var(--de-on-surface-variant);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.de-login__quote-text {
    font-family: var(--de-font-editorial);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--de-on-surface-variant);
}

.de-login__quote-author {
    font-family: var(--de-font-functional);
    font-size: 0.8125rem;
    color: var(--de-outline-variant);
    margin-top: 1rem;
}

.de-login__footer {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
}

/* Google SVG icon */
.de-google-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .de-login__aside {
        display: none;
    }

    .de-login__form {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   11. Status Pages (Blocked & Guest)
   -------------------------------------------------------------------------- */

.de-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* --- Blocked Page --- */

.de-blocked {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.de-blocked__header {
    padding: 2rem 2.5rem;
}

.de-blocked__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2rem 2.5rem;
}

.de-blocked__image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.de-blocked__image {
    width: 100%;
    max-width: 320px;
    border-radius: var(--de-radius-xl);
    object-fit: cover;
    box-shadow: var(--de-shadow-elevated);
}

.de-blocked__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.de-blocked__badge {
    color: var(--de-primary);
}

.de-blocked__title em {
    font-style: italic;
}

.de-blocked__message {
    color: var(--de-on-surface-variant);
    max-width: 360px;
}

.de-blocked__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.de-blocked__quote {
    font-family: var(--de-font-editorial);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--de-outline-variant);
    margin-top: 1.5rem;
    max-width: 360px;
    line-height: 1.6;
}

.de-blocked__footer {
    padding: 1.5rem 2.5rem;
    margin-top: auto;
}

@media (max-width: 768px) {
    .de-blocked__content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .de-blocked__info {
        align-items: center;
    }

    .de-blocked__message,
    .de-blocked__quote {
        max-width: 100%;
    }
}

/* --- Guest / Waiting Page --- */

.de-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 2rem;
}

.de-waiting__card {
    max-width: 400px;
    width: 100%;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.de-waiting__logo {
    font-family: var(--de-font-editorial);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--de-primary);
}

.de-waiting__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--de-radius-full);
    background-color: var(--de-secondary-container);
    color: var(--de-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-waiting__icon .material-symbols-outlined {
    font-size: 1.5rem;
}

.de-waiting__title {
    font-family: var(--de-font-editorial);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--de-on-surface);
    line-height: 1.4;
}

.de-waiting__message {
    font-family: var(--de-font-functional);
    font-size: 0.9375rem;
    color: var(--de-on-surface-variant);
    line-height: 1.5;
}

.de-waiting__footer {
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   12. Alerts (replaces RadzenAlert)
   -------------------------------------------------------------------------- */

.de-alert { padding: 0.625rem 1rem; border-radius: var(--de-radius-md); font-family: var(--de-font-functional); font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem; margin-bottom: 0.5rem; }
.de-alert--error { background-color: rgba(172, 52, 52, 0.08); color: #ac3434; }
.de-alert--warning { background-color: rgba(200, 150, 30, 0.08); color: #8a6d14; }
.de-alert--info { background-color: rgba(47, 94, 74, 0.08); color: var(--de-secondary); }
.de-alert--success { background-color: rgba(47, 94, 74, 0.12); color: var(--de-secondary); }

/* --------------------------------------------------------------------------
   13. Toggle Switch (replaces RadzenSwitch)
   -------------------------------------------------------------------------- */

.de-switch { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.de-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.de-switch__track { width: 2.75rem; height: 1.5rem; background-color: var(--de-surface-container-high); border-radius: var(--de-radius-full); position: relative; transition: background-color 0.2s ease; }
.de-switch input:checked + .de-switch__track { background-color: var(--de-primary); }
.de-switch__thumb { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; background-color: var(--de-surface-container-lowest); border-radius: var(--de-radius-full); transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.de-switch input:checked + .de-switch__track .de-switch__thumb { transform: translateX(1.25rem); }
.de-switch input:disabled + .de-switch__track { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   14. Checkbox (replaces RadzenCheckBox)
   -------------------------------------------------------------------------- */

.de-checkbox { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: var(--de-font-functional); font-size: 0.9375rem; color: var(--de-on-surface); }
.de-checkbox input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--de-primary); cursor: pointer; }
.de-checkbox input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   15. Select / Dropdown (replaces RadzenDropDown)
   -------------------------------------------------------------------------- */

.de-select { width: 100%; padding: 0.75rem 2.5rem 0.75rem 1rem; background-color: var(--de-surface-container-high); border: 2px solid transparent; border-radius: var(--de-radius-md); font-family: var(--de-font-functional); font-size: 0.9375rem; color: var(--de-on-surface); outline: none; transition: all 0.2s ease; box-sizing: border-box; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23303333' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.de-select:focus { background-color: var(--de-surface-container-lowest); border-color: rgba(155, 69, 46, 0.2); }
.de-select:disabled { opacity: 0.5; cursor: not-allowed; }
.de-select option { background-color: var(--de-surface-container-lowest); color: var(--de-on-surface); }

/* --------------------------------------------------------------------------
   16. Dropdown menu (custom multi-select, autocomplete)
   -------------------------------------------------------------------------- */

.de-dropdown { position: relative; width: 100%; }
.de-dropdown__menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; max-height: 15rem; overflow-y: auto; background-color: var(--de-surface-container-lowest); border-radius: var(--de-radius-md); box-shadow: var(--de-shadow-elevated); margin-top: 0.25rem; border: 1px solid rgba(176, 178, 177, 0.2); }
.de-dropdown__item { padding: 0.5rem 1rem; cursor: pointer; font-family: var(--de-font-functional); font-size: 0.9375rem; color: var(--de-on-surface); display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.15s ease; }
.de-dropdown__item:hover { background-color: var(--de-surface-container-low); }
.de-dropdown__item--active { background-color: rgba(155, 69, 46, 0.08); }
.de-dropdown__item--selected { font-weight: 600; }
.de-dropdown__empty { padding: 0.75rem 1rem; color: var(--de-on-surface-variant); font-style: italic; font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   17. Data Table (replaces RadzenDataGrid)
   -------------------------------------------------------------------------- */

.de-table-wrapper { width: 100%; overflow-x: auto; }
.de-table { width: 100%; border-collapse: collapse; font-family: var(--de-font-functional); font-size: 0.9375rem; }
.de-table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--de-on-surface-variant); background-color: var(--de-surface-container-low); border-bottom: 2px solid var(--de-surface-container-high); cursor: default; white-space: nowrap; }
.de-table th.de-table__sortable { cursor: pointer; user-select: none; }
.de-table th.de-table__sortable:hover { color: var(--de-on-surface); }
.de-table td { padding: 0.625rem 1rem; border-bottom: 1px solid var(--de-surface-container-low); color: var(--de-on-surface); vertical-align: middle; }
.de-table tr { transition: background-color 0.15s ease; }
.de-table tbody tr:hover { background-color: var(--de-surface-container-low); }
.de-table tr.de-table__row--selected { background-color: rgba(155, 69, 46, 0.06); }
.de-table tr.de-table__row--editing { background-color: rgba(155, 69, 46, 0.03); }
.de-table__empty { padding: 2rem; text-align: center; color: var(--de-on-surface-variant); font-style: italic; }
.de-table__actions { display: flex; gap: 0.25rem; align-items: center; }
.de-table__sort-icon { font-size: 1rem; margin-left: 0.25rem; vertical-align: middle; }

/* --------------------------------------------------------------------------
   18. Pagination
   -------------------------------------------------------------------------- */

.de-pagination { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; gap: 1rem; flex-wrap: wrap; font-family: var(--de-font-functional); font-size: 0.875rem; color: var(--de-on-surface-variant); }
.de-pagination__nav { display: flex; align-items: center; gap: 0.25rem; }
.de-pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border: none; border-radius: var(--de-radius-md); background-color: transparent; color: var(--de-on-surface-variant); cursor: pointer; font-family: var(--de-font-functional); font-size: 0.875rem; transition: all 0.15s ease; }
.de-pagination__btn:hover { background-color: var(--de-surface-container-high); }
.de-pagination__btn--active { background-color: var(--de-primary); color: var(--de-on-primary); font-weight: 600; }
.de-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.de-pagination__info { font-size: 0.8125rem; }
.de-pagination__size { display: flex; align-items: center; gap: 0.5rem; }
.de-pagination__size select { padding: 0.25rem 0.5rem; border-radius: var(--de-radius-md); border: 1px solid var(--de-outline-variant); background-color: var(--de-surface-container-lowest); font-family: var(--de-font-functional); font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   19. Modal / Dialog (replaces RadzenDialog/DialogService)
   -------------------------------------------------------------------------- */

.de-modal-overlay { position: fixed; inset: 0; z-index: 1000; background-color: rgba(48, 51, 51, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.de-modal { background-color: var(--de-surface-container-lowest); border-radius: var(--de-radius-xl); box-shadow: var(--de-shadow-elevated); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; }
.de-modal__header { padding: 1.5rem 1.5rem 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.de-modal__title { font-family: var(--de-font-editorial); font-size: 1.25rem; font-weight: 700; color: var(--de-on-surface); }
.de-modal__body { padding: 0.75rem 1.5rem 1.5rem; }
.de-modal__footer { padding: 0 1.5rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   20. Tabs (for AutoFormView ShowAsTab mode)
   -------------------------------------------------------------------------- */

.de-tabs { width: 100%; }
.de-tabs__list { display: flex; gap: 0; border-bottom: 2px solid var(--de-surface-container-high); margin-bottom: 1rem; overflow-x: auto; }
.de-tabs__tab { padding: 0.75rem 1.25rem; border: none; background: transparent; font-family: var(--de-font-functional); font-size: 0.875rem; font-weight: 500; color: var(--de-on-surface-variant); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s ease; white-space: nowrap; }
.de-tabs__tab:hover { color: var(--de-on-surface); }
.de-tabs__tab--active { color: var(--de-primary); border-bottom-color: var(--de-primary); font-weight: 600; }
.de-tabs__panel { padding: 0; }
.de-tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   21. Stack / Toolbar (replaces RadzenStack)
   -------------------------------------------------------------------------- */

.de-stack { display: flex; gap: 0.75rem; }
.de-stack--horizontal { flex-direction: row; align-items: center; }
.de-stack--vertical { flex-direction: column; }
.de-stack--wrap { flex-wrap: wrap; }
.de-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0; }
.de-toolbar--between { justify-content: space-between; }

/* --------------------------------------------------------------------------
   22. File Upload
   -------------------------------------------------------------------------- */

.de-file-upload { width: 100%; }
.de-file-upload__dropzone { border: 2px dashed var(--de-outline-variant); border-radius: var(--de-radius-md); padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease; color: var(--de-on-surface-variant); }
.de-file-upload__dropzone:hover { border-color: var(--de-primary); background-color: rgba(155, 69, 46, 0.03); }
.de-file-upload__dropzone.de-file-upload--dragover { border-color: var(--de-primary); background-color: rgba(155, 69, 46, 0.06); }
.de-file-upload__preview { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.de-file-upload__preview img { max-width: 150px; max-height: 150px; border-radius: var(--de-radius-md); object-fit: cover; }

/* --------------------------------------------------------------------------
   23. Navbar (app header)
   -------------------------------------------------------------------------- */

.de-navbar { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 3.5rem; background-color: var(--de-surface-container-lowest); border-bottom: 1px solid var(--de-surface-container-high); position: sticky; top: 0; z-index: 50; }
.de-navbar__brand { font-family: var(--de-font-editorial); font-size: 1.25rem; font-style: italic; color: var(--de-primary); text-decoration: none; }
.de-navbar__actions { display: flex; align-items: center; gap: 0.75rem; }
.de-navbar__user { display: flex; align-items: center; gap: 0.5rem; font-family: var(--de-font-functional); font-size: 0.875rem; color: var(--de-on-surface-variant); }
.de-navbar__menu { display: flex; align-items: center; gap: 2rem; flex: 1; justify-content: space-between; margin-left: 2rem; }
.de-navbar__nav { display: flex; gap: 0.25rem; }
.de-navbar__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--de-on-surface); padding: 0.25rem; }
.de-main { padding: 1.5rem; min-height: calc(100vh - 3.5rem); background-color: var(--de-surface); }

/* --------------------------------------------------------------------------
   24. Field wrapper (generic field container)
   -------------------------------------------------------------------------- */

.de-field { margin-bottom: 0.75rem; }
.de-field__header { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.375rem; }
.de-field__hint { cursor: help; color: var(--de-on-surface-variant); font-size: 1rem; }
.de-field--readonly { opacity: 0.7; }
.de-field--readonly .de-input, .de-field--readonly .de-select { background-color: var(--de-surface-container-low); cursor: not-allowed; }

/* --------------------------------------------------------------------------
   25. Color picker
   -------------------------------------------------------------------------- */

.de-color-input { display: flex; align-items: center; gap: 0.75rem; }
.de-color-input input[type="color"] { width: 3rem; height: 2.5rem; padding: 0.25rem; border: 2px solid transparent; border-radius: var(--de-radius-md); background-color: var(--de-surface-container-high); cursor: pointer; }
.de-color-input input[type="color"]:focus { border-color: rgba(155, 69, 46, 0.2); }
.de-color-swatch { width: 1.5rem; height: 1.5rem; border-radius: var(--de-radius-md); border: 1px solid var(--de-outline-variant); }

/* --------------------------------------------------------------------------
   26. Slider
   -------------------------------------------------------------------------- */

.de-slider { display: flex; align-items: center; gap: 1rem; width: 100%; }
.de-slider input[type="range"] { flex: 1; accent-color: var(--de-primary); height: 0.375rem; cursor: pointer; }
.de-slider__value { font-family: var(--de-font-functional); font-size: 0.9375rem; font-weight: 600; color: var(--de-on-surface); min-width: 2rem; text-align: center; }

/* --------------------------------------------------------------------------
   27. TimeSpan inputs
   -------------------------------------------------------------------------- */

.de-timespan { display: flex; align-items: center; gap: 0.25rem; }
.de-timespan__part { width: 3.5rem; text-align: center; }
.de-timespan__sep { color: var(--de-on-surface-variant); font-weight: 600; font-size: 1.125rem; }
.de-timespan__label { font-size: 0.6875rem; text-transform: uppercase; color: var(--de-on-surface-variant); text-align: center; letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   28. Multi-select pills
   -------------------------------------------------------------------------- */

.de-multiselect { position: relative; }
.de-multiselect__selected { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.5rem; min-height: 2.75rem; background-color: var(--de-surface-container-high); border: 2px solid transparent; border-radius: var(--de-radius-md); cursor: pointer; transition: all 0.2s ease; }
.de-multiselect__selected:focus-within { background-color: var(--de-surface-container-lowest); border-color: rgba(155, 69, 46, 0.2); }
.de-multiselect__pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; background-color: var(--de-primary); color: var(--de-on-primary); border-radius: var(--de-radius-full); font-size: 0.8125rem; font-weight: 500; }
.de-multiselect__pill-remove { cursor: pointer; font-size: 0.875rem; opacity: 0.8; }
.de-multiselect__pill-remove:hover { opacity: 1; }
.de-multiselect__input { border: none; outline: none; background: transparent; font-family: var(--de-font-functional); font-size: 0.9375rem; flex: 1; min-width: 4rem; padding: 0.25rem; }
.de-multiselect__placeholder { color: var(--de-outline-variant); padding: 0.25rem; }

/* --------------------------------------------------------------------------
   29. Spinner / Busy
   -------------------------------------------------------------------------- */

@keyframes de-spin { to { transform: rotate(360deg); } }
.de-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: de-spin 0.6s linear infinite; }
.de-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.de-btn--loading::after { content: ''; position: absolute; width: 1rem; height: 1rem; border: 2px solid var(--de-on-primary); border-right-color: transparent; border-radius: 50%; animation: de-spin 0.6s linear infinite; }

/* --------------------------------------------------------------------------
   30. Recipe Card
   -------------------------------------------------------------------------- */

.de-recipe-card { display: flex; flex-direction: column; border-radius: var(--de-radius-xl); overflow: hidden; background-color: var(--de-surface-container-lowest); box-shadow: var(--de-shadow-atmospheric); transition: box-shadow 0.2s ease, transform 0.2s ease; cursor: pointer; text-decoration: none; color: inherit; }
.de-recipe-card:hover { box-shadow: var(--de-shadow-elevated); transform: translateY(-2px); }
.de-recipe-card__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; background-color: var(--de-surface-container-high); }
.de-recipe-card__image-placeholder { width: 100%; aspect-ratio: 4/3; background-color: var(--de-surface-container-high); display: flex; align-items: center; justify-content: center; color: var(--de-outline-variant); }
.de-recipe-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; flex: 1; }
.de-recipe-card__meta { display: flex; align-items: center; gap: 0.5rem; }
.de-recipe-card__title { font-family: var(--de-font-editorial); font-size: 1.125rem; font-weight: 700; color: var(--de-on-surface); line-height: 1.3; margin: 0; }
.de-recipe-card__desc { font-family: var(--de-font-functional); font-size: 0.875rem; color: var(--de-on-surface-variant); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.de-recipe-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.5rem; }
.de-recipe-card__tags { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.de-recipe-card__image-wrapper { position: relative; }
.de-recipe-card__favorite { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--de-on-surface-variant); transition: color 0.2s, background 0.2s; z-index: 1; }
.de-recipe-card__favorite:hover { background: rgba(255, 255, 255, 0.9); color: var(--de-primary); }
.de-recipe-card__favorite--active { color: var(--de-primary); background: rgba(255, 255, 255, 0.85); }
.de-recipe-card__favorite .material-symbols-outlined { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   31. Recipe Grid
   -------------------------------------------------------------------------- */

.de-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
@media (max-width: 640px) { .de-recipe-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   32. Category Filter Pills
   -------------------------------------------------------------------------- */

.de-category-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.de-category-pill { padding: 0.5rem 1.25rem; border-radius: var(--de-radius-full); border: none; font-family: var(--de-font-functional); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; background-color: var(--de-surface-container-high); color: var(--de-on-surface-variant); }
.de-category-pill:hover { background-color: var(--de-surface-container-low); }
.de-category-pill--active { background-color: var(--de-primary); color: var(--de-on-primary); }

/* Search Bar */
.de-search-bar { position: relative; margin-bottom: 1.5rem; max-width: 480px; }
.de-search-bar__icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--de-outline-variant); pointer-events: none; }
.de-search-bar__icon .material-symbols-outlined { font-size: 1.25rem; }
.de-search-bar__input { width: 100%; padding: 0.625rem 2.5rem 0.625rem 2.75rem; background-color: var(--de-surface-container-high); border: 2px solid transparent; border-radius: var(--de-radius-full); font-family: var(--de-font-functional); font-size: 0.875rem; color: var(--de-on-surface); outline: none; transition: all 0.2s ease; box-sizing: border-box; }
.de-search-bar__input::placeholder { color: var(--de-outline-variant); }
.de-search-bar__input:focus { background-color: var(--de-surface-container-lowest); border-color: rgba(155, 69, 46, 0.2); }
.de-search-bar__clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--de-outline-variant); padding: 0.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color 0.2s; }
.de-search-bar__clear:hover { color: var(--de-on-surface); }
.de-search-bar__clear .material-symbols-outlined { font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   33. FAB (Floating Action Button)
   -------------------------------------------------------------------------- */

.de-fab { position: fixed; bottom: 2rem; right: 2rem; width: 3.5rem; height: 3.5rem; border-radius: var(--de-radius-full); background: linear-gradient(135deg, var(--de-primary), var(--de-primary-container)); color: var(--de-on-primary); border: none; cursor: pointer; box-shadow: var(--de-shadow-elevated); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.2s ease; z-index: 40; text-decoration: none; }
.de-fab:hover { box-shadow: 0 10px 40px rgba(155, 69, 46, 0.3); transform: scale(1.05); }

/* --------------------------------------------------------------------------
   34. Recipe Detail / Hero
   -------------------------------------------------------------------------- */

.de-recipe-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 768px) { .de-recipe-hero { grid-template-columns: 1fr; } }
.de-recipe-hero__image { max-width: 100%; border-radius: var(--de-radius-xl); object-fit: cover; max-height: 400px; }
.de-recipe-hero__info { display: flex; flex-direction: column; gap: 1rem; }
.de-recipe-actions { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.de-recipe-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.de-recipe-meta__item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.de-recipe-meta__value { font-family: var(--de-font-editorial); font-size: 1.25rem; font-weight: 700; color: var(--de-on-surface); }
.de-recipe-meta__label { font-family: var(--de-font-functional); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--de-on-surface-variant); }

/* --------------------------------------------------------------------------
   35. Recipe Steps & Ingredients
   -------------------------------------------------------------------------- */

.de-recipe-content { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; }
@media (max-width: 768px) { .de-recipe-content { grid-template-columns: 1fr; } }
.de-ingredient-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.de-ingredient-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--de-surface-container-low); }
.de-ingredient-item__name { font-weight: 600; color: var(--de-on-surface); }
.de-ingredient-item__qty { color: var(--de-on-surface-variant); font-size: 0.875rem; white-space: nowrap; }
.de-step { display: flex; gap: 1rem; padding: 1.25rem 0; }
.de-step__number { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--de-radius-full); background-color: var(--de-primary); color: var(--de-on-primary); display: flex; align-items: center; justify-content: center; font-family: var(--de-font-functional); font-weight: 700; font-size: 0.875rem; }
.de-step__content { flex: 1; }
.de-step__instruction { font-family: var(--de-font-functional); font-size: 1rem; line-height: 1.6; color: var(--de-on-surface); }
.de-step__timer { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; padding: 0.25rem 0.75rem; background-color: rgba(155, 69, 46, 0.08); border-radius: var(--de-radius-full); font-size: 0.8125rem; color: var(--de-primary); font-weight: 500; }

/* --------------------------------------------------------------------------
   36. Cooking Mode
   -------------------------------------------------------------------------- */

.de-cooking-mode { min-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; }
.de-cooking-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--de-surface-container-high); margin-bottom: 1.5rem; }
.de-cooking-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; flex: 1; }
@media (max-width: 768px) { .de-cooking-layout { grid-template-columns: 1fr; } }
.de-cooking-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.de-cooking-step { padding: 1rem 1.25rem; border-radius: var(--de-radius-md); transition: all 0.2s ease; cursor: pointer; display: flex; align-items: flex-start; gap: 1rem; }
.de-cooking-step:hover { background-color: var(--de-surface-container-low); }
.de-cooking-step--active { background-color: rgba(155, 69, 46, 0.06); font-size: 1.125rem; }
.de-cooking-step--done { opacity: 0.5; }
.de-cooking-step--done .de-cooking-step__text { text-decoration: line-through; }
.de-cooking-step__checkbox { width: 1.5rem; height: 1.5rem; accent-color: var(--de-primary); cursor: pointer; flex-shrink: 0; margin-top: 0.125rem; }
.de-cooking-step__text { flex: 1; line-height: 1.6; }
.de-cooking-sidebar { position: sticky; top: 5rem; }
.de-cooking-time-remaining { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; background-color: var(--de-secondary-container); color: var(--de-on-secondary-container); border-radius: var(--de-radius-full); font-size: 0.8125rem; font-weight: 500; margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   37. Timer
   -------------------------------------------------------------------------- */

.de-timer { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--de-radius-xl); border: 1px solid rgba(255, 255, 255, 0.3); }
.de-timer__circle { position: relative; width: 120px; height: 120px; }
.de-timer__svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.de-timer__track { fill: none; stroke: var(--de-surface-container-high); stroke-width: 6; }
.de-timer__progress { fill: none; stroke: var(--de-primary); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.de-timer__display { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--de-font-functional); font-size: 1.75rem; font-weight: 700; color: var(--de-on-surface); }
.de-timer__label { font-family: var(--de-font-functional); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--de-on-surface-variant); }
.de-timer__controls { display: flex; gap: 0.5rem; }
@keyframes de-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.de-timer--overtime { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); animation: de-timer-pulse 2s ease-in-out infinite; }
.de-timer--overtime .de-timer__progress { stroke: #dc2626; }
.de-timer--overtime .de-timer__display { color: #dc2626; }
.de-timer--overtime .de-timer__label { color: #dc2626; }

/* --------------------------------------------------------------------------
   38. Shopping List Items
   -------------------------------------------------------------------------- */

.de-shopping-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--de-surface-container-low); }
.de-shopping-item--checked { opacity: 0.5; }
.de-shopping-item--checked .de-shopping-item__name { text-decoration: line-through; }
.de-shopping-item__checkbox { width: 1.25rem; height: 1.25rem; accent-color: var(--de-primary); cursor: pointer; }
.de-shopping-item__name { flex: 1; font-family: var(--de-font-functional); font-size: 0.9375rem; }
.de-shopping-item__qty { color: var(--de-on-surface-variant); font-size: 0.875rem; white-space: nowrap; }
.de-shopping-item__remove { background: none; border: none; cursor: pointer; color: var(--de-on-surface-variant); padding: 0.25rem; }
.de-shopping-item__remove:hover { color: #ac3434; }
.de-shopping-group { margin-bottom: 1.5rem; }
.de-shopping-group__title { font-family: var(--de-font-editorial); font-size: 1rem; font-weight: 600; color: var(--de-on-surface-variant); margin-bottom: 0.5rem; padding-bottom: 0.375rem; border-bottom: 2px solid var(--de-surface-container-high); }

.de-chip { display: inline-flex; align-items: center; gap: 0.375rem; background-color: var(--de-surface-container-low); border: 1px solid var(--de-surface-container-high); border-radius: var(--de-radius-full); padding: 0.375rem 0.5rem 0.375rem 0.75rem; font-family: var(--de-font-functional); font-size: 0.8125rem; color: var(--de-on-surface); transition: background-color 0.15s; }
.de-chip:hover { background-color: var(--de-surface-container-high); }
.de-chip a { text-decoration: none; color: inherit; }
.de-chip a:hover { color: var(--de-primary); }
.de-chip__remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--de-on-surface-variant); width: 1.25rem; height: 1.25rem; border-radius: var(--de-radius-full); padding: 0; transition: background-color 0.15s, color 0.15s; }
.de-chip__remove:hover { background-color: rgba(0, 0, 0, 0.08); color: #ac3434; }

.de-linked-recipes { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--de-surface-container-low); }
.de-linked-recipes__header { display: flex; align-items: center; gap: 0.375rem; font-family: var(--de-font-functional); font-size: 0.8125rem; font-weight: 500; color: var(--de-on-surface-variant); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.625rem; }

/* --------------------------------------------------------------------------
   39. Page Header
   -------------------------------------------------------------------------- */

.de-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.de-page-header__title { font-family: var(--de-font-editorial); font-size: 2rem; font-weight: 700; color: var(--de-on-surface); margin: 0; }
.de-page-header__subtitle { font-family: var(--de-font-functional); font-size: 0.875rem; color: var(--de-on-surface-variant); }
.de-page-header__actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   40. Difficulty Badge
   -------------------------------------------------------------------------- */

.de-difficulty { display: inline-flex; gap: 0.25rem; }
.de-difficulty__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--de-outline-variant); }
.de-difficulty__dot--filled { background-color: var(--de-primary); }

/* --------------------------------------------------------------------------
   41. Shopping List Card
   -------------------------------------------------------------------------- */

.de-shopping-card { border-radius: var(--de-radius-xl); background-color: var(--de-surface-container-lowest); box-shadow: var(--de-shadow-atmospheric); padding: 1.25rem; cursor: pointer; transition: box-shadow 0.2s ease; text-decoration: none; color: inherit; display: block; }
.de-shopping-card:hover { box-shadow: var(--de-shadow-elevated); }
.de-shopping-card__title { font-family: var(--de-font-editorial); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.de-shopping-card__progress { height: 0.375rem; background-color: var(--de-surface-container-high); border-radius: var(--de-radius-full); overflow: hidden; margin-bottom: 0.5rem; }
.de-shopping-card__progress-bar { height: 100%; background-color: var(--de-secondary); border-radius: var(--de-radius-full); transition: width 0.3s ease; }
.de-shopping-card__info { font-size: 0.8125rem; color: var(--de-on-surface-variant); }

/* --------------------------------------------------------------------------
   40. Responsive — Mobile (max-width: 640px)
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .de-navbar { padding: 0 0.75rem; flex-wrap: wrap; height: auto; min-height: 3.5rem; }
    .de-navbar__toggle { display: flex; align-items: center; justify-content: center; }
    .de-navbar__menu { display: none; width: 100%; margin-left: 0; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0; align-items: stretch; }
    .de-navbar__menu--open { display: flex; }
    .de-navbar__nav { flex-direction: column; gap: 0.25rem; }
    .de-navbar__nav .de-btn { justify-content: flex-start; width: 100%; }
    .de-navbar__actions { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .de-navbar__actions .de-btn { justify-content: flex-start; width: 100%; }
    .de-main { padding: 1rem; }
    .de-category-filter { flex-wrap: wrap; }
    .de-category-pill { white-space: nowrap; }
    .de-search-bar { max-width: 100%; }
    .de-fab { bottom: 1rem; right: 1rem; width: 3rem; height: 3rem; font-size: 1.25rem; }
    .de-page-header { flex-wrap: wrap; gap: 0.75rem; }
    .de-page-header__title { font-size: 1.5rem; }
    .de-display-lg { font-size: 1.75rem; }
    .de-recipe-hero { gap: 1rem; }
    .de-recipe-meta { gap: 0.75rem; }
    .de-recipe-meta__item { min-width: 0; }
    .de-cooking-header { flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; }
    .de-cooking-layout { padding: 0.75rem; gap: 1rem; }
    .de-shopping-item { gap: 0.5rem; }
    .de-recipe-actions { flex-direction: column; }
    .de-recipe-actions .de-btn, .de-recipe-actions .de-btn--cta { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   41. Mobile Bottom Navigation (Cooking Mode)
   -------------------------------------------------------------------------- */

.de-mobile-nav { display: none; }
@media (max-width: 768px) {
    .de-mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--de-surface-container-lowest); border-top: 1px solid var(--de-surface-container-high); z-index: 50; justify-content: space-around; padding: 0.5rem 0; }
    .de-mobile-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; color: var(--de-on-surface-variant); text-decoration: none; font-family: var(--de-font-functional); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; min-width: 48px; min-height: 48px; transition: color 0.2s; }
    .de-mobile-nav__item:hover, .de-mobile-nav__item--active { color: var(--de-primary); }
    .de-mobile-nav__item .material-symbols-outlined { font-size: 1.375rem; margin-bottom: 0.125rem; }
    .de-main { padding-bottom: 5rem; }
}

/* --------------------------------------------------------------------------
   42. AI Chat (Floating Panel)
   -------------------------------------------------------------------------- */

.de-chat-fab { position: fixed; bottom: 2rem; right: 2rem; width: 3.5rem; height: 3.5rem; border-radius: var(--de-radius-full); background: #E07A5F; color: #ffffff; border: none; cursor: pointer; box-shadow: 0 8px 32px rgba(224, 122, 95, 0.35); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.2s ease; z-index: 40; }
.de-chat-fab:hover { box-shadow: 0 10px 40px rgba(224, 122, 95, 0.45); transform: scale(1.08); }
.de-chat-fab--offset { bottom: 6rem; }

@keyframes de-chat-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.de-chat-panel { position: fixed; bottom: 6rem; right: 2rem; width: 500px; max-height: 820px; background: var(--de-surface-container-lowest); border-radius: var(--de-radius-xl); box-shadow: 0 16px 64px rgba(48, 51, 51, 0.15); z-index: 45; display: flex; flex-direction: column; overflow: hidden; animation: de-chat-slide-up 0.3s cubic-bezier(0, 0, 0.2, 1); border: 1px solid rgba(176, 178, 177, 0.15); }
.de-chat-panel--offset { bottom: 10rem; }

.de-chat-header { background: #E07A5F; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.de-chat-header__info { display: flex; align-items: center; gap: 0.75rem; }
.de-chat-header__avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--de-radius-full); background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: #ffffff; }
.de-chat-header__title { font-family: var(--de-font-editorial); font-size: 1.125rem; font-weight: 700; color: #ffffff; }
.de-chat-header__subtitle { font-family: var(--de-font-functional); font-size: 0.6875rem; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.de-chat-header__close { width: 2rem; height: 2rem; border-radius: var(--de-radius-full); border: none; background: transparent; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.de-chat-header__close:hover { background: rgba(255, 255, 255, 0.2); }

.de-chat-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 200px; max-height: 580px; }
.de-chat-messages::-webkit-scrollbar { width: 4px; }
.de-chat-messages::-webkit-scrollbar-track { background: transparent; }
.de-chat-messages::-webkit-scrollbar-thumb { background: var(--de-surface-container-high); border-radius: 10px; }

.de-chat-msg { display: flex; gap: 0.5rem; max-width: 85%; }
.de-chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.de-chat-msg--ai { align-self: flex-start; }

.de-chat-msg__avatar { width: 1.75rem; height: 1.75rem; border-radius: var(--de-radius-full); background: rgba(155, 69, 46, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.de-chat-msg__avatar .material-symbols-outlined { font-size: 0.875rem; color: var(--de-primary); }

.de-chat-msg__bubble { padding: 0.75rem 1rem; font-family: var(--de-font-functional); font-size: 0.875rem; line-height: 1.6; }
.de-chat-msg--user .de-chat-msg__bubble { background: var(--de-surface-container-low); color: var(--de-on-surface); border-radius: var(--de-radius-xl) var(--de-radius-xl) 0.25rem var(--de-radius-xl); }
.de-chat-msg--ai .de-chat-msg__bubble { background: rgba(255, 173, 151, 0.15); color: var(--de-on-surface); border-radius: var(--de-radius-xl) var(--de-radius-xl) var(--de-radius-xl) 0.25rem; }

/* Markdown content inside AI bubbles */
.de-chat-msg--ai .de-chat-msg__bubble p { margin: 0 0 0.5rem 0; }
.de-chat-msg--ai .de-chat-msg__bubble p:last-child { margin-bottom: 0; }
.de-chat-msg--ai .de-chat-msg__bubble h1, .de-chat-msg--ai .de-chat-msg__bubble h2, .de-chat-msg--ai .de-chat-msg__bubble h3 { font-family: var(--de-font-editorial); font-size: 1rem; font-weight: 700; margin: 0.75rem 0 0.375rem 0; }
.de-chat-msg--ai .de-chat-msg__bubble h1:first-child, .de-chat-msg--ai .de-chat-msg__bubble h2:first-child, .de-chat-msg--ai .de-chat-msg__bubble h3:first-child { margin-top: 0; }
.de-chat-msg--ai .de-chat-msg__bubble ul, .de-chat-msg--ai .de-chat-msg__bubble ol { margin: 0.375rem 0; padding-left: 1.25rem; }
.de-chat-msg--ai .de-chat-msg__bubble li { margin-bottom: 0.25rem; }
.de-chat-msg--ai .de-chat-msg__bubble strong { font-weight: 700; }
.de-chat-msg--ai .de-chat-msg__bubble em { font-style: italic; }
.de-chat-msg--ai .de-chat-msg__bubble code { background: rgba(48, 51, 51, 0.06); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.8125rem; }
.de-chat-msg--ai .de-chat-msg__bubble pre { background: rgba(48, 51, 51, 0.06); padding: 0.75rem; border-radius: var(--de-radius-md); overflow-x: auto; margin: 0.5rem 0; }
.de-chat-msg--ai .de-chat-msg__bubble pre code { background: none; padding: 0; }
.de-chat-msg--ai .de-chat-msg__bubble hr { border: none; border-top: 1px solid rgba(155, 69, 46, 0.15); margin: 0.75rem 0; }

.de-chat-typing { display: flex; align-items: center; gap: 0.5rem; align-self: flex-start; }
.de-chat-typing__dots { display: flex; gap: 0.25rem; background: var(--de-surface-container-low); padding: 0.625rem 1rem; border-radius: var(--de-radius-full); }
.de-chat-typing__dot { width: 0.375rem; height: 0.375rem; border-radius: var(--de-radius-full); background: var(--de-on-surface-variant); opacity: 0.4; animation: de-chat-bounce 1.4s infinite ease-in-out; }
.de-chat-typing__dot:nth-child(2) { animation-delay: 0.16s; }
.de-chat-typing__dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes de-chat-bounce {
    0%, 80%, 100% { transform: scale(1); }
    40% { transform: scale(1.4); }
}

.de-chat-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.5rem; border-top: 1px solid var(--de-surface-container-high); }
.de-chat-chip { font-family: var(--de-font-functional); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.375rem 0.75rem; border-radius: var(--de-radius-full); border: 1px solid rgba(155, 69, 46, 0.2); background: transparent; color: var(--de-primary); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.de-chat-chip:hover { background: rgba(155, 69, 46, 0.05); border-color: rgba(155, 69, 46, 0.4); }

.de-chat-input { padding: 0.75rem 1.5rem 1rem; border-top: 1px solid var(--de-surface-container-high); display: flex; align-items: center; gap: 0.5rem; position: relative; }
.de-chat-input__field { flex: 1; background: var(--de-surface-container-high); border: none; border-radius: var(--de-radius-full); padding: 0.75rem 3rem 0.75rem 1.25rem; font-family: var(--de-font-functional); font-size: 0.875rem; color: var(--de-on-surface); outline: none; transition: box-shadow 0.2s; }
.de-chat-input__field::placeholder { color: var(--de-on-surface-variant); opacity: 0.6; }
.de-chat-input__field:focus { box-shadow: 0 0 0 2px rgba(224, 122, 95, 0.2); }
.de-chat-input__send { position: absolute; right: 1.75rem; width: 2.25rem; height: 2.25rem; border-radius: var(--de-radius-full); background: #E07A5F; color: #ffffff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, opacity 0.15s; }
.de-chat-input__send:hover { opacity: 0.9; }
.de-chat-input__send:active { transform: scale(0.92); }
.de-chat-input__send .material-symbols-outlined { font-size: 1.125rem; }

@media (max-width: 768px) {
    .de-chat-fab { bottom: 5rem; right: 1rem; width: 3rem; height: 3rem; font-size: 1.25rem; }
    .de-chat-fab--offset { bottom: 5rem; }
    .de-chat-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 85vh; border-radius: var(--de-radius-xl) var(--de-radius-xl) 0 0; }
    .de-chat-panel--offset { bottom: 0; }
    .de-chat-messages { max-height: 50vh; }
}

/* --------------------------------------------------------------------------
   43. Focus Visible (Accessibility)
   -------------------------------------------------------------------------- */

*:focus-visible { outline: 2px solid var(--de-primary); outline-offset: 2px; border-radius: var(--de-radius-sm); }
.de-input:focus-visible, .de-select:focus-visible { outline-offset: 0; }
.de-btn:focus-visible { outline-offset: 3px; }
.de-category-pill:focus-visible { outline-offset: 2px; }
.de-fab:focus-visible { outline-offset: 3px; }
.de-chat-fab:focus-visible { outline-offset: 3px; }