/* ============================================
   Warm Kitchen Design System
   A cozy, approachable design with sage greens and warm creams
   ============================================ */

:root {
    /* === Warm Kitchen Semantic Tokens (2026 Refresh) === */
    /* These are the PRIMARY tokens - use these in new code */

    /* Primary Colors */
    --sage: #7A9B6D;
    --sage-light: #E8F0E5;
    --sage-dark: #5C7D50;

    /* Accent Colors */
    --terracotta: #C4785C;
    --terracotta-light: #F5E6E0;

    /* Background Colors */
    --cream: #FDF8F3;
    --cream-dark: #F5EDE4;
    --white: #FFFFFF;

    /* Text Colors */
    --brown: #3A2E26;
    --brown-light: #6B5A4A;
    --text-dark: #1F1814;
    --text-muted: #5C4D42;
    --text-light: #7A6B5E;

    /* Border Colors */
    --border: #E8E0D7;
    --border-dark: #D5C9BC;

    /* Shadows (warm undertone) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    /* Border Radii (organic, larger) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* === Fluent Aliases (for backward compatibility) === */
    /* These reference the semantic tokens above */

    /* Primary Accent (Sage Green) */
    --fluent-brand-primary: var(--sage);
    --fluent-brand-hover: #8BAB7E;
    --fluent-brand-pressed: var(--sage-dark);
    --fluent-brand-selected: rgba(122, 155, 109, 0.15);
    --fluent-on-brand: var(--white);

    /* Secondary Accent (Terracotta) */
    --fluent-accent-secondary: var(--terracotta);
    --fluent-accent-secondary-hover: #D4886C;
    --fluent-accent-secondary-bg: var(--terracotta-light);

    /* Neutral Backgrounds (Warm Cream tones) */
    --fluent-bg-canvas: var(--cream);
    --fluent-bg-layer-1: var(--white);
    --fluent-bg-layer-2: var(--cream-dark);
    --fluent-bg-layer-3: #EDE5DC;
    --fluent-bg-subtle: var(--border);
    --fluent-bg-subtle-hover: #DFD7CE;
    --fluent-bg-subtle-pressed: #D6CEC5;

    /* Text (Rich Brown tones - darkened for crispness) */
    --fluent-text-primary: var(--text-dark);
    --fluent-text-secondary: var(--text-muted);
    --fluent-text-tertiary: var(--text-light);
    --fluent-text-disabled: #A09488;
    --fluent-text-on-brand: var(--white);

    /* Borders (Warm neutral tones) */
    --fluent-border-default: var(--border);
    --fluent-border-strong: var(--border-dark);
    --fluent-border-subtle: var(--cream-dark);
    --fluent-border-brand: var(--sage);

    /* Status Colors */
    --fluent-danger: #C6654D;
    --fluent-danger-bg: rgba(198, 101, 77, 0.15);
    --fluent-success: var(--sage);
    --fluent-success-bg: rgba(122, 155, 109, 0.15);
    --fluent-warning: var(--terracotta);
    --fluent-warning-bg: var(--terracotta-light);
    --fluent-info: var(--sage);
    --fluent-info-bg: var(--sage-light);

    /* Status aliases */
    --fluent-status-danger: #C6654D;
    --fluent-status-success: #7A9B6D;
    --fluent-status-warning: #C4785C;
    --fluent-status-info: #7A9B6D;

    /* Overlay */
    --fluent-scrim: rgba(0, 0, 0, 0.4);

    /* === Fluent 2 Shape Tokens (mapped to Warm Kitchen radii) === */
    --fluent-radius-none: 0px;
    --fluent-radius-small: var(--radius-sm);
    --fluent-radius-medium: var(--radius-md);
    --fluent-radius-large: var(--radius-lg);
    --fluent-radius-xlarge: var(--radius-xl);
    --fluent-radius-circular: 9999px;

    /* === Fluent 2 Shadow Tokens (mapped to Warm Kitchen shadows) === */
    --fluent-shadow-2: var(--shadow-sm);
    --fluent-shadow-4: var(--shadow-sm);
    --fluent-shadow-8: var(--shadow-md);
    --fluent-shadow-16: var(--shadow-lg);
    --fluent-shadow-28: 0 14px 28px rgba(0, 0, 0, 0.18);
    --fluent-shadow-64: 0 32px 64px rgba(0, 0, 0, 0.24);

    /* === Typography Scale (TV-optimized) - Source Sans 3 === */
    --fluent-type-display: 600 2.5rem/1.2 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-title-1: 600 1.75rem/1.3 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-title-2: 600 1.375rem/1.35 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-title-3: 600 1.125rem/1.4 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-body-1: 400 1rem/1.5 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-body-2: 400 0.875rem/1.45 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-caption-1: 400 0.75rem/1.4 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-type-caption-2: 400 0.625rem/1.3 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;

    /* === Fluent 2 Motion Tokens === */
    --fluent-duration-ultra-fast: 50ms;
    --fluent-duration-faster: 100ms;
    --fluent-duration-fast: 150ms;
    --fluent-duration-normal: 200ms;
    --fluent-duration-slow: 300ms;
    --fluent-duration-slower: 400ms;
    --fluent-easing-ease: cubic-bezier(0.33, 0, 0.67, 1);
    --fluent-easing-ease-in: cubic-bezier(0.42, 0, 1, 1);
    --fluent-easing-ease-out: cubic-bezier(0, 0, 0.58, 1);
    --fluent-easing-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

    /* === Legacy Variable Aliases (backward compatibility) === */
    --md-sys-color-primary: var(--fluent-brand-primary);
    --md-sys-color-on-primary: var(--fluent-on-brand);
    --md-sys-color-primary-container: var(--fluent-brand-selected);
    --md-sys-color-on-primary-container: var(--fluent-brand-primary);
    --md-sys-color-secondary: var(--fluent-bg-subtle);
    --md-sys-color-on-secondary: var(--fluent-text-primary);
    --md-sys-color-secondary-container: var(--fluent-bg-layer-2);
    --md-sys-color-on-secondary-container: var(--fluent-text-primary);
    --md-sys-color-tertiary: var(--fluent-bg-layer-3);
    --md-sys-color-on-tertiary: var(--fluent-text-secondary);
    --md-sys-color-tertiary-container: var(--fluent-bg-layer-2);
    --md-sys-color-on-tertiary-container: var(--fluent-text-secondary);
    --md-sys-color-surface: var(--fluent-bg-canvas);
    --md-sys-color-surface-dim: var(--fluent-bg-layer-2);
    --md-sys-color-surface-bright: var(--fluent-bg-layer-1);
    --md-sys-color-surface-container-lowest: var(--fluent-bg-layer-1);
    --md-sys-color-surface-container-low: var(--fluent-bg-layer-1);
    --md-sys-color-surface-container: var(--fluent-bg-layer-2);
    --md-sys-color-surface-container-high: var(--fluent-bg-layer-3);
    --md-sys-color-surface-container-highest: var(--fluent-bg-subtle);
    --md-sys-color-on-surface: var(--fluent-text-primary);
    --md-sys-color-on-surface-variant: var(--fluent-text-secondary);
    --md-sys-color-outline: var(--fluent-border-default);
    --md-sys-color-outline-variant: var(--fluent-border-subtle);
    --md-sys-color-error: var(--fluent-danger);
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: var(--fluent-danger-bg);
    --md-sys-color-on-error-container: var(--fluent-danger);
    --md-sys-color-success: var(--fluent-success);
    --md-sys-color-on-success: #FFFFFF;
    --md-sys-color-scrim: var(--fluent-scrim);
    --md-sys-color-shadow: rgba(0, 0, 0, 0.12);
    --md-sys-shape-corner-none: var(--fluent-radius-none);
    --md-sys-shape-corner-extra-small: var(--fluent-radius-small);
    --md-sys-shape-corner-small: var(--fluent-radius-medium);
    --md-sys-shape-corner-medium: var(--fluent-radius-large);
    --md-sys-shape-corner-large: var(--fluent-radius-xlarge);
    --md-sys-shape-corner-extra-large: var(--fluent-radius-xlarge);
    --md-sys-shape-corner-full: var(--fluent-radius-circular);
    --md-sys-motion-duration-short: var(--fluent-duration-fast);
    --md-sys-motion-duration-medium: var(--fluent-duration-normal);
    --md-sys-motion-duration-long: var(--fluent-duration-slow);
    --md-sys-motion-easing-standard: var(--fluent-easing-ease-out);
    --md-sys-motion-easing-emphasized: var(--fluent-easing-ease-out);
    --md-sys-elevation-level0: transparent;
    --md-sys-elevation-level1: var(--fluent-shadow-2);
    --md-sys-elevation-level2: var(--fluent-shadow-4);
    --md-sys-elevation-level3: var(--fluent-shadow-8);
    --md-sys-elevation-level4: var(--fluent-shadow-16);
    --md-sys-elevation-level5: var(--fluent-shadow-28);

    /* Direct legacy aliases */
    --bg-primary: var(--fluent-bg-canvas);
    --bg-secondary: var(--fluent-bg-layer-2);
    --bg-tertiary: var(--fluent-bg-layer-3);
    --text-primary: var(--fluent-text-primary);
    --text-secondary: var(--fluent-text-secondary);
    --accent-primary: var(--fluent-brand-primary);
    --accent-hover: var(--fluent-brand-hover);
    --accent-secondary: var(--fluent-bg-subtle);
    --tag-secondary: var(--fluent-bg-layer-3);
    --favorite-color: #C4785C;
    --border-color: var(--fluent-border-default);
    --focus-ring: var(--fluent-brand-primary);
    --shadow-color: rgba(0, 0, 0, 0.12);
    --success: var(--fluent-success);
    --error: var(--fluent-danger);

    /* === Warm Kitchen Design Tokens (from mockup) === */
    --wk-cream: #FDF6EE;
    --wk-cream-dark: #F5EBE0;
    --wk-terracotta: #C67B5C;
    --wk-terracotta-light: #E8A990;
    --wk-terracotta-dark: #A65D42;
    --wk-sage: #7A9B6D;
    --wk-sage-dark: #5C7D50;
    --wk-brown: #3A2E26;
    --wk-brown-light: #6B5A4A;
    --wk-text-dark: #1F1814;
    --wk-text-muted: #5C4D42;
    --wk-white: #FFFFFF;
    --wk-shadow: 0 4px 20px rgba(92, 74, 61, 0.12);
    --wk-shadow-hover: 0 8px 30px rgba(92, 74, 61, 0.18);
    --wk-radius-sm: 12px;
    --wk-radius-md: 16px;
    --wk-radius-lg: 20px;
    --wk-radius-pill: 25px;
}

[data-theme="dark"] {
    /* === Warm Kitchen Semantic Tokens - Dark Theme === */

    /* Primary Colors (lightened for dark mode) */
    --sage: #8FB583;
    --sage-light: #2A3528;
    --sage-dark: #7A9B6D;

    /* Accent Colors */
    --terracotta: #E8A990;
    --terracotta-light: #3A2A24;

    /* Background Colors */
    --cream: #1A1614;
    --cream-dark: #252220;
    --white: #2A2522;

    /* Text Colors */
    --brown: #F5EBE0;
    --brown-light: #C4B8AD;
    --text-dark: #F5EBE0;
    --text-muted: #A89E94;
    --text-light: #8B7E74;

    /* Border Colors */
    --border: #3A3530;
    --border-dark: #4A4540;

    /* Shadows (darker for dark mode) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    /* === Fluent Aliases - Dark Theme === */

    /* Primary Accent (Sage Green - lightened for dark mode) */
    --fluent-brand-primary: var(--sage);
    --fluent-brand-hover: #ABCF9B;
    --fluent-brand-pressed: var(--sage-dark);
    --fluent-brand-selected: rgba(155, 191, 139, 0.2);
    --fluent-on-brand: #1A1512;

    /* Secondary Accent (Terracotta - lightened for dark mode) */
    --fluent-accent-secondary: var(--terracotta);
    --fluent-accent-secondary-hover: #E8A08A;
    --fluent-accent-secondary-bg: var(--terracotta-light);

    /* Neutral Backgrounds (Dark with warm tint) */
    --fluent-bg-canvas: var(--cream);
    --fluent-bg-layer-1: var(--cream-dark);
    --fluent-bg-layer-2: #302A22;
    --fluent-bg-layer-3: #3A332A;
    --fluent-bg-subtle: #352E25;
    --fluent-bg-subtle-hover: #40382E;
    --fluent-bg-subtle-pressed: #4A4238;

    /* Text (Warm Cream tones for dark mode) */
    --fluent-text-primary: var(--text-dark);
    --fluent-text-secondary: var(--text-muted);
    --fluent-text-tertiary: var(--text-light);
    --fluent-text-disabled: #6A5E4E;

    /* Borders (Warm dark tones) */
    --fluent-border-default: var(--border);
    --fluent-border-strong: var(--border-dark);
    --fluent-border-subtle: #302A22;
    --fluent-border-brand: var(--sage);

    /* Status Colors (adjusted for dark mode) */
    --fluent-danger: #E88070;
    --fluent-danger-bg: rgba(232, 128, 112, 0.18);
    --fluent-success: var(--sage);
    --fluent-success-bg: var(--sage-light);
    --fluent-warning: var(--terracotta);
    --fluent-warning-bg: var(--terracotta-light);
    --fluent-info: var(--sage);
    --fluent-info-bg: var(--sage-light);

    /* Status aliases */
    --fluent-status-danger: #E88070;
    --fluent-status-success: var(--sage);
    --fluent-status-warning: var(--terracotta);
    --fluent-status-info: var(--sage);

    /* Overlay */
    --fluent-scrim: rgba(0, 0, 0, 0.5);

    /* Shadow tokens for dark mode */
    --fluent-shadow-2: var(--shadow-sm);
    --fluent-shadow-4: var(--shadow-sm);
    --fluent-shadow-8: var(--shadow-md);
    --fluent-shadow-16: var(--shadow-lg);
    --fluent-shadow-28: 0 14px 28px rgba(0, 0, 0, 0.32);
    --fluent-shadow-64: 0 32px 64px rgba(0, 0, 0, 0.36);

    /* Legacy aliases updated */
    --md-sys-color-primary: var(--fluent-brand-primary);
    --md-sys-color-on-primary: var(--fluent-on-brand);
    --md-sys-color-primary-container: var(--fluent-brand-selected);
    --md-sys-color-on-primary-container: var(--fluent-brand-primary);
    --md-sys-color-secondary: var(--fluent-bg-subtle);
    --md-sys-color-on-secondary: var(--fluent-text-primary);
    --md-sys-color-surface: var(--fluent-bg-canvas);
    --md-sys-color-surface-container: var(--fluent-bg-layer-2);
    --md-sys-color-surface-container-low: var(--fluent-bg-layer-1);
    --md-sys-color-surface-container-high: var(--fluent-bg-layer-3);
    --md-sys-color-on-surface: var(--fluent-text-primary);
    --md-sys-color-on-surface-variant: var(--fluent-text-secondary);
    --md-sys-color-outline: var(--fluent-border-default);
    --md-sys-color-outline-variant: var(--fluent-border-subtle);
    --md-sys-color-error: var(--fluent-danger);
    --md-sys-color-success: var(--fluent-success);
    --md-sys-color-scrim: var(--fluent-scrim);
    --md-sys-color-shadow: rgba(0, 0, 0, 0.4);
    --md-sys-elevation-level1: var(--fluent-shadow-2);
    --md-sys-elevation-level2: var(--fluent-shadow-4);
    --md-sys-elevation-level3: var(--fluent-shadow-8);
    --md-sys-elevation-level4: var(--fluent-shadow-16);
    --md-sys-elevation-level5: var(--fluent-shadow-28);

    /* Direct legacy aliases */
    --bg-primary: var(--fluent-bg-canvas);
    --bg-secondary: var(--fluent-bg-layer-2);
    --bg-tertiary: var(--fluent-bg-layer-3);
    --text-primary: var(--fluent-text-primary);
    --text-secondary: var(--fluent-text-secondary);
    --accent-primary: var(--fluent-brand-primary);
    --accent-hover: var(--fluent-brand-hover);
    --border-color: var(--fluent-border-default);
    --focus-ring: var(--fluent-brand-primary);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --favorite-color: #D8907A;
}

/* Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* ============================================
   Fluent 2 Focus Styles (TV-optimized)
   ============================================ */

/* Remove ALL focus outlines by default */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Only show focus outlines after user starts keyboard navigation */
body.keyboard-navigation .focusable:focus-visible,
body.keyboard-navigation *:focus-visible {
    outline: 3px solid var(--fluent-brand-primary) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(122, 155, 109, 0.25) !important;
}

.focusable {
    transition: transform var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.focusable:hover {
    transform: scale(1.01);
}

/* Bottom nav focus - distinct double-ring */
.bottom-nav-item:focus,
.bottom-nav-item:focus-visible {
    outline: 3px solid var(--fluent-brand-primary) !important;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 2px var(--fluent-bg-layer-1);
    transform: scale(1.03);
}

/* Recipe card keyboard focus */
.recipe-card:focus,
.recipe-card:focus-visible {
    outline: 3px solid var(--fluent-brand-primary);
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: var(--fluent-shadow-16), 0 0 0 6px rgba(122, 155, 109, 0.2);
}

/* Chip/button focus for filters */
.chip:focus,
.chip:focus-visible {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(122, 155, 109, 0.15);
}

/* ============================================
   Phosphor Icons - Base Styles
   ============================================ */

/* Base icon styling - thin weight, neutral color */
.ph-thin {
    font-size: 1.25rem;
    color: var(--fluent-text-secondary);
    transition: color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

/* Icon sizes */
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }

/* Active/selected state - brand color */
.icon-active,
.active .ph-thin,
.is-active .ph-thin,
[aria-selected="true"] .ph-thin,
[aria-current="page"] .ph-thin {
    color: var(--fluent-brand-primary);
}

/* Interactive icon hover */
button .ph-thin:hover,
a .ph-thin:hover,
.icon-interactive:hover {
    color: var(--fluent-brand-hover);
}

/* Danger/delete state */
.icon-danger,
.btn-danger .ph-thin {
    color: var(--fluent-danger);
}

/* Success state */
.icon-success {
    color: var(--fluent-success);
}

/* Warning state */
.icon-warning {
    color: var(--fluent-warning);
}

/* Disabled state */
.icon-disabled,
:disabled .ph-thin,
.disabled .ph-thin {
    color: var(--fluent-text-disabled);
    opacity: 0.6;
}

/* Icon in buttons - inherit button text color */
.btn .ph-thin,
.btn-primary .ph-thin,
.btn-secondary .ph-thin {
    color: inherit;
}

/* Inline icon with text */
.icon-inline {
    vertical-align: -0.125em;
    margin-right: 0.375rem;
}

/* Icon-only buttons */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: var(--fluent-radius-medium);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fluent-text-secondary);
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.btn-icon:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.btn-icon:active {
    background-color: var(--fluent-bg-subtle-pressed);
}

.btn-icon .ph-thin {
    font-size: 1.25rem;
}

/* ============================================
   Fluent 2 App Layout
   ============================================ */

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--fluent-bg-canvas);
}

/* Fluent 2 Command Bar / Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 48px;
    background-color: var(--fluent-bg-layer-1);
    border-bottom: 1px solid var(--fluent-border-subtle);
    flex-shrink: 0;
}

.app-logo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-logo:hover {
    color: var(--fluent-brand-primary);
}

.header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Fluent 2 Icon Buttons in Header */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    border-radius: var(--fluent-radius-small);
    color: var(--fluent-text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.theme-toggle:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.theme-toggle:active {
    background-color: var(--fluent-bg-subtle-pressed);
}

/* Fluent 2 Toggle Switch Style */
.unit-toggle {
    display: flex;
    gap: 2px;
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-small);
    padding: 2px;
}

.unit-toggle-btn {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    border-radius: var(--fluent-radius-small);
    cursor: pointer;
    background: transparent;
    color: var(--fluent-text-secondary);
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.unit-toggle-btn:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.unit-toggle-btn.active {
    background-color: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
    box-shadow: var(--fluent-shadow-2);
}

.conversion-loading {
    padding: 0.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.conversion-note {
    font-size: 0.8em;
    color: var(--text-secondary);
    font-style: italic;
}

/* Main Content Area */
.app-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    height: 0;
    min-height: 0;
}

/* Home Page Layout */
.home-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Fluent 2 Navigation Pane / Sidebar */
.recipe-sidebar {
    width: 200px;
    min-width: 160px;
    max-width: 320px;
    background-color: var(--fluent-bg-layer-2);
    border-right: 1px solid var(--fluent-border-subtle);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

/* Sidebar Resize Handle */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background-color: var(--fluent-brand-primary);
}

.sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 24px;
    background-color: var(--fluent-border-strong);
    border-radius: 1px;
    opacity: 0;
    transition: opacity var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.sidebar-resize-handle:hover::after {
    opacity: 1;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.sidebar-header h2 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.admin-link {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: var(--fluent-text-secondary);
    padding: 4px 8px;
    border-radius: var(--fluent-radius-small);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.admin-link:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.sidebar-filters {
    padding: 8px 12px;
    border-bottom: 1px solid var(--fluent-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-group {
    width: 100%;
}

.search-input, .filter-select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.recipe-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

/* Fluent 2 List Item */
.recipe-item {
    padding: 8px 12px;
    margin: 2px 8px;
    background-color: transparent;
    border-radius: var(--fluent-radius-small);
    cursor: pointer;
    border: none;
    position: relative;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.recipe-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background-color: transparent;
    border-radius: 2px;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.recipe-item:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.recipe-item.selected {
    background-color: var(--fluent-brand-selected);
}

.recipe-item.selected::before {
    background-color: var(--fluent-brand-primary);
}

.recipe-title {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--fluent-text-primary);
    margin-bottom: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.recipe-item.selected .recipe-title {
    font-weight: 600;
}

.recipe-meta {
    font-size: 0.75rem;
    color: var(--fluent-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-cuisine, .recipe-dish-type {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--fluent-radius-small);
    margin-right: 4px;
    font-size: 0.625rem;
    font-weight: 500;
}

.recipe-cuisine {
    background-color: var(--accent-secondary);
    color: var(--fluent-text-primary);
}

.recipe-dish-type {
    background-color: var(--tag-secondary);
    color: var(--fluent-text-primary);
}

.no-recipes {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.no-recipes a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--accent-primary);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.7rem;
}

.sidebar-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sidebar-footer .theme-toggle {
    width: 100%;
    padding: 0.4rem;
    font-size: 0.75rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    cursor: pointer;
}

.sidebar-footer .theme-toggle:hover {
    background-color: var(--accent-primary);
    color: white;
}

.sidebar-footer .admin-link {
    display: block;
    text-align: center;
    padding: 0.4rem;
    font-size: 0.7rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    text-decoration: none;
}

.sidebar-footer .admin-link:hover {
    background-color: var(--accent-secondary);
    color: var(--text-primary);
}

/* PDF Viewer Area */
.pdf-viewer-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    overflow: hidden;
}

.pdf-viewer-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pdf-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
}

.control-divider {
    width: 1px;
    height: 28px;
    background-color: var(--border-color);
    margin: 0 0.5rem;
}

.control-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: center;
    padding: 0 0.5rem;
}

.pdf-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pdf-btn:hover:not(:disabled) {
    background-color: var(--accent-primary);
    color: white;
    transform: scale(1.05);
}

.pdf-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.pdf-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pdf-btn.zoom-label {
    width: auto;
    min-width: 52px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pdf-btn.zoom-label:hover:not(:disabled) {
    color: white;
}

.pdf-btn.btn-text {
    width: auto;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.pdf-viewer-container {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem;
    background-color: var(--bg-tertiary);
}

.pdf-canvas {
    max-width: 100%;
    box-shadow: 0 8px 32px var(--shadow-color);
    border-radius: 4px;
}

.pdf-loading, .pdf-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.5rem;
    color: var(--text-secondary);
}

.pdf-error {
    color: var(--error);
}

.no-recipe-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
}

.no-recipe-selected h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.no-recipe-selected p {
    font-size: 1.2rem;
}

/* Admin Pages */
.admin-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    position: relative;
}

.admin-nav {
    width: 250px;
    min-width: 250px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem;
    padding-bottom: 5rem;
    transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
    overflow: hidden;
    height: calc(100vh - 80px);
}

/* Collapsed sidebar state */
.admin-container.sidebar-collapsed .admin-nav {
    width: 0;
    min-width: 0;
    padding: 0;
    border-right: none;
}

.admin-container.sidebar-collapsed .admin-content {
    width: 100%;
}

/* Admin Bottom Nav - see consolidated styles at end of file */

.admin-nav h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.3rem;
    color: var(--accent-primary);
}

.admin-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav-list li {
    margin-bottom: 0.5rem;
}

.admin-nav-list a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
}

.admin-nav-list a:hover, .admin-nav-list a.active {
    background-color: var(--bg-tertiary);
    color: var(--accent-primary);
}

.admin-content {
    flex: 1;
    padding: 2rem;
    padding-bottom: 6rem;
    overflow-y: auto;
    overflow-x: visible;
    height: calc(100vh - 80px);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-header h1 {
    margin: 0;
    font-size: 2rem;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}

/* Form Controls - Warm Kitchen 2026 */
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--brown);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:hover {
    border-color: var(--border-dark);
}

.form-control:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 2px var(--sage-light);
}

.form-control::placeholder {
    color: var(--text-light);
}

select.form-control {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    cursor: pointer;
    padding-right: 2rem;
    position: relative;
    z-index: 100;
}

select.form-control:focus {
    z-index: 101;
}

select.form-control option {
    background-color: var(--white);
    color: var(--brown);
    padding: 0.5rem;
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* Form Row - for multiple fields in a row */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-row .form-group {
    margin-bottom: 0;
}

/* Flexbox form rows for custom column widths */
.form-row:has(.flex-1, .flex-2) {
    display: flex;
    flex-wrap: wrap;
}

.form-row .flex-1 {
    flex: 1;
    min-width: 120px;
}

.form-row .flex-2 {
    flex: 2;
    min-width: 180px;
}

/* Section subtitles for forms */
.section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.section-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}

/* Parsed Data Preview */
.parsed-preview {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--accent-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.parsed-preview h4 {
    margin: 0 0 0.75rem 0;
    color: var(--accent-secondary);
    font-size: 1rem;
}

.parsed-preview p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

/* ============================================
   MD3 Buttons
   ============================================ */

/* ============================================
   Fluent 2 Button Styles
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 40px;
    min-width: 80px;
    padding: 0 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    border: none;
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                transform var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

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

/* Primary Button - Warm Kitchen 2026 */
.btn-primary {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--sage-dark), var(--sage-dark));
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    background: var(--sage-dark);
    box-shadow: var(--shadow-sm);
}

/* Secondary Button - Warm Kitchen 2026 */
.btn-secondary {
    background-color: transparent;
    color: var(--brown);
    border: 1px solid var(--border-dark);
}

.btn-secondary:hover {
    background-color: var(--cream);
    border-color: var(--border-dark);
}

.btn-secondary:active {
    background-color: var(--cream-dark);
}

/* Subtle Button (Tonal) - Warm Kitchen 2026 */
.btn-tonal {
    background-color: var(--cream);
    color: var(--brown);
}

.btn-tonal:hover {
    background-color: var(--cream-dark);
}

.btn-tonal:active {
    background-color: var(--cream-dark);
}

/* Text Button - Warm Kitchen 2026 */
.btn-text {
    background-color: transparent;
    color: var(--sage);
    padding: 0 12px;
    min-width: auto;
}

.btn-text:hover {
    background-color: var(--sage-light);
}

.btn-text:active {
    background-color: rgba(122, 155, 109, 0.2);
}

/* Danger Button - Warm Kitchen 2026 */
.btn-danger {
    background-color: var(--terracotta);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
    background-color: #B55842;
    box-shadow: var(--shadow-md);
}

.btn-danger:active {
    background-color: #A44B37;
}

/* Success Button - Warm Kitchen 2026 */
.btn-success {
    background-color: var(--sage);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.btn-success:hover {
    background-color: var(--sage-dark);
    box-shadow: var(--shadow-md);
}

.btn-success:active {
    background-color: #2B4840;
}

.btn-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* FAB (Floating Action Button) - Fluent style */
.btn-fab {
    width: 56px;
    height: 56px;
    min-width: 56px;
    padding: 0;
    border-radius: var(--fluent-radius-large);
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
    box-shadow: var(--fluent-shadow-8);
}

.btn-fab:hover {
    background-color: var(--fluent-brand-hover);
    box-shadow: var(--fluent-shadow-16);
}

.btn-fab:active {
    background-color: var(--fluent-brand-pressed);
    box-shadow: var(--fluent-shadow-4);
}

/* Small FAB */
.btn-fab-small {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--fluent-radius-medium);
}

/* Fluent 2 Icon Button */
.btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: var(--fluent-radius-medium);
    background: transparent;
    color: var(--fluent-text-secondary);
}

.btn-icon:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.btn-icon.btn-danger {
    color: var(--fluent-danger);
    background: transparent;
    border: 1px solid var(--fluent-danger);
}

.btn-icon.btn-danger:hover {
    background-color: var(--fluent-danger-bg);
}

/* Fluent 2 Add button */
.btn-add {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
    border-radius: var(--fluent-radius-medium);
    flex-shrink: 0;
}

/* Input with Add Button */
.input-with-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.input-with-add .form-control {
    flex: 1;
}

.input-with-add .btn {
    flex-shrink: 0;
}

/* Detection Hints */
.detection-hint {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.detection-hint a {
    color: var(--accent-primary);
    text-decoration: underline;
    cursor: pointer;
}

.detection-hint a:hover {
    color: #D4533A;
}

/* OCR Preview */
.ocr-preview {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.9rem;
    white-space: pre-wrap;
    color: var(--text-secondary);
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.data-table th, .data-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.data-table th {
    background-color: var(--bg-secondary);
    font-weight: 600;
    font-size: 1rem;
}

.data-table tr:hover {
    background-color: var(--bg-secondary);
}

.data-table td.actions-cell {
    vertical-align: bottom;
}

.data-table .actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: flex-start;
}

/* ============================================
   MD3 Cards
   ============================================ */

/* Fluent 2 Card Styles */
.card {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-large);
    padding: 1rem;
    margin-bottom: 1rem;
    transition: box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
    overflow: visible;
}

.card-elevated {
    background-color: var(--fluent-bg-layer-1);
    border-color: transparent;
    box-shadow: var(--fluent-shadow-4);
}

.card-elevated:hover {
    box-shadow: var(--fluent-shadow-8);
}

.card-filled {
    background-color: var(--fluent-bg-layer-2);
    border: 1px solid var(--fluent-border-subtle);
}

.card-outlined {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-default);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--fluent-text-primary);
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
    margin-bottom: 1rem;
}

.card-content {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
    line-height: 1.5;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fluent-border-subtle);
}

/* Login Page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.login-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 40px var(--shadow-color);
}

.login-box h1 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--accent-primary);
}

.login-error {
    background-color: rgba(229, 0, 0, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}

.login-success {
    background-color: rgba(38, 176, 80, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* File Upload */
.file-upload {
    position: relative;
    border: 3px dashed var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-tertiary);
}

.file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-label {
    display: block;
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.file-name {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--accent-primary);
}

/* OCR Preview */
.ocr-preview {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    max-height: 200px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.9rem;
    white-space: pre-wrap;
}

/* Alerts */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: rgba(38, 176, 80, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
}

.alert-error {
    background-color: rgba(229, 0, 0, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--success);
}

.invalid {
    outline: 2px solid var(--error);
}

.validation-message {
    color: var(--error);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Error Boundary */
.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."
}

/* Blazor Error UI - PWA friendly messaging */
#blazor-error-ui {
    background: var(--fluent-bg-layer-1, #2d2d2d);
    border-top: 1px solid var(--fluent-border-default, rgba(255,255,255,0.1));
    bottom: 0;
    display: none;
    left: 0;
    padding: 1rem 2rem;
    position: fixed;
    right: 0;
    z-index: 1000;
    color: var(--fluent-text-primary, white);
    text-align: center;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .error-message {
    color: var(--fluent-text-secondary, rgba(255,255,255,0.7));
}

#blazor-error-ui .reload {
    color: var(--fluent-brand-primary, #60a5fa);
    margin-left: 1rem;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 6px;
    transition: background 0.15s ease;
}

#blazor-error-ui .reload:hover {
    background: rgba(96, 165, 250, 0.25);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 1rem;
    padding: 0.5rem;
    color: var(--fluent-text-secondary, rgba(255,255,255,0.5));
}

/* Error Boundary Content */
.error-boundary-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
    gap: 1rem;
}

.error-boundary-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.error-boundary-icon i {
    font-size: 48px;
    color: #60a5fa;
}

.error-boundary-content h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.error-boundary-content p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

.error-boundary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary, #7A9B6D);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 0.5rem;
}

.error-boundary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(122, 155, 109, 0.3);
}

.error-boundary-btn:active {
    transform: translateY(0);
}

.error-boundary-btn i {
    font-size: 1.25rem;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* Dashboard Stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-primary);
}

.stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Title Confirmation */
.title-confirmation {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.title-confirmation .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid #ffc107;
    color: #e0a800;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.title-candidates {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.title-candidate {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
}

.title-candidate:hover {
    border-color: var(--accent-primary);
    background-color: rgba(231, 111, 81, 0.1);
    transform: translateX(5px);
}

.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--accent-primary);
    color: var(--accent-primary);
}

.btn-outline-primary:hover {
    background-color: var(--accent-primary);
    color: white;
}

.manual-title-entry {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.manual-title-entry label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.text-warning {
    color: #e0a800;
    font-size: 0.9rem;
}

/* Add Recipe Page */
.add-recipe-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 2rem;
    overflow-y: auto;
}

.add-recipe-content {
    width: 100%;
    max-width: 800px;
}

.add-recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.add-recipe-header h1 {
    margin: 0;
    font-size: 2rem;
}

/* Add Recipe Link in Sidebar */
.add-recipe-link {
    display: block;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--accent-primary);
    border: none;
    border-radius: 4px;
    color: white;
    text-decoration: none;
}

.add-recipe-link:hover {
    background-color: #D4533A;
    color: white;
}

/* Responsive adjustments for large TV screens */
@media (min-width: 1920px) {
    html {
        font-size: 20px;
    }

    .recipe-sidebar {
        width: 200px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 24px;
    }

    .recipe-sidebar {
        width: 225px;
    }
}

/* Recipe Structure Editor */
.recipe-structure-editor {
    max-width: 900px;
}

.structure-section {
    margin-bottom: 1.5rem;
}

.structure-section h2 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    color: var(--accent-primary);
}

/* Recipe Image Editor */
.recipe-image-editor {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recipe-image-editor .current-image {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recipe-image-editor .current-image label {
    font-weight: 600;
    color: var(--text-secondary);
}

.recipe-image-preview {
    max-width: 300px;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--md-sys-shape-corner-medium);
    border: 1px solid var(--border-color);
}

.image-upload-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fluent-border-subtle);
}

.image-upload-section label {
    font-weight: 600;
    color: var(--fluent-text-secondary);
}

.image-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.image-upload input[type="file"] {
    padding: 12px;
    background: var(--fluent-bg-layer-2);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.image-upload input[type="file"]:hover {
    border-color: var(--fluent-brand-primary);
}

.image-upload input[type="file"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--fluent-text-tertiary);
}

.candidate-images {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.candidate-images label {
    font-weight: 600;
    color: var(--text-secondary);
}

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

.image-option {
    position: relative;
    cursor: pointer;
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
    border: 3px solid transparent;
    transition: all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.image-option:hover {
    border-color: var(--accent-secondary);
    transform: scale(1.02);
}

.image-option.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.image-option img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.image-option .badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.badge-recommended {
    background-color: var(--accent-secondary);
    color: var(--text-primary);
}

.badge-selected {
    background-color: var(--accent-primary);
    color: white;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    margin: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.editable-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.editable-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-handle {
    min-width: 2rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.editable-item .form-control {
    flex: 1;
}

.btn-icon {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-danger {
    background-color: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}

.btn-icon.btn-danger:hover {
    background-color: var(--error);
    color: white;
}

/* Ingredient specific styles */
.ingredient-item .quantity-input {
    max-width: 80px;
    flex: 0 0 80px;
}

.ingredient-item .unit-input {
    max-width: 100px;
    flex: 0 0 100px;
}

.ingredient-item .name-input {
    flex: 1;
}

/* Step specific styles */
.step-item {
    align-items: flex-start;
}

.step-item .step-number {
    padding-top: 0.75rem;
}

.step-item textarea {
    min-height: 60px;
}

.empty-message {
    color: var(--text-secondary);
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

.structure-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* Recipe Tabs */
.recipe-tabs {
    display: flex;
    gap: 0;
    padding: 0.5rem 1rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.tab-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.tab-button.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.tab-button.print-btn {
    margin-left: auto;
    background-color: var(--accent-secondary);
    color: var(--text-primary);
    border-radius: 4px;
    border-bottom: none;
    padding: 0.5rem 1rem;
}

.tab-button.print-btn:hover {
    background-color: var(--accent-hover);
    transform: scale(1.02);
}

.tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recipe-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Recipe View Component */
.recipe-view {
    max-width: 900px;
    margin: 0 auto;
}

.recipe-loading,
.recipe-not-structured {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.recipe-not-structured h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.not-structured-actions {
    margin-top: 1.5rem;
}

/* Extracted Text Preview */
.extracted-text-preview {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.extracted-text-preview pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.help-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

.recipe-header-info {
    margin-bottom: 2rem;
}

.recipe-hero-image {
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    max-width: 50%;
    max-height: 200px;
}

.recipe-hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 200px;
}

.recipe-header-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    color: var(--accent-primary);
}

.recipe-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Recipe Tags */
.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.recipe-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
    border: 1px solid var(--fluent-brand-primary);
    border-radius: var(--fluent-radius-circular);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.recipe-tag-chip:hover {
    background: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
}

.recipe-tag-chip:focus-visible {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

.recipe-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meta-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Servings Control */
.servings-control {
    flex-direction: column;
}

.servings-input-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.servings-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.servings-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

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

.servings-input {
    width: 50px;
    height: 28px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.servings-input:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.servings-input::-webkit-outer-spin-button,
.servings-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.servings-input[type=number] {
    -moz-appearance: textfield;
}

.scaling-indicator {
    font-size: 0.8rem;
    color: var(--accent-primary);
    margin-left: 0.5rem;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.reset-servings-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.reset-servings-btn:hover {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

/* Progress Indicator */
.progress-indicator {
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
}

.progress-bar {
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background-color: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Recipe Sections */
.recipe-section {
    margin-bottom: 2rem;
}

.recipe-section h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

/* Equipment List */
.equipment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.equipment-list li {
    background-color: var(--bg-secondary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.95rem;
}

/* Ingredients List */
.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredients-list .ingredient-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.ingredients-list .ingredient-item:last-child {
    border-bottom: none;
}

.ingredient-item.checked .ingredient-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Steps List */
.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.steps-list .step-item {
    padding: 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--border-color);
    transition: all 0.2s ease;
}

.steps-list .step-item.completed {
    border-left-color: var(--success);
    opacity: 0.7;
}

.steps-list .step-item.completed .step-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.step-number {
    display: block;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.step-text {
    display: block;
    line-height: 1.6;
}

/* Checkbox Styling */
/* Fluent 2 Checkbox Styles */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--fluent-border-strong);
    border-radius: var(--fluent-radius-small);
    background-color: var(--fluent-bg-layer-1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background-color: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.checkbox-label:hover .checkbox-custom {
    border-color: var(--fluent-brand-primary);
}

.checkbox-label input[type="checkbox"]:focus-visible + .checkbox-custom {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

/* Recipe Actions */
.recipe-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Parsing Progress Bar */
.parsing-progress {
    margin-bottom: 1.5rem;
}

.progress-container {
    padding: 1rem;
}

.progress-bar {
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
    animation: progress-pulse 1.5s ease-in-out infinite;
}

.progress-bar-fill.active {
    animation: progress-pulse 1.5s ease-in-out infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.progress-stages {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.progress-stages .stage {
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.progress-stages .stage.active {
    opacity: 1;
    color: var(--accent-primary);
    font-weight: 500;
}

/* Parsing Method Badges */
.parsing-method-info {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge-ai {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.badge-ai::before {
    content: "\2728";
}

.badge-regex {
    background: linear-gradient(135deg, var(--accent-secondary), #5a9a7a);
    color: white;
}

.badge-regex::before {
    content: "\2699";
}

/* Modal Overlay for Duplicate Detection */
/* Fluent 2 Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--fluent-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-dialog {
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-large);
    box-shadow: var(--fluent-shadow-64);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fluent-border-subtle);
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--fluent-border-default);
    background-color: transparent;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body p {
    margin: 0 0 1rem 0;
    color: var(--fluent-text-primary);
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.duplicate-info {
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid var(--fluent-border-subtle);
}

.duplicate-info p {
    margin-bottom: 0.5rem;
}

.duplicate-info ul {
    margin: 0;
    padding-left: 1.25rem;
}

.duplicate-info li {
    padding: 0.25rem 0;
    color: var(--fluent-text-secondary);
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--fluent-border-default);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Favorite FAB - positioned above Meal Plan FAB */
.favorite-fab-container {
    position: fixed;
    bottom: calc(100px + 70px + 70px);
    right: 24px;
    z-index: 100;
}

.favorite-fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: var(--fluent-bg-layer-2);
    color: var(--fluent-text-secondary);
    border: 1px solid var(--fluent-border-default);
    cursor: pointer;
    transition: all 0.15s ease;
}

.favorite-fab-btn:hover {
    background-color: var(--fluent-bg-layer-3);
    transform: scale(1.05);
}

.favorite-fab-btn.is-favorite {
    background-color: rgba(255, 71, 87, 0.15);
    color: #ff4757;
    border-color: rgba(255, 71, 87, 0.3);
}

.favorite-fab-btn.is-favorite:hover {
    background-color: rgba(255, 71, 87, 0.25);
}

.favorite-fab-btn svg {
    width: 24px;
    height: 24px;
}

/* Meal Plan FAB - positioned above Print FAB */
.mealplan-fab-container {
    position: fixed;
    bottom: calc(100px + 70px);
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.mealplan-fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: var(--fluent-brand-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mealplan-fab-btn:hover {
    background-color: var(--fluent-brand-hover);
    transform: scale(1.05);
}

.mealplan-fab-btn svg {
    fill: currentColor;
}

.mealplan-toast {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    max-width: 250px;
    text-align: center;
    animation: toast-appear 0.2s ease-out;
}

.mealplan-toast.success {
    background-color: rgba(46, 204, 113, 0.9);
    color: white;
}

.mealplan-toast.error {
    background-color: rgba(231, 76, 60, 0.9);
    color: white;
}

/* In-Progress Recipes FAB - positioned above Favorite FAB */
.active-recipes-fab-container {
    position: fixed;
    bottom: calc(100px + 70px + 70px + 70px);
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.active-recipes-btn {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.active-recipes-btn:hover,
.active-recipes-btn.active {
    background: linear-gradient(135deg, #e67e22, #d35400);
    transform: scale(1.05);
}

.active-recipes-btn svg {
    fill: currentColor;
}

.active-recipes-btn .active-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--fluent-danger);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.active-recipes-panel {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    box-shadow: var(--fluent-shadow-16);
    min-width: 280px;
    max-width: 320px;
    animation: panel-appear 0.2s ease-out;
}

@keyframes panel-appear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.active-recipes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fluent-border-subtle);
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.active-recipes-header .panel-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--fluent-text-secondary);
    padding: 4px;
    line-height: 1;
}

.active-recipes-header .panel-close:hover {
    color: var(--fluent-text-primary);
}

.active-recipes-list {
    max-height: 300px;
    overflow-y: auto;
}

.active-recipe-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
}

.active-recipe-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px 10px 16px;
    text-decoration: none;
    color: var(--fluent-text-primary);
    transition: background 0.15s;
    flex: 1;
    min-width: 0;
}

.active-recipe-item:hover {
    background: var(--fluent-bg-layer-2);
}

.active-recipe-item.current {
    background: rgba(122, 155, 109, 0.1);
    border-left: 3px solid var(--fluent-brand-primary);
}

.active-recipe-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.active-recipe-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--fluent-bg-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.active-recipe-title {
    flex: 1;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.active-recipe-remove {
    background: none;
    border: 1px solid var(--fluent-border-subtle);
    border-radius: 6px;
    font-size: 1rem;
    color: var(--fluent-text-tertiary);
    cursor: pointer;
    padding: 6px 8px;
    flex-shrink: 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-recipe-remove:hover {
    color: var(--fluent-danger);
    border-color: var(--fluent-danger);
    background: rgba(239, 68, 68, 0.1);
}

/* Confirmation dialog for removing recipes */
.remove-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.remove-confirm-dialog {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-default);
    border-radius: 12px;
    padding: 20px;
    max-width: 320px;
    width: 90%;
    text-align: center;
}

.remove-confirm-dialog p {
    margin: 0 0 8px;
    color: var(--fluent-text-primary);
}

.remove-confirm-warning {
    font-size: 0.85rem;
    color: var(--fluent-text-secondary);
    margin-bottom: 16px !important;
}

.remove-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.remove-confirm-actions .btn {
    flex: 1;
    max-width: 120px;
}

/* Create Plan Form in Modal */
.create-plan-form {
    padding: 8px 0;
}

.create-plan-intro {
    font-size: 1rem;
    color: var(--fluent-text-secondary);
    margin-bottom: 16px;
}

.meal-type-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meal-type-checkboxes .checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    transition: background 0.15s;
}

.meal-type-checkboxes .checkbox-label:hover {
    background: var(--fluent-bg-layer-3);
}

.meal-type-checkboxes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fluent-brand-primary);
}

/* Print FAB Container with Flyout */
.print-fab-container {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.print-fab-container .btn-fab {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.print-fab-container .btn-fab.active {
    background-color: var(--fluent-brand-hover);
}

.print-flyout {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: var(--bg-secondary);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    animation: flyout-appear 0.15s ease-out;
}

@keyframes flyout-appear {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.print-flyout-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    background-color: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
}

.print-flyout-item:hover {
    background-color: var(--bg-tertiary);
}

.print-flyout-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.print-flyout-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.print-fab-btn svg {
    width: 24px;
    height: 24px;
}

.print-fab-btn span {
    font-size: 1.25rem;
    font-weight: bold;
}

.print-toast {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    max-width: 250px;
    text-align: center;
    animation: toast-appear 0.2s ease-out;
}

@keyframes toast-appear {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.print-toast.success {
    background-color: rgba(46, 204, 113, 0.9);
    color: white;
}

.print-toast.error {
    background-color: rgba(231, 76, 60, 0.9);
    color: white;
}

/* Simple Print Modal - TV friendly */
.print-modal {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.print-modal h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

/* ============================================
   Fluent 2 Modal/Dialog Overrides
   ============================================ */

.modal-dialog {
    border-radius: var(--fluent-radius-large);
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    box-shadow: var(--fluent-shadow-64);
}

.modal-header {
    background-color: transparent;
    border-bottom: 1px solid var(--fluent-border-subtle);
    padding: 20px 24px 16px;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

/* ============================================
   Fluent 2 Top App Bar / Command Bar
   ============================================ */

.top-app-bar {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    background-color: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
    border-bottom: 1px solid var(--fluent-border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-app-bar-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    margin-left: 12px;
    color: var(--fluent-text-primary);
}

.top-app-bar-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* ============================================
   MD3 Bottom Navigation
   ============================================ */

/* Fluent 2 Bottom Navigation */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: 80px;
    background-color: var(--fluent-bg-layer-1);
    border-top: 1px solid var(--fluent-border-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 120px;
    padding: 12px 0 16px;
    text-decoration: none;
    color: var(--fluent-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

/* Underline indicator for active state */
.bottom-nav-item::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 48px;
    height: 3px;
    background-color: var(--fluent-brand-primary);
    border-radius: 2px;
    transition: transform var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.bottom-nav-item:hover {
    color: var(--fluent-text-primary);
}

.bottom-nav-item.active {
    color: var(--fluent-brand-primary);
}

.bottom-nav-item.active::after {
    transform: translateX(-50%) scaleX(1);
}

.bottom-nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 32px;
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 4px;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.bottom-nav-item:hover .bottom-nav-icon-wrapper {
    background-color: var(--fluent-bg-subtle-hover);
}

.bottom-nav-item.active .bottom-nav-icon-wrapper {
    background-color: transparent;
}

.bottom-nav-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.bottom-nav-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ============================================
   MD3 Recipe Grid Layout
   ============================================ */

/* Fluent 2 App Layout */
.md3-app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--fluent-bg-canvas);
}

.md3-main-content {
    flex: 1;
    padding-bottom: 80px; /* Space for bottom nav */
    overflow-y: auto;
}

.recipe-grid-container {
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.recipe-grid-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.recipe-grid-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

/* Fluent 2 Search Bar */
.search-bar {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 600px;
    height: 48px;
    padding: 0 16px;
    background-color: var(--fluent-bg-layer-2);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    gap: 12px;
    transition: border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.search-bar:hover {
    border-color: var(--fluent-border-strong);
}

.search-bar:focus-within {
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 1px var(--fluent-brand-primary);
}

.search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--fluent-text-primary);
}

.search-bar input::placeholder {
    color: var(--fluent-text-tertiary);
}

.search-icon {
    color: var(--fluent-text-secondary);
    font-size: 1.25rem;
}

/* Filter Chips */
.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Fluent 2 Chip Styles */
.chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--fluent-radius-medium);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--fluent-border-default);
    background-color: transparent;
    color: var(--fluent-text-secondary);
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.chip:hover {
    background-color: var(--fluent-bg-subtle-hover);
    border-color: var(--fluent-border-strong);
}

.chip.selected {
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
}

.chip.selected:hover {
    background-color: rgba(122, 155, 109, 0.18);
}

.chip-close {
    margin-left: 8px;
    font-size: 1rem;
}

/* Recipe Grid */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Fluent 2 Recipe Card for Grid */
.recipe-card {
    display: flex;
    flex-direction: column;
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-large);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--fluent-shadow-2);
}

.recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fluent-shadow-8);
    border-color: var(--fluent-border-default);
}

.recipe-card:focus {
    outline: 3px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

.recipe-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 120px;
    background-color: var(--fluent-bg-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--fluent-text-tertiary);
}

.recipe-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-card-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.recipe-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.recipe-card-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--fluent-radius-small);
    font-size: 0.75rem;
    font-weight: 500;
}

.recipe-card-chip.cuisine {
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

.recipe-card-chip.dish-type {
    background-color: var(--fluent-bg-subtle);
    color: var(--fluent-text-secondary);
}

/* Empty State - Warm Kitchen 2026 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
    color: var(--sage);
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--brown);
}

.empty-state-subtitle,
.empty-state-description {
    font-size: 0.875rem;
    margin-bottom: 24px;
    max-width: 300px;
    color: var(--text-muted);
}

/* ============================================
   MD3 Recipe Detail Page
   ============================================ */

/* Fluent 2 Recipe Detail Page */
.recipe-detail-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--fluent-bg-canvas);
}

.recipe-detail-header {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    background-color: var(--fluent-bg-layer-1);
    border-bottom: 1px solid var(--fluent-border-subtle);
    position: sticky;
    top: 0;
    z-index: 10;
}

.recipe-detail-content {
    flex: 1;
    padding: 24px 24px 96px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Fluent 2 Pivot/Tab Control */
.recipe-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--fluent-border-subtle);
    margin-bottom: 24px;
}

.recipe-detail-tab {
    flex: 1;
    height: 44px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
    margin-bottom: -1px;
}

.recipe-detail-tab:hover {
    color: var(--fluent-text-primary);
    background-color: var(--fluent-bg-subtle-hover);
}

.recipe-detail-tab.active {
    color: var(--fluent-brand-primary);
    border-bottom-color: var(--fluent-brand-primary);
    background: transparent;
}

/* Print FAB */
.print-fab {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 50;
}

/* ============================================
   Fluent 2 Form Controls
   ============================================ */

.md3-text-field {
    position: relative;
    margin-bottom: 1rem;
}

.md3-text-field input,
.md3-text-field textarea,
.md3-text-field select {
    width: 100%;
    height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    background-color: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
    transition: border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.md3-text-field select {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    cursor: pointer;
}

.md3-text-field textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

.md3-text-field input:hover,
.md3-text-field textarea:hover,
.md3-text-field select:hover {
    border-color: var(--fluent-border-strong);
}

.md3-text-field input:focus,
.md3-text-field textarea:focus,
.md3-text-field select:focus {
    outline: none;
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 1px var(--fluent-brand-primary);
}

.md3-text-field label {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 1rem;
    color: var(--fluent-text-secondary);
    pointer-events: none;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
    background-color: var(--fluent-bg-layer-1);
    padding: 0 4px;
}

.md3-text-field input:focus + label,
.md3-text-field input:not(:placeholder-shown) + label,
.md3-text-field textarea:focus + label,
.md3-text-field textarea:not(:placeholder-shown) + label,
.md3-text-field select:focus + label,
.md3-text-field.has-value label {
    top: -8px;
    font-size: 0.75rem;
    color: var(--fluent-brand-primary);
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (min-width: 600px) {
    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .bottom-nav {
        height: 80px;
    }
}

@media (min-width: 960px) {
    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
    }

    .recipe-grid-container {
        padding: 24px;
    }
}

@media (min-width: 1920px) {
    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }

    .recipe-card-title {
        font-size: 1.125rem;
    }
}

/* ============================================
   MD3 Settings Page
   ============================================ */

.settings-list {
    max-width: 600px;
    margin: 0 auto;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-brand-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px 16px;
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 4px;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.settings-item:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.settings-item-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.settings-item-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    color: var(--fluent-text-secondary);
}

.settings-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-item-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--fluent-text-primary);
}

.settings-item-description {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.settings-item-arrow {
    font-size: 1.5rem;
    color: var(--fluent-text-tertiary);
}

/* Expandable Settings */
button.settings-item {
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

button.settings-item.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.settings-expanded-content {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-top: none;
    border-radius: 0 0 var(--fluent-radius-medium) var(--fluent-radius-medium);
    padding: 20px;
    margin-bottom: 4px;
}

.settings-expanded-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.settings-expanded-content h3:first-child {
    margin-top: 0;
}

.backup-schedule-section,
.backup-list-section {
    margin-top: 1rem;
}

.backup-info {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

/* ============================================
   MD3 Segmented Button (for ThemeToggle, UnitToggle)
   ============================================ */

/* Fluent 2 Segmented Button (Pivot/Tab style) */
.md3-segmented-button {
    display: inline-flex;
    border-radius: var(--fluent-radius-medium);
    background-color: var(--fluent-bg-layer-2);
    padding: 4px;
    gap: 4px;
}

.md3-segmented-button-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 48px;
    padding: 0 16px;
    border: none;
    background-color: transparent;
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    border-radius: var(--fluent-radius-small);
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                box-shadow var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.md3-segmented-button-item:not(:last-child) {
    border-right: none;
}

.md3-segmented-button-item:hover:not(.active) {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.md3-segmented-button-item.active {
    background-color: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
    box-shadow: var(--fluent-shadow-2);
}

.md3-segmented-button-item:focus-visible {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: 0;
    z-index: 1;
}

/* Compact segmented button variant */
.md3-segmented-button.compact .md3-segmented-button-item {
    height: 28px;
    padding: 0 12px;
    font-size: 0.75rem;
}

/* ============================================
   MD3 Range/Slider Input
   ============================================ */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--fluent-bg-subtle);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--fluent-brand-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--fluent-shadow-4);
    transition: transform var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--fluent-brand-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: var(--fluent-shadow-4);
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 8px rgba(122, 155, 109, 0.2);
}

/* ============================================
   Fluent 2 Alerts
   ============================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 16px;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid;
}

.alert-success {
    background-color: var(--fluent-success-bg);
    color: var(--fluent-success);
    border-color: var(--fluent-success);
}

.alert-error {
    background-color: var(--fluent-danger-bg);
    color: var(--fluent-danger);
    border-color: var(--fluent-danger);
}

.alert-warning {
    background-color: var(--fluent-warning-bg);
    color: var(--fluent-text-primary);
    border-color: var(--fluent-warning);
}

.alert-info {
    background-color: var(--fluent-info-bg);
    color: var(--fluent-info);
    border-color: var(--fluent-info);
}

/* ============================================
   Fluent 2 Card Section Headers (Admin)
   ============================================ */

.card h2,
.card .section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.card h2:not(:first-child),
.card .section-title:not(:first-child) {
    margin-top: 24px;
}

/* ============================================
   URL Import Page Specific Styles
   ============================================ */

.extraction-info {
    margin-bottom: 16px;
    padding: 12px;
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.extraction-info a {
    color: var(--fluent-brand-primary);
}

.recipe-preview {
    margin-bottom: 24px;
}

.recipe-preview details {
    margin-bottom: 8px;
}

.recipe-preview summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--fluent-text-primary);
    padding: 8px 0;
}

.recipe-preview summary:hover {
    color: var(--fluent-brand-primary);
}

.recipe-preview ul,
.recipe-preview ol {
    margin: 8px 0 0 24px;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.recipe-preview li {
    margin-bottom: 4px;
}

.text-muted {
    font-size: 0.75rem;
    color: var(--fluent-text-tertiary);
    margin-top: 4px;
}

.text-danger {
    color: var(--fluent-danger) !important;
}

.text-success {
    color: var(--sage) !important;
}

.loading-indicator {
    padding: 32px;
    text-align: center;
}

.loading-indicator p {
    font-size: 1rem;
    color: var(--fluent-text-secondary);
}

.loading-steps {
    margin-top: 16px;
    font-size: 0.875rem;
}

.loading-steps p {
    font-size: 0.875rem;
    opacity: 0.7;
}

.form-divider {
    height: 1px;
    background-color: var(--fluent-border-subtle);
    margin: 24px 0;
}

/* ============================================
   Fluent 2 Link Button
   ============================================ */

.btn-link {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--fluent-brand-primary);
    padding: 4px 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--fluent-radius-small);
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.btn-link:hover {
    background-color: var(--fluent-brand-selected);
    text-decoration: none;
}

/* API Key Display */
.api-key-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 8px;
}

.api-key-display code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

/* ============================================
   Admin Bottom Nav Enhancement
   ============================================ */

.admin-bottom-nav {
    background-color: var(--fluent-bg-layer-1);
    border-top: 1px solid var(--fluent-border-default);
    box-shadow: 0 -1px 3px rgba(0,0,0,0.08);
}

.admin-bottom-nav-item {
    border-radius: var(--fluent-radius-medium);
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.admin-bottom-nav-item .bottom-nav-icon-wrapper {
    background-color: transparent;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.admin-bottom-nav-item:hover .bottom-nav-icon-wrapper {
    background-color: var(--fluent-bg-subtle-hover);
}

.admin-bottom-nav-item.active .bottom-nav-icon-wrapper {
    background-color: transparent;
}

.admin-bottom-nav-item .bottom-nav-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fluent-text-secondary);
}

.admin-bottom-nav-item:hover .bottom-nav-label,
.admin-bottom-nav-item.active .bottom-nav-label {
    color: var(--fluent-text-primary);
}

/* ============================================
   Admin Nav Enhancement
   ============================================ */

.admin-nav h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-brand-primary);
    margin-bottom: 24px;
}

.admin-nav-list a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--fluent-radius-medium);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.admin-nav-list a:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.admin-nav-list a.active {
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

/* ============================================
   Stat Card Enhancement
   ============================================ */

.stat-card {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-large);
    padding: 24px;
    text-align: center;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.stat-card:hover {
    box-shadow: var(--fluent-shadow-8);
    transform: translateY(-2px);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--fluent-brand-primary);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fluent-text-secondary);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Data Table Enhancement
   ============================================ */

.data-table {
    border-radius: var(--fluent-radius-medium);
    overflow: hidden;
    border: 1px solid var(--fluent-border-subtle);
}

.data-table th {
    background-color: var(--fluent-bg-layer-2);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fluent-text-secondary);
    padding: 12px 16px;
}

.data-table td {
    padding: 16px;
    border-bottom: 1px solid var(--fluent-border-subtle);
    font-size: 0.875rem;
}

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

.data-table tr:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

/* ============================================
   Login Page Enhancement
   ============================================ */

.login-box {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    box-shadow: var(--fluent-shadow-16);
}

.login-box h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.login-error {
    background-color: var(--fluent-danger-bg);
    border: 1px solid var(--fluent-danger);
    color: var(--fluent-danger);
    border-radius: var(--fluent-radius-medium);
}

.login-success {
    background-color: var(--fluent-success-bg);
    border: 1px solid var(--fluent-success);
    color: var(--fluent-success);
    border-radius: var(--fluent-radius-medium);
}

/* ============================================
   Empty Message
   ============================================ */

.empty-message {
    padding: 32px;
    text-align: center;
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
}

/* ============================================
   Margin/Spacing Utilities
   ============================================ */

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Full Width Button */
.btn-full-width {
    width: 100%;
}

/* Login Back Link */
.login-back-link {
    margin-top: 24px;
    text-align: center;
}

/* ============================================
   Filter Chips (adjusted for consistency)
   ============================================ */

.filter-chips {
    margin-top: 0;
}

/* ============================================
   Print Modal Enhancements
   ============================================ */

.print-modal {
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-xlarge);
    padding: 24px;
    max-width: 400px;
    width: 90%;
}

.print-modal h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 16px 0;
}

.print-modal-form {
    margin-bottom: 16px;
}

.print-copies-input {
    width: 80px;
}

.print-preview-section {
    border-top: 1px solid var(--fluent-border-subtle);
    padding-top: 16px;
    margin-top: 16px;
    max-height: 300px;
    overflow-y: auto;
}

.print-preview-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--fluent-text-primary);
    margin-bottom: 8px;
}

.print-preview-image {
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-small);
}

/* ============================================
   Modal Dialog Enhancements
   ============================================ */

.modal-dialog {
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-large);
    max-width: 400px;
    width: 90%;
    box-shadow: var(--fluent-shadow-28);
}

.modal-header {
    padding: 24px 24px 16px;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.modal-body {
    padding: 0 24px 16px;
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
}

.modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.duplicate-info {
    margin-top: 16px;
    padding: 12px;
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    font-size: 0.875rem;
}

.duplicate-info ul {
    margin: 8px 0 0 16px;
    padding: 0;
}

/* ============================================
   Admin Recipes Table Thumbnails
   ============================================ */

.recipes-table .thumbnail-col {
    width: 60px;
    padding: 8px !important;
}

.recipes-table .thumbnail-cell {
    padding: 8px !important;
}

.recipes-table .recipe-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: var(--fluent-radius-small);
    overflow: hidden;
    background-color: var(--fluent-bg-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.recipes-table .recipe-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipes-table .thumbnail-placeholder {
    font-size: 1.5rem;
    opacity: 0.5;
}

.recipes-table .actions {
    flex-direction: column;
    gap: 4px;
}

.recipes-table .actions .btn {
    width: 100%;
    justify-content: center;
}

/* ============================================
   PDF Viewer Card (Admin Edit Page)
   ============================================ */

.pdf-viewer-card {
    margin-bottom: 16px;
}

.pdf-viewer-card .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.pdf-viewer-card .section-header h2 {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.pdf-viewer-card .pdf-viewer-wrapper {
    border-radius: var(--md-sys-shape-corner-medium);
    overflow: hidden;
}

.pdf-viewer-card .pdf-viewer-container {
    max-height: 500px;
}

/* ============================================
   XBOX/MEDIA CENTER TV LAYOUT
   ============================================ */

/* ============================================
   Left Rail Navigation
   ============================================ */

.tv-nav-rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background-color: var(--fluent-bg-layer-1);
    border-right: 1px solid var(--fluent-border-subtle);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    z-index: 1000;
    transition: width var(--fluent-duration-slow) var(--fluent-easing-ease-out);
}

.tv-nav-rail:hover,
.tv-nav-rail:focus-within {
    width: 260px;
}

.nav-rail-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    min-height: 56px;
}

.nav-rail-brand-icon {
    font-size: 1.75rem;
    color: var(--fluent-brand-primary);
    flex-shrink: 0;
    width: 40px;
    text-align: center;
    line-height: 1;
}

.nav-rail-brand-text {
    font: var(--fluent-type-title-2);
    color: var(--fluent-text-primary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--fluent-duration-normal) var(--fluent-easing-ease-out);
}

.tv-nav-rail:hover .nav-rail-brand-text,
.tv-nav-rail:focus-within .nav-rail-brand-text {
    opacity: 1;
}

.nav-rail-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
}

.nav-rail-item {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 16px;
    border-radius: var(--fluent-radius-medium);
    color: var(--fluent-text-secondary);
    text-decoration: none;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                color var(--fluent-duration-fast) var(--fluent-easing-ease-out),
                border-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
    /* Button reset for when nav-rail-item is a button */
    background: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.nav-rail-item-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.nav-rail-item-label {
    font: var(--fluent-type-body-1);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--fluent-duration-normal) var(--fluent-easing-ease-out);
}

.tv-nav-rail:hover .nav-rail-item-label,
.tv-nav-rail:focus-within .nav-rail-item-label {
    opacity: 1;
}

.nav-rail-item:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.nav-rail-item.active {
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

.nav-rail-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: var(--fluent-brand-primary);
    border-radius: 0 2px 2px 0;
}

.nav-rail-item:focus-visible {
    outline: none;
    border-color: var(--fluent-brand-primary);
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 2px var(--fluent-brand-primary), 0 0 20px rgba(122, 155, 109, 0.3);
}

.nav-rail-footer {
    padding: 0 12px;
    border-top: 1px solid var(--fluent-border-subtle);
    padding-top: 16px;
    margin-top: 16px;
}

/* Main content offset for rail */
.tv-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--fluent-bg-canvas);
}

.tv-layout-main {
    margin-left: 80px;
    flex: 1;
    transition: margin-left var(--fluent-duration-slow) var(--fluent-easing-ease-out);
}

/* ============================================
   TV Search Bar
   ============================================ */

.tv-search-container {
    padding: 0 64px;
    margin-bottom: 32px;
}

.tv-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    height: 48px;
    padding: 0 20px;
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    transition: all var(--fluent-duration-normal) var(--fluent-easing-ease-out);
}

.tv-search-bar:hover {
    border-color: var(--fluent-border-default);
    box-shadow: var(--fluent-shadow-4);
}

.tv-search-bar:focus-within {
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 2px var(--fluent-brand-selected);
}

.tv-search-icon {
    color: var(--fluent-text-tertiary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tv-search-bar:focus-within .tv-search-icon {
    color: var(--fluent-brand-primary);
}

.tv-search-input {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    color: var(--fluent-text-primary);
    font-family: inherit;
}

.tv-search-input::placeholder {
    color: var(--fluent-text-tertiary);
}

.tv-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background-color: var(--fluent-bg-subtle);
    color: var(--fluent-text-tertiary);
    border-radius: var(--fluent-radius-circular);
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
    flex-shrink: 0;
    padding: 0;
}

.tv-search-clear:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.tv-search-clear svg {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tv-search-container {
        padding: 0 24px;
        margin-bottom: 24px;
    }

    .tv-search-bar {
        max-width: none;
        height: 44px;
        padding: 0 16px;
    }
}

@media (min-width: 1200px) {
    .tv-search-container {
        padding: 0 80px;
    }
}

@media (min-width: 1920px) {
    .tv-search-container {
        padding: 0 100px;
    }
}

/* ============================================
   Hero Section
   ============================================ */

.hero-section {
    position: relative;
    height: 50vh;
    min-height: 400px;
    max-height: 600px;
    margin-bottom: 48px;
    overflow: hidden;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.8s var(--fluent-easing-ease-out);
    overflow: hidden;
}

.hero-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-section:hover .hero-backdrop {
    transform: scale(1.05);
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.8) 30%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Additional bottom gradient for better text readability */
.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 70%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 48px 64px;
    max-width: 800px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background-color: var(--fluent-brand-primary);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--fluent-radius-small);
    margin-bottom: 16px;
    width: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-chips {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--fluent-radius-circular);
    font-size: 0.875rem;
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-chip.primary {
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 16px;
    line-height: 1.2;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.4);
    /* Limit to 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 28px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}

.hero-meta-icon {
    font-size: 1.25rem;
}

.hero-actions {
    display: flex;
    gap: 16px;
}

/* Hero Carousel */
.hero-carousel {
    position: relative;
    height: 50vh;
    min-height: 400px;
    max-height: 600px;
    margin-bottom: 48px;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide .hero-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 8s ease-out;
}

.carousel-slide.active .hero-backdrop {
    transform: scale(1.08);
}

.carousel-slide .hero-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-slide .hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.7) 40%,
        rgba(0, 0, 0, 0.3) 70%,
        transparent 100%
    );
}

.carousel-slide .hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        transparent 50%
    );
}

.carousel-slide .hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 48px;
    max-width: 800px;
}

/* Carousel Badge Variants */
.hero-badge.badge-meal-plan {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
}

.hero-badge.badge-featured {
    background: linear-gradient(135deg, var(--fluent-brand-primary) 0%, #008577 100%);
}

.hero-badge.badge-recent {
    background: linear-gradient(135deg, #6c5ce7 0%, #5f4dd0 100%);
}

.hero-chip-highlight {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Carousel Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

.hero-carousel:hover .carousel-nav {
    opacity: 1;
}

.carousel-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 24px;
}

.carousel-next {
    right: 24px;
}

/* Carousel Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: content-box;
}

.carousel-indicator:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.carousel-indicator.active {
    background-color: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
    transform: scale(1.2);
}

.carousel-indicator .indicator-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.carousel-indicator:hover .indicator-tooltip {
    opacity: 1;
    visibility: visible;
}

.btn-hero {
    height: 56px;
    min-width: 160px;
    padding: 0 32px;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: var(--fluent-radius-medium);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.btn-hero-primary {
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
}

.btn-hero-primary:hover {
    background-color: var(--fluent-brand-hover);
    transform: scale(1.02);
}

.btn-hero-secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
}

.btn-hero-secondary:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.btn-hero:focus-visible {
    outline: none;
    border-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* ============================================
   Content Rows (Horizontal Scrolling)
   ============================================ */

.content-rows {
    padding: 0 0 120px;
}

.content-row {
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(24px);
    animation: row-enter 0.5s var(--fluent-easing-ease-out) forwards;
}

.content-row:nth-child(1) { animation-delay: 0ms; }
.content-row:nth-child(2) { animation-delay: 80ms; }
.content-row:nth-child(3) { animation-delay: 160ms; }
.content-row:nth-child(4) { animation-delay: 240ms; }
.content-row:nth-child(5) { animation-delay: 320ms; }

@keyframes row-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 64px;
    margin-bottom: 20px;
}

.row-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.row-title-icon {
    color: #ff4757;
    flex-shrink: 0;
}

.favorites-row .row-title {
    color: var(--fluent-text-primary);
}

.row-see-all {
    font-size: 1rem;
    font-weight: 500;
    color: var(--fluent-brand-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--fluent-radius-small);
    transition: background-color var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.row-see-all:hover {
    background-color: var(--fluent-brand-selected);
}

.row-see-all:focus-visible {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

.row-scroller {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 8px 0 16px;
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.row-scroller * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.row-scroller::-webkit-scrollbar {
    display: none;
}

.row-scroller.is-grabbing {
    cursor: grabbing;
}

.row-scroller.is-grabbing * {
    cursor: grabbing !important;
    pointer-events: none;
}

.row-scroller.is-grabbing a,
.row-scroller.is-grabbing button {
    pointer-events: none;
}

/* Prevent native browser drag on images and links inside scrollers */
.row-scroller img,
.row-scroller a {
    -webkit-user-drag: none;
    user-drag: none;
}

.row-scroller .tv-recipe-card {
    -webkit-user-drag: none;
    user-drag: none;
}

.row-items {
    display: flex;
    gap: 24px;
    padding: 8px 64px 16px;
}

/* ============================================
   TV Recipe Card
   ============================================ */

.tv-recipe-card {
    flex: 0 0 auto;
    width: 280px;
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    text-decoration: none;
    scroll-snap-align: start;
    cursor: pointer;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tv-recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}

.tv-recipe-card:focus-visible {
    outline: none;
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(0,0,0,0.1)),
        0 0 0 3px var(--fluent-brand-primary);
    transform: translateY(-4px);
    z-index: 10;
}

.tv-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--fluent-bg-layer-2);
    overflow: hidden;
}

.tv-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--fluent-duration-slow) var(--fluent-easing-ease-out);
}

.tv-recipe-card:hover .tv-card-image img,
.tv-recipe-card:focus-visible .tv-card-image img {
    transform: scale(1.1);
}

.tv-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    color: var(--fluent-text-tertiary);
}

.tv-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    display: flex;
    justify-content: flex-end;
}

.tv-card-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: var(--fluent-radius-circular);
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.tv-card-content {
    padding: 16px;
}

.tv-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-card-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tv-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tv-card-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--radius-xl, 50px);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--fluent-bg-layer-2);
    color: var(--fluent-text-secondary);
}

.tv-card-chip.secondary {
    background-color: var(--fluent-bg-layer-3);
    color: var(--fluent-text-tertiary);
}

/* ============================================
   TV Layout Responsive
   ============================================ */

/* Hide rail on tablet/mobile, show bottom nav */
@media (max-width: 959px) {
    /* Prevent horizontal overflow on mobile */
    .tv-layout-main,
    .content-rows,
    .content-row,
    main {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Ensure buttons and links wrap properly */
    .btn,
    .btn-hero,
    button,
    a.btn {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Flex containers should wrap on mobile */
    .hero-actions,
    .form-actions,
    .btn-group,
    .action-buttons {
        flex-wrap: wrap;
    }

    .tv-nav-rail {
        display: none;
    }

    .tv-layout-main {
        margin-left: 0;
        padding-bottom: 80px;
    }

    .hero-section,
    .hero-carousel {
        height: 40vh;
        min-height: 320px;
    }

    .hero-content,
    .carousel-slide .hero-content {
        padding: 32px 24px;
        max-width: none;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        gap: 12px;
    }

    .btn-hero {
        width: 100%;
        max-width: 280px;
    }

    /* Carousel mobile adjustments */
    .carousel-nav {
        width: 40px;
        height: 40px;
        opacity: 0.8;
    }

    .carousel-prev {
        left: 12px;
    }

    .carousel-next {
        right: 12px;
    }

    .carousel-indicators {
        bottom: 16px;
        gap: 8px;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
        min-width: 10px;
        min-height: 10px;
    }

    .carousel-indicator .indicator-tooltip {
        display: none;
    }

    .row-header,
    .row-items {
        padding-left: 24px;
        padding-right: 24px;
    }

    .tv-recipe-card {
        width: 240px;
    }

    .row-items {
        gap: 16px;
    }

    .content-row {
        margin-bottom: 32px;
    }
}

/* Desktop */
@media (min-width: 960px) and (max-width: 1919px) {
    .tv-recipe-card {
        width: 280px;
    }

    .hero-section,
    .hero-carousel {
        height: 45vh;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .row-header,
    .row-items {
        padding-left: 48px;
        padding-right: 48px;
    }
}

/* Hide bottom nav on desktop/TV */
@media (min-width: 960px) {
    .bottom-nav {
        display: none !important;
    }
}

/* Large TV */
@media (min-width: 1920px) {
    .tv-recipe-card {
        width: 360px;
    }

    .hero-section,
    .hero-carousel {
        height: 55vh;
        max-height: 700px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .row-header,
    .row-items {
        padding-left: 80px;
        padding-right: 80px;
    }

    .content-row {
        margin-bottom: 56px;
    }

    .carousel-nav {
        width: 56px;
        height: 56px;
    }

    .carousel-prev {
        left: 32px;
    }

    .carousel-next {
        right: 32px;
    }
}

/* 4K TV */
@media (min-width: 2560px) {
    .tv-recipe-card {
        width: 400px;
    }

    .hero-title {
        font-size: 4rem;
    }

    .row-header,
    .row-items {
        padding-left: 100px;
        padding-right: 100px;
    }
}

/* ============================================
   Recipe Detail - Cinematic Header
   ============================================ */

.recipe-detail-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    max-height: 700px;
    overflow: hidden;
}

.recipe-detail-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}

.recipe-detail-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--fluent-bg-canvas) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

.recipe-detail-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 64px;
}

.recipe-detail-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--fluent-text-primary);
    margin: 0 0 20px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.recipe-detail-meta-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.recipe-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-circular);
    color: var(--fluent-text-primary);
    font-size: 1rem;
    font-weight: 500;
    box-shadow: var(--fluent-shadow-4);
}

.recipe-meta-pill .meta-icon {
    font-size: 1.25rem;
    color: var(--fluent-brand-primary);
}

/* Recipe detail tabs - TV style */
.recipe-tabs-tv {
    display: flex;
    gap: 8px;
    padding: 24px 64px;
    background-color: var(--fluent-bg-layer-1);
    border-bottom: 1px solid var(--fluent-border-subtle);
    position: sticky;
    top: 0;
    z-index: 100;
}

.recipe-tab-tv {
    height: 48px;
    padding: 0 32px;
    border: 2px solid transparent;
    border-radius: var(--fluent-radius-medium);
    background-color: transparent;
    color: var(--fluent-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.recipe-tab-tv:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.recipe-tab-tv.active {
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
}

.recipe-tab-tv:focus-visible {
    outline: none;
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 4px rgba(122, 155, 109, 0.3);
}

/* Recipe content - two column */
.recipe-content-tv {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    padding: 48px 64px;
    max-width: 1600px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .recipe-content-tv {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }
}

/* Ingredients sidebar */
.ingredients-panel {
    position: sticky;
    top: 120px;
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    padding: 32px;
    height: fit-content;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

.ingredients-panel h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 24px;
}

/* Large checkboxes for TV */
.ingredient-item-tv {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.ingredient-item-tv:last-child {
    border-bottom: none;
}

.ingredient-checkbox-tv {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--fluent-border-strong);
    border-radius: var(--fluent-radius-small);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.ingredient-checkbox-tv:checked {
    background-color: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
}

.ingredient-checkbox-tv:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--fluent-on-brand);
    font-size: 1.25rem;
    font-weight: bold;
}

.ingredient-checkbox-tv:focus-visible {
    outline: 3px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

.ingredient-text-tv {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--fluent-text-primary);
    padding-top: 4px;
}

/* Steps section */
.steps-section-tv {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.step-item-tv {
    display: flex;
    gap: 24px;
    padding: 24px;
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-large);
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.step-item-tv:focus-within {
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 3px rgba(122, 155, 109, 0.2);
}

.step-number-tv {
    width: 48px;
    height: 48px;
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
    border-radius: var(--fluent-radius-circular);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-item-tv.completed .step-number-tv {
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-on-brand);
}

.step-content-tv {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.step-checkbox-tv {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--fluent-border-strong);
    border-radius: var(--fluent-radius-small);
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 4px;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease-out);
}

.step-checkbox-tv:checked {
    background-color: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
}

.step-checkbox-tv:checked::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fluent-on-brand);
    font-size: 1.25rem;
    font-weight: bold;
    height: 100%;
}

.step-checkbox-tv:focus-visible {
    outline: 3px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

.step-instruction-tv {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--fluent-text-primary);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .content-row {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .tv-recipe-card,
    .hero-backdrop,
    .tv-card-image img {
        transition: none;
    }
}

/* ============================================
   ADMIN PANEL - WARM KITCHEN 2026
   ============================================ */

/* Admin Layout - Full page standalone */
/* ============================================
   ADMIN LAYOUT - Warm Kitchen 2026
   Matches sidebar-2026 styling from main app
   ============================================ */

.admin-layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-color: var(--cream);
    z-index: 100;
}

.admin-nav-rail {
    width: 260px;
    flex-shrink: 0;
    background-color: var(--white);
    border-right: 1px solid var(--cream-dark, var(--border));
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
}

/* Admin nav rail brand - matches sidebar-2026 */
.admin-nav-rail .nav-rail-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 0;
}

.admin-nav-rail .nav-rail-brand-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--white);
}

.admin-nav-rail .nav-rail-brand-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--brown);
    letter-spacing: -0.5px;
    opacity: 1;
}

/* Admin nav items - matches sidebar-2026 styling */
.admin-nav-rail .nav-rail-items {
    flex: 1;
    padding: 0;
    overflow-y: auto;
}

.admin-nav-rail .nav-rail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    padding: 14px 16px;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.15s ease;
    margin-bottom: 6px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.admin-nav-rail .nav-rail-item-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.admin-nav-rail .nav-rail-item-label {
    font-size: 15px;
    font-weight: 500;
    opacity: 1;
}

.admin-nav-rail .nav-rail-item:hover {
    background-color: var(--cream-dark, var(--cream));
    color: var(--brown);
}

/* Active state with gradient like sidebar-2026 */
.admin-nav-rail .nav-rail-item.active {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: var(--white);
}

.admin-nav-rail .nav-rail-item.active .nav-rail-item-icon {
    color: var(--white);
}

.admin-nav-rail .nav-rail-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sage);
}

.admin-nav-rail .nav-rail-footer {
    border-top: 1px solid var(--cream-dark, var(--border));
    padding: 16px 0 0;
    margin-top: auto;
}

/* Dynamic nav rail overflow flyout (resolution independent) */
.nav-rail-more-wrapper {
    position: relative;
}

.nav-rail-overflow-flyout {
    position: fixed;
    left: 248px;
    bottom: 100px;
    min-width: 220px;
    max-width: 280px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 10001;
    display: none;
    flex-direction: column;
    gap: 4px;
    pointer-events: auto;
}

.nav-rail-overflow-flyout.open {
    display: flex;
}

.nav-rail-overflow-flyout .nav-rail-item {
    height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-dark);
    background-color: transparent;
    cursor: pointer;
    pointer-events: auto;
    border: none;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}

.nav-rail-overflow-flyout .nav-rail-item:hover {
    background-color: var(--cream);
}

.nav-rail-overflow-flyout .nav-rail-item.active {
    background-color: var(--sage-light);
    color: var(--sage);
}

.nav-rail-overflow-flyout .nav-rail-item-label {
    opacity: 1;
    font-size: 0.875rem;
}

.nav-rail-overflow-flyout .nav-rail-item-icon {
    font-size: 1.25rem;
    width: 24px;
    flex-shrink: 0;
}

.nav-rail-more-btn {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    width: 100%;
}

.nav-rail-more-btn:hover {
    background-color: var(--cream);
}

.nav-rail-more-btn.active {
    background-color: var(--sage-light);
    color: var(--sage);
}

/* Backdrop for closing flyout */
.nav-rail-overflow-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: transparent;
}

.admin-main {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
    padding: 32px 48px;
    overflow-y: auto;
    background-color: var(--cream);
}

.admin-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    gap: 16px;
    color: var(--text-muted);
}

/* Admin Error State (STA-001) */
.admin-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    gap: 12px;
    text-align: center;
    padding: 24px;
}

.admin-error-state i {
    font-size: 64px;
    color: var(--terracotta);
}

.admin-error-state h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.admin-error-state p {
    color: var(--text-muted);
    margin: 0 0 16px;
}

/* Admin Page Layout - Warm Kitchen 2026 */
.admin-page {
    max-width: 1600px;
    /* Left-justified, no centering */
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border, var(--fluent-border-subtle));
}

.admin-page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--brown, var(--fluent-text-primary));
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-page-header h1 i {
    color: var(--sage, var(--fluent-brand-primary));
}

/* Settings Tabs - Warm Kitchen 2026 */
.settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px;
    background: var(--white, var(--fluent-bg-layer-1));
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 12px);
    color: var(--text-muted, var(--fluent-text-secondary));
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    background: var(--cream, var(--fluent-bg-layer-2));
    color: var(--brown, var(--fluent-text-primary));
}

.settings-tab.active {
    background: var(--sage, var(--fluent-brand-primary));
    color: white;
}

.settings-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(122, 155, 109, 0.3);
}

.tab-icon {
    font-size: 18px;
}

.tab-label {
    font-weight: 500;
}

/* Settings Panel - Warm Kitchen 2026 */
.settings-panel {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-card {
    background: var(--white, var(--fluent-bg-layer-1));
    border: 1px solid var(--border, var(--fluent-border-subtle));
    border-radius: var(--radius-lg, 16px);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.settings-card h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--brown, var(--fluent-text-primary));
    margin: 0 0 8px 0;
}

.settings-description {
    color: var(--fluent-text-secondary);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.settings-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--fluent-border-subtle);
}

.settings-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
    color: var(--fluent-text-secondary);
}

.api-fallback-info {
    margin-top: 24px;
    padding: 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--fluent-radius-medium);
}

.api-fallback-info h4 {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--fluent-text-primary);
}

.api-fallback-info ol {
    margin: 0;
    padding-left: 1.5rem;
}

.api-fallback-info li {
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--fluent-text-secondary);
}

.api-fallback-info li strong {
    color: var(--fluent-text-primary);
}

/* Admin Stats Cards - Warm Kitchen 2026 */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--white, var(--fluent-bg-layer-1));
    border: 1px solid var(--border, var(--fluent-border-subtle));
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.stat-card:hover {
    border-color: var(--sage, var(--fluent-brand-primary));
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stat-number,
.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--sage, var(--fluent-brand-primary));
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-muted, var(--fluent-text-secondary));
    font-weight: 500;
}

/* Admin Cards - Warm Kitchen 2026 */
.admin-card {
    background: var(--white, var(--fluent-bg-layer-1));
    border: 1px solid var(--border, var(--fluent-border-subtle));
    border-radius: var(--radius-lg, 16px);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border, var(--fluent-border-subtle));
}

.admin-card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--brown, var(--fluent-text-primary));
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-card-header h2 i {
    color: var(--sage, var(--fluent-brand-primary));
}

/* Admin Data Tables - Warm Kitchen 2026 */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border, var(--fluent-border-subtle));
}

.admin-table th {
    font-weight: 600;
    color: var(--text-muted, var(--fluent-text-secondary));
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--cream, var(--fluent-bg-layer-2));
}

.admin-table td {
    color: var(--brown, var(--fluent-text-primary));
}

.admin-table tr:hover td {
    background: var(--sage-light, var(--fluent-bg-layer-2));
}

.admin-table .actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Admin Bottom Navigation (Mobile) */
/* Hide main site navigation when on admin pages (all screen sizes) */
.tv-layout:has(.admin-layout) > .bottom-nav,
.tv-layout:has(.admin-layout) > .tv-nav-rail {
    display: none !important;
}

.admin-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--white);
    border-top: 1px solid var(--border);
    z-index: 1000;
}

/* Mobile: Use bottom nav, hide sidebar */
@media (max-width: 767px) {
    .admin-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .admin-nav-rail {
        display: none;
    }

    .admin-main {
        padding: 16px;
        padding-bottom: 80px;
    }
}

/* Tablet and larger: Show sidebar, resize content */
@media (min-width: 768px) {
    .admin-nav-rail {
        display: flex;
    }

    .admin-bottom-nav {
        display: none;
    }

    .admin-main {
        flex: 1;
        min-width: 0; /* Allow flex shrinking */
    }
}

.admin-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-bottom-nav-item:hover {
    color: var(--brown);
    background-color: var(--cream);
}

.admin-bottom-nav-item.active {
    color: var(--sage);
    background-color: var(--sage-light);
}

.admin-bottom-nav-item .bottom-nav-icon {
    font-size: 1.25rem;
}

.admin-bottom-nav-item .bottom-nav-label {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Admin More Menu (Flyout) */
.admin-bottom-nav-item-container {
    position: relative;
}

.more-indicator {
    font-size: 0.5rem;
    margin-left: 2px;
    opacity: 0.7;
}

.admin-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.admin-more-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    padding: 8px 0;
}

.admin-more-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--brown);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.admin-more-menu-item:hover {
    background: var(--cream);
    color: var(--brown);
}

.admin-more-menu-item.active {
    background: var(--sage-light);
    color: var(--sage);
}

.more-menu-icon {
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}

.admin-more-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

/* Form improvements for admin */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.api-key-display {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background-color: var(--cream);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.api-key-display code {
    font-family: monospace;
    color: var(--text-muted);
}

/* Button improvements */
.btn-link {
    background: none;
    border: none;
    color: var(--sage);
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--sage-dark);
}

/* Admin content padding for large screens */

@media (min-width: 1920px) {
    .admin-main {
        padding: 48px 64px;
    }
    /* Admin pages remain left-justified with max-width from base .admin-page */
}

/* SAML Setup Wizard Styles */
.saml-auto-setup {
    margin-bottom: 32px;
}

.saml-auto-setup h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 12px 0;
}

.saml-auto-setup p {
    color: var(--fluent-text-secondary);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.setup-requirements {
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.setup-requirements h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 12px 0;
}

.setup-requirements ul {
    margin: 0;
    padding-left: 20px;
    color: var(--fluent-text-secondary);
}

.setup-requirements li {
    margin-bottom: 6px;
    line-height: 1.4;
}

.settings-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0;
    color: var(--fluent-text-tertiary);
    font-size: 0.875rem;
}

.settings-divider::before,
.settings-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fluent-border-subtle);
}

.saml-setup-progress {
    margin-bottom: 32px;
}

.setup-success-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background-color: rgba(16, 163, 127, 0.1);
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 24px;
}

.setup-success-banner .success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #10a37f;
    color: white;
    border-radius: 50%;
    font-weight: 600;
    flex-shrink: 0;
}

.setup-success-banner strong {
    display: block;
    color: var(--fluent-text-primary);
    margin-bottom: 4px;
}

.setup-success-banner p {
    color: var(--fluent-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.azure-config-summary {
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    padding: 20px;
    margin-bottom: 24px;
}

.azure-config-summary h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 16px 0;
}

.config-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.config-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.config-item label {
    flex-shrink: 0;
    width: 140px;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.config-item code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--fluent-text-primary);
    background: var(--fluent-bg-surface);
    padding: 6px 10px;
    border-radius: var(--fluent-radius-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-copy {
    background: var(--fluent-bg-surface);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-small);
    padding: 6px 12px;
    font-size: 0.8125rem;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-copy:hover {
    background: var(--fluent-bg-layer-2);
    color: var(--fluent-text-primary);
    border-color: var(--fluent-border-default);
}

.manual-saml-config h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 20px 0;
}

.saml-sp-info {
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    padding: 20px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.saml-sp-info h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 16px 0;
}

.sp-config-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sp-config-item:last-child {
    margin-bottom: 0;
}

.sp-config-item label {
    flex-shrink: 0;
    width: 120px;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.sp-config-item code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--fluent-text-primary);
    background: var(--fluent-bg-surface);
    padding: 6px 10px;
    border-radius: var(--fluent-radius-small);
    word-break: break-all;
}

.redirect-uri {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--fluent-text-primary);
    background: var(--fluent-bg-layer-2);
    padding: 10px 14px;
    border-radius: var(--fluent-radius-small);
    margin-top: 6px;
    word-break: break-all;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--fluent-border-default);
    color: var(--fluent-text-primary);
    padding: 10px 20px;
    border-radius: var(--fluent-radius-medium);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-outline:hover {
    background: var(--fluent-bg-layer-2);
    border-color: var(--fluent-border-strong);
}

/* ============================================
   MEAL PLANNER
   ============================================ */

.mealplanner-page {
    min-height: 100vh;
    padding: 32px;
    padding-bottom: 100px;
}

/* Setup Wizard */
.mealplanner-setup {
    max-width: 600px;
    margin: 0 auto;
}

.setup-card {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    padding: 40px;
}

.setup-card h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 12px 0;
}

.setup-description {
    color: var(--fluent-text-secondary);
    margin-bottom: 32px;
    font-size: 1rem;
    line-height: 1.5;
}

.setup-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

.meal-type-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

/* Calendar View */
.mealplanner-calendar {
    max-width: 1600px;
    margin: 0 auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.calendar-title-section h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 8px 0;
}

.calendar-dates {
    color: var(--fluent-text-secondary);
    font-size: 1rem;
}

.calendar-actions {
    display: flex;
    gap: 12px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.calendar-day {
    background-color: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-large);
    overflow: hidden;
}

.calendar-day.today {
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 1px var(--fluent-brand-primary);
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: var(--fluent-bg-layer-2);
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.calendar-day.today .day-header {
    background-color: var(--fluent-brand-selected);
}

.day-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--fluent-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.day-date {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.calendar-day.today .day-date {
    color: var(--fluent-brand-primary);
    font-weight: 600;
}

.day-meals {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Meal Slot */
.meal-slot {
    border-radius: var(--fluent-radius-medium);
    transition: all 0.2s ease;
}

.meal-slot.confirmed {
    background-color: var(--fluent-success-bg);
}

.meal-slot.leftover {
    background-color: color-mix(in srgb, var(--fluent-warning) 10%, transparent);
    border-left: 3px solid var(--fluent-warning);
}

.meal-slot.leftover.confirmed {
    background-color: color-mix(in srgb, var(--fluent-warning) 15%, transparent);
}

.meal-type-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fluent-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leftover-indicator {
    display: inline-block;
    padding: 2px 6px;
    background: var(--fluent-warning);
    color: white;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
}

.meal-leftover-source {
    font-size: 0.7rem;
    color: var(--fluent-text-tertiary);
    font-style: italic;
}

.meal-recipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background-color: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.meal-recipe:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.meal-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: var(--fluent-radius-medium);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.meal-thumbnail-placeholder {
    width: 64px;
    height: 64px;
    border-radius: var(--fluent-radius-medium);
    background-color: var(--fluent-bg-layer-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    border: 1px solid var(--fluent-border-subtle);
}

.meal-recipe-info {
    width: 100%;
    text-align: center;
}

.meal-recipe-title {
    display: block;
    font-weight: 500;
    color: var(--fluent-text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.meal-servings {
    font-size: 0.75rem;
    color: var(--fluent-text-tertiary);
}

.meal-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    position: absolute;
    top: 4px;
    right: 4px;
}

.meal-recipe:hover .meal-actions {
    opacity: 1;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: var(--fluent-bg-layer-1);
    color: var(--fluent-text-secondary);
    border-radius: var(--fluent-radius-small);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background-color: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

.btn-icon.btn-icon-danger:hover {
    background-color: var(--fluent-danger-bg);
    color: var(--fluent-danger);
}

/* Meal Actions Bar (above recipe) */
.meal-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fluent-border-subtle);
    margin-bottom: 4px;
}

.meal-actions-bar .btn-icon {
    width: 28px;
    height: 28px;
}

/* Clickable Recipe Link */
.meal-recipe-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    padding: 4px;
    border-radius: var(--fluent-radius-small);
    transition: background-color 0.15s ease;
}

.meal-recipe-link:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

/* Confirm Button in Meal Slot */
.meal-confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background-color: var(--fluent-success-bg);
    color: var(--fluent-success);
    border: none;
    border-radius: var(--fluent-radius-small);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.meal-confirm-btn:hover {
    background-color: var(--fluent-brand-primary);
    color: white;
}

/* Confirmation Modal */
.confirm-modal {
    max-width: 400px;
}

.confirm-modal .modal-body p {
    color: var(--fluent-text-secondary);
    line-height: 1.5;
}

.confirm-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--fluent-border-subtle);
}

/* Empty Meal Slot */
.meal-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    background: transparent;
    border: 2px dashed var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    color: var(--fluent-text-tertiary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-empty:hover {
    border-color: var(--fluent-brand-primary);
    color: var(--fluent-brand-primary);
    background-color: var(--fluent-brand-selected);
}

/* Meal empty options (recipe + quick add button) */
.meal-empty-options {
    display: flex;
    gap: 8px;
    min-height: 100px;
    padding: 8px;
}

.meal-empty-options .meal-empty {
    flex: 1;
    min-height: auto;
    padding: 8px;
}

.meal-quick-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    background: transparent;
    border: 2px dashed var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-medium);
    color: var(--fluent-text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.meal-quick-add:hover {
    border-color: var(--fluent-brand-primary);
    color: var(--fluent-brand-primary);
    background-color: var(--fluent-brand-selected);
}

/* Custom/Quick meal display */
.meal-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px;
}

.meal-carryover-badge {
    display: inline-block;
    font-size: 0.7rem;
    background-color: var(--fluent-warning);
    color: var(--fluent-text-on-accent);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Quick Meal Modal */
.quick-meal-modal {
    max-width: 400px;
}

.quick-meal-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.quick-meal-modal .modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.quick-meal-modal .modal-body {
    padding: 20px 24px;
}

.quick-meal-context {
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.quick-meal-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--fluent-border-subtle);
}

.calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 24px;
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-large);
}

.unconfirmed-count {
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
}

/* Recipe Picker Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-xlarge);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--fluent-shadow-64);
}

.recipe-picker-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.recipe-picker-modal .modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--fluent-text-secondary);
    border-radius: var(--fluent-radius-small);
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-close:hover {
    background-color: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.recipe-picker-modal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.recipe-search {
    padding: 16px 24px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.recipe-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.recipe-picker-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.recipe-picker-item:hover {
    background-color: var(--fluent-bg-subtle-hover);
}

.recipe-picker-item.selected {
    background-color: var(--fluent-brand-selected);
    border-color: var(--fluent-brand-primary);
}

.recipe-picker-item:focus-visible {
    outline: none;
    border-color: var(--fluent-brand-primary);
}

.recipe-picker-item img {
    width: 56px;
    height: 56px;
    border-radius: var(--fluent-radius-small);
    object-fit: cover;
    flex-shrink: 0;
}

.recipe-picker-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--fluent-radius-small);
    background-color: var(--fluent-bg-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.recipe-picker-info {
    flex: 1;
    min-width: 0;
}

.recipe-picker-title {
    display: block;
    font-weight: 500;
    color: var(--fluent-text-primary);
    font-size: 1rem;
    margin-bottom: 4px;
}

.recipe-picker-meta {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.recipe-picker-meta span:not(:last-child)::after {
    content: '•';
    margin-left: 8px;
}

/* Leftover Picker Modal */
.leftover-picker-modal {
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.leftover-picker-modal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
}

.leftover-context {
    color: var(--fluent-text-secondary);
    margin: 0 0 16px 0;
    font-size: 0.95rem;
}

.leftover-source-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leftover-source-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px;
    background: var(--fluent-bg-layer-1);
    border: 2px solid transparent;
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.leftover-source-item:hover {
    background-color: var(--fluent-bg-subtle-hover);
    border-color: var(--fluent-border-strong);
}

.leftover-source-item:focus {
    outline: none;
    border-color: var(--fluent-brand-primary);
}

.leftover-source-item img {
    width: 56px;
    height: 56px;
    border-radius: var(--fluent-radius-small);
    object-fit: cover;
    flex-shrink: 0;
}

.leftover-source-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--fluent-radius-small);
    background-color: var(--fluent-bg-layer-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.leftover-source-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.leftover-source-title {
    font-weight: 500;
    color: var(--fluent-text-primary);
    font-size: 1rem;
}

.leftover-source-date {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.empty-sources {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--fluent-text-secondary);
}

.empty-sources i {
    font-size: 2.5rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-sources p {
    margin: 0;
}

/* Active icon button (for leftover toggle) */
.btn-icon-active {
    color: var(--fluent-brand-primary) !important;
    background-color: var(--fluent-brand-bg) !important;
}

.btn-icon-active:hover {
    background-color: var(--fluent-brand-bg-hover) !important;
}

/* TV Empty State */
.tv-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}

.tv-empty-icon {
    font-size: 4rem;
    margin-bottom: 24px;
    opacity: 0.7;
}

.tv-empty-state h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 12px 0;
}

.tv-empty-state p {
    color: var(--fluent-text-secondary);
    margin: 0 0 32px 0;
    max-width: 400px;
}

/* TV Loading */
.tv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    gap: 16px;
}

.tv-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--cream-dark, var(--border));
    border-top-color: var(--sage);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.tv-loading p {
    color: var(--text-muted);
    margin: 0;
}

/* Row empty/count */
.row-empty {
    padding: 32px 64px;
    text-align: center;
    color: var(--fluent-text-secondary);
}

.row-count {
    font-size: 0.875rem;
    color: var(--fluent-text-tertiary);
}

/* TV Card Badge */
.tv-card-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--fluent-text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-xl, 50px);
    box-shadow: var(--shadow-sm);
}

/* Favorite button on recipe cards */
.tv-card-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fluent-text-tertiary);
    transition: all 0.15s ease;
    opacity: 0;
    z-index: 10;
}

.tv-card-favorite i {
    font-size: 18px;
}

.tv-card-favorite svg {
    width: 18px;
    height: 18px;
}

.tv-recipe-card:hover .tv-card-favorite,
.tv-recipe-card:focus-within .tv-card-favorite,
.tv-card-favorite.is-favorite {
    opacity: 1;
}

.tv-card-favorite:hover {
    background-color: white;
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.tv-card-favorite.is-favorite {
    color: var(--fluent-danger);
}

.tv-card-favorite.is-favorite i {
    color: var(--fluent-danger);
}

.tv-card-favorite.is-favorite {
    color: #ff4757;
    background-color: rgba(255, 71, 87, 0.2);
}

.tv-card-favorite.is-favorite:hover {
    background-color: rgba(255, 71, 87, 0.3);
}

.tv-card-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Meal Planner Responsive */
@media (max-width: 768px) {
    .mealplanner-page {
        padding: 16px;
        padding-bottom: 100px;
    }

    .setup-card {
        padding: 24px;
    }

    .calendar-header {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-actions {
        flex-direction: column;
    }

    .calendar-actions .btn {
        width: 100%;
    }

    .calendar-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1200px) {
    .mealplanner-page {
        padding: 48px;
        padding-left: 128px;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* ============================================
   Shopping List Styles
   ============================================ */

.shoppinglist-page {
    padding: 32px;
    padding-left: 96px;
    max-width: 900px;
    margin: 0 auto;
}

.shoppinglist-content {
    background: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-xlarge);
    padding: 32px;
    box-shadow: var(--fluent-shadow-4);
}

.shoppinglist-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.shoppinglist-title-section h1 {
    font: var(--fluent-type-title-1);
    color: var(--fluent-text-primary);
    margin: 0 0 8px 0;
}

.shoppinglist-plan-link {
    font: var(--fluent-type-body-2);
    color: var(--fluent-text-secondary);
}

.shoppinglist-plan-link a {
    color: var(--fluent-brand-primary);
    text-decoration: none;
}

.shoppinglist-plan-link a:hover {
    text-decoration: underline;
}

.shoppinglist-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.sort-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-dropdown label {
    font: var(--fluent-type-body-2);
    color: var(--fluent-text-secondary);
    white-space: nowrap;
}

.sort-dropdown select {
    padding: 8px 12px;
    border-radius: var(--fluent-radius-medium);
    border: 1px solid var(--fluent-border-default);
    background: var(--fluent-bg-layer-1);
    font: var(--fluent-type-body-2);
    min-width: 120px;
}

.shoppinglist-progress {
    margin-bottom: 24px;
}

.progress-bar {
    height: 8px;
    background: var(--fluent-bg-layer-3);
    border-radius: var(--fluent-radius-circular);
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--fluent-brand-primary);
    border-radius: var(--fluent-radius-circular);
    transition: width var(--fluent-duration-normal) var(--fluent-easing-ease-out);
}

.progress-text {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
}

.shoppinglist-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.item-category {
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-large);
    padding: 16px;
}

.category-header {
    font: var(--fluent-type-title-3);
    color: var(--fluent-text-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.category-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shopping-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-medium);
    border: 1px solid var(--fluent-border-subtle);
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.shopping-item:hover {
    border-color: var(--fluent-border-default);
    box-shadow: var(--fluent-shadow-2);
}

.shopping-item.purchased,
.shopping-item.in-pantry {
    opacity: 0.6;
    background: var(--fluent-bg-layer-3);
}

.shopping-item.purchased .item-name,
.shopping-item.in-pantry .item-name {
    text-decoration: line-through;
    color: var(--fluent-text-tertiary);
}

.item-checkbox-wrapper {
    flex-shrink: 0;
}

.item-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--fluent-brand-primary);
}

.item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-name {
    font: var(--fluent-type-body-1);
    color: var(--fluent-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-quantity {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
}

.item-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.item-price {
    font: var(--fluent-type-body-2);
    font-weight: 600;
    color: var(--fluent-success);
    background: var(--fluent-success-bg);
    padding: 4px 8px;
    border-radius: var(--fluent-radius-small);
}

.item-store {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-tertiary);
    background: var(--fluent-bg-layer-3);
    padding: 4px 8px;
    border-radius: var(--fluent-radius-small);
}

.item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--fluent-radius-medium);
    border: none;
    background: transparent;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.btn-icon:hover {
    background: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.btn-icon.active {
    color: var(--fluent-brand-primary);
    background: var(--fluent-brand-selected);
}

.btn-icon-danger:hover {
    background: var(--fluent-danger-bg);
    color: var(--fluent-danger);
}

.shoppinglist-empty {
    text-align: center;
    padding: 48px 24px;
}

.shoppinglist-empty p {
    font: var(--fluent-type-body-1);
    color: var(--fluent-text-secondary);
    margin: 0 0 24px 0;
}

/* Shopping List Responsive */
@media (max-width: 768px) {
    .shoppinglist-page {
        padding: 16px;
        padding-bottom: 100px;
    }

    .shoppinglist-content {
        padding: 16px;
    }

    .shoppinglist-header {
        flex-direction: column;
        gap: 16px;
    }

    .shoppinglist-actions {
        width: 100%;
        flex-direction: column;
    }

    .sort-dropdown {
        width: 100%;
    }

    .sort-dropdown select {
        flex: 1;
    }

    .shoppinglist-actions .btn {
        width: 100%;
    }

    .shopping-item {
        flex-wrap: wrap;
        padding: 12px;
    }

    .item-meta {
        width: 100%;
        margin-top: 8px;
        padding-left: 36px;
    }

    .item-actions {
        margin-left: auto;
    }
}

@media (min-width: 1200px) {
    .shoppinglist-page {
        padding: 48px;
        padding-left: 128px;
    }
}

/* Meal Plan Generation Options */
.meal-plan-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.meal-plan-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--fluent-bg-layer-2);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-large);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.meal-plan-option:hover {
    background: var(--fluent-bg-subtle-hover);
    border-color: var(--fluent-brand-primary);
}

.meal-plan-option:active {
    transform: scale(0.98);
}

.meal-plan-option .option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fluent-brand-selected);
    border-radius: var(--fluent-radius-medium);
    flex-shrink: 0;
}

.meal-plan-option .option-icon svg {
    color: var(--fluent-brand-primary);
}

.meal-plan-option .option-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meal-plan-option .option-title {
    font: var(--fluent-type-body-1-strong);
    color: var(--fluent-text-primary);
}

.meal-plan-option .option-description {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
}

.modal-description {
    font: var(--fluent-type-body-1);
    color: var(--fluent-text-secondary);
    margin-bottom: 8px;
}

.modal-description strong {
    color: var(--fluent-text-primary);
}

/* ============================================
   Flyer Upload Page Styles
   ============================================ */

.flyer-page {
    padding: 32px;
    padding-left: 96px;
    max-width: 1100px;
    margin: 0 auto;
}

.flyer-content {
    background: var(--fluent-bg-layer-1);
    border-radius: var(--fluent-radius-xlarge);
    padding: 32px;
    box-shadow: var(--fluent-shadow-4);
}

.flyer-header {
    margin-bottom: 32px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: var(--fluent-type-body-2);
    color: var(--fluent-brand-primary);
    text-decoration: none;
    margin-bottom: 16px;
}

.back-link:hover {
    text-decoration: underline;
}

.flyer-title-section h1 {
    font: var(--fluent-type-title-1);
    color: var(--fluent-text-primary);
    margin: 0 0 8px 0;
}

.flyer-title-section .subtitle {
    font: var(--fluent-type-body-2);
    color: var(--fluent-text-secondary);
    margin: 0;
}

.upload-section {
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-large);
    padding: 24px;
    margin-bottom: 32px;
}

.upload-section h2 {
    font: var(--fluent-type-title-3);
    color: var(--fluent-text-primary);
    margin: 0 0 16px 0;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upload-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-form .form-hint {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-tertiary);
}

.file-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--fluent-bg-layer-3);
    border-radius: var(--fluent-radius-medium);
}

.file-preview .file-name {
    font: var(--fluent-type-body-2);
    font-weight: 500;
}

.file-preview .file-size {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
}

.flyers-section h2 {
    font: var(--fluent-type-title-3);
    color: var(--fluent-text-primary);
    margin: 0 0 16px 0;
}

.flyers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.flyer-card {
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-large);
    border: 1px solid var(--fluent-border-subtle);
    overflow: hidden;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.flyer-card:hover {
    box-shadow: var(--fluent-shadow-4);
    border-color: var(--fluent-border-default);
}

.flyer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--fluent-bg-layer-3);
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.flyer-card-header .store-name {
    font: var(--fluent-type-body-2);
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.flyer-status {
    font: var(--fluent-type-caption-1);
    padding: 4px 8px;
    border-radius: var(--fluent-radius-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flyer-status.pending {
    background: var(--fluent-warning-bg);
    color: var(--fluent-warning);
}

.flyer-status.analyzing {
    background: var(--fluent-info-bg);
    color: var(--fluent-info);
}

.flyer-status.completed {
    background: var(--fluent-success-bg);
    color: var(--fluent-success);
}

.flyer-status.error {
    background: var(--fluent-danger-bg);
    color: var(--fluent-danger);
}

.flyer-card-body {
    padding: 16px;
}

.flyer-thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 12px;
}

.flyer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flyer-info .file-name {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flyer-info .upload-date {
    font: var(--fluent-type-caption-2);
    color: var(--fluent-text-tertiary);
}

.flyer-card-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--fluent-border-subtle);
    align-items: center;
}

.flyer-card-footer .btn-icon {
    margin-left: auto;
}

.analyzing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--fluent-type-caption-1);
    color: var(--fluent-info);
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Flyer Results Modal */
.flyer-results-modal {
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flyer-results-modal .modal-body {
    overflow-y: auto;
    flex: 1;
}

.validity-dates {
    font: var(--fluent-type-body-2);
    color: var(--fluent-text-secondary);
    margin: 0 0 16px 0;
    padding: 8px 12px;
    background: var(--fluent-bg-layer-3);
    border-radius: var(--fluent-radius-medium);
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.results-category h3 {
    font: var(--fluent-type-title-3);
    color: var(--fluent-text-primary);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.results-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
}

.result-item.on-sale {
    background: var(--fluent-success-bg);
}

.result-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.result-item-name span:first-child {
    font: var(--fluent-type-body-2);
    color: var(--fluent-text-primary);
}

.result-item-name .unit {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-tertiary);
}

.result-item-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.original-price {
    font: var(--fluent-type-body-2);
    color: var(--fluent-text-tertiary);
    text-decoration: line-through;
}

.current-price {
    font: var(--fluent-type-body-1);
    font-weight: 600;
    color: var(--fluent-success);
}

.no-results {
    font: var(--fluent-type-body-1);
    color: var(--fluent-text-secondary);
    text-align: center;
    padding: 24px;
}

/* Flyer Page Responsive */
@media (max-width: 768px) {
    .flyer-page {
        padding: 16px;
        padding-bottom: 100px;
    }

    .flyer-content {
        padding: 16px;
    }

    .flyers-grid {
        grid-template-columns: 1fr;
    }

    .flyer-results-modal {
        max-width: 100%;
        margin: 16px;
    }
}

@media (min-width: 1200px) {
    .flyer-page {
        padding: 48px;
        padding-left: 128px;
    }
}

/* ============================================
   Shared Page Patterns
   Reusable classes for consistent page layouts
   ============================================ */

/* Page Container - constrained width wrapper */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

.page-container-narrow {
    max-width: 900px;
}

.page-container-wide {
    max-width: 1400px;
}

@media (max-width: 768px) {
    .page-container {
        padding: 1rem;
    }
}

/* Page Header - title + subtitle + actions */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-content h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.page-header-subtitle {
    margin: 0.25rem 0 0 0;
    color: var(--fluent-text-secondary);
    font-size: 0.9rem;
}

.page-header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 640px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions {
        justify-content: flex-start;
    }
}

/* Two-Panel Layout (Sidebar + Main) */
.page-layout-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: 100vh;
    min-height: 100vh;
    background: var(--fluent-bg-base);
}

.page-sidebar {
    background: var(--fluent-bg-layer-1);
    border-right: 1px solid var(--fluent-border-subtle);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.page-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.page-sidebar-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.page-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.page-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--fluent-border-subtle);
}

.page-main {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    height: 100%;
    background: var(--fluent-bg-base);
}

@media (max-width: 900px) {
    .page-layout-split {
        grid-template-columns: 1fr;
    }

    .page-sidebar {
        display: none;
    }

    .page-main {
        height: auto;
        min-height: 100vh;
        padding: 1rem;
    }
}

/* Mobile list selector - shown only on mobile when sidebar is hidden */
.mobile-list-selector {
    display: none;
    margin-top: 0.5rem;
}

.mobile-list-selector select {
    width: 100%;
    max-width: 300px;
}

@media (max-width: 900px) {
    .mobile-list-selector {
        display: block;
    }
}

/* Category-Grouped Lists */
.category-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.category-group {
    background: var(--fluent-bg-layer-1);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--fluent-border-subtle);
}

.category-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fluent-text-secondary);
    padding: 0.75rem 1rem;
    background: var(--fluent-bg-layer-2);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.category-group-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--fluent-text-tertiary);
    text-transform: none;
}

.category-group-items {
    padding: 0.5rem;
}

/* List Items with Hover States */
.list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.list-item:hover {
    background: var(--fluent-bg-subtle-hover);
}

.list-item.status-warning {
    border-left: 3px solid var(--fluent-warning);
    padding-left: calc(0.75rem - 3px);
}

.list-item.status-danger {
    border-left: 3px solid var(--fluent-danger);
    padding-left: calc(0.75rem - 3px);
}

.list-item.status-success {
    border-left: 3px solid var(--fluent-success);
    padding-left: calc(0.75rem - 3px);
}

.list-item.completed {
    opacity: 0.5;
}

.list-item.completed .list-item-name {
    text-decoration: line-through;
}

.list-item-checkbox {
    flex-shrink: 0;
}

.list-item-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.list-item-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--fluent-text-primary);
}

.list-item-meta {
    font-size: 0.85rem;
    color: var(--fluent-text-tertiary);
}

.list-item-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.list-item-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.empty-state h2,
.empty-state-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.empty-state p,
.empty-state-description {
    margin: 0 0 1.5rem 0;
    color: var(--fluent-text-secondary);
    max-width: 400px;
}

.empty-state-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--fluent-border-subtle);
    border-top-color: var(--fluent-brand-primary);
    border-radius: 50%;
    animation: loading-spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

.loading-state p {
    color: var(--fluent-text-secondary);
    margin: 0;
}

/* Modal System */
.modal-overlay,
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    padding: 1rem;
    margin: 0 !important;
}

.modal-backdrop > .modal-content,
.modal-overlay > .modal-content {
    position: relative;
    background: var(--fluent-bg-layer-1, var(--white, #fff));
    border: 1px solid var(--fluent-border-subtle, var(--border, #e5e5e5));
    border-radius: var(--fluent-radius-xlarge, var(--radius-lg, 16px));
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin: auto;
}

.modal-content.modal-sm {
    max-width: 360px;
}

.modal-dialog {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge, 12px);
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--fluent-shadow-64);
}

.modal-dialog-wide {
    max-width: 700px;
}

.modal-dialog-narrow {
    max-width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-close:hover {
    background: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fluent-border-subtle);
}

/* Search Box */
.search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.search-box svg,
.search-box-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fluent-text-tertiary);
    pointer-events: none;
}

.search-box input {
    padding-left: 40px;
    width: 100%;
}

@media (max-width: 768px) {
    .search-box {
        max-width: none;
    }
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--fluent-bg-subtle);
    border-radius: 6px;
    cursor: pointer;
    color: var(--fluent-text-secondary);
    font-size: 0.9rem;
    transition: background 0.15s ease;
}

.filter-checkbox:hover {
    background: var(--fluent-bg-subtle-hover);
}

.filter-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .search-box {
        max-width: none;
    }
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.badge-primary {
    background: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

.badge-warning {
    background: var(--fluent-warning-bg);
    color: var(--fluent-warning);
}

.badge-danger {
    background: var(--fluent-danger-bg);
    color: var(--fluent-danger);
}

.badge-success {
    background: var(--fluent-success-bg);
    color: var(--fluent-success);
}

.badge-muted {
    background: var(--fluent-bg-subtle);
    color: var(--fluent-text-secondary);
}

/* ============================================
   Category Modal - Homepage clickable headings
   ============================================ */

/* Clickable heading style */
.row-title-clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s ease;
    padding: 0.25rem 0;
}

.row-title-clickable:hover,
.row-title-clickable:focus {
    color: var(--fluent-brand-primary);
}

.row-title-arrow {
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: var(--fluent-text-tertiary);
}

.row-title-clickable:hover .row-title-arrow,
.row-title-clickable:focus .row-title-arrow {
    opacity: 1;
}

.row-title-clickable:hover .row-title-arrow {
    transform: translateX(4px);
}

/* Category modal layout */
.category-modal {
    max-width: 900px;
    width: 95%;
    max-height: 85vh;
}

.modal-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal-header-content h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.modal-count {
    font-size: 0.9rem;
    color: var(--fluent-text-secondary);
    font-weight: 400;
}

/* Recipe grid in modal */
.category-recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
    max-height: calc(85vh - 120px);
    overflow-y: auto;
}

.category-recipe-grid .tv-recipe-card {
    min-width: 0;
    width: 100%;
}

/* Responsive adjustments for category modal */
@media (max-width: 768px) {
    .category-modal {
        width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
    }

    .category-recipe-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .category-recipe-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===========================
   Recipe Discovery Section
   =========================== */

.discovery-row {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));
    border-radius: 1rem;
    padding: 1rem 0;
    margin: 1rem 64px;
}

@media (max-width: 959px) {
    .discovery-row {
        margin-left: 24px;
        margin-right: 24px;
    }
}

@media (min-width: 960px) and (max-width: 1919px) {
    .discovery-row {
        margin-left: 48px;
        margin-right: 48px;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .discovery-row {
        margin-left: 80px;
        margin-right: 80px;
    }
}

@media (min-width: 2560px) {
    .discovery-row {
        margin-left: 100px;
        margin-right: 100px;
    }
}

.discovery-row .row-header {
    padding: 0 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.discovery-row .row-scroller .row-items {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.discovery-row .row-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.discovery-row .row-count {
    margin-left: 0.75rem;
    white-space: nowrap;
}

/* Mobile: compact discovery header */
@media (max-width: 599px) {
    .discovery-row .row-header {
        gap: 0.5rem;
    }

    .discovery-row .row-title {
        font-size: 1.1rem;
    }

    .discovery-refresh-btn span {
        display: none;
    }

    .discovery-refresh-btn {
        padding: 0.5rem;
        min-width: 36px;
        justify-content: center;
    }

    .discovery-refresh-btn .loading-spinner {
        margin: 0;
    }
}

.discovery-sparkle {
    color: #f59e0b;
}

.discovery-card {
    position: relative;
}

.discovery-card .tv-card-content {
    padding-bottom: 4rem; /* Make room for actions */
}

.discovery-reason {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discovery-badge {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    color: white;
}

.match-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: auto;
    background: rgba(16, 185, 129, 0.9);
    color: white;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: var(--fluent-radius-small);
    backdrop-filter: blur(4px);
}

.chip-source {
    background: var(--bg-tertiary);
    font-style: italic;
}

.discovery-actions {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

.discovery-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
}

.discovery-refresh-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.discovery-refresh-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.discovery-refresh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.discovery-refresh-btn svg {
    width: 16px;
    height: 16px;
}

.discovery-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.discovery-empty-state p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.discovery-empty-state .btn-link {
    color: var(--accent-color);
    text-decoration: none;
}

.discovery-empty-state .btn-link:hover {
    text-decoration: underline;
}

/* Discovery Progress Bar */
.discovery-progress-container {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.discovery-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--fluent-subtle-bg);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.discovery-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #8b5cf6, var(--accent-color));
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
    animation: discovery-shimmer 2s ease-in-out infinite;
}

@keyframes discovery-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.discovery-status-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    min-height: 1.5rem;
}

.discovery-sparkle-animated {
    animation: sparkle-pulse 1.5s ease-in-out infinite;
}

@keyframes sparkle-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* Discovery Search Input */
.discovery-search-container {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0 1.5rem;
    margin-top: 0.75rem;
    align-items: center;
}

.discovery-search-bar {
    flex: 1 1 auto;
    min-width: 200px;
    max-width: 600px;
    height: 44px;
}

.discovery-search-bar.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.discovery-search-clear {
    padding: 6px;
    background: none;
    border: none;
    color: var(--fluent-text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.discovery-search-clear:hover:not(:disabled) {
    background: var(--fluent-bg-layer-3);
    color: var(--fluent-text-primary);
}

.discovery-search-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.discovery-search-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
    white-space: nowrap;
    height: 44px;
    flex-shrink: 0;
}

.discovery-search-btn svg {
    width: 18px;
    height: 18px;
}

.discovery-search-active {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: var(--fluent-radius-medium);
    margin: 0.75rem 1.5rem 0;
}

.discovery-search-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.discovery-search-label strong {
    color: var(--accent-color);
}

.discovery-clear-results {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

.discovery-clear-results svg {
    width: 12px;
    height: 12px;
}

/* Mobile responsiveness for discovery search */
@media (max-width: 600px) {
    .discovery-search-container {
        flex-direction: row;
        gap: 0.5rem;
    }

    .discovery-search-bar {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    .discovery-search-bar input {
        text-overflow: ellipsis;
    }

    .discovery-search-bar input::placeholder {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .discovery-search-btn {
        width: auto;
        min-width: 44px;
        padding: 0.65rem;
        justify-content: center;
    }

    .discovery-search-btn-text {
        display: none;
    }

    .discovery-search-active {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Reject Modal Radio Options */
.reject-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    text-align: left;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.radio-option:hover {
    background: var(--bg-tertiary);
}

.radio-option input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--primary);
}

/* Small loading spinner for buttons */
.loading-spinner.small {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* ===========================
   Fluent 2 Dialog Component
   =========================== */

/* Dialog Overlay/Scrim */
.fluent-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
    animation: fluent-fade-in 0.2s ease-out;
}

@keyframes fluent-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dialog Container */
.fluent-dialog {
    background: var(--fluent-bg-layer-2, #ffffff);
    border-radius: 8px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12),
                0 8px 16px rgba(0, 0, 0, 0.14),
                0 16px 32px rgba(0, 0, 0, 0.12);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fluent-dialog-enter 0.25s ease-out;
}

@keyframes fluent-dialog-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Dialog Header */
.fluent-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 0 24px;
    gap: 12px;
}

.fluent-dialog-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--fluent-text-primary, #242424);
    margin: 0;
}

.fluent-dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--fluent-text-secondary, #616161);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    flex-shrink: 0;
}

.fluent-dialog-close:hover {
    background: var(--fluent-bg-subtle, rgba(0, 0, 0, 0.05));
    color: var(--fluent-text-primary, #242424);
}

.fluent-dialog-close:active {
    background: var(--fluent-bg-subtle-pressed, rgba(0, 0, 0, 0.08));
}

/* Dialog Body */
.fluent-dialog-body {
    padding: 16px 24px 24px 24px;
    overflow-y: auto;
    flex: 1;
}

.fluent-dialog-subtitle {
    font-size: 14px;
    line-height: 20px;
    color: var(--fluent-text-secondary, #616161);
    margin: 0 0 16px 0;
}

/* Dialog Footer */
.fluent-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px 24px 24px;
}

/* Fluent Radio Group */
.fluent-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.fluent-radio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    position: relative;
}

.fluent-radio-item:hover {
    background: var(--fluent-bg-subtle, rgba(0, 0, 0, 0.04));
}

.fluent-radio-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fluent-radio-indicator {
    width: 20px;
    height: 20px;
    border: 1px solid var(--fluent-border-default, #d1d1d1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.1s, background 0.1s;
}

.fluent-radio-indicator::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.1s, transform 0.1s;
    transform: scale(0);
}

.fluent-radio-item input[type="radio"]:checked + .fluent-radio-indicator {
    border-color: var(--fluent-brand-primary, #0078d4);
}

.fluent-radio-item input[type="radio"]:checked + .fluent-radio-indicator::after {
    background: var(--fluent-brand-primary, #0078d4);
    transform: scale(1);
}

.fluent-radio-item:focus-within {
    outline: 2px solid var(--fluent-brand-primary, #0078d4);
    outline-offset: -2px;
}

.fluent-radio-label {
    font-size: 14px;
    line-height: 20px;
    color: var(--fluent-text-primary, #242424);
}

/* Fluent Input Field */
.fluent-field {
    margin-top: 8px;
}

.fluent-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid var(--fluent-border-default, #d1d1d1);
    border-radius: 4px;
    background: var(--fluent-bg-primary, #ffffff);
    color: var(--fluent-text-primary, #242424);
    transition: border-color 0.1s, box-shadow 0.1s;
    box-sizing: border-box;
}

.fluent-input:hover {
    border-color: var(--fluent-border-hover, #c7c7c7);
}

.fluent-input:focus {
    outline: none;
    border-color: var(--fluent-brand-primary, #0078d4);
    box-shadow: inset 0 0 0 1px var(--fluent-brand-primary, #0078d4);
}

.fluent-input::placeholder {
    color: var(--fluent-text-disabled, #a19f9d);
}

/* Fluent Buttons */
.fluent-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
    min-height: 32px;
}

.fluent-btn-primary {
    background: var(--fluent-brand-primary, #0078d4);
    color: #ffffff;
    border-color: var(--fluent-brand-primary, #0078d4);
}

.fluent-btn-primary:hover {
    background: var(--fluent-brand-hover, #106ebe);
    border-color: var(--fluent-brand-hover, #106ebe);
}

.fluent-btn-primary:active {
    background: var(--fluent-brand-pressed, #005a9e);
    border-color: var(--fluent-brand-pressed, #005a9e);
}

.fluent-btn-secondary {
    background: transparent;
    color: var(--fluent-text-primary, #242424);
    border-color: var(--fluent-border-default, #d1d1d1);
}

.fluent-btn-secondary:hover {
    background: var(--fluent-bg-subtle, rgba(0, 0, 0, 0.04));
    border-color: var(--fluent-border-hover, #c7c7c7);
}

.fluent-btn-secondary:active {
    background: var(--fluent-bg-subtle-pressed, rgba(0, 0, 0, 0.08));
}

.fluent-btn:focus-visible {
    outline: 2px solid var(--fluent-brand-primary, #0078d4);
    outline-offset: 2px;
}

/* Dark mode adjustments - using proper fluent variables from theme */
[data-theme="dark"] .fluent-dialog {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.24),
                0 8px 16px rgba(0, 0, 0, 0.28),
                0 16px 32px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .fluent-radio-item:hover {
    background: var(--fluent-bg-subtle-hover);
}

[data-theme="dark"] .fluent-input {
    background: var(--fluent-bg-layer-1);
}

[data-theme="dark"] .fluent-input:hover {
    border-color: var(--fluent-border-strong);
}

[data-theme="dark"] .fluent-btn-secondary:hover {
    background: var(--fluent-bg-subtle-hover);
}

[data-theme="dark"] .fluent-dialog-close:hover {
    background: var(--fluent-bg-subtle-hover);
}

/* ===========================
   Household Preferences Page
   =========================== */

.preferences-page .admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-with-back {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-with-back h1 {
    margin: 0;
}

.page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
}

.preferences-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
    margin-top: 1.5rem;
}

@media (max-width: 1024px) {
    .preferences-layout {
        grid-template-columns: 1fr;
    }

    .learning-column {
        order: -1;
    }
}

.preferences-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.learning-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.preference-card {
    background: var(--bg-secondary);
    border-radius: 1rem;
    padding: 1.5rem;
}

.preference-card h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

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

.preference-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

/* Discovery Settings Grid */
.discovery-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.discovery-settings-grid .form-group {
    margin-bottom: 0;
}

.discovery-settings-grid .form-label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.discovery-settings-grid .form-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

@media (max-width: 768px) {
    .discovery-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-label {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;
    background-color: var(--bg-tertiary);
    transition: .3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.tag-like {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.tag-dislike {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tag-allergy {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.tag-dietary {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.tag-learned {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.tag-avoided {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.7;
}

.tag-remove:hover {
    opacity: 1;
}

.tag-add {
    display: flex;
    gap: 0.5rem;
}

.tag-add .form-control {
    flex: 1;
}

/* Dietary Options */
.dietary-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-option:hover {
    background: var(--border-color);
}

.checkbox-option input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

/* Learning Profile Card */
.learning-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.08));
}

.learning-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.learning-section {
    margin-bottom: 1rem;
}

.learning-section h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.learned-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ai-insights {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.learning-footer {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.empty-learning {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.empty-learning .material-icons {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.empty-learning .hint {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Time Picker */
.time-picker {
    margin-top: 1rem;
}

.time-picker input[type="time"] {
    min-width: 180px;
    width: auto;
}

/* ===========================
   Households Pages (Shared Styles)
   =========================== */

/* Page header with back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fluent-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
    margin-bottom: 12px;
}

.back-link:hover {
    color: var(--fluent-brand-primary);
}

.back-arrow {
    font-size: 1.2rem;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
}

.role-badge.owner {
    background: linear-gradient(135deg, rgba(122, 155, 109, 0.15), rgba(122, 155, 109, 0.25));
    color: var(--fluent-brand-primary);
}

/* Alert with close button */
.alert-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: auto;
    padding: 0;
}

.alert-close:hover {
    opacity: 1;
}

.alert-success {
    background: rgba(122, 155, 109, 0.1);
    border: 1px solid rgba(122, 155, 109, 0.3);
    color: var(--fluent-brand-primary);
}

.warning-text {
    color: var(--fluent-danger);
    font-weight: 500;
}

/* Invitations Section */
.invitations-section {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: var(--fluent-radius-xlarge);
    padding: 24px;
    margin-bottom: 32px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.section-icon {
    font-size: 1.5rem;
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.section-header .badge {
    background: var(--fluent-brand-primary);
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invitation-card {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-large);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.invitation-household {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.household-icon {
    font-size: 1.2rem;
}

.invitation-household strong {
    font-size: 1rem;
    color: var(--fluent-text-primary);
}

.invitation-from,
.invitation-expires {
    margin: 0;
    font-size: 0.85rem;
    color: var(--fluent-text-secondary);
}

.invitation-actions {
    display: flex;
    gap: 8px;
}

/* Households Grid */
.households-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.household-card {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.household-card:hover {
    border-color: var(--fluent-brand-primary);
    transform: translateY(-2px);
    box-shadow: var(--fluent-shadow-8);
}

.household-card-header {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.household-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--fluent-brand-primary), var(--fluent-brand-secondary, #7c3aed));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.household-avatar span {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

.household-title {
    flex: 1;
    min-width: 0;
}

.household-title h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.household-description {
    color: var(--fluent-text-secondary);
    font-size: 0.9rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.household-stats {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--fluent-border-subtle);
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.household-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.household-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.household-created {
    font-size: 0.85rem;
    color: var(--fluent-text-secondary);
}

.household-arrow {
    font-size: 1.2rem;
    color: var(--fluent-brand-primary);
    opacity: 0;
    transition: all 0.2s ease;
}

.household-card:hover .household-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Household Details Grid */
.household-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.household-section-card {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    padding: 24px;
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.section-card-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
    flex: 1;
}

.section-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Members List */
.members-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-large);
}

.member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fluent-brand-primary), #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-avatar span {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
}

.member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-name {
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.member-email {
    font-size: 0.85rem;
    color: var(--fluent-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-actions {
    display: flex;
    gap: 8px;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: var(--fluent-radius-medium);
}

/* Invite Form */
.invite-form {
    display: flex;
    gap: 12px;
}

.invite-form .form-control {
    flex: 1;
}

.pending-invitations {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fluent-border-subtle);
}

.pending-invitations h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fluent-text-secondary);
    margin: 0 0 12px;
}

.pending-invitation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.invitation-email {
    font-size: 0.9rem;
    color: var(--fluent-text-primary);
}

/* Discovery Summary */
.discovery-summary {
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-large);
    padding: 16px;
}

.discovery-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-weight: 500;
}

.discovery-status.enabled {
    color: var(--fluent-success);
}

.discovery-status.disabled {
    color: var(--fluent-text-secondary);
}

.status-icon {
    font-size: 1rem;
}

.discovery-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.discovery-stat {
    background: var(--fluent-bg-layer-1);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--fluent-text-secondary);
}

.discovery-hint {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--fluent-text-tertiary);
}

/* Leave Section */
.leave-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--fluent-border-subtle);
}

.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--fluent-danger);
    color: var(--fluent-danger);
    padding: 10px 20px;
    border-radius: var(--fluent-radius-medium);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger-outline:hover {
    background: var(--fluent-danger);
    color: white;
}

/* Responsive Households */
@media (max-width: 640px) {
    .households-grid {
        grid-template-columns: 1fr;
    }

    .household-details-grid {
        grid-template-columns: 1fr;
    }

    .invitation-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .invitation-actions {
        width: 100%;
    }

    .invitation-actions .btn {
        flex: 1;
    }

    .invite-form {
        flex-direction: column;
    }

    .member-item {
        flex-wrap: wrap;
    }

    .member-actions {
        width: 100%;
        margin-top: 8px;
    }

    .member-actions .btn {
        flex: 1;
    }
}

/* Discovery Error Message */
.discovery-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(var(--fluent-danger-rgb), 0.1);
    border: 1px solid var(--fluent-danger);
    border-radius: var(--fluent-radius-medium);
    font-size: 0.85rem;
    color: var(--fluent-danger);
    flex-wrap: wrap;
}

.discovery-error .error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--fluent-danger);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: bold;
    flex-shrink: 0;
}

.discovery-error .error-message {
    flex: 1;
    min-width: 150px;
}

.discovery-error .error-link {
    color: var(--fluent-accent);
    text-decoration: underline;
    white-space: nowrap;
}

.discovery-error .error-dismiss {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 2px 8px;
    border-radius: var(--fluent-radius-small);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.discovery-error .error-dismiss:hover {
    background: var(--fluent-danger);
    color: white;
}

/* Discovery View Link */
.discovery-view-link {
    background: transparent;
    border: 1px solid var(--fluent-border-strong);
    color: var(--fluent-text-primary);
    padding: 4px 12px;
    min-width: auto;
}

.discovery-view-link:hover {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-accent);
    color: var(--fluent-accent);
}

/* Row Header Right for Discover Button */
.row-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discover-more-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.discover-more-btn .loading-spinner.small {
    width: 14px;
    height: 14px;
}

/* Small Spinner for Buttons */
.spinner-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
    margin-right: 6px;
}

/* ===========================
   Legal Documents
   =========================== */

/* Legal Content Editor (Admin) */
.legal-content-editor {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 400px;
    resize: vertical;
}

/* Legal Page (Public) */
.legal-page {
    min-height: 100vh;
    background: var(--bg-primary);
    padding: 2rem 1rem;
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
}

.legal-loading,
.legal-not-found {
    text-align: center;
    padding: 4rem 2rem;
}

.legal-not-found h1 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.legal-not-found p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.legal-document {
    background: var(--bg-secondary);
    border-radius: var(--fluent-radius-large);
    padding: 2rem;
    box-shadow: var(--fluent-shadow-4);
}

.legal-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.legal-header h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    color: var(--text-primary);
}

.legal-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.legal-version,
.legal-effective {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-content {
    color: var(--text-primary);
    line-height: 1.8;
}

.legal-content h2 {
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.legal-content h3 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.legal-content p {
    margin: 0 0 1rem;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 1rem;
    padding-left: 2rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--accent-color);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-content blockquote {
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--accent-color);
    background: var(--bg-tertiary);
    border-radius: 0 var(--fluent-radius-small) var(--fluent-radius-small) 0;
}

.legal-content code {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: var(--fluent-radius-small);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.legal-content pre {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--fluent-radius-medium);
    overflow-x: auto;
}

.legal-content pre code {
    background: none;
    padding: 0;
}

.legal-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.legal-updated {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

/* Site Footer Links */
.site-footer {
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    border-top: 1px solid var(--fluent-border-default);
    background: var(--fluent-bg-layer-1);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Desktop: offset for sidebar */
@media (min-width: 1024px) {
    .site-footer {
        left: 280px;
    }
}

/* Mobile: hide when bottom nav is visible */
@media (max-width: 1023px) {
    .site-footer {
        display: none;
    }
}

@media (max-width: 768px) {
    .site-footer {
        margin-left: 0;
        padding-bottom: calc(0.75rem + 64px); /* Account for bottom nav */
    }
}

.site-footer-link {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer-link:hover {
    color: var(--accent-color);
}

.site-footer-separator {
    color: var(--border-color);
}

@media (max-width: 600px) {
    .legal-document {
        padding: 1.5rem 1rem;
    }

    .legal-header h1 {
        font-size: 1.5rem;
    }

    .legal-footer {
        flex-direction: column;
        text-align: center;
    }

    .site-footer {
        padding: 0.5rem 1rem;
        gap: 1rem;
    }
}

/* ============================================
   My Household Page
   ============================================ */

.household-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 24px;
}

.household-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.household-header h1 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.owner-badge {
    background: linear-gradient(135deg, var(--fluent-brand-primary), var(--fluent-brand-secondary, #7c3aed));
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.household-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--fluent-border-subtle);
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: var(--fluent-text-primary);
    background-color: var(--fluent-bg-layer-2);
}

.tab-btn.active {
    color: var(--fluent-brand-primary);
    border-bottom-color: var(--fluent-brand-primary);
}

.tab-icon {
    font-size: 1.1rem;
}

.tab-content {
    min-height: 400px;
}

.content-card {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    padding: 24px;
}

.content-card h2 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    color: var(--fluent-text-primary);
}

.card-description {
    color: var(--fluent-text-secondary);
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--fluent-text-primary);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    background: var(--fluent-bg-layer-2);
    color: var(--fluent-text-primary);
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--fluent-brand-primary);
}

.form-input.small {
    width: 120px;
}

.form-actions {
    margin-top: 24px;
}

.message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: var(--fluent-radius-medium);
}

.message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Member grid */
.member-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.member-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
}

.member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fluent-brand-primary), var(--fluent-brand-secondary, #7c3aed));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
}

.member-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.member-name {
    font-weight: 500;
    color: var(--fluent-text-primary);
}

.member-email {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.member-joined {
    font-size: 0.8rem;
    color: var(--fluent-text-tertiary);
}

.member-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.role-badge.owner {
    background: linear-gradient(135deg, var(--fluent-brand-primary), var(--fluent-brand-secondary, #7c3aed));
    color: white;
}

.role-select {
    padding: 6px 12px;
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    background: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
}

/* Invitation form */
.invite-form {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.invite-input-group {
    display: flex;
    gap: 12px;
}

.invite-input-group .form-input {
    flex: 1;
}

.invitation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invitation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
}

.invitation-email {
    flex: 1;
    color: var(--fluent-text-primary);
}

.invitation-date {
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
}

/* Content header with action button */
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
}

.content-header h2 {
    margin: 0;
}

.content-header .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Tab badge for pending counts */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--fluent-status-error);
    color: white;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

/* Join Requests */
.request-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
}

.request-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.request-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.request-name {
    font-weight: 500;
    color: var(--fluent-text-primary);
}

.request-email {
    color: var(--fluent-text-secondary);
    font-size: 0.875rem;
}

.request-message {
    color: var(--fluent-text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 4px;
}

.request-time {
    color: var(--fluent-text-disabled);
    font-size: 0.8rem;
}

.request-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Empty state box */
.empty-state-box {
    text-align: center;
    padding: 48px 24px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-large);
}

.empty-state-box .empty-icon {
    font-size: 48px;
    color: var(--fluent-text-disabled);
    margin-bottom: 16px;
}

.empty-state-box h3 {
    margin: 0 0 8px;
    color: var(--fluent-text-primary);
    font-weight: 600;
}

.empty-state-box p {
    margin: 0;
    color: var(--fluent-text-secondary);
    font-size: 0.9rem;
}

/* Success button variant */
.btn-success {
    background: var(--fluent-status-success);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #059669;
}

@media (max-width: 640px) {
    .content-header {
        flex-direction: column;
        align-items: stretch;
    }

    .content-header .btn {
        justify-content: center;
    }

    .request-card {
        flex-direction: column;
    }

    .request-actions {
        width: 100%;
    }

    .request-actions .btn {
        flex: 1;
    }
}

/* Recipe list */
.recipe-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recipe-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
}

.recipe-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recipe-title {
    font-weight: 500;
    color: var(--fluent-text-primary);
    text-decoration: none;
}

.recipe-title:hover {
    color: var(--fluent-brand-primary);
}

.recipe-meta {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.recipe-actions {
    display: flex;
    gap: 8px;
}

.empty-state {
    color: var(--fluent-text-secondary);
    text-align: center;
    padding: 48px;
}

/* No household / Not owner states */
.no-household,
.not-owner {
    text-align: center;
    padding: 64px 24px;
}

.no-household-icon,
.not-owner-icon {
    font-size: 4rem;
    margin-bottom: 24px;
}

.household-info-card {
    max-width: 400px;
    margin: 32px auto 0;
    padding: 24px;
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-xlarge);
    text-align: left;
}

.household-info-card h3 {
    margin: 0 0 16px 0;
}

.member-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.member-item:last-child {
    border-bottom: none;
}

.member-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
}

.member-badge.owner {
    background: var(--fluent-brand-primary);
    color: white;
}

/* Loading */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    color: var(--fluent-text-secondary);
}

/* Warning text */
.warning-text {
    color: var(--fluent-status-danger);
    font-size: 0.9rem;
}

/* Recipe Grid for Household */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.recipe-card {
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-subtle);
    border-radius: var(--fluent-radius-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.recipe-card:hover {
    box-shadow: var(--fluent-shadow-8);
    transform: translateY(-2px);
}

.recipe-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.recipe-thumbnail {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--fluent-bg-subtle);
}

.recipe-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-thumbnail .no-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fluent-text-tertiary);
    font-size: 0.9rem;
}

.recipe-card-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recipe-card-info .recipe-title {
    font-weight: 600;
    color: var(--fluent-text-primary);
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-info .recipe-meta {
    font-size: 0.8rem;
    color: var(--fluent-text-secondary);
}

.recipe-card-actions {
    padding: 8px 12px 12px;
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--fluent-border-subtle);
}

.recipe-card-actions .btn {
    flex: 1;
    text-align: center;
}

/* Store Management */
.store-settings-section,
.store-discovery-section,
.discovered-stores-section,
.my-stores-section,
.manual-add-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.manual-add-section {
    border-bottom: none;
}

.settings-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    margin-bottom: 16px;
}

.settings-grid .form-group {
    margin-bottom: 0;
}

.form-actions.compact {
    margin-top: 12px;
}

.settings-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.settings-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fluent-brand-primary);
}

.discovery-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.postal-code-display {
    font: var(--fluent-type-body-1);
    color: var(--fluent-text-secondary);
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.store-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--fluent-bg-layer-2);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-medium);
    transition: all 0.15s ease;
}

.store-card.selected {
    border-color: var(--fluent-brand-primary);
    background: var(--fluent-brand-selected);
}

.store-card.discovered {
    cursor: pointer;
    text-align: left;
}

.store-card.discovered:hover {
    border-color: var(--fluent-brand-primary);
    background: var(--fluent-bg-subtle-hover);
}

.store-card .store-info {
    flex: 1;
}

.store-card .store-name {
    display: block;
    font: var(--fluent-type-body-1-strong);
    color: var(--fluent-text-primary);
    margin-bottom: 4px;
}

.store-card .store-address {
    display: block;
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
}

.store-card .add-indicator {
    display: block;
    margin-top: 8px;
    font: var(--fluent-type-caption-1);
    color: var(--fluent-brand-primary);
}

.store-card .store-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fluent-border-subtle);
}

.toggle-switch.small {
    transform: scale(0.8);
}

.btn-icon {
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    border-radius: var(--fluent-radius-small);
}

.btn-icon:hover {
    background: var(--fluent-bg-subtle-hover);
}

.btn-icon.btn-danger:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.manual-add-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.manual-add-form .form-input {
    flex: 1;
    min-width: 200px;
}

.section-hint {
    font: var(--fluent-type-caption-1);
    color: var(--fluent-text-secondary);
    margin-bottom: 12px;
}

.household-stores-info {
    padding: 12px 16px;
    background: var(--fluent-brand-selected);
    border-radius: var(--fluent-radius-medium);
    margin-bottom: 16px;
}

.household-stores-info p {
    margin: 0;
    font: var(--fluent-type-body-1);
    color: var(--fluent-text-primary);
}

.household-stores-info a {
    color: var(--fluent-brand-primary);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .household-page {
        padding: 16px;
    }

    .household-header h1 {
        font-size: 1.5rem;
    }

    .tab-btn {
        padding: 10px 12px;
    }

    .tab-label {
        display: none;
    }

    .member-card {
        flex-wrap: wrap;
    }

    .member-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .recipe-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .invite-input-group {
        flex-direction: column;
    }
}

/* Recipe Edit Page (non-admin) */
.recipe-edit-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.recipe-edit-header {
    margin-bottom: 24px;
}

.recipe-edit-header .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fluent-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

.recipe-edit-header .back-link:hover {
    color: var(--fluent-brand-primary);
}

.recipe-edit-header .back-link::before {
    content: "\2190";
}

/* ======================================
   Recipe Edit Tabs
   ====================================== */
.recipe-edit-tabs {
    margin-bottom: 24px;
}

.recipe-edit-tabs .tab-list {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 2px solid var(--fluent-border-default);
    background: var(--fluent-bg-layer-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.recipe-edit-tabs .tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--fluent-text-secondary);
    font: var(--fluent-type-body-1);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
    white-space: nowrap;
}

.recipe-edit-tabs .tab-btn:hover {
    color: var(--fluent-text-primary);
    background: var(--fluent-bg-subtle-hover);
}

.recipe-edit-tabs .tab-btn.active {
    color: var(--fluent-brand-primary);
    border-bottom-color: var(--fluent-brand-primary);
}

.recipe-edit-tabs .tab-btn:focus-visible {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: -2px;
}

.recipe-edit-tabs .tab-icon {
    font-size: 1.25rem;
}

.recipe-edit-tabs .tab-label {
    font-weight: 500;
}

.recipe-edit-tabs .tab-badge {
    padding: 2px 8px;
    background: var(--fluent-bg-layer-3);
    border-radius: var(--fluent-radius-circular);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fluent-text-secondary);
}

.recipe-edit-tabs .tab-btn.active .tab-badge {
    background: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

.tab-panels {
    padding: 0;
}

.tab-panel {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Source URL display in Details tab */
.source-url-display {
    padding: 12px 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--fluent-radius-medium);
    word-break: break-all;
}

.source-url-display a {
    color: var(--fluent-brand-primary);
    text-decoration: none;
}

.source-url-display a:hover {
    text-decoration: underline;
}

/* ======================================
   Quick Actions Bar (Home page)
   ====================================== */
.quick-actions-bar {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 24px 64px;
    flex-wrap: wrap;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 40px;
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-xlarge);
    color: var(--fluent-text-primary);
    text-decoration: none;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
    min-width: 140px;
}

.quick-action-btn:hover,
.quick-action-btn:focus {
    background: var(--fluent-brand-selected);
    border-color: var(--fluent-brand-primary);
    transform: scale(1.03);
    box-shadow: var(--fluent-shadow-8);
}

.quick-action-icon {
    font-size: 2rem;
}

.quick-action-label {
    font: var(--fluent-type-body-1);
    font-weight: 500;
}

/* ======================================
   Popular Tags Section (Home page)
   ====================================== */
.popular-tags-section {
    padding: 0 64px 48px;
}

.popular-tags-section h2 {
    font: var(--fluent-type-title-1);
    margin-bottom: 20px;
    color: var(--fluent-text-primary);
}

.popular-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.popular-tag-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 24px;
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-large);
    text-decoration: none;
    transition: all var(--fluent-duration-fast) var(--fluent-easing-ease);
}

.popular-tag-card:hover {
    background: var(--fluent-brand-selected);
    border-color: var(--fluent-brand-primary);
    transform: translateY(-2px);
}

.popular-tag-card .tag-name {
    font: var(--fluent-type-body-1);
    font-weight: 600;
    color: var(--fluent-text-primary);
}

.popular-tag-card .tag-count {
    font: var(--fluent-type-caption);
    color: var(--fluent-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .recipe-edit-tabs .tab-list {
        padding: 0 8px;
    }

    .recipe-edit-tabs .tab-btn {
        padding: 12px 14px;
    }

    .recipe-edit-tabs .tab-label {
        display: none;
    }

    .recipe-edit-tabs .tab-icon {
        font-size: 1.5rem;
    }

    .quick-actions-bar {
        padding: 16px;
        gap: 12px;
    }

    .quick-action-btn {
        padding: 16px 24px;
        min-width: 100px;
    }

    .popular-tags-section {
        padding: 0 16px 32px;
    }
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--fluent-bg-layer-2);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-large);
    box-shadow: var(--fluent-shadow-16);
    z-index: 10000;
    animation: toastSlideIn 0.3s ease-out;
}

.toast-notification.toast-success {
    border-color: var(--fluent-success-primary);
}

.toast-notification.toast-success svg {
    color: var(--fluent-success-primary);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pantry Stock Level Display */
.pantry-stock-level {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.pantry-stock-bar {
    flex: 1;
    height: 6px;
    background: var(--fluent-bg-layer-3);
    border-radius: var(--fluent-radius-circular);
    overflow: hidden;
    min-width: 60px;
    max-width: 100px;
}

.pantry-stock-fill {
    height: 100%;
    border-radius: var(--fluent-radius-circular);
    background: var(--fluent-brand-primary);
    transition: width 0.3s ease;
}

.pantry-stock-fill.low {
    background: var(--fluent-warning-primary);
}

.pantry-stock-fill.critical {
    background: var(--fluent-error-primary);
}

.pantry-stock-text {
    font: var(--fluent-type-caption);
    color: var(--fluent-text-secondary);
    white-space: nowrap;
}

/* v29: Sale badge for pantry/shopping items */
.sale-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--sage-light);
    color: var(--sage-dark);
    white-space: nowrap;
}

.pantry-container-size {
    font: var(--fluent-type-caption);
    color: var(--fluent-text-secondary);
    padding: 2px 8px;
    background: var(--fluent-bg-layer-3);
    border-radius: var(--fluent-radius-small);
}

.btn-refill {
    padding: 4px 10px;
    font: var(--fluent-type-caption);
    background: var(--fluent-brand-primary);
    color: white;
    border: none;
    border-radius: var(--fluent-radius-medium);
    cursor: pointer;
}

.btn-refill:hover {
    background: var(--fluent-brand-hover);
}

/* ============================================
   Toast Notifications
   ============================================ */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--fluent-bg-layer-1);
    border: 1px solid var(--fluent-border-default);
    border-radius: var(--fluent-radius-large);
    box-shadow: var(--fluent-shadow-16);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s var(--fluent-easing-ease-out);
    pointer-events: auto;
}

.toast-show {
    opacity: 1;
    transform: translateX(0);
}

.toast-hide {
    opacity: 0;
    transform: translateX(100%);
}

.toast-success {
    border-left: 4px solid var(--fluent-success);
}

.toast-error {
    border-left: 4px solid var(--fluent-danger);
}

.toast-warning {
    border-left: 4px solid var(--fluent-warning);
}

.toast-info {
    border-left: 4px solid var(--fluent-brand-primary);
}

.toast-message {
    font: var(--fluent-type-body);
    color: var(--fluent-text-primary);
    flex: 1;
    margin-right: 12px;
}

.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--fluent-text-tertiary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s ease;
}

.toast-close:hover {
    color: var(--fluent-text-primary);
}

/* Dark mode adjustments */
[data-theme="dark"] .toast {
    background: var(--fluent-bg-layer-2);
    border-color: var(--fluent-border-default);
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }

    .toast {
        transform: translateY(-100%);
    }

    .toast-show {
        transform: translateY(0);
    }

    .toast-hide {
        transform: translateY(-100%);
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    /* Hide navigation and UI elements */
    .navbar,
    .nav-sidebar,
    .sidebar,
    .tv-nav-rail,
    .bottom-nav,
    .admin-bottom-nav,
    .recipe-detail-tabs,
    .favorite-fab-container,
    .mealplan-fab-container,
    .print-fab-container,
    .btn-fab,
    .toast-container,
    .modal-overlay,
    .active-recipes-fab,
    footer,
    .site-footer {
        display: none !important;
    }

    /* Reset page layout - allow content to flow across pages */
    html, body {
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        color: black !important;
        font-size: 12pt;
        line-height: 1.4;
    }

    .tv-layout {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .tv-layout-main {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .main-content,
    .recipe-detail-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Recipe title styling */
    .recipe-view-title {
        font-size: 18pt;
        font-weight: bold;
        margin-bottom: 12pt;
        color: black !important;
    }

    /* Recipe metadata */
    .recipe-meta-row {
        margin-bottom: 12pt;
        color: #333 !important;
    }

    /* Section headers */
    .recipe-section-title,
    .recipe-view h2,
    .recipe-view h3 {
        font-size: 14pt;
        font-weight: bold;
        margin-top: 16pt;
        margin-bottom: 8pt;
        color: black !important;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4pt;
    }

    /* Ingredients list */
    .recipe-ingredients-list,
    .recipe-steps-list {
        list-style: none;
        padding-left: 0;
    }

    .recipe-ingredient-item,
    .recipe-step-item {
        padding: 4pt 0;
        border-bottom: none;
        page-break-inside: avoid;
    }

    /* Steps numbering */
    .recipe-step-item {
        margin-bottom: 8pt;
    }

    .recipe-step-number {
        font-weight: bold;
        margin-right: 8pt;
    }

    /* Hide interactive elements */
    .recipe-ingredient-checkbox,
    .recipe-step-checkbox,
    input[type="checkbox"],
    .focusable:focus {
        display: none !important;
    }

    /* Recipe image - keep but size appropriately */
    .recipe-view-image,
    .recipe-hero-image {
        max-width: 300px;
        max-height: 200px;
        margin: 0 auto 12pt;
        display: block;
    }

    /* Equipment section */
    .recipe-equipment-list {
        columns: 2;
        column-gap: 20pt;
    }

    /* Notes section */
    .recipe-notes {
        background: #f5f5f5 !important;
        padding: 8pt;
        border: 1px solid #ccc;
        margin-top: 12pt;
    }

    /* Page breaks */
    .recipe-section {
        page-break-inside: avoid;
    }

    /* Allow steps to break across pages if needed */
    .recipe-steps-list,
    .recipe-ingredients-list {
        page-break-inside: auto;
    }

    /* Recipe view container - ensure it can expand */
    .recipe-view,
    .recipe-detail,
    .recipe-content {
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }

    /* Hide household selector and other UI */
    .household-selector,
    .user-nav-item,
    #blazor-error-ui {
        display: none !important;
    }

    /* Ensure links don't show URL */
    a {
        color: black !important;
        text-decoration: none !important;
    }

    /* Remove shadows and borders */
    * {
        box-shadow: none !important;
    }
}

/* =============================================================================
   DISCOVERY ONBOARDING WIZARD
   ============================================================================= */

.discovery-wizard {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px 24px;
}

.discovery-wizard .wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    gap: 0;
}

.discovery-wizard .wizard-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fluent-color-neutral-background-3);
    border: 2px solid var(--fluent-color-neutral-stroke-1);
    color: var(--fluent-color-neutral-foreground-3);
    font-size: 14px;
    font-weight: 600;
    cursor: default;
    transition: all 0.2s ease;
}

.discovery-wizard .wizard-step.active {
    background: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
    color: white;
}

.discovery-wizard .wizard-step.completed {
    background: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
    color: white;
    cursor: pointer;
}

.discovery-wizard .wizard-step.completed:hover {
    opacity: 0.9;
}

.discovery-wizard .step-connector {
    width: 32px;
    height: 2px;
    background: var(--fluent-color-neutral-stroke-1);
    transition: background 0.2s ease;
}

.discovery-wizard .step-connector.completed {
    background: var(--fluent-brand-primary);
}

.discovery-wizard .wizard-content {
    min-height: 350px;
    margin-bottom: 24px;
}

.discovery-wizard .wizard-step-content {
    animation: fadeIn 0.3s ease;
}

.discovery-wizard .wizard-step-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--fluent-color-neutral-foreground-1);
}

.discovery-wizard .step-description {
    color: var(--fluent-color-neutral-foreground-2);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

/* Welcome step */
.discovery-wizard .wizard-welcome {
    text-align: center;
    padding: 24px 0;
}

.discovery-wizard .welcome-icon {
    font-size: 64px;
    color: var(--fluent-brand-primary);
    margin-bottom: 16px;
}

.discovery-wizard .welcome-description {
    color: var(--fluent-color-neutral-foreground-2);
    max-width: 400px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.discovery-wizard .welcome-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.discovery-wizard .feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--fluent-color-neutral-foreground-2);
}

.discovery-wizard .feature-item i {
    font-size: 20px;
    color: var(--fluent-brand-primary);
}

/* Tag input */
.discovery-wizard .tag-input-container {
    margin-bottom: 24px;
}

.discovery-wizard .selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--fluent-color-neutral-background-1);
    border: 1px solid var(--fluent-color-neutral-stroke-1);
    border-radius: 8px;
    min-height: 48px;
    align-items: center;
}

.discovery-wizard .selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: var(--fluent-brand-primary);
    color: white;
    border-radius: 16px;
    font-size: 14px;
}

.discovery-wizard .selected-tag.dislike {
    background: var(--fluent-color-status-warning);
}

.discovery-wizard .tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

.discovery-wizard .tag-remove:hover {
    background: rgba(255, 255, 255, 0.3);
}

.discovery-wizard .tag-input {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--fluent-color-neutral-foreground-1);
}

.discovery-wizard .tag-input::placeholder {
    color: var(--fluent-color-neutral-foreground-4);
}

/* Suggestion chips */
.discovery-wizard .suggestions-section {
    margin-bottom: 16px;
}

.discovery-wizard .suggestions-label {
    display: block;
    font-size: 13px;
    color: var(--fluent-color-neutral-foreground-3);
    margin-bottom: 8px;
}

.discovery-wizard .suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.discovery-wizard .suggestion-chip {
    padding: 6px 14px;
    border: 1px solid var(--fluent-color-neutral-stroke-1);
    background: var(--fluent-color-neutral-background-1);
    color: var(--fluent-color-neutral-foreground-1);
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.discovery-wizard .suggestion-chip:hover {
    border-color: var(--fluent-brand-primary);
    background: var(--fluent-color-subtle-background-hover);
}

.discovery-wizard .suggestion-chip.selected {
    background: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
    color: white;
}

.discovery-wizard .suggestion-chip.dislike.selected {
    background: var(--fluent-color-status-warning);
    border-color: var(--fluent-color-status-warning);
}

.discovery-wizard .step-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fluent-color-neutral-foreground-3);
    font-size: 14px;
    margin-top: 16px;
}

.discovery-wizard .step-hint i {
    font-size: 18px;
}

/* Checkbox sections */
.discovery-wizard .checkbox-section {
    margin-bottom: 24px;
}

.discovery-wizard .checkbox-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--fluent-color-neutral-foreground-2);
    margin: 0 0 12px 0;
}

.discovery-wizard .checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.discovery-wizard .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--fluent-color-neutral-background-1);
    border: 1px solid var(--fluent-color-neutral-stroke-1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

.discovery-wizard .checkbox-label:hover {
    border-color: var(--fluent-brand-primary);
}

.discovery-wizard .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--fluent-brand-primary);
}

/* Notes section */
.discovery-wizard .notes-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--fluent-color-neutral-stroke-1);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    background: var(--fluent-color-neutral-background-1);
    color: var(--fluent-color-neutral-foreground-1);
}

.discovery-wizard .notes-input:focus {
    outline: none;
    border-color: var(--fluent-brand-primary);
}

.discovery-wizard .notes-examples {
    margin-top: 16px;
}

.discovery-wizard .examples-label {
    display: block;
    font-size: 13px;
    color: var(--fluent-color-neutral-foreground-3);
    margin-bottom: 8px;
}

.discovery-wizard .example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.discovery-wizard .example-chip {
    padding: 4px 12px;
    border: 1px dashed var(--fluent-color-neutral-stroke-1);
    background: transparent;
    color: var(--fluent-color-neutral-foreground-2);
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.discovery-wizard .example-chip:hover {
    border-color: var(--fluent-brand-primary);
    color: var(--fluent-brand-primary);
}

/* Discovery step */
.discovery-wizard .wizard-discovery {
    text-align: center;
}

.discovery-wizard .preferences-summary {
    text-align: left;
    background: var(--fluent-color-neutral-background-2);
    border-radius: 12px;
    padding: 16px;
    margin: 24px 0;
}

.discovery-wizard .summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fluent-color-neutral-stroke-1);
}

.discovery-wizard .summary-item:last-child {
    border-bottom: none;
}

.discovery-wizard .summary-item i {
    font-size: 18px;
    color: var(--fluent-brand-primary);
    margin-top: 2px;
}

.discovery-wizard .summary-item.allergy i {
    color: var(--fluent-color-status-danger);
}

.discovery-wizard .summary-label {
    font-weight: 600;
    color: var(--fluent-color-neutral-foreground-2);
    min-width: 70px;
}

.discovery-wizard .summary-value {
    color: var(--fluent-color-neutral-foreground-1);
    flex: 1;
}

.discovery-wizard .discovery-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--fluent-color-status-danger-background);
    color: var(--fluent-color-status-danger);
    border-radius: 8px;
    margin-bottom: 16px;
}

.discovery-wizard .discovery-error .btn-link {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--fluent-color-status-danger);
    text-decoration: underline;
    cursor: pointer;
}

/* Discovery progress */
.discovery-wizard .discovery-progress {
    padding: 32px 0;
}

.discovery-wizard .discovery-icon {
    font-size: 48px;
    color: var(--fluent-brand-primary);
    margin-bottom: 16px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.discovery-wizard .progress-bar {
    width: 100%;
    max-width: 300px;
    height: 8px;
    background: var(--fluent-color-neutral-background-3);
    border-radius: 4px;
    margin: 24px auto 16px;
    overflow: hidden;
}

.discovery-wizard .progress-fill {
    height: 100%;
    background: var(--fluent-brand-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.discovery-wizard .progress-status {
    color: var(--fluent-color-neutral-foreground-2);
    font-size: 14px;
}

/* Discovery complete */
.discovery-wizard .discovery-complete {
    padding: 32px 0;
}

.discovery-wizard .complete-icon {
    font-size: 64px;
    color: var(--fluent-color-status-success);
    margin-bottom: 16px;
}

.discovery-wizard .complete-description {
    color: var(--fluent-color-neutral-foreground-2);
    max-width: 350px;
    margin: 0 auto;
}

/* Navigation */
.discovery-wizard .wizard-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--fluent-color-neutral-stroke-1);
}

/* Responsive */
@media (max-width: 600px) {
    .discovery-wizard {
        padding: 24px 16px;
    }

    .discovery-wizard .wizard-step {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .discovery-wizard .step-connector {
        width: 20px;
    }

    .discovery-wizard .wizard-step-content h2 {
        font-size: 1.25rem;
    }

    .discovery-wizard .checkbox-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Discovery Wizard FAB (Skip notification) */
.discovery-wizard-fab {
    position: fixed;
    bottom: calc(100px + 70px + 70px + 70px);
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.15s ease;
}

/* When active recipes FAB is also present, stack above it */
.active-recipes-fab-container ~ .discovery-wizard-fab,
.discovery-wizard-fab:has(~ .active-recipes-fab-container) {
    bottom: calc(100px + 70px + 70px + 70px + 68px);
}

.discovery-wizard-fab:hover {
    background: linear-gradient(135deg, #8e44ad, #7d3c98);
    transform: scale(1.05);
}

.discovery-wizard-fab:focus {
    outline: 2px solid var(--fluent-brand-secondary);
    outline-offset: 2px;
}

.discovery-wizard-fab i {
    font-size: 24px;
}

.discovery-wizard-fab .fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--fluent-error, #d13438);
    color: white;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .discovery-wizard-fab {
        bottom: calc(70px + 16px);
        right: 16px;
    }

    .active-recipes-fab-container ~ .discovery-wizard-fab,
    .discovery-wizard-fab:has(~ .active-recipes-fab-container) {
        bottom: calc(70px + 16px + 68px);
    }
}

/* Discovery Wizard - Address Form */
.discovery-wizard .address-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.discovery-wizard .address-form .form-row {
    display: flex;
    gap: 16px;
}

.discovery-wizard .address-form .flex-1 {
    flex: 1;
}

.discovery-wizard .address-form .flex-2 {
    flex: 2;
}

.discovery-wizard .address-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fluent-text-secondary);
}

.discovery-wizard .address-form .form-control {
    width: 100%;
}

/* Discovery Wizard - Store Discovery */
.discovery-wizard .wizard-stores {
    min-height: 300px;
}

.discovery-wizard .store-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--fluent-warning-bg, #fff4ce);
    border-radius: 8px;
    color: var(--fluent-warning-text, #8a6d00);
    margin: 20px 0;
}

.discovery-wizard .store-warning i {
    font-size: 24px;
}

.discovery-wizard .store-search-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
}

.discovery-wizard .store-search-progress .search-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--fluent-border-secondary);
    border-top-color: var(--fluent-brand-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.discovery-wizard .store-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--fluent-error-bg, #fde7e9);
    border-radius: 8px;
    color: var(--fluent-error, #c50f1f);
    margin: 20px 0;
}

.discovery-wizard .store-error i {
    font-size: 24px;
}

.discovery-wizard .store-search-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px;
    text-align: center;
}

.discovery-wizard .store-search-cta .search-icon {
    font-size: 48px;
    color: var(--fluent-brand-primary);
}

.discovery-wizard .discovered-stores {
    margin: 20px 0;
}

.discovery-wizard .discovered-stores .stores-found {
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--fluent-text-secondary);
}

.discovery-wizard .stores-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.discovery-wizard .store-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--fluent-bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.discovery-wizard .store-item:hover {
    background: var(--fluent-bg-tertiary);
}

.discovery-wizard .store-item input[type="checkbox"] {
    display: none;
}

.discovery-wizard .store-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--fluent-border-primary);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.15s;
}

.discovery-wizard .store-item input:checked + .store-checkbox {
    background: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
}

.discovery-wizard .store-item input:checked + .store-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.discovery-wizard .store-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.discovery-wizard .store-name {
    font-weight: 500;
    color: var(--fluent-text-primary);
}

.discovery-wizard .store-address {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

.discovery-wizard .store-type {
    font-size: 0.75rem;
    color: var(--fluent-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.discovery-wizard .no-stores-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px;
    text-align: center;
    color: var(--fluent-text-secondary);
}

.discovery-wizard .no-stores-found i {
    font-size: 48px;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .discovery-wizard .address-form .form-row {
        flex-direction: column;
    }

    .discovery-wizard .stores-list {
        max-height: 220px;
    }
}

/* ============================================
   Admin Logs Page
   ============================================ */

.logs-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--fluent-border-subtle);
    padding-bottom: 8px;
}

.logs-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--fluent-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.logs-tab:hover {
    background: var(--fluent-bg-subtle-hover);
    color: var(--fluent-text-primary);
}

.logs-tab.active {
    background: var(--fluent-brand-selected);
    color: var(--fluent-brand-primary);
}

.logs-tab i {
    font-size: 1.25rem;
}

.logs-content {
    min-height: 400px;
}

.logs-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.logs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px;
    background: var(--fluent-bg-layer-2);
    border-radius: 8px;
}

.logs-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logs-filters .filter-group label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fluent-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.logs-filters select,
.logs-filters input[type="date"],
.logs-filters input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--fluent-border-default);
    border-radius: 6px;
    background: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
    font-size: 0.875rem;
    min-width: 150px;
}

.logs-filters select:focus,
.logs-filters input:focus {
    outline: none;
    border-color: var(--fluent-brand-primary);
}

.logs-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px;
    text-align: center;
    color: var(--fluent-text-tertiary);
}

.logs-empty i {
    font-size: 48px;
    opacity: 0.5;
}

.logs-empty small {
    font-size: 0.8rem;
    opacity: 0.7;
}

.logs-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--fluent-border-subtle);
}

.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.logs-table th,
.logs-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.logs-table th {
    background: var(--fluent-bg-layer-2);
    font-weight: 600;
    color: var(--fluent-text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.logs-table tr:hover {
    background: var(--fluent-bg-subtle-hover);
}

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

.log-timestamp {
    font-family: monospace;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--fluent-text-tertiary);
}

.log-description {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-target {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--fluent-text-tertiary);
}

.log-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.log-badge.category {
    background: var(--fluent-info-bg);
    color: var(--fluent-brand-primary);
}

.log-badge.action {
    background: var(--fluent-accent-secondary-bg);
    color: var(--fluent-accent-secondary);
}

.logs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.logs-pagination .page-info {
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
}

/* System Logs Viewer */
.system-logs .system-log-viewer {
    background: var(--fluent-bg-layer-2);
    border-radius: 8px;
    border: 1px solid var(--fluent-border-subtle);
    max-height: 600px;
    overflow: auto;
}

.system-logs .log-content {
    margin: 0;
    padding: 16px;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--fluent-text-primary);
}

@media (max-width: 768px) {
    .logs-tabs {
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .logs-tab {
        flex-shrink: 0;
        padding: 10px 14px;
    }

    .logs-tab span {
        display: none;
    }

    .logs-tab i {
        font-size: 1.5rem;
    }

    .logs-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .logs-filters .filter-group {
        width: 100%;
    }

    .logs-filters select,
    .logs-filters input[type="date"],
    .logs-filters input[type="text"] {
        width: 100%;
        min-width: auto;
    }

    .logs-table-wrapper {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .log-description {
        max-width: 150px;
    }

    .system-logs .system-log-viewer {
        max-height: 400px;
    }
}

/* ============================================
   Delete Account Modal & Danger Zone
   ============================================ */

.danger-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--fluent-border-subtle);
}

.danger-action:last-child {
    border-bottom: none;
}

.danger-action-info {
    flex: 1;
}

.danger-action-info strong {
    display: block;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin-bottom: 4px;
}

.danger-action-info p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--fluent-text-secondary);
    line-height: 1.4;
}

.delete-account-action {
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--fluent-danger);
}

.delete-account-modal {
    max-width: 500px;
}

.delete-warning {
    text-align: center;
    padding: 16px;
}

.delete-warning > i {
    font-size: 48px;
    color: var(--fluent-danger);
    margin-bottom: 16px;
}

.delete-warning ul {
    text-align: left;
    margin: 16px 0;
    padding-left: 24px;
}

.delete-warning li {
    margin-bottom: 8px;
    color: var(--fluent-text-secondary);
}

.delete-warning .recovery-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background-color: var(--fluent-success-bg);
    border-radius: var(--fluent-radius-medium);
    font-size: 0.875rem;
    color: var(--fluent-success);
}

.delete-warning .recovery-note i {
    font-size: 1.25rem;
}

.delete-warning.final {
    text-align: left;
}

.delete-warning.final .form-group {
    margin-top: 16px;
}

@media (max-width: 768px) {
    .danger-action {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .danger-action .btn {
        width: 100%;
    }
}

/* ============================================
   2026 REFRESH - Warm Kitchen Design System
   New rounded, friendly UI components
   ============================================ */

/* --- New Shape Tokens --- */
:root {
    --wk-radius-sm: 8px;
    --wk-radius-md: 12px;
    --wk-radius-lg: 16px;
    --wk-radius-xl: 24px;
    --wk-radius-pill: 50px;
    --wk-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --wk-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --wk-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

/* --- 2026 App Layout Container --- */
.app-layout-2026 {
    display: flex;
    min-height: 100vh;
    background: var(--cream);
}

.main-content-2026 {
    flex: 1;
    min-height: 100vh;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
    overflow-x: hidden;
    padding-top: 0;
}

/* Desktop: sidebar visible, main content offset */
@media (min-width: 1024px) {
    .main-content-2026 {
        margin-left: 260px;
        padding: 32px;
        padding-bottom: 24px;
    }

    .bottom-nav-2026 {
        display: none;
    }

    .fab-2026 {
        bottom: 32px;
        right: 32px;
    }
}

/* Mobile: no sidebar offset */
@media (max-width: 1023px) {
    .sidebar-2026 {
        display: none;
    }
}

/* --- Warm Kitchen Bottom Navigation --- */
.bottom-nav-2026 {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--white);
    padding: 12px 20px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border-top: 1px solid var(--cream-dark);
}

/* Bottom nav items */
.bottom-nav-item-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-muted);
    transition: all 0.15s ease;
    flex: 1;
    background: transparent;
    border: none;
    cursor: pointer;
}

.bottom-nav-item-2026 i {
    font-size: 22px;
}

.bottom-nav-item-2026 span {
    font-size: 11px;
    font-weight: 500;
}

.bottom-nav-item-2026.active {
    color: var(--sage-dark);
}

.bottom-nav-item-2026.active i {
    color: var(--sage-dark);
}

.bottom-nav-item-2026:not(.active):hover {
    color: var(--brown);
}

/* --- Refreshed Desktop Sidebar (Warm Kitchen) --- */
.sidebar-2026 {
    width: 260px;
    background: var(--white);
    border-right: 1px solid var(--cream-dark);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    padding: 24px;
}

/* Sidebar Brand/Logo */
.sidebar-2026 .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.sidebar-2026 .sidebar-brand i {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--white);
}

.sidebar-2026 .sidebar-brand span {
    font-size: 24px;
    font-weight: 700;
    color: var(--brown);
    letter-spacing: -0.5px;
}

/* Sidebar Sections */
.sidebar-2026 .sidebar-section {
    margin-bottom: 16px;
}

.sidebar-2026 .sidebar-section-title {
    display: none; /* Hide section titles for cleaner look per mockup */
}

/* Sidebar Navigation Items */
.sidebar-2026 .sidebar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.15s ease;
    margin-bottom: 6px;
    cursor: pointer;
}

.sidebar-2026 .sidebar-item i {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.sidebar-2026 .sidebar-item:hover {
    background: var(--cream-dark);
    color: var(--brown);
}

.sidebar-2026 .sidebar-item.active {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: var(--white);
}

.sidebar-2026 .sidebar-item.active i {
    color: var(--white);
}

/* Sidebar Spacer (pushes footer to bottom) */
.sidebar-2026 .sidebar-spacer {
    flex: 1;
}

/* Sidebar Footer Section - always visible at bottom */
.sidebar-2026 .sidebar-footer-section {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Nav-rail items within sidebar-2026 need to match sidebar-item styling */
.sidebar-2026 .nav-rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: inherit;
}

.sidebar-2026 .nav-rail-item i,
.sidebar-2026 .nav-rail-icon-wrapper {
    font-size: 20px;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
}

.sidebar-2026 .nav-rail-item-label {
    opacity: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.sidebar-2026 .nav-rail-item-label-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.sidebar-2026 .nav-rail-item-sublabel {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.8;
}

.sidebar-2026 .nav-rail-item:hover {
    background: var(--sage-light);
}

.sidebar-2026 .nav-rail-item.active {
    background: var(--sage-light);
    color: var(--sage);
}

.sidebar-2026 .nav-rail-item.active i,
.sidebar-2026 .nav-rail-item.active .nav-rail-icon-wrapper {
    color: var(--sage);
}

/* User avatar styling in sidebar nav-rail-item */
.sidebar-2026 .nav-rail-item .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sage-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--sage);
}

.sidebar-2026 .nav-rail-item .user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-2026 .nav-rail-item .user-avatar .avatar-initials {
    font-size: 11px;
}

/* Sidebar User Section (bottom of sidebar) */
.sidebar-2026 .sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--cream);
    border-radius: var(--radius-md);
    margin-top: auto;
}

.sidebar-2026 .sidebar-user .user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
}

.sidebar-2026 .sidebar-user .user-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
}

.sidebar-2026 .sidebar-user .user-info p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Badge in sidebar items */
.sidebar-2026 .sidebar-item .badge {
    margin-left: auto;
    background: var(--terracotta);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* --- Context-Aware FAB --- */
.fab-2026 {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom, 0));
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--fluent-brand-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: white;
    z-index: 95;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.fab-2026:hover {
    background: var(--fluent-brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(122, 155, 109, 0.3);
}

.fab-2026 i {
    font-size: 22px;
}

.fab-2026 .fab-label {
    white-space: nowrap;
}

/* FAB color variants */
.fab-2026.fab-primary {
    background: var(--fluent-brand-primary);
}

.fab-2026.fab-primary:hover {
    background: var(--fluent-brand-hover);
    box-shadow: 0 12px 32px rgba(122, 155, 109, 0.3);
}

.fab-2026.fab-secondary {
    background: var(--fluent-accent-secondary);
}

.fab-2026.fab-secondary:hover {
    background: #D4896C;
    box-shadow: 0 12px 32px rgba(196, 120, 92, 0.3);
}

/* Icon-only FAB (no label) */
.fab-2026:not(:has(.fab-label)) {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.fab-2026:not(:has(.fab-label)) i {
    font-size: 26px;
}

/* Hide FAB label on small screens */
@media (max-width: 480px) {
    .fab-2026 .fab-label {
        display: none;
    }

    .fab-2026 {
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .fab-2026 i {
        font-size: 26px;
    }
}

/* --- Cookie AI Assistant FAB --- */
.cookie-fab {
    position: fixed;
    bottom: calc(160px + env(safe-area-inset-bottom, 0));
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--terracotta);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all var(--fluent-duration-normal) var(--fluent-easing-ease-out);
    z-index: 998;
}

.cookie-fab:hover {
    background: var(--terracotta-light);
    color: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(196, 120, 92, 0.3);
}

.cookie-fab i {
    font-size: 24px;
}

@media (min-width: 769px) {
    .cookie-fab {
        bottom: 100px;
        right: 32px;
    }
}

@media (max-width: 480px) {
    .cookie-fab {
        width: 48px;
        height: 48px;
    }

    .cookie-fab i {
        font-size: 22px;
    }
}

/* --- 2026 Home Page Layout (Warm Kitchen) --- */
.home-2026 {
    padding-bottom: 20px;
}

/* === Warm Kitchen Mobile Header === */
.mobile-header-wk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 50;
}

.logo-wk {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon-wk {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
}

.logo-text-wk {
    font-size: 22px;
    font-weight: 700;
    color: var(--brown);
}

.avatar-wk {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s;
}

.avatar-wk:hover {
    transform: scale(1.05);
}

/* === Warm Kitchen Greeting Section === */
.greeting-wk {
    padding: 10px 20px 20px;
}

.greeting-wk h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--brown);
    margin: 0 0 4px;
}

.greeting-wk p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* === Warm Kitchen Search Bar (Mobile) === */
.search-container-wk {
    margin: 0 20px 20px;
}

.search-bar-wk {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-md);
    cursor: text;
}

.search-bar-wk .search-icon-wk {
    color: var(--sage-dark);
    font-size: 18px;
}

.search-bar-wk input {
    border: none;
    background: transparent;
    font-size: 16px;
    flex: 1;
    color: var(--text-dark);
    outline: none;
    font-family: inherit;
}

.search-bar-wk input::placeholder {
    color: var(--text-muted);
}

.search-clear-wk {
    padding: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.search-clear-wk:hover {
    background: var(--cream-dark);
    color: var(--brown);
}

/* === Warm Kitchen Desktop Header === */
.desktop-header-wk {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.desktop-header-wk h1 {
    font-size: 32px;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
}

.desktop-search-wk {
    width: 320px;
    background: var(--white);
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-md);
    cursor: text;
}

.desktop-search-wk i {
    color: var(--sage-dark);
    font-size: 18px;
}

.desktop-search-wk input {
    border: none;
    background: transparent;
    font-size: 15px;
    flex: 1;
    color: var(--text-dark);
    outline: none;
    font-family: inherit;
}

.desktop-search-wk input::placeholder {
    color: var(--text-muted);
}

/* Hide mobile elements on desktop, show desktop elements */
@media (min-width: 1024px) {
    .mobile-header-wk {
        display: none;
    }

    .greeting-wk {
        display: none;
    }

    .search-container-wk {
        display: none;
    }

    .desktop-header-wk {
        display: flex;
    }

    .home-2026 {
        padding: 0;
    }
}

/* Hide desktop header on mobile */
@media (max-width: 1023px) {
    .desktop-header-wk {
        display: none;
    }
}

/* Legacy styles for backward compatibility */
.home-header-2026 { display: none; }
.quick-actions-2026 { display: none; }
.search-container-2026 { display: none; }
.search-bar-2026 { display: none; }

/* --- Warm Kitchen Category Chips --- */
.chip-2026,
.category-chip-wk {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 500;
    background: var(--white);
    color: var(--brown);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(92, 74, 61, 0.08);
    border: none;
}

.chip-2026:hover,
.category-chip-wk:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(92, 74, 61, 0.12);
}

.chip-2026.active,
.category-chip-wk.active {
    background: linear-gradient(135deg, var(--terracotta), var(--terracotta));
    color: var(--white);
}

/* Categories container */
.categories-wk {
    display: flex;
    gap: 10px;
    padding: 0 20px 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.categories-wk::-webkit-scrollbar {
    display: none;
}

/* --- Quick Action Cards (Home) --- */
.quick-action-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: var(--fluent-bg-layer-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-width: 100px;
    text-decoration: none;
    color: var(--fluent-text-primary);
    transition: all 0.2s;
    flex-shrink: 0;
}

.quick-action-2026:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-action-2026 i {
    font-size: 28px;
    color: var(--fluent-brand-primary);
}

.quick-action-2026 span {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.quick-action-2026.highlight {
    background: linear-gradient(135deg, var(--fluent-brand-selected), var(--fluent-bg-layer-1));
}

.quick-action-2026.highlight i {
    color: var(--fluent-brand-primary);
}

.quick-action-2026.warning i {
    color: var(--fluent-accent-secondary);
}

/* --- Meal Plan Card (Home) --- */
.meal-plan-card-2026 {
    margin: 0 20px 24px;
    background: linear-gradient(135deg, var(--fluent-brand-primary) 0%, var(--fluent-brand-pressed) 100%);
    border-radius: var(--radius-lg);
    padding: 20px;
    color: white;
}

.meal-plan-card-2026 .meal-plan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.meal-plan-card-2026 .meal-plan-header h3 {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.meal-plan-card-2026 .meal-plan-header i {
    font-size: 20px;
}

.meal-plan-card-2026 .meal-plan-date {
    font-size: 13px;
    opacity: 0.9;
}

.meal-plan-card-2026 .meal-plan-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meal-plan-card-2026 .meal-plan-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 12px;
    text-decoration: none;
    color: white;
    transition: background 0.2s;
}

.meal-plan-card-2026 .meal-plan-item:hover {
    background: rgba(255,255,255,0.25);
}

.meal-plan-card-2026 .meal-type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    width: 60px;
}

.meal-plan-card-2026 .meal-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.meal-plan-card-2026 .meal-plan-item i {
    font-size: 16px;
    opacity: 0.8;
}

.meal-plan-card-2026 .meal-plan-more {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.meal-plan-card-2026 .meal-plan-more:hover {
    background: rgba(255,255,255,0.15);
}

/* --- Recipe Sections --- */
.recipe-section-2026 {
    margin-bottom: 24px;
}

.section-header-2026 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 12px;
}

.section-header-2026 h2,
.section-header-2026 h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
}

.section-header-2026 .see-all {
    font-size: 14px;
    color: var(--sage-dark);
    text-decoration: none;
    font-weight: 500;
}

.section-header-2026 .see-all:hover {
    text-decoration: underline;
}

.recipe-scroll-2026 {
    padding: 0 20px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.recipe-scroll-2026::-webkit-scrollbar {
    display: none;
}

.recipe-scroll-2026 .recipe-card-2026 {
    flex-shrink: 0;
    width: 200px;
}

/* Warm Kitchen Responsive Recipe Grid - flows based on screen width */
.recipe-grid-2026 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 0 20px;
}

@media (min-width: 640px) {
    .recipe-grid-2026 {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .recipe-grid-2026 {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 24px;
        padding: 0;
    }
}

.recipe-grid-2026 .recipe-card-2026 {
    width: 100%;
    min-width: unset;
}

/* --- Loading State --- */
.loading-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--text-muted);
}

.loading-2026 .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--fluent-border-default);
    border-top-color: var(--fluent-brand-primary);
    border-radius: 50%;
    animation: spin-2026 0.8s linear infinite;
}

@keyframes spin-2026 {
    to { transform: rotate(360deg); }
}

/* --- Empty State --- */
.empty-state-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state-2026 .empty-icon {
    width: 80px;
    height: 80px;
    background: var(--fluent-bg-layer-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-state-2026 .empty-icon i {
    font-size: 36px;
    color: var(--fluent-text-tertiary);
}

.empty-state-2026 h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 8px;
}

.empty-state-2026 p {
    font-size: 14px;
    color: var(--fluent-text-secondary);
    margin: 0 0 20px;
}

/* --- Discovery Section 2026 --- */
.discovery-section-2026 {
    margin: 0 20px 24px;
    padding: 20px;
    background: var(--fluent-bg-layer-1);
    border-radius: var(--radius-lg);
}

.discovery-section-2026 .section-header-2026 {
    padding: 0 0 16px;
}

.discovery-section-2026 .section-header-2026 h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.discovery-section-2026 .section-header-2026 h2 i {
    color: var(--fluent-brand-primary);
}

.discovery-cards-2026 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.discovery-card-2026 {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--white);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    box-shadow: var(--shadow-md);
}

.discovery-card-2026 .discovery-card-top {
    display: flex;
    gap: 12px;
}

.discovery-card-2026.processing {
    opacity: 0.6;
    pointer-events: none;
}

.discovery-card-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    background: var(--fluent-bg-layer-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.discovery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discovery-card-image i {
    font-size: 32px;
    color: var(--fluent-text-tertiary);
}

.discovery-card-content {
    flex: 1;
    min-width: 0;
}

.discovery-card-content h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discovery-description {
    font-size: 12px;
    color: var(--fluent-text-secondary);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discovery-source {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--fluent-text-tertiary);
}

/* Bottom actions for discovery cards */
.discovery-card-actions-bottom {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cream-dark);
}

.btn-discovery {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-discovery.btn-approve {
    background: var(--sage);
    color: white;
}

.btn-discovery.btn-approve:hover {
    background: var(--sage-dark);
}

.btn-discovery.btn-reject {
    background: var(--cream-dark);
    color: var(--brown-light);
}

.btn-discovery.btn-reject:hover {
    background: var(--fluent-danger);
    color: white;
}

.btn-discovery i {
    font-size: 16px;
}

/* Discovery layout containers for Home page */
.discovery-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discovery-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discovery-sidebar {
    max-height: 400px;
    overflow-y: auto;
}

.discovery-tv-card {
    grid-column: span 2;
}

.discovery-tv-list {
    display: flex;
    gap: 16px;
}

.discovery-tv-list .discovery-card-2026 {
    flex: 1;
}

/* Dark mode for discovery source */
[data-theme="dark"] .discovery-source {
    color: var(--text-light);
}

[data-theme="dark"] .discovery-card-actions-bottom {
    border-top-color: var(--border);
}

.discovery-progress-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 16px;
}

.discovery-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--fluent-border-default);
    border-top-color: var(--fluent-brand-primary);
    border-radius: 50%;
    animation: spin-2026 0.8s linear infinite;
}

.discovery-spinner-small {
    width: 24px;
    height: 24px;
    border: 2px solid var(--fluent-border-default);
    border-top-color: var(--fluent-brand-primary);
    border-radius: 50%;
    animation: spin-2026 0.8s linear infinite;
}

.progress-bar-2026 {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background: var(--fluent-border-default);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-2026 .progress-fill {
    height: 100%;
    background: var(--fluent-brand-primary);
    transition: width 0.3s ease;
}

.discovery-error-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    gap: 12px;
    text-align: center;
}

.discovery-error-2026 i {
    font-size: 40px;
    color: var(--fluent-danger);
}

/* --- Warm Kitchen Tag Chips --- */
.tags-scroll-2026 {
    padding: 0 20px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tags-scroll-2026::-webkit-scrollbar {
    display: none;
}

.tag-chip-2026 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--white);
    border: none;
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--brown);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(92, 74, 61, 0.08);
}

.tag-chip-2026:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(92, 74, 61, 0.12);
}

.tag-chip-2026.active {
    background: var(--sage);
    color: white;
}

.tag-chip-2026.active .tag-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.tag-chip-2026 .tag-count {
    padding: 2px 8px;
    background: var(--cream-dark);
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Radio Options (for reject modal) --- */
.reject-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--fluent-bg-layer-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
}

.radio-option:hover {
    background: var(--fluent-bg-layer-3);
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fluent-brand-primary);
}

/* --- Warm Kitchen Recipe Card --- */
.recipe-card-2026 {
    display: block;
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.recipe-card-2026:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.recipe-card-2026-image {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #E8D5C4, #D4C4B0);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.recipe-card-2026-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-card-2026-image .placeholder-icon {
    font-size: 48px;
    color: var(--brown-light);
    opacity: 0.5;
}

.recipe-card-2026-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.recipe-card-2026-favorite:hover {
    transform: scale(1.1);
}

.recipe-card-2026-favorite i {
    font-size: 16px;
    color: var(--sage);
}

.recipe-card-2026-favorite.is-fav i,
.recipe-card-2026-favorite:has(.ph-fill) i {
    color: var(--terracotta);
}

.recipe-card-2026-body {
    padding: 16px;
}

.recipe-card-2026-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-2026-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.recipe-card-2026-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.recipe-card-2026-meta i {
    font-size: 14px;
}

.recipe-card-2026-tags {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.recipe-tag-2026 {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--sage);
    color: var(--white);
}

/* --- Pill Buttons --- */
.btn-pill {
    border-radius: var(--radius-xl) !important;
}

.btn-2026 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-xl);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-2026-primary {
    background: var(--fluent-brand-primary);
    color: white;
}

.btn-2026-primary:hover {
    background: var(--fluent-brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-2026-secondary {
    background: var(--fluent-bg-layer-1);
    color: var(--fluent-text-primary);
    border: 2px solid var(--fluent-border-default);
}

.btn-2026-secondary:hover {
    border-color: var(--fluent-brand-primary);
    color: var(--fluent-brand-primary);
}

/* --- Page Header (Mobile) --- */
.page-header-2026 {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--fluent-bg-canvas);
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-header-2026 .greeting {
    flex: 1;
}

.page-header-2026 .greeting small {
    font-size: 13px;
    color: var(--fluent-text-secondary);
    display: block;
}

.page-header-2026 .greeting h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.page-header-2026 .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fluent-brand-primary), var(--fluent-brand-pressed));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

/* --- Horizontal Scroll Container --- */
.scroll-container-2026 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 20px 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-container-2026::-webkit-scrollbar {
    display: none;
}

/* --- Section Header --- */
.section-header-2026 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 16px;
}

.section-header-2026 h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--fluent-text-primary);
    margin: 0;
}

.section-header-2026 a {
    font-size: 14px;
    color: var(--fluent-brand-primary);
    text-decoration: none;
    font-weight: 500;
}

/* --- Desktop Main Content with Sidebar --- */
.layout-with-sidebar-2026 {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.main-content-2026 {
    padding: 32px;
    background: var(--fluent-bg-canvas);
    overflow-y: auto;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .sidebar-2026 {
        display: none;
    }

    .layout-with-sidebar-2026 {
        grid-template-columns: 1fr;
    }

    .main-content-2026 {
        padding-bottom: 120px; /* Space for bottom nav + FAB */
    }
}

@media (min-width: 1025px) {
    .bottom-nav-2026 {
        display: none;
    }

    .fab-2026 {
        bottom: 32px;
        right: 32px;
    }
}

/* ============================================== */
/* RESPONSIVE HOME LAYOUTS                         */
/* Mobile: Concept 4 - Quick Actions               */
/* Desktop: Concept 1 - Dashboard Hub              */
/* TV: Concept 3 - Meal Plan Hub                   */
/* ============================================== */

/* Default: Show mobile, hide desktop and TV */
.home-mobile { display: block; }
.home-desktop { display: none; }
.home-tv { display: none; }

/* Desktop: 768px - 1400px */
@media (min-width: 768px) {
    .home-mobile { display: none; }
    .home-desktop { display: block; }
    .home-tv { display: none; }
}

/* TV/Large Screen: > 1400px */
@media (min-width: 1400px) {
    .home-mobile { display: none; }
    .home-desktop { display: none; }
    .home-tv { display: block; }
}

/* ============================================== */
/* MOBILE LAYOUT - Concept 4: Quick Actions        */
/* ============================================== */

.home-mobile {
    padding: 0 16px 32px;
}

/* Quick Actions Grid (2x2) */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.action-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--brown);
    border: 1px solid var(--border);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.action-card.primary {
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
    color: var(--white);
    border: none;
}

.action-card .action-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    background: var(--sage-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--sage);
}

.action-card.primary .action-icon {
    background: rgba(255,255,255,0.2);
    color: var(--white);
}

.action-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

.action-card p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.action-card.primary p {
    color: rgba(255,255,255,0.85);
}

/* Active Cooking Banner */
.cooking-banner {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--terracotta);
}

.cooking-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--terracotta) 0%, #B06848 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 20px;
}

.cooking-info {
    flex: 1;
}

.cooking-info h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--brown);
}

.cooking-info p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Recent Section */
.recent-section {
    margin-bottom: 24px;
}

.section-header-2026 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header-2026 h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header-2026 h2 i {
    color: var(--sage);
}

.section-header-2026 .see-all,
.section-header-2026 a {
    font-size: 14px;
    color: var(--sage);
    text-decoration: none;
    font-weight: 500;
}

/* Recipe Horizontal Scroll */
.recipe-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.recipe-scroll::-webkit-scrollbar {
    display: none;
}

.recipe-scroll-card {
    flex: 0 0 160px;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--brown);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.recipe-scroll-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.recipe-scroll-image {
    height: 100px;
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.recipe-scroll-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-scroll-image i {
    font-size: 32px;
    color: var(--text-muted);
}

.recipe-scroll-body {
    padding: 12px;
}

.recipe-scroll-body h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-scroll-body span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Suggestion Section */
.suggestion-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border);
}

.suggestion-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--brown);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggestion-section h2 i {
    color: var(--sage);
}

.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.suggestion-chip {
    padding: 10px 16px;
    background: var(--cream);
    border: none;
    border-radius: var(--radius-xl);
    color: var(--brown);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
}

.suggestion-chip:hover {
    background: var(--sage-light);
    color: var(--sage-dark);
}

.suggestion-chip i {
    color: var(--sage);
    font-size: 16px;
}

/* ============================================== */
/* DESKTOP LAYOUT - Concept 1: Dashboard Hub       */
/* ============================================== */

.home-desktop {
    padding: 0 24px 32px;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.stat-card i {
    font-size: 28px;
    color: var(--sage);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--brown);
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Dashboard Grid (Two Column) */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.main-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.side-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card Component */
.home-desktop .card,
.home-tv .card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.home-desktop .card-header,
.home-tv .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.home-desktop .card-header h2,
.home-tv .card-header h2,
.home-desktop .card-header h3,
.home-tv .card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-desktop .card-header i,
.home-tv .card-header i {
    color: var(--sage);
}

.home-desktop .btn-link,
.home-tv .btn-link {
    font-size: 13px;
    color: var(--sage);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-desktop .btn-link:hover,
.home-tv .btn-link:hover {
    text-decoration: underline;
}

/* Quick Actions Desktop (6-item grid) */
.quick-actions-desktop {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 16px 20px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--cream);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--brown);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--sage-light);
    transform: translateY(-2px);
}

.action-btn i {
    font-size: 24px;
    color: var(--sage);
}

/* Meal List */
.meal-list {
    padding: 0;
}

.meal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    color: var(--brown);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.meal-item:last-child {
    border-bottom: none;
}

.meal-item:hover {
    background: var(--cream);
}

.meal-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--sage);
    text-transform: uppercase;
    width: 70px;
}

.meal-name {
    flex: 1;
    font-weight: 500;
}

.meal-icon {
    color: var(--text-muted);
}

/* Discovery Mini Cards */
.discovery-mini {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discovery-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.discovery-item img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.discovery-placeholder {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 24px;
}

.discovery-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discovery-item-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--brown);
}

.discovery-actions {
    display: flex;
    gap: 8px;
}

.btn-skip,
.btn-add {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}

.btn-skip {
    background: var(--cream);
    color: var(--text-muted);
}

.btn-skip:hover {
    background: var(--cream-dark);
}

.btn-add {
    background: var(--sage);
    color: var(--white);
}

.btn-add:hover {
    background: var(--sage-dark);
}

/* Shopping Preview */
.shopping-preview {
    padding: 16px 20px;
}

.shopping-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.shopping-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-dark);
    border-radius: 4px;
    flex-shrink: 0;
}

.shopping-checkbox.checked {
    background: var(--sage);
    border-color: var(--sage);
    position: relative;
}

.shopping-checkbox.checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 12px;
}

.shopping-item span.purchased {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Activity List */
.activity-list {
    padding: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--brown);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background: var(--cream);
}

.activity-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.activity-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-icon i {
    font-size: 20px;
    color: var(--sage);
}

.activity-content {
    flex: 1;
}

.activity-content h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 2px;
}

.activity-time {
    font-size: 12px;
    color: var(--text-muted);
}

.text-muted {
    color: var(--text-muted);
    font-size: 14px;
    padding: 16px 20px;
}

/* ============================================== */
/* TV LAYOUT - Concept 3: Meal Plan Hub            */
/* ============================================== */

.home-tv {
    padding: 0 32px 48px;
}

/* Tonight's Hero */
.tonight-hero {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 32px;
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-md);
}

.tonight-image {
    width: 100%;
    height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--cream-dark);
}

.tonight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tonight-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--text-muted);
}

.tonight-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;
}

.tonight-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.tonight-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--brown);
    margin: 0 0 12px;
}

.tonight-content p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px;
}

.tonight-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 15px;
}

.meta-item i {
    color: var(--sage);
    font-size: 18px;
}

.tonight-actions {
    display: flex;
    gap: 12px;
}

/* Week Section */
.week-section {
    margin-bottom: 32px;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.day-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--border);
    transition: all 0.2s;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

.day-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.day-card.today {
    border-color: var(--sage);
    box-shadow: 0 0 0 2px var(--sage-light);
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.day-header span:first-child {
    font-weight: 600;
    color: var(--brown);
    font-size: 14px;
}

.day-header .date {
    font-size: 12px;
    color: var(--text-muted);
}

.day-card.today .day-header span:first-child {
    color: var(--sage);
}

.day-meals {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-meals .meal-item {
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--cream);
    border-bottom: none;
}

.day-meals .meal-item:hover {
    background: var(--sage-light);
}

.day-meals .meal-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--sage);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.day-meals .meal-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--brown);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-meal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: var(--cream);
    border: 2px dashed var(--border-dark);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
    flex: 1;
}

.add-meal-btn:hover {
    background: var(--sage-light);
    border-color: var(--sage);
    color: var(--sage-dark);
}

/* Bottom Grid (3 columns) */
.bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.home-tv .card {
    padding: 20px;
}

.home-tv .card-header {
    padding: 0 0 16px;
    border-bottom: none;
}

/* Shopping List (TV) */
.shopping-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.shopping-list .shopping-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.shopping-list .shopping-item:last-child {
    border-bottom: none;
}

.shopping-text {
    font-size: 14px;
}

.shopping-text.checked {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Pantry List */
.pantry-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.pantry-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.pantry-icon {
    font-size: 24px;
}

.pantry-info {
    flex: 1;
}

.pantry-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 2px;
    color: var(--brown);
}

.pantry-info span {
    font-size: 12px;
    color: var(--text-muted);
}

.pantry-status {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.status-low {
    background: var(--terracotta-light);
    color: var(--terracotta);
}

/* Discovery Mini (TV) */
.discovery-mini-tv {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.discovery-mini-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    background: var(--cream);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.discovery-mini-card:hover {
    background: var(--sage-light);
}

.discovery-mini-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.discovery-mini-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--text-muted);
}

.discovery-mini-info {
    flex: 1;
}

.discovery-mini-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 2px;
    color: var(--brown);
}

.discovery-mini-info span {
    font-size: 12px;
    color: var(--text-muted);
}

/* TV Layout - Dark Mode Adjustments */
[data-theme="dark"] .tonight-hero {
    background: var(--fluent-bg-layer-1);
}

[data-theme="dark"] .day-card {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-border-default);
}

[data-theme="dark"] .day-card.today {
    border-color: var(--sage);
}

[data-theme="dark"] .bottom-grid .card {
    background: var(--fluent-bg-layer-1);
}

/* Responsive adjustments for smaller desktop screens */
@media (min-width: 768px) and (max-width: 1024px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions-desktop {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive adjustments for TV layout on medium-large screens */
@media (min-width: 1400px) and (max-width: 1600px) {
    .tonight-hero {
        grid-template-columns: 320px 1fr;
    }

    .tonight-image {
        height: 220px;
    }

    .tonight-content h2 {
        font-size: 26px;
    }
}

/* Very large TV screens */
@media (min-width: 1920px) {
    .home-tv {
        padding: 0 48px 64px;
    }

    .tonight-hero {
        grid-template-columns: 500px 1fr;
    }

    .tonight-image {
        height: 320px;
    }

    .tonight-content h2 {
        font-size: 38px;
    }

    .week-grid {
        gap: 20px;
    }

    .day-card {
        padding: 20px;
        min-height: 160px;
    }
}

/* ============================================== */
/* DARK MODE SUPPORT FOR RESPONSIVE LAYOUTS        */
/* ============================================== */

/* Dark mode - Mobile Layout */
[data-theme="dark"] .action-card {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-border-default);
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .action-card.primary {
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
    color: var(--white);
}

[data-theme="dark"] .action-card .action-icon {
    background: rgba(122, 155, 109, 0.2);
}

[data-theme="dark"] .cooking-banner {
    background: var(--fluent-bg-layer-1);
}

[data-theme="dark"] .recipe-scroll-card {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-border-default);
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .recipe-scroll-image {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .suggestion-section {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-border-default);
}

[data-theme="dark"] .suggestion-chip {
    background: var(--fluent-bg-layer-2);
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .suggestion-chip:hover {
    background: rgba(122, 155, 109, 0.2);
}

/* Dark mode - Desktop Layout */
[data-theme="dark"] .stat-card {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-border-default);
}

[data-theme="dark"] .stat-value {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .home-desktop .card,
[data-theme="dark"] .home-tv .card {
    background: var(--fluent-bg-layer-1);
    border-color: var(--fluent-border-default);
}

[data-theme="dark"] .home-desktop .card-header,
[data-theme="dark"] .home-tv .card-header {
    border-bottom-color: var(--fluent-border-default);
}

[data-theme="dark"] .home-desktop .card-header h2,
[data-theme="dark"] .home-tv .card-header h2,
[data-theme="dark"] .home-desktop .card-header h3,
[data-theme="dark"] .home-tv .card-header h3 {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .action-btn {
    background: var(--fluent-bg-layer-2);
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .action-btn:hover {
    background: rgba(122, 155, 109, 0.2);
}

[data-theme="dark"] .meal-item {
    color: var(--fluent-text-primary);
    border-bottom-color: var(--fluent-border-default);
}

[data-theme="dark"] .meal-item:hover {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .discovery-placeholder {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .discovery-item-title {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .btn-skip {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .btn-skip:hover {
    background: var(--fluent-bg-layer-3);
}

[data-theme="dark"] .shopping-checkbox {
    border-color: var(--fluent-border-strong);
}

[data-theme="dark"] .activity-item {
    border-bottom-color: var(--fluent-border-default);
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .activity-item:hover {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .activity-icon {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .activity-content h3 {
    color: var(--fluent-text-primary);
}

/* Dark mode - TV Layout */
[data-theme="dark"] .tonight-content h2 {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .tonight-image {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .day-header {
    border-bottom-color: var(--fluent-border-default);
}

[data-theme="dark"] .day-header span:first-child {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .day-meals .meal-item {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .day-meals .meal-item:hover {
    background: rgba(122, 155, 109, 0.2);
}

[data-theme="dark"] .day-meals .meal-name {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .add-meal-btn {
    background: var(--fluent-bg-layer-2);
    border-color: var(--fluent-border-strong);
}

[data-theme="dark"] .add-meal-btn:hover {
    background: rgba(122, 155, 109, 0.2);
}

[data-theme="dark"] .shopping-list .shopping-item {
    border-bottom-color: var(--fluent-border-default);
}

[data-theme="dark"] .pantry-info h4 {
    color: var(--fluent-text-primary);
}

[data-theme="dark"] .discovery-mini-card {
    background: var(--fluent-bg-layer-2);
}

[data-theme="dark"] .discovery-mini-card:hover {
    background: rgba(122, 155, 109, 0.2);
}

[data-theme="dark"] .discovery-mini-placeholder {
    background: var(--fluent-bg-layer-3);
}

[data-theme="dark"] .discovery-mini-info h4 {
    color: var(--fluent-text-primary);
}

/* ===================================================
   TASKS - v5.0 Whole Home
   =================================================== */

/* Tasks Page Layout */
.tasks-page {
    padding: 24px;
    max-width: 900px;
}

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.tasks-header .header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tasks-header .header-left h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.75rem;
    color: var(--brown);
}

.tasks-header .header-actions {
    display: flex;
    gap: 8px;
}

/* Gamification Summary in Header */
.gamification-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.streak-badge,
.points-badge,
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
}

.streak-badge {
    background: linear-gradient(135deg, #FF6B35, #FF8F5E);
    color: white;
}

.points-badge {
    background: var(--sage-light);
    color: var(--sage-dark);
}

.level-badge {
    background: var(--cream-dark);
    color: var(--brown-light);
}

/* Overdue Banner */
.overdue-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    color: #DC2626;
    margin-bottom: 16px;
}

.overdue-banner i {
    font-size: 1.25rem;
}

.overdue-banner .btn {
    margin-left: auto;
    background: #DC2626;
    border-color: #DC2626;
    color: white;
    padding: 4px 12px;
    font-size: 0.875rem;
}

/* Task Tabs */
.task-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
}

.task-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.task-tab:hover {
    color: var(--sage);
}

.task-tab.active {
    color: var(--sage);
    border-bottom-color: var(--sage);
}

.task-tab.overdue {
    color: #DC2626;
}

.task-tab.overdue.active {
    border-bottom-color: #DC2626;
}

.task-tab .badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    background: var(--sage-light);
    color: var(--sage-dark);
}

.task-tab .badge-danger {
    background: #FEE2E2;
    color: #DC2626;
}

/* Task Card */
.tasks-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.task-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.task-card.completed {
    opacity: 0.6;
}

.task-card.completed .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Priority Colors */
.task-card.priority-low {
    border-left-color: var(--sage-light);
}

.task-card.priority-medium {
    border-left-color: var(--sage);
}

.task-card.priority-high {
    border-left-color: var(--terracotta);
}

.task-card.priority-urgent {
    border-left-color: #DC2626;
}

.task-card-check {
    flex-shrink: 0;
}

.check-btn {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.check-btn:hover {
    border-color: var(--sage);
    color: var(--sage);
    background: var(--sage-light);
}

.check-btn.completed {
    background: var(--sage);
    border-color: var(--sage);
    color: white;
}

.task-card-content {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.task-description {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.task-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-date.overdue {
    color: #DC2626;
    font-weight: 500;
}

.task-points {
    color: var(--sage);
    font-weight: 500;
}

.task-category {
    background: var(--cream-dark);
    padding: 2px 8px;
    border-radius: 4px;
}

.task-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--cream-dark);
    color: var(--text-dark);
}

/* Reschedule Modal */
.reschedule-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reschedule-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.reschedule-btn:hover {
    background: var(--sage-light);
    border-color: var(--sage);
}

.reschedule-btn i {
    font-size: 1.25rem;
    color: var(--sage);
}

.reschedule-divider {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
    padding: 8px 0;
}

.full-width {
    width: 100%;
}

/* Achievement Toast */
.achievement-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: white;
    animation: slideInUp 0.4s ease-out, fadeOut 0.4s ease-in 3.5s forwards;
    z-index: 1000;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.achievement-icon i {
    font-size: 2rem;
}

.achievement-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.achievement-name {
    font-size: 1.125rem;
    font-weight: 600;
}

.achievement-points {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ===================================================
   FOCUS MODE
   =================================================== */

.focus-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cream);
}

.focus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.focus-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #FF6B35, #FF8F5E);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 1.125rem;
}

.focus-streak i {
    font-size: 1.25rem;
}

.focus-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 32px;
}

.focus-task {
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.focus-task-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.focus-task-icon i {
    font-size: 2.5rem;
    color: var(--sage);
}

.focus-task.priority-high .focus-task-icon i,
.focus-task.priority-urgent .focus-task-icon i {
    color: var(--terracotta);
}

.focus-task-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 12px;
    line-height: 1.3;
}

.focus-task-description {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.focus-task-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.focus-task-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--white);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.focus-task-meta .meta-item.points {
    color: var(--sage);
    font-weight: 500;
}

.focus-actions {
    margin-bottom: 32px;
}

.btn-complete {
    padding: 20px 48px;
    font-size: 1.25rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(122, 155, 109, 0.3);
}

.btn-complete:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(122, 155, 109, 0.4);
}

.btn-complete i {
    font-size: 1.5rem;
}

.focus-reschedule {
    text-align: center;
}

.reschedule-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.reschedule-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ghost:hover {
    background: var(--white);
    border-color: var(--sage);
    color: var(--sage);
}

.btn-sm {
    font-size: 0.875rem;
    padding: 6px 12px;
}

.focus-remaining {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Focus Completing Animation */
.focus-completing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
}

.completing-animation {
    width: 60px;
    height: 60px;
    border: 4px solid var(--sage-light);
    border-top-color: var(--sage);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Focus Celebration */
.focus-celebration {
    position: fixed;
    inset: 0;
    background: rgba(122, 155, 109, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.focus-celebration.animate {
    animation: celebrationPulse 1.5s ease-out;
}

@keyframes celebrationPulse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.celebration-content {
    text-align: center;
    color: white;
}

.celebration-content .celebration-icon {
    margin-bottom: 16px;
}

.celebration-content .celebration-icon i {
    font-size: 5rem;
}

.points-earned {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.bonus-text {
    display: block;
    font-size: 1.125rem;
    opacity: 0.9;
}

/* Focus Achievement */
.focus-achievement {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideInUp 0.4s ease-out;
    z-index: 200;
}

.achievement-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.achievement-badge i {
    font-size: 1.5rem;
}

.achievement-info {
    display: flex;
    flex-direction: column;
}

.achievement-info .achievement-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.achievement-info .achievement-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Focus Empty State */
.focus-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.focus-empty.all-done .celebration-icon {
    width: 100px;
    height: 100px;
    background: var(--sage-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.focus-empty.all-done .celebration-icon i {
    font-size: 3rem;
    color: var(--sage);
}

.focus-empty h2 {
    font-size: 1.75rem;
    color: var(--brown);
    margin-bottom: 8px;
}

.focus-stats-complete {
    display: flex;
    gap: 24px;
    margin: 24px 0;
}

.focus-stats-complete .stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.focus-stats-complete .stat i {
    color: var(--sage);
}

.focus-actions-complete {
    margin-top: 16px;
}

/* Icon size helper */
.icon-xl {
    font-size: 3rem;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .tasks-page {
    background: var(--cream);
}

[data-theme="dark"] .task-card {
    background: var(--white);
}

[data-theme="dark"] .overdue-banner {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
}

[data-theme="dark"] .points-badge {
    background: var(--sage-light);
}

[data-theme="dark"] .focus-page {
    background: var(--cream);
}

[data-theme="dark"] .focus-task-icon {
    background: var(--white);
}

[data-theme="dark"] .focus-task-meta .meta-item {
    background: var(--white);
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .tasks-page {
        padding: 16px;
    }

    .tasks-header {
        flex-direction: column;
    }

    .tasks-header .header-actions {
        width: 100%;
    }

    .tasks-header .header-actions .btn {
        flex: 1;
    }

    .hide-mobile {
        display: none;
    }

    .task-card {
        padding: 12px;
    }

    .focus-task-title {
        font-size: 1.5rem;
    }

    .btn-complete {
        padding: 16px 32px;
        font-size: 1.125rem;
    }

    .achievement-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

/* ========================================
   CHORES PAGE STYLES
   ======================================== */

.chores-page {
    padding: 24px;
    max-width: 1200px;
}

.chores-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.chores-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    color: var(--brown);
    margin: 0;
}

.chores-header h1 i {
    color: var(--sage);
}

/* Chore Tabs */
.chore-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.chore-tab {
    padding: 10px 20px;
    border: none;
    background: var(--white);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.chore-tab:hover {
    background: var(--cream-dark);
}

.chore-tab.active {
    background: var(--sage);
    color: white;
}

.chore-tab.overdue {
    color: #D64545;
}

.chore-tab.overdue.active {
    background: #D64545;
    color: white;
}

/* Area Filter */
.area-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.area-chip {
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.area-chip:hover {
    border-color: var(--sage);
    color: var(--sage);
}

.area-chip.active {
    background: var(--sage-light);
    border-color: var(--sage);
    color: var(--sage-dark);
}

/* Chores Container */
.chores-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Chore Card */
.chore-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--sage-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chore-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(2px);
}

.chore-card.completed {
    opacity: 0.6;
    background: var(--cream-dark);
}

.chore-card.completed .chore-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Priority colors */
.chore-card.priority-low {
    border-left-color: var(--sage-light);
}

.chore-card.priority-medium {
    border-left-color: var(--sage);
}

.chore-card.priority-high {
    border-left-color: var(--terracotta);
}

.chore-card.priority-urgent {
    border-left-color: #D64545;
}

.chore-card-check {
    flex-shrink: 0;
}

.chore-card-content {
    flex: 1;
    min-width: 0;
}

.chore-title {
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chore-title i {
    color: var(--sage);
    font-size: 1.125rem;
}

.chore-description {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chore-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.chore-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chore-area {
    color: var(--sage-dark);
}

.chore-points {
    color: var(--terracotta);
    font-weight: 500;
}

.chore-date.overdue {
    color: #D64545;
    font-weight: 500;
}

/* Assignee display */
.chore-assignee {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8125rem;
}

.assignee-name {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    background: var(--cream-dark);
    padding: 2px 8px;
    border-radius: 12px;
}

.assignee-name.is-me {
    background: var(--sage-light);
    color: var(--sage-dark);
    font-weight: 500;
}

.volunteer-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--terracotta);
    background: var(--terracotta-light);
    padding: 2px 8px;
    border-radius: 12px;
}

.unassigned-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-light);
}

.rotation-badge {
    color: var(--sage);
}

.chore-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.volunteer-btn {
    color: var(--terracotta) !important;
}

.volunteer-btn:hover {
    background: var(--terracotta-light) !important;
}

/* ========================================
   LEADERBOARD PAGE STYLES
   ======================================== */

.leaderboard-page {
    padding: 24px;
    max-width: 800px;
}

.leaderboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.leaderboard-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    color: var(--brown);
    margin: 0;
}

.leaderboard-header h1 i {
    color: var(--terracotta);
}

/* Period tabs */
.period-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.period-tab {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.period-tab:hover {
    border-color: var(--sage);
}

.period-tab.active {
    background: var(--sage);
    border-color: var(--sage);
    color: white;
}

/* Podium */
.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 32px;
    padding: 24px 0;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-md);
    min-width: 120px;
}

.podium-place.first {
    order: 2;
    padding: 32px 24px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
}

.podium-place.second {
    order: 1;
}

.podium-place.third {
    order: 3;
}

.podium-crown {
    font-size: 2rem;
    margin-bottom: 8px;
}

.podium-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}

.podium-place.first .podium-avatar {
    width: 80px;
    height: 80px;
    border: 3px solid white;
}

.podium-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-avatar i {
    font-size: 1.5rem;
    color: var(--text-muted);
}

.podium-rank {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.podium-place.first .podium-rank {
    font-size: 2rem;
}

.podium-name {
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    margin-bottom: 8px;
}

.podium-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.8125rem;
}

.podium-place:not(.first) .podium-stats {
    color: var(--text-muted);
}

.podium-points {
    font-weight: 600;
}

/* Leaderboard list */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.leaderboard-row.is-current-user {
    background: var(--sage-light);
    border: 1px solid var(--sage);
}

.leaderboard-row .rank {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-muted);
    min-width: 32px;
    text-align: center;
}

.leaderboard-row .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.leaderboard-row .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.leaderboard-row .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaderboard-row .name {
    font-weight: 500;
}

.you-badge {
    font-size: 0.75rem;
    background: var(--sage);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
}

.leaderboard-row .stats {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.volunteer-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--terracotta);
}

.leaderboard-row .points {
    font-weight: 600;
    color: var(--sage-dark);
    min-width: 80px;
    text-align: right;
}

/* Stats Card */
.stats-card {
    margin-top: 32px;
    padding: 24px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.stats-card h3 {
    margin: 0 0 16px 0;
    font-size: 1.125rem;
    color: var(--brown);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sage);
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.favorite-area {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.9375rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.favorite-area i {
    color: var(--terracotta);
}

/* Responsive */
@media (max-width: 640px) {
    .chores-page,
    .leaderboard-page {
        padding: 16px;
    }

    .chores-header,
    .leaderboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chore-tabs,
    .period-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .chore-tab,
    .period-tab {
        white-space: nowrap;
    }

    .podium {
        flex-direction: column;
        align-items: center;
    }

    .podium-place {
        order: unset !important;
        width: 100%;
        max-width: 200px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .leaderboard-row .stats {
        display: none;
    }
}

/* ===============================================
   Supplies Page (Consumables Tracking)
   =============================================== */

.supplies-page {
    padding: 24px;
    max-width: 1200px;
}

.supplies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.supplies-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    color: var(--brown);
    margin: 0;
}

.supplies-header h1 i {
    color: var(--sage);
}

.supplies-header .header-actions {
    display: flex;
    gap: 12px;
}

/* View tabs (Supplies page) */
.view-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
}

.view-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.view-tab:hover {
    color: var(--sage);
}

.view-tab.active {
    color: var(--sage);
    border-bottom-color: var(--sage);
}

.view-tab i {
    font-size: 1.1rem;
}

.tab-count {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    background: var(--sage-light);
    color: var(--sage-dark);
}

.view-tab.active .tab-count {
    background: var(--sage);
    color: white;
}

/* Category chips */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.category-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-chip:hover {
    border-color: var(--sage);
    color: var(--sage);
}

.category-chip.active {
    background: var(--sage);
    border-color: var(--sage);
    color: white;
}

.category-chip i {
    font-size: 1rem;
}

/* Supplies list */
.supplies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

/* Supply card */
.supply-card {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.supply-card:hover {
    border-color: var(--sage);
    box-shadow: var(--shadow-sm);
}

.supply-card.low-stock {
    border-left: 4px solid var(--terracotta);
}

.supply-card.out-of-stock {
    border-left: 4px solid #D64545;
    background: rgba(214, 69, 69, 0.03);
}

.supply-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sage-light);
    border-radius: var(--radius-md);
    color: var(--sage);
    font-size: 1.5rem;
}

.supply-card.out-of-stock .supply-icon {
    background: rgba(214, 69, 69, 0.1);
    color: #D64545;
}

.supply-info {
    min-width: 0;
}

.supply-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.supply-brand {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.supply-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.813rem;
    color: var(--text-light);
}

.supply-meta i {
    margin-right: 4px;
}

.supply-category,
.supply-location {
    display: flex;
    align-items: center;
}

/* Quantity display */
.supply-quantity {
    text-align: right;
    min-width: 80px;
}

.quantity-display {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
}

.qty-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sage);
}

.quantity-display.low .qty-value {
    color: var(--terracotta);
}

.quantity-display.out .qty-value {
    color: #D64545;
}

.qty-unit {
    font-size: 0.75rem;
    color: var(--text-light);
}

.days-remaining {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.days-remaining.warning {
    color: var(--terracotta);
    font-weight: 500;
}

/* Supply actions */
.supply-actions {
    display: flex;
    gap: 8px;
}

.supply-actions .btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.supply-actions .btn-icon:hover:not(:disabled) {
    background: var(--sage-light);
    border-color: var(--sage);
    color: var(--sage);
}

.supply-actions .btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Supplies statistics card */
.supplies-stats {
    margin-top: 24px;
}

.supplies-stats h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: var(--brown);
}

.supplies-stats .stat-value.warning {
    color: var(--terracotta);
}

.supplies-stats .stat-value.danger {
    color: #D64545;
}

/* Supplies modal */
.supplies-modal {
    max-width: 500px;
}

.supplies-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.supplies-modal .form-check {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.supplies-modal .form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--sage);
}

.supplies-modal .form-check-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Dark mode for supplies */
[data-theme="dark"] .supply-card {
    background: var(--white);
    border-color: var(--border);
}

[data-theme="dark"] .supply-card.out-of-stock {
    background: rgba(214, 69, 69, 0.08);
}

[data-theme="dark"] .supply-icon {
    background: var(--sage-light);
}

[data-theme="dark"] .supply-card.out-of-stock .supply-icon {
    background: rgba(214, 69, 69, 0.15);
}

[data-theme="dark"] .category-chip {
    background: var(--cream-dark);
    border-color: var(--border);
}

[data-theme="dark"] .category-chip.active {
    background: var(--sage);
    border-color: var(--sage);
}

[data-theme="dark"] .supply-actions .btn-icon {
    background: var(--cream-dark);
    border-color: var(--border);
}

[data-theme="dark"] .supply-actions .btn-icon:hover:not(:disabled) {
    background: var(--sage-light);
}

/* Mobile responsive for supplies */
@media (max-width: 768px) {
    .supplies-page {
        padding: 16px;
    }

    .supplies-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .supplies-header .header-actions {
        width: 100%;
    }

    .supplies-header .header-actions .btn {
        flex: 1;
    }

    .supply-card {
        grid-template-columns: 40px 1fr auto;
        gap: 12px;
    }

    .supply-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .supply-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .category-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
    }

    .category-chip {
        flex-shrink: 0;
    }

    .supplies-modal .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===============================================
   Calendar Page
   =============================================== */

.calendar-page {
    padding: 24px;
    max-width: 1400px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.today-btn {
    font-weight: 500;
}

.calendar-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.view-switcher {
    display: flex;
    background: var(--cream-dark);
    border-radius: var(--radius-md);
    padding: 4px;
}

.view-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover {
    color: var(--text-dark);
}

.view-btn.active {
    background: var(--white);
    color: var(--sage);
    box-shadow: var(--shadow-sm);
}

/* Filter chips */
.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: var(--chip-color, var(--sage));
    color: var(--chip-color, var(--sage));
}

.filter-chip.active {
    background: var(--chip-color, var(--sage));
    border-color: var(--chip-color, var(--sage));
    color: white;
}

.filter-chip i {
    font-size: 1rem;
}

/* Month View */
.month-view {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.weekday-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--cream-dark);
    border-bottom: 1px solid var(--border);
}

.weekday-header {
    padding: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.month-day {
    min-height: 100px;
    padding: 8px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.month-day:nth-child(7n) {
    border-right: none;
}

.month-day:hover {
    background: var(--cream);
}

.month-day.today {
    background: var(--sage-light);
}

.month-day.other-month {
    background: var(--cream-dark);
}

.month-day.other-month .day-number {
    color: var(--text-light);
}

.day-number {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.month-day.today .day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--sage);
    color: white;
    border-radius: 50%;
}

.day-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--item-color, var(--sage)) 15%, transparent);
    border-radius: 4px;
    font-size: 0.75rem;
    overflow: hidden;
}

.item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--item-color, var(--sage));
    flex-shrink: 0;
}

.item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dark);
}

.day-more {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 2px 6px;
}

/* Week View */
.week-view {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--cream-dark);
    border-bottom: 1px solid var(--border);
}

.week-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.week-day-header:hover {
    background: var(--cream);
}

.week-day-header.today {
    background: var(--sage-light);
}

.day-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
}

.day-num {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.week-day-header.today .day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--sage);
    color: white;
    border-radius: 50%;
}

.week-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 400px;
}

.week-day-column {
    padding: 8px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-day-column:last-child {
    border-right: none;
}

.week-day-column.today {
    background: var(--sage-light);
}

.week-item {
    padding: 8px;
    background: color-mix(in srgb, var(--item-color, var(--sage)) 15%, transparent);
    border-left: 3px solid var(--item-color, var(--sage));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.week-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.item-time {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--item-color, var(--sage));
    margin-bottom: 4px;
}

.item-content {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.item-content i {
    color: var(--item-color, var(--sage));
}

.week-empty {
    color: var(--text-light);
    font-size: 0.813rem;
    text-align: center;
    padding: 16px;
}

/* Day View */
.day-view {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--cream-dark);
    border-bottom: 1px solid var(--border);
}

.day-date {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--brown);
}

.item-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.day-items-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.day-item-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    padding: 16px;
    background: var(--cream);
    border-left: 4px solid var(--item-color, var(--sage));
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-item-card:hover {
    background: var(--sage-light);
    transform: translateX(4px);
}

.item-time-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.start-time {
    font-weight: 600;
    color: var(--text-dark);
}

.end-time {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.all-day-badge {
    padding: 4px 8px;
    background: var(--item-color, var(--sage));
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.item-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-header i {
    font-size: 1.25rem;
    color: var(--item-color, var(--sage));
}

.item-header .item-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark);
}

.item-type-badge {
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

.item-type-badge.event { background: #6B8DD6; color: white; }
.item-type-badge.task { background: #7A9B6D; color: white; }
.item-type-badge.chore { background: #9B7A9B; color: white; }
.item-type-badge.meal { background: #C4785C; color: white; }

.item-description {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.item-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.813rem;
    color: var(--text-muted);
}

.item-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.813rem;
}

.item-status.completed {
    color: var(--sage);
}

.item-status.pending {
    color: var(--terracotta);
}

.item-image {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Calendar Modal */
.calendar-modal {
    max-width: 500px;
}

.calendar-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.calendar-modal .form-check {
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-modal .form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--sage);
}

.calendar-modal .color-input {
    height: 40px;
    padding: 4px;
    cursor: pointer;
}

/* Dark mode for calendar */
[data-theme="dark"] .month-view,
[data-theme="dark"] .week-view,
[data-theme="dark"] .day-view {
    background: var(--white);
    border-color: var(--border);
}

[data-theme="dark"] .weekday-headers,
[data-theme="dark"] .week-header,
[data-theme="dark"] .day-header {
    background: var(--cream-dark);
}

[data-theme="dark"] .month-day:hover,
[data-theme="dark"] .week-day-header:hover {
    background: var(--cream-dark);
}

[data-theme="dark"] .month-day.other-month {
    background: var(--cream);
}

[data-theme="dark"] .view-switcher {
    background: var(--cream);
}

[data-theme="dark"] .view-btn.active {
    background: var(--cream-dark);
}

[data-theme="dark"] .filter-chip {
    background: var(--cream-dark);
    border-color: var(--border);
}

[data-theme="dark"] .day-item-card {
    background: var(--cream-dark);
}

[data-theme="dark"] .day-item-card:hover {
    background: var(--sage-light);
}

/* Mobile responsive for calendar */
@media (max-width: 768px) {
    .calendar-page {
        padding: 16px;
    }

    .calendar-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .view-switcher {
        flex: 1;
    }

    .view-btn {
        flex: 1;
        text-align: center;
    }

    .calendar-title {
        font-size: 1.25rem;
    }

    .month-day {
        min-height: 60px;
        padding: 4px;
    }

    .day-items {
        display: none;
    }

    .month-day.today .day-number {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .week-content {
        display: flex;
        flex-direction: column;
    }

    .week-day-column {
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .week-day-column:last-child {
        border-bottom: none;
    }

    .week-item {
        flex: 1;
        min-width: 150px;
    }

    .day-item-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .item-time-block {
        flex-direction: row;
        gap: 8px;
    }

    .item-image {
        width: 100%;
        height: 120px;
    }

    .calendar-modal .form-row {
        grid-template-columns: 1fr;
    }

    .calendar-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-chip {
        flex-shrink: 0;
    }
}

/* ============================================
   CALENDAR SYNC SETTINGS PAGE
   ============================================ */

.calendar-sync-page {
    padding: 24px;
    max-width: 800px;
}

.calendar-sync-page .page-header {
    margin-bottom: 24px;
}

.calendar-sync-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 12px;
}

.calendar-sync-page .back-link:hover {
    color: var(--sage);
}

.calendar-sync-page .page-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 600;
    color: var(--brown);
    margin: 0 0 4px;
}

.calendar-sync-page .page-header h1 i {
    color: var(--sage);
}

/* Provider Buttons */
.provider-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.provider-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.2s ease;
    min-width: 140px;
    position: relative;
}

.provider-btn:hover:not(.disabled) {
    border-color: var(--sage);
    background: var(--sage-light);
    color: var(--sage-dark);
}

.provider-btn:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

.provider-btn i {
    font-size: 32px;
}

.provider-btn span {
    font-size: 14px;
    font-weight: 500;
}

.provider-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.provider-btn .badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    padding: 2px 6px;
    background: var(--terracotta-light);
    color: var(--terracotta);
    border-radius: 10px;
    font-weight: 600;
}

/* Integration List */
.integration-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.integration-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: all 0.2s ease;
}

.integration-item.disabled {
    opacity: 0.6;
}

.integration-item:hover {
    border-color: var(--sage-light);
}

.integration-icon {
    width: 48px;
    height: 48px;
    background: var(--cream-dark);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.integration-icon i {
    font-size: 24px;
    color: var(--text-muted);
}

.integration-info {
    flex: 1;
    min-width: 0;
}

.integration-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.integration-details {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.integration-details .separator {
    color: var(--text-light);
}

.integration-details .email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.integration-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.status-badge.status-connected {
    background: var(--sage-light);
    color: var(--sage-dark);
}

.status-badge.status-error {
    background: #FDEDED;
    color: #D64545;
}

.status-badge.status-pending {
    background: var(--cream-dark);
    color: var(--text-muted);
}

.integration-status .last-sync {
    font-size: 12px;
    color: var(--text-light);
}

.integration-status .error-text {
    font-size: 12px;
    color: #D64545;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: var(--cream-dark);
    color: var(--text-dark);
}

.btn-icon:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

.btn-icon.btn-danger:hover {
    background: #FDEDED;
    color: #D64545;
}

.btn-icon i {
    font-size: 18px;
}

.btn-icon i.spin {
    animation: spin 1s linear infinite;
}

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

/* Sync Direction Options */
.sync-direction-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-option:hover {
    border-color: var(--sage);
}

.radio-option.selected {
    border-color: var(--sage);
    background: var(--sage-light);
}

.radio-option input {
    display: none;
}

.radio-option i {
    font-size: 24px;
    color: var(--text-muted);
    margin-top: 2px;
}

.radio-option.selected i {
    color: var(--sage);
}

.radio-option .option-title {
    display: block;
    font-weight: 500;
    color: var(--text-dark);
}

.radio-option .option-desc {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* OAuth Notice */
.oauth-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sage-light);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--sage-dark);
    margin-top: 16px;
}

.oauth-notice i {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: var(--text-dark);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px currentColor;
}

.color-option:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* Toggle Inline */
.toggle-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-inline input {
    width: 18px;
    height: 18px;
    accent-color: var(--sage);
}

/* Sync Range Selector */
.sync-range-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.range-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-row label {
    min-width: 60px;
    font-size: 14px;
    color: var(--text-muted);
}

.range-row select {
    flex: 1;
    max-width: 150px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-dark);
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--sage);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* Spinner Small */
.spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

/* Calendar Sync Mobile Responsive */
@media (max-width: 640px) {
    .calendar-sync-page {
        padding: 16px;
    }

    .provider-buttons {
        flex-direction: column;
    }

    .provider-btn {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .provider-btn i {
        font-size: 24px;
    }

    .integration-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .integration-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .integration-details .email {
        max-width: 150px;
    }

    .sync-direction-options {
        gap: 12px;
    }

    .radio-option {
        padding: 16px;
    }

    .range-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .range-row select {
        width: 100%;
        max-width: none;
    }
}

/* ============================================
   Warm Kitchen 2026 - Polish & Refinement Layer
   A cohesive, production-grade finish
   ============================================ */

/* === Extended Color Tokens for Polish === */
:root {
    /* Interactive state colors (missing from base) */
    --sage-hover: #8AAE7D;
    --sage-pressed: #4A6A3E;
    --terracotta-hover: #D4886C;
    --terracotta-pressed: #A45D42;

    /* Subtle backgrounds with warm undertones */
    --cream-warm: #FAF5EF;
    --cream-subtle: #F7F2EB;

    /* Refined shadows with warm undertone */
    --shadow-card: 0 2px 8px rgba(58, 46, 38, 0.06), 0 1px 2px rgba(58, 46, 38, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(58, 46, 38, 0.10), 0 2px 6px rgba(58, 46, 38, 0.06);
    --shadow-elevated: 0 12px 32px rgba(58, 46, 38, 0.12), 0 4px 12px rgba(58, 46, 38, 0.08);
    --shadow-modal: 0 24px 48px rgba(58, 46, 38, 0.16), 0 8px 16px rgba(58, 46, 38, 0.08);
    --shadow-inset: inset 0 1px 2px rgba(58, 46, 38, 0.06);

    /* Spacing scale (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Typography refinements */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;

    /* Refined transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
    --sage-hover: #A5C999;
    --sage-pressed: #6A8B5E;
    --terracotta-hover: #F0B9A0;
    --terracotta-pressed: #C8826A;

    --cream-warm: #1E1A17;
    --cream-subtle: #221E1A;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.16);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.20);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.24);
    --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.40), 0 8px 16px rgba(0, 0, 0, 0.28);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* === Global Refinements === */

/* Smoother text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Selection styling */
::selection {
    background-color: var(--sage-light);
    color: var(--brown);
}

/* Scrollbar polish */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--border-dark);
}

/* === Button Polish === */

/* Fix button base for consistent feel */
.btn {
    position: relative;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    transition: all var(--transition-fast);
    overflow: hidden;
}

/* Subtle ripple effect on buttons */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.3s;
}

.btn:active::after {
    opacity: 1;
    transform: scale(2);
    transition: opacity 0s, transform 0s;
}

/* Primary button refinement */
.btn-primary {
    background: var(--sage);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-primary:hover {
    background: var(--sage-hover);
    box-shadow: var(--shadow-card-hover), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px);
}

.btn-primary:active {
    background: var(--sage-pressed);
    box-shadow: var(--shadow-inset);
    transform: translateY(0);
}

/* Secondary button refinement */
.btn-secondary {
    background-color: var(--white);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-card);
}

.btn-secondary:hover {
    background-color: var(--cream-warm);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.btn-secondary:active {
    background-color: var(--cream-dark);
    box-shadow: var(--shadow-inset);
    transform: translateY(0);
}

/* Danger button refinement - fix hardcoded colors */
.btn-danger {
    background: var(--terracotta);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.1);
}

.btn-danger:hover {
    background: var(--terracotta-hover);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.btn-danger:active {
    background: var(--terracotta-pressed);
    box-shadow: var(--shadow-inset);
    transform: translateY(0);
}

/* Success button refinement - fix hardcoded colors */
.btn-success:active {
    background-color: var(--sage-pressed);
}

/* Disabled state refinement */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Button sizes refinement */
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: 1.0625rem;
    border-radius: var(--radius-md);
}

/* === Card Polish === */

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Card with interactive state */
a.card,
button.card,
.card-interactive {
    cursor: pointer;
}

a.card:hover,
button.card:hover,
.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* Card header refinement */
.card-header,
.card-header-row {
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.card-header h2,
.card-header-row h2 {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brown);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

/* Card body refinement */
.card-body {
    padding: var(--space-5);
}

/* Card footer refinement */
.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--cream-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* === Form Controls Polish === */

.form-control {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    color: var(--text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    box-shadow: var(--shadow-inset);
}

.form-control:hover {
    border-color: var(--border-dark);
}

.form-control:focus {
    border-color: var(--sage);
    box-shadow: var(--shadow-inset), 0 0 0 3px rgba(122, 155, 109, 0.15);
    background: var(--white);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-light);
    opacity: 1;
}

/* Select refinement */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235C4D42' d='M4.5 6L8 9.5 11.5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* Textarea refinement */
textarea.form-control {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* Form label refinement */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--brown);
    margin-bottom: var(--space-2);
    letter-spacing: var(--letter-spacing-wide);
}

/* Form group spacing */
.form-group {
    margin-bottom: var(--space-5);
}

/* Form hint/helper text */
.form-hint,
.form-text,
small.text-muted {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-top: var(--space-1);
    line-height: 1.4;
}

/* === Alert Polish === */

.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 0.9375rem;
    line-height: 1.5;
    border: 1px solid transparent;
}

.alert i {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-success {
    background: var(--sage-light);
    border-color: rgba(122, 155, 109, 0.3);
    color: var(--sage-dark);
}

.alert-success i {
    color: var(--sage);
}

.alert-danger,
.alert-error {
    background: var(--terracotta-light);
    border-color: rgba(196, 120, 92, 0.3);
    color: var(--terracotta-pressed);
}

.alert-danger i,
.alert-error i {
    color: var(--terracotta);
}

.alert-warning {
    background: #FEF3E2;
    border-color: rgba(196, 120, 92, 0.25);
    color: #8B5A2B;
}

.alert-warning i {
    color: #D4886C;
}

.alert-info {
    background: var(--sage-light);
    border-color: rgba(122, 155, 109, 0.25);
    color: var(--sage-dark);
}

.alert-info i {
    color: var(--sage);
}

/* === Modal Polish === */

.modal-backdrop {
    background: rgba(26, 22, 20, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-content,
.modal-dialog {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    max-width: 480px;
    width: calc(100% - var(--space-8));
    overflow: hidden;
    animation: modal-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3,
.modal-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brown);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    font-size: 1.25rem;
}

.modal-close:hover {
    background: var(--cream-dark);
    color: var(--brown);
}

.modal-body {
    padding: var(--space-6);
}

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--cream-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* === Empty State Polish === */

.empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-5);
    background: linear-gradient(135deg, var(--cream-dark), var(--cream));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-icon i {
    font-size: 2rem;
    color: var(--text-light);
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brown);
    margin: 0 0 var(--space-2);
}

.empty-state-subtitle {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 var(--space-6);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* === Loading State Polish === */

.tv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    gap: var(--space-4);
}

.tv-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cream-dark);
    border-top-color: var(--sage);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.tv-loading p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

/* === Sidebar Polish === */

.sidebar-2026 {
    background: var(--white);
    border-right: 1px solid var(--border);
    box-shadow: 1px 0 8px rgba(58, 46, 38, 0.04);
}

.sidebar-brand {
    padding: var(--space-5) var(--space-5) var(--space-4);
}

.sidebar-brand span {
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.sidebar-section-title {
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
}

.sidebar-item {
    margin: var(--space-1) var(--space-2);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.sidebar-item:hover {
    background: var(--cream-warm);
    color: var(--brown);
}

.sidebar-item.active {
    background: var(--sage-light);
    color: var(--sage-dark);
    font-weight: var(--font-weight-semibold);
}

.sidebar-item i {
    width: 20px;
    text-align: center;
    font-size: 1.125rem;
}

/* === Bottom Nav Polish === */

.bottom-nav-2026 {
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(58, 46, 38, 0.06);
}

.bottom-nav-item-2026 {
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.bottom-nav-item-2026.active {
    color: var(--sage);
}

.bottom-nav-item-2026.active i {
    color: var(--sage);
}

/* === Recipe Card Polish === */

.recipe-card-2026,
.recipe-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-card);
}

.recipe-card-2026:hover,
.recipe-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-dark);
}

.recipe-card-image {
    position: relative;
    overflow: hidden;
}

.recipe-card-image img {
    transition: transform var(--transition-slow);
}

.recipe-card-2026:hover .recipe-card-image img,
.recipe-card:hover .recipe-card-image img {
    transform: scale(1.05);
}

.recipe-card-body {
    padding: var(--space-4);
}

.recipe-card-title {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brown);
    margin: 0 0 var(--space-2);
    line-height: 1.35;
    letter-spacing: var(--letter-spacing-tight);
}

.recipe-card-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.recipe-card-meta i {
    font-size: 0.875rem;
}

/* Favorite button polish */
.recipe-favorite {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.recipe-favorite:hover {
    background: var(--white);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.recipe-favorite i {
    font-size: 1.125rem;
    color: var(--terracotta);
    transition: transform var(--transition-spring);
}

.recipe-favorite.is-favorite i,
.recipe-favorite.favorited i {
    color: var(--terracotta);
}

.recipe-favorite:active i {
    transform: scale(0.9);
}

/* === Tag Chips Polish === */

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--cream-dark);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tag-chip:hover {
    background: var(--cream);
    border-color: var(--border);
    color: var(--brown);
}

.tag-chip.active {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--white);
}

.tag-chip.active:hover {
    background: var(--sage-hover);
    border-color: var(--sage-hover);
}

.tag-count {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* === Search Bar Polish === */

.search-bar,
.search-container {
    position: relative;
}

.search-bar input,
.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--text-dark);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-inset);
}

.search-bar input:hover,
.search-input:hover {
    border-color: var(--border-dark);
}

.search-bar input:focus,
.search-input:focus {
    border-color: var(--sage);
    box-shadow: var(--shadow-inset), 0 0 0 3px rgba(122, 155, 109, 0.15);
    outline: none;
}

.search-bar i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1.125rem;
    pointer-events: none;
}

/* === Section Headers Polish === */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.section-header h2 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--brown);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    letter-spacing: var(--letter-spacing-tight);
}

.section-header h2 i {
    color: var(--sage);
    font-size: 1.25rem;
}

.see-all {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--sage);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.see-all:hover {
    color: var(--sage-dark);
}

/* === Page Headers Polish === */

.page-header,
.settings-header,
.discovery-header {
    margin-bottom: var(--space-6);
}

.page-header h1,
.settings-header h1,
.discovery-header h1 {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--brown);
    margin: 0 0 var(--space-2);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.2;
}

.page-header .text-muted,
.settings-header .text-muted {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

/* Header icon styling */
.header-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

.header-icon-small {
    width: 40px;
    height: 40px;
    background: var(--sage-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--sage);
    flex-shrink: 0;
}

/* === Settings Page Polish === */

.settings-page {
    padding: var(--space-6);
    max-width: 800px;
}

.settings-container {
    max-width: 600px;
}

.settings-page .card {
    margin-bottom: var(--space-5);
}

.settings-page .card-header-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.settings-page .card-header-row h2 {
    font-size: 1rem;
    margin: 0 0 var(--space-1);
}

.settings-page .card-header-row .text-muted {
    font-size: 0.8125rem;
    margin: 0;
}

/* Setting item row */
.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
}

.setting-item + .setting-item {
    border-top: 1px solid var(--border);
}

.setting-info {
    flex: 1;
}

.setting-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    color: var(--brown);
    margin-bottom: var(--space-1);
}

.setting-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Link list in settings */
.link-list {
    padding: var(--space-2);
}

.link-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--brown);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.link-item:hover {
    background: var(--cream-warm);
}

.link-item i:first-child {
    font-size: 1.125rem;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
}

.link-item span {
    flex: 1;
    font-size: 0.9375rem;
}

.link-item i:last-child {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* === Toggle Switch Polish === */

.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--border-dark);
    border-radius: 24px;
    transition: background var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider {
    background: var(--sage);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle input:focus-visible + .toggle-slider {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* === FAB Polish === */

.btn-fab,
.context-fab,
.cookie-fab {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    transition: all var(--transition-fast);
}

.btn-fab:hover,
.context-fab:hover,
.cookie-fab:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-modal);
}

.btn-fab:active,
.context-fab:active,
.cookie-fab:active {
    transform: scale(0.98);
}

/* === Tooltip Polish === */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: var(--space-2) var(--space-3);
    background: var(--brown);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    pointer-events: none;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

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

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: 10px;
}

.badge-primary {
    background: var(--sage);
    color: var(--white);
}

.badge-secondary {
    background: var(--cream-dark);
    color: var(--text-muted);
}

.badge-danger {
    background: var(--terracotta);
    color: var(--white);
}

/* === Divider Polish === */

.divider,
hr {
    border: none;
    height: 1px;
    background: var(--border);
    margin: var(--space-5) 0;
}

/* === Skeleton Loading Polish === */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--cream-dark) 25%,
        var(--cream) 50%,
        var(--cream-dark) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: var(--space-3);
}

.skeleton-image {
    aspect-ratio: 4/3;
}

/* === Notification Badge Polish === */

.notification-badge,
.nav-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--terracotta);
    color: var(--white);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* === Focus States Refinement === */

body.keyboard-navigation .focusable:focus-visible {
    outline: 2px solid var(--sage) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(122, 155, 109, 0.2) !important;
}

/* === Print Styles === */

@media print {
    .sidebar-2026,
    .bottom-nav-2026,
    .btn-fab,
    .cookie-fab,
    .context-fab {
        display: none !important;
    }

    .main-content-2026 {
        margin: 0 !important;
        padding: 20px !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* === Reduced Motion === */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}