/* ==========================================
   Mealiv - Calm, Modern, Premium
   Palette: Cool Greens + Warm Amber Accent
   ========================================== */

:root {
    /* Primary - Cool Muted Green */
    --green-dark: #1a4d3e;
    --green-primary: #3a7d5c;
    --green-light: #5a9d7a;
    --green-pale: #edf5f0;

    /* Accent - Warm Amber */
    --gold-dark: #b8902a;
    --gold-primary: #d4a44c;
    --gold-light: #f0d78a;
    --gold-pale: #faf3e0;

    /* Neutrals - Cool Grey-Green */
    --white: #ffffff;
    --off-white: #f8faf8;
    --gray-light: #f0f2f0;
    --gray-medium: #8a9490;
    --gray-dark: #3d4a44;
    --black: #1a2420;

    /* Semantic Colors */
    --success: #3a7d5c;
    --warning: #d4a44c;
    --danger: #d04a42;
    --info: #3a7ca5;

    /* Nutri-Score Colors */
    --grade-a: #038141;
    --grade-b: #85bb2f;
    --grade-c: #fecb02;
    --grade-d: #ee8100;
    --grade-e: #e63e11;

    /* Shadows - Layered & Modern */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.03);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.04);

    /* Transitions */
    --transition: all 0.3s ease;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ==========================================
   Dark Mode
   ========================================== */

[data-theme="dark"] {
    --green-dark: #a8d5ba;
    --green-primary: #6bbf8a;
    --green-light: #4a9d6e;
    --green-pale: rgba(58,125,92,0.12);

    --gold-dark: #f0d78a;
    --gold-primary: #e0b85c;
    --gold-light: #d4a44c;
    --gold-pale: rgba(212,164,76,0.1);

    --white: #1a1f1c;
    --off-white: #222826;
    --gray-light: #2a302d;
    --gray-medium: #8a9490;
    --gray-dark: #c8d0cc;
    --black: #e8ede9;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.2), 0 2px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.2);

    color-scheme: dark;
}

/* Dark mode glassmorphism adjustments */
[data-theme="dark"] .app-sidebar {
    background: rgba(26,31,28,0.85);
    border-right-color: rgba(107,191,138,0.08);
}

[data-theme="dark"] .app-topbar {
    background: rgba(26,31,28,0.85);
    border-bottom-color: rgba(107,191,138,0.08);
}

[data-theme="dark"] .app-bottomnav {
    background: rgba(26,31,28,0.85);
    border-top-color: rgba(107,191,138,0.08);
}

[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .sidebar-footer {
    border-color: rgba(107,191,138,0.08);
}

[data-theme="dark"] .product-card,
[data-theme="dark"] .insp-card,
[data-theme="dark"] .meal-history-card,
[data-theme="dark"] .shopping-list-card,
[data-theme="dark"] .step,
[data-theme="dark"] .auth-card {
    border-color: rgba(107,191,138,0.08);
}

[data-theme="dark"] .insp-modal-content {
    background: rgba(26,31,28,0.95);
    border-color: rgba(107,191,138,0.08);
}

[data-theme="dark"] .swal2-popup {
    background: #222826 !important;
    border-color: rgba(107,191,138,0.08) !important;
}

[data-theme="dark"] .results-nav {
    background: #1a1f1c;
}

[data-theme="dark"] .hero {
    background: #222826;
}

/* ── Comprehensive dark mode overrides ──
   Covers all pages, cards, inputs, modals, badges, etc.
   Grouped by component type for maintainability. */

/* -- Body & page-level backgrounds -- */
[data-theme="dark"] body {
    background: var(--off-white);
    color: var(--black);
}
[data-theme="dark"] .inspiration-page,
[data-theme="dark"] .shopping-helper-page,
[data-theme="dark"] .shopping-list-page,
[data-theme="dark"] .premium-page {
    background: var(--off-white);
}

/* -- Cards & containers (white bg → dark surface) -- */
[data-theme="dark"] .saved-plan-card,
[data-theme="dark"] .wizard-card,
[data-theme="dark"] .wizard-day-btn,
[data-theme="dark"] .wizard-mode-btn,
[data-theme="dark"] .planner-col-name-input,
[data-theme="dark"] .planner-header,
[data-theme="dark"] .btn-planner-action,
[data-theme="dark"] .planner-cell-filled,
[data-theme="dark"] .planner-dropdown,
[data-theme="dark"] .planner-dropdown-grid-cell.available,
[data-theme="dark"] .meal-picker-content,
[data-theme="dark"] .picker-diet-btn,
[data-theme="dark"] .picker-section-label,
[data-theme="dark"] .cookbook-card,
[data-theme="dark"] .cookbook-filter-select,
[data-theme="dark"] .cookbook-import-trigger,
[data-theme="dark"] .cookbook-import-compact,
[data-theme="dark"] .account-stat-card,
[data-theme="dark"] .account-section,
[data-theme="dark"] .nm-summary-card,
[data-theme="dark"] .nm-section,
[data-theme="dark"] .health-setup,
[data-theme="dark"] .health-today-card,
[data-theme="dark"] .product-header-full,
[data-theme="dark"] .product-search-card,
[data-theme="dark"] .sharing-options-card,
[data-theme="dark"] .recipe-editor-card,
[data-theme="dark"] .meal-instructions-section,
[data-theme="dark"] .pad-item,
[data-theme="dark"] .pad-list-container,
[data-theme="dark"] .pad-search-results,
[data-theme="dark"] .ingredient-search-results,
[data-theme="dark"] .add-to-list-modal-content,
[data-theme="dark"] .recurring-modal-content,
[data-theme="dark"] .recipe-import-preview,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .ios-install-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .add-product-section,
[data-theme="dark"] .auto-fill-content,
[data-theme="dark"] .highlight-card,
[data-theme="dark"] .premium-tier-card,
[data-theme="dark"] .meal-card,
[data-theme="dark"] .recipe-card {
    background: var(--white);
    color: var(--black);
}

/* -- Borders (light #eee / #e0e0e0 → subtle dark borders) -- */
[data-theme="dark"] .saved-plan-card,
[data-theme="dark"] .account-stat-card,
[data-theme="dark"] .account-section,
[data-theme="dark"] .nm-summary-card,
[data-theme="dark"] .nm-section,
[data-theme="dark"] .planner-cell-filled,
[data-theme="dark"] .cookbook-card,
[data-theme="dark"] .wizard-card,
[data-theme="dark"] .planner-header,
[data-theme="dark"] .meal-picker-content,
[data-theme="dark"] .health-setup,
[data-theme="dark"] .health-today-card,
[data-theme="dark"] .product-header-full,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .premium-tier-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .meal-card,
[data-theme="dark"] .recipe-card {
    border-color: rgba(107,191,138,0.1);
}

/* -- Inputs, selects, textareas -- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--gray-medium);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--green-primary);
    background: var(--white);
}
[data-theme="dark"] .pad-search,
[data-theme="dark"] .insp-search-bar input,
[data-theme="dark"] .cookbook-search input,
[data-theme="dark"] .meal-picker-search input,
[data-theme="dark"] .url-input-wrapper {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .url-input-wrapper:focus-within {
    background: var(--white);
}
[data-theme="dark"] .insp-filter-select,
[data-theme="dark"] .filter-country-select,
[data-theme="dark"] .item-unit-select {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .search-box {
    background: var(--gray-light);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .search-box input {
    background: transparent;
    color: var(--black);
}

/* -- Dropdowns -- */
[data-theme="dark"] .nav-more-dropdown,
[data-theme="dark"] .search-dropdown,
[data-theme="dark"] .hero-search-dropdown {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
    color: var(--black);
}
[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.canonical-result {
    background: var(--gray-light);
}

/* -- Buttons (secondary/neutral) -- */
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .nutrition-toggle-btn.active,
[data-theme="dark"] .btn-add-shopping-list,
[data-theme="dark"] .free-btn {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .insp-card-action-btn {
    background: var(--gray-light);
    border-color: rgba(107,191,138,0.1);
    color: var(--black);
}
[data-theme="dark"] .recipe-cancel-btn,
[data-theme="dark"] .btn-cancel {
    background: var(--gray-light);
    color: var(--black);
}

/* -- Shopping list page specifics -- */
[data-theme="dark"] .shopping-pad {
    background: var(--white);
}
[data-theme="dark"] .pad-header {
    background: linear-gradient(135deg, var(--green-dark), var(--green-primary));
}
[data-theme="dark"] .empty-section {
    background: var(--gray-light);
}
[data-theme="dark"] .section-header {
    color: var(--black);
}
[data-theme="dark"] .buy-with-panel {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .buy-seq-btn.secondary {
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] .buy-sequential-nav {
    background: var(--white);
}
[data-theme="dark"] .rp-current-item,
[data-theme="dark"] .rp-community-item,
[data-theme="dark"] .rp-fallback-area {
    background: var(--white);
}
[data-theme="dark"] .rp-btn-open-tab {
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] .sl-filter-btn {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .sl-filter-btn:hover,
[data-theme="dark"] .sl-filter-btn.active {
    background: var(--green-pale);
}
[data-theme="dark"] .pad-item.checked {
    background: var(--gray-light);
    opacity: 0.7;
}

/* -- Shopping helper page -- */
[data-theme="dark"] .sh-auto-advance,
[data-theme="dark"] .sh-item,
[data-theme="dark"] .sh-save-cancel-btn {
    background: var(--white);
    color: var(--black);
}
[data-theme="dark"] .sh-item.current {
    background: var(--green-pale);
}
[data-theme="dark"] .sh-progress-track {
    background: var(--gray-light);
}

/* -- Inspiration page -- */
[data-theme="dark"] .insp-card {
    background: var(--white);
}
[data-theme="dark"] .insp-ingredients-list li {
    background: var(--gray-light);
}
[data-theme="dark"] .insp-modal-content {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .insp-modal-meta .meta-badge {
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] .insp-modal-meta {
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .insp-modal-actions {
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .insp-instructions {
    color: var(--gray-dark);
}
[data-theme="dark"] .insp-import-banner {
    background: var(--green-pale);
}

/* -- Meal planner badges & statuses -- */
[data-theme="dark"] .plan-draft {
    background: rgba(230,81,0,0.15);
    color: #ffab40;
}
[data-theme="dark"] .plan-active {
    background: rgba(107,191,138,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .plan-completed {
    background: rgba(21,101,192,0.15);
    color: #64b5f6;
}
[data-theme="dark"] .picker-type-meal {
    background: rgba(107,191,138,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .picker-type-recipe {
    background: rgba(142,68,173,0.2);
    color: #bb86fc;
}
[data-theme="dark"] .picker-type-inspired {
    background: rgba(241,196,15,0.15);
    color: var(--gold-primary);
}
[data-theme="dark"] .import-url-status-info {
    background: rgba(43,108,176,0.15);
    color: #64b5f6;
}
[data-theme="dark"] .import-url-status-success {
    background: rgba(107,191,138,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .import-url-status-error {
    background: rgba(197,48,48,0.15);
    color: #ef9a9a;
}

/* -- Cell/grid dark mode -- */
[data-theme="dark"] .planner-cell-empty {
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .planner-cell-move,
[data-theme="dark"] .planner-cell-remove {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .planner-mealtype-label i {
    color: var(--green-primary);
}
[data-theme="dark"] .planner-mealtype-label .planner-col-name {
    color: var(--gray-light);
}
[data-theme="dark"] .planner-col-day-name {
    color: var(--gray-light);
}
[data-theme="dark"] .planner-mobile-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.12);
}
[data-theme="dark"] .planner-add-row,
[data-theme="dark"] .planner-mobile-add-btn {
    border-color: rgba(107,191,138,0.25);
    color: var(--gray-medium);
}
[data-theme="dark"] .planner-add-col {
    color: var(--gray-medium);
}
[data-theme="dark"] .planner-mobile-remove-day,
[data-theme="dark"] .planner-mobile-remove-type {
    color: var(--gray-medium);
}
[data-theme="dark"] .planner-mobile-card-header {
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .planner-mobile-day-name {
    color: var(--green-primary);
}
[data-theme="dark"] .planner-mobile-slot-type {
    color: var(--gray-light);
}

/* -- Auto-fill modal -- */
[data-theme="dark"] .auto-fill-tag,
[data-theme="dark"] .auto-fill-source,
[data-theme="dark"] .auto-fill-mode-btn,
[data-theme="dark"] .btn-auto-fill-cancel {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .auto-fill-results.auto-fill-success {
    background: rgba(107,191,138,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .auto-fill-results.auto-fill-warning {
    background: rgba(230,81,0,0.15);
    color: #ffab40;
}
[data-theme="dark"] .auto-fill-results.auto-fill-error {
    background: rgba(197,48,48,0.15);
    color: #ef9a9a;
}

/* -- Wizard cancel button -- */
[data-theme="dark"] .btn-wizard-cancel {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}

/* -- Cookbook page -- */
[data-theme="dark"] .cookbook-tab {
    color: var(--gray-dark);
}
[data-theme="dark"] .cookbook-tab.active {
    background: var(--white);
    color: var(--green-primary);
}
[data-theme="dark"] .cookbook-import-url {
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .cookbook-card-planner,
[data-theme="dark"] .cookbook-card-shopping {
    background: rgba(26,31,28,0.85);
}

/* -- Health page -- */
[data-theme="dark"] .health-setup-form .form-group input,
[data-theme="dark"] .health-setup-form .form-group select {
    border-color: rgba(107,191,138,0.15);
    background: var(--gray-light);
    color: var(--black);
}

/* -- Nutrition metrics page -- */
[data-theme="dark"] .nm-range-btn {
    background: var(--gray-light);
    color: var(--black);
}

/* -- Account page -- */
[data-theme="dark"] .account-item-card {
    border-color: rgba(107,191,138,0.08);
}
[data-theme="dark"] .account-stat-value {
    color: var(--black);
}

/* -- Product detail page -- */
[data-theme="dark"] .barcode-readonly {
    background: var(--gray-light);
}

/* -- Modals -- */
[data-theme="dark"] .scanner-modal-content {
    background: var(--white);
    color: var(--black);
}
[data-theme="dark"] .meal-picker-tab {
    color: var(--gray-dark);
}
[data-theme="dark"] .meal-picker-tab.active {
    color: var(--green-primary);
    border-color: var(--green-primary);
}
[data-theme="dark"] .modal-header {
    border-color: rgba(107,191,138,0.1);
}

/* -- Search results -- */
[data-theme="dark"] .search-result-divider {
    background: rgba(107,191,138,0.08);
}
[data-theme="dark"] .hero-dropdown-score.score-c {
    color: var(--black);
}

/* -- Misc text/detail colors -- */
[data-theme="dark"] .servings-cancel-btn,
[data-theme="dark"] .insp-search-bar input::placeholder {
    color: var(--gray-medium);
}
[data-theme="dark"] .section-subtitle {
    color: var(--gray-dark);
}

/* -- Recurring modal -- */
[data-theme="dark"] .recurring-item:hover {
    background: var(--gray-light);
}
[data-theme="dark"] .recurring-modal-footer .btn-cancel {
    background: var(--gray-light);
    color: var(--black);
}

/* -- Diet / allergen badges (use muted dark-friendly tones) -- */
[data-theme="dark"] .diet-badge {
    opacity: 0.9;
}

/* -- Auth pages -- */
[data-theme="dark"] .auth-page {
    background: var(--off-white);
}
[data-theme="dark"] .auth-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .input-with-icon input {
    background: var(--gray-light);
    color: var(--black);
    border-color: rgba(107,191,138,0.15);
}

/* -- SweetAlert2 refinements -- */
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container {
    color: var(--black) !important;
}

/* -- Table elements -- */
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: rgba(107,191,138,0.1);
    color: var(--black);
}
[data-theme="dark"] th {
    background: var(--gray-light);
}
[data-theme="dark"] tr:nth-child(even) {
    background: rgba(107,191,138,0.04);
}

/* -- Help page -- */
[data-theme="dark"] .help-page {
    background: var(--off-white);
}
[data-theme="dark"] .help-section {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}

/* -- Features page -- */
[data-theme="dark"] .features-page {
    background: var(--off-white);
}

/* -- Premium page -- */
[data-theme="dark"] .premium-tier-card {
    background: var(--white);
}

/* -- Footer -- */
[data-theme="dark"] .footer {
    background: var(--white);
    border-top: 1px solid rgba(107,191,138,0.08);
}
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer a {
    color: var(--gray-dark);
}

/* -- Legal nav -- */
[data-theme="dark"] .legal-nav {
    background: var(--white);
    border-color: rgba(107,191,138,0.08);
}
[data-theme="dark"] .legal-content {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}

/* -- Links -- */
[data-theme="dark"] a {
    color: var(--green-primary);
}
[data-theme="dark"] a:hover {
    color: var(--green-dark);
}

/* -- Search mode buttons (inspiration) -- */
[data-theme="dark"] .insp-search-mode-btn {
    border-color: rgba(107,191,138,0.2);
    color: var(--gray-dark);
    background: var(--gray-light);
}
[data-theme="dark"] .insp-search-mode-btn:hover {
    border-color: var(--green-primary);
}

/* -- Cookbook import -- */
[data-theme="dark"] .cookbook-import-url {
    border-color: rgba(107,191,138,0.15);
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] .cookbook-import-trigger {
    border-color: rgba(107,191,138,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .cookbook-import-tab {
    color: var(--gray-medium);
}
[data-theme="dark"] .cookbook-import-tab.active {
    color: var(--green-primary);
}
[data-theme="dark"] .cookbook-import-tabs {
    border-bottom-color: rgba(107,191,138,0.1);
}

/* -- Select option elements -- */
[data-theme="dark"] option {
    background: var(--white);
    color: var(--black);
}

/* -- Meal detail: servings, allergens, diet tags -- */
[data-theme="dark"] .allergen-tag {
    background: rgba(220,53,69,0.12);
    color: #ef9a9a;
    border-color: rgba(220,53,69,0.2);
}

/* -- Sharing modal -- */
[data-theme="dark"] .sharing-link-box {
    background: var(--gray-light);
    border-color: rgba(107,191,138,0.15);
    color: var(--black);
}

/* -- Meal builder: ingredient search input -- */
[data-theme="dark"] .ingredient-search-results {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .ingredient-search-results .search-result-item:hover {
    background: var(--gray-light);
}

/* -- Wizard checkbox & day buttons -- */
[data-theme="dark"] .wizard-checkbox-label {
    border-color: rgba(107,191,138,0.2);
    color: var(--black);
}
[data-theme="dark"] .wizard-date-input {
    border-color: rgba(107,191,138,0.2);
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] .wizard-day-input {
    border-color: rgba(107,191,138,0.2);
    color: var(--black);
    background: var(--gray-light);
}
[data-theme="dark"] .wizard-mode-toggle {
    border-color: rgba(107,191,138,0.2);
}

/* -- My shopping lists cards -- */
[data-theme="dark"] .shopping-list-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}

/* -- Cookie consent banner -- */
[data-theme="dark"] .cookie-banner {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
    color: var(--black);
}

/* -- General card-like elements missing -- */
[data-theme="dark"] .recipe-detail-container {
    color: var(--black);
}
[data-theme="dark"] .recipe-info-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}

/* -- Nutrition report modal -- */
[data-theme="dark"] .nutrition-report-content {
    background: var(--off-white);
}
[data-theme="dark"] .nutrition-report-header {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .btn-report-print {
    background: var(--gray-light);
    border-color: rgba(107,191,138,0.15);
    color: var(--gray-dark);
}
[data-theme="dark"] .report-section {
    background: var(--white);
}
[data-theme="dark"] .report-stat-card {
    background: var(--gray-light);
}
[data-theme="dark"] .report-meal-item {
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] a.report-meal-item:hover {
    background: var(--green-pale);
}
[data-theme="dark"] .report-day-header {
    background: var(--gray-light);
}
[data-theme="dark"] .report-day-header:hover {
    background: rgba(107,191,138,0.1);
}
[data-theme="dark"] .report-day-section {
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .report-diet-card {
    background: var(--gray-light);
}
[data-theme="dark"] .report-diet-card.diet-pass {
    background: rgba(16,185,129,0.1);
    border-color: #10b981;
}

/* -- Dark mode: themed tables -- */
[data-theme="dark"] .ingredient-breakdown-table,
[data-theme="dark"] .nm-table-wrap {
    border-color: rgba(107, 191, 138, 0.1);
}

[data-theme="dark"] .ingredient-breakdown-table th,
[data-theme="dark"] .report-day-table thead th,
[data-theme="dark"] .nm-table th {
    background: rgba(107, 191, 138, 0.08);
    border-bottom-color: rgba(107, 191, 138, 0.15);
}

[data-theme="dark"] .ingredient-breakdown-table tbody tr:nth-child(even),
[data-theme="dark"] .report-day-table tbody tr:nth-child(even),
[data-theme="dark"] .nm-table tbody tr:nth-child(even) {
    background: rgba(107, 191, 138, 0.04);
}

[data-theme="dark"] .ingredient-breakdown-table tbody tr:hover,
[data-theme="dark"] .report-day-table tbody tr:hover,
[data-theme="dark"] .nm-table tbody tr:hover {
    background: rgba(107, 191, 138, 0.08);
}

[data-theme="dark"] .ingredient-breakdown-table tr.totals-row,
[data-theme="dark"] .nm-table tfoot td {
    background: rgba(107, 191, 138, 0.08);
}

/* -- Nutrition cards (shared macro display) -- */
[data-theme="dark"] .nutrition-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}

/* -- Meal builder page -- */
[data-theme="dark"] .meal-page {
    background: var(--off-white);
}
[data-theme="dark"] .meal-builder-container,
[data-theme="dark"] .meal-detail-container {
    color: var(--black);
}
[data-theme="dark"] .meal-builder-header h1 {
    color: var(--green-dark);
}
[data-theme="dark"] .meal-info-card,
[data-theme="dark"] .meal-ingredients-card,
[data-theme="dark"] .nutrition-summary-card,
[data-theme="dark"] .allergens-summary-card,
[data-theme="dark"] .traces-summary-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .ingredient-amount,
[data-theme="dark"] .ingredient-unit,
[data-theme="dark"] .ingredient-name {
    background: var(--white);
    border-color: rgba(107,191,138,0.15);
    color: var(--black);
}
[data-theme="dark"] .ingredient-remove:hover {
    background: rgba(192,57,43,0.15);
}
[data-theme="dark"] .add-ingredient-btn {
    border-color: rgba(107,191,138,0.25);
    color: var(--green-primary);
}
[data-theme="dark"] .add-ingredient-btn:hover {
    background: rgba(107,191,138,0.08);
}
[data-theme="dark"] .meal-detail-item-icon.ingredient-item-icon {
    background: rgba(230,126,34,0.15);
}
[data-theme="dark"] .meal-detail-item,
[data-theme="dark"] .meal-item-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .recipe-editor-toolbar {
    background: var(--gray-light);
    border-color: rgba(107,191,138,0.15);
}
[data-theme="dark"] .toolbar-divider {
    background: rgba(107,191,138,0.2);
}
[data-theme="dark"] .recipe-editor-content {
    background: var(--white);
    border-color: rgba(107,191,138,0.15);
    color: var(--black);
}
[data-theme="dark"] .btn-import-recipe {
    color: var(--black);
}
[data-theme="dark"] .summary-item .summary-value {
    color: var(--black);
}
[data-theme="dark"] .summary-item .summary-label {
    color: var(--gray-medium);
}
[data-theme="dark"] .no-allergens,
[data-theme="dark"] .no-traces {
    color: var(--gray-medium);
}
[data-theme="dark"] .share-label strong {
    color: var(--black);
}
[data-theme="dark"] .share-label small {
    color: var(--gray-medium);
}
[data-theme="dark"] .empty-meal-message {
    color: var(--gray-medium);
}
[data-theme="dark"] .empty-meal-message i {
    color: var(--gray-medium);
}

/* -- My meals page -- */
[data-theme="dark"] .meal-history-card {
    background: var(--white);
}

/* -- Product detail -- */
[data-theme="dark"] .nutrition-table th,
[data-theme="dark"] .nutrition-table td {
    border-color: rgba(107,191,138,0.1);
}
[data-theme="dark"] .nutrition-table th {
    background: var(--gray-light);
}

/* -- Results page cards -- */
[data-theme="dark"] .product-card {
    background: var(--white);
}

/* -- Search dropdown items -- */
[data-theme="dark"] .search-dropdown-item:hover,
[data-theme="dark"] .hero-dropdown-item:hover {
    background: var(--gray-light);
}

/* -- How it works / about / footer (home page) -- */
[data-theme="dark"] .how-it-works {
    background: var(--off-white);
}
[data-theme="dark"] .know-your-fuel {
    background: var(--off-white);
}
[data-theme="dark"] .know-your-fuel h2 {
    color: var(--gray-dark);
}
[data-theme="dark"] .know-your-fuel h2 i {
    color: #e07b2a;
}
[data-theme="dark"] .highlight-fuel {
    color: #d4922e;
}
[data-theme="dark"] .know-your-fuel p {
    color: var(--gray-medium);
}
[data-theme="dark"] .fuel-tag {
    background: rgba(64, 145, 108, 0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .import-recipes {
    background: var(--off-white);
}
[data-theme="dark"] .import-card {
    background: var(--white);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .import-card h3 {
    color: var(--gray-dark);
}
[data-theme="dark"] .import-card p {
    color: var(--gray-medium);
}
[data-theme="dark"] .import-recipes h2 {
    color: var(--gray-dark);
}
[data-theme="dark"] .walkthrough {
    background: var(--off-white);
}
[data-theme="dark"] .walkthrough h2 {
    color: var(--gray-dark);
}
[data-theme="dark"] .walkthrough .section-subtitle {
    color: var(--gray-medium);
}
[data-theme="dark"] .timeline::before {
    opacity: 0.5;
}
[data-theme="dark"] .timeline-card {
    background: var(--white);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .timeline-card h3 {
    color: var(--gray-dark);
}
[data-theme="dark"] .timeline-card p {
    color: var(--gray-medium);
}
[data-theme="dark"] .timeline-dot {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .badge-free {
    background: rgba(64,145,108,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .about {
    background: var(--white);
}
[data-theme="dark"] .about-content h2,
[data-theme="dark"] .about p {
    color: var(--gray-dark);
}
[data-theme="dark"] .about .highlight {
    color: var(--green-primary);
}
[data-theme="dark"] .step {
    background: var(--white);
}
[data-theme="dark"] .badge {
    background: var(--green-pale);
    color: var(--green-primary);
}

/* -- Hero tool cards (home page) -- */
[data-theme="dark"] .hero-tool-card {
    background: var(--white);
    color: var(--black);
}
[data-theme="dark"] .hero-tool-card:hover {
    background: var(--green-pale);
}

/* -- Country selector & barcode btn -- */
[data-theme="dark"] .country-filter-select {
    background: var(--gray-light);
    color: var(--black);
}
[data-theme="dark"] .scan-barcode-btn {
    background: var(--gray-light);
    color: var(--black);
}

/* -- Search suggestions -- */
[data-theme="dark"] .search-suggestions {
    color: var(--gray-medium);
}
[data-theme="dark"] .search-suggestions .suggestion {
    background: rgba(107,191,138,0.1);
    color: var(--gray-dark);
}
[data-theme="dark"] .search-suggestions .suggestion:hover {
    background: rgba(107,191,138,0.2);
}

/* -- Generic section headings -- */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
    color: var(--black);
}
[data-theme="dark"] .highlight {
    color: var(--green-primary);
}

/* -- Videos section -- */
[data-theme="dark"] .video-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.1);
}

/* -- Shopping list: pad gradient & item backgrounds -- */
[data-theme="dark"] .shopping-list-page {
    background: var(--off-white);
}
[data-theme="dark"] .shopping-pad {
    background: var(--dark-card);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .pad-header {
    background: linear-gradient(135deg, #1a3a2e, var(--green-light));
    color: white;
}
[data-theme="dark"] .pad-date-input,
[data-theme="dark"] .pad-action-btn {
    background: rgba(255,255,255,0.12);
    color: white;
    border-color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .empty-section {
    background: var(--gray-light);
}

/* -- Catch-all: force text readability on dark surfaces.
   Elements with hardcoded #333, #444, #555, #666 text become invisible
   on dark backgrounds. This ensures they inherit the theme color. -- */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] dt,
[data-theme="dark"] dd,
[data-theme="dark"] figcaption,
[data-theme="dark"] blockquote {
    color: inherit;
}
[data-theme="dark"] .recipe-instructions,
[data-theme="dark"] .insp-instructions,
[data-theme="dark"] .insp-modal-meta .meta-badge,
[data-theme="dark"] .recipe-editor-card [contenteditable],
[data-theme="dark"] .recipe-ing-edit-row input {
    color: var(--black);
}
[data-theme="dark"] .insp-modal-meta .meta-badge,
[data-theme="dark"] .cookbook-card-meta span {
    background: var(--gray-light);
    color: var(--gray-dark);
}
[data-theme="dark"] .recipe-ing-edit-row input {
    background: var(--gray-light);
    border-color: rgba(107,191,138,0.15);
}

/* -- Scrollbars -- */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--off-white);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-medium);
}

/* ==========================================
   Scroll Reveal (replaces AOS library)
   ========================================== */

[data-aos] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================
   View Transitions (cross-document, MPA)
   ========================================== */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vt-fade-out 0.15s ease-out;
}

::view-transition-new(root) {
    animation: vt-fade-in 0.2s ease-in;
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Keep sidebar/topbar stable during transitions */
.app-sidebar { view-transition-name: sidebar; }
.app-topbar  { view-transition-name: topbar; }
.app-bottomnav { view-transition-name: bottomnav; }

::view-transition-old(sidebar),
::view-transition-new(sidebar),
::view-transition-old(topbar),
::view-transition-new(topbar),
::view-transition-old(bottomnav),
::view-transition-new(bottomnav) {
    animation: none;
}

/* ==========================================
   Base Styles
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
}

.hidden {
    display: none !important;
}

/* ==========================================
   Navigation
   ========================================== */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    position: absolute;
    width: 100%;
    z-index: 100;
    min-height: 70px;
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    flex-shrink: 0;
}

.logo i {
    color: var(--gold-light);
    font-size: 1.8rem;
}

/* Brand logo image (PWA noodle bowl icon) */
.brand-logo-img,
.brand-logo-svg {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.logo .brand-logo-img,
.logo .brand-logo-svg {
    width: 32px;
    height: 32px;
}

/* Health logo — replaces Mealiv logo on health page */
.logo.logo-health {
    opacity: 1;
}

.logo.logo-health i {
    color: #ff6b6b;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.5rem;
    flex-shrink: 1;
    min-width: 0;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.nav-links a:hover {
    background: rgba(255,255,255,0.2);
    color: var(--gold-light);
}

/* Nav "Pro Tools" Dropdown */
.nav-more {
    position: relative;
}

.nav-more-btn {
    color: #fff;
    background: #f97316;
    border: 1px solid #ea580c;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-more-btn .fa-kitchen-set {
    font-size: 0.85em;
}

.nav-more-btn:hover {
    background: #ea580c;
    color: #fff;
    border-color: #c2410c;
}

.nav-more.open .nav-more-btn {
    background: #ea580c;
    color: #fff;
    border-color: #c2410c;
}

.nav-more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    min-width: 200px;
    padding: 0.5rem 0;
    z-index: 1000;
    animation: navDropDown 0.2s ease-out;
}

.nav-more.open .nav-more-dropdown {
    display: flex;
    flex-direction: column;
}

@keyframes navDropDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-more-dropdown .nav-link {
    color: var(--gray-dark) !important;
    padding: 0.65rem 1.25rem;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.nav-more-dropdown .nav-link:hover {
    background: var(--green-pale) !important;
    color: var(--green-dark) !important;
}

.nav-more-dropdown .nav-link i {
    width: 18px;
    text-align: center;
    color: var(--green-primary);
}


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

.hero {
    min-height: 100vh;
    background: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    position: relative;
    overflow: visible;
    padding: 0 5%;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,95,2,0.90) 0%, rgba(66,122,67,0.88) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding-top: 15vh;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.highlight {
    color: var(--gold-light);
}

.tagline {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   Search Box
   ========================================== */

.search-container {
    margin-bottom: 3rem;
}

.search-box {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 0.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(58,125,92,0.08);
    max-width: 600px;
    margin: 0 auto;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.search-box:focus-within {
    box-shadow: var(--shadow-lg);
    border-color: rgba(58,125,92,0.2);
}

.search-icon {
    padding: 0 1rem;
    color: var(--gray-medium);
    font-size: 1.2rem;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    font-family: inherit;
    padding: 0.8rem 0;
    background: transparent;
}

.search-box input::placeholder {
    color: var(--gray-medium);
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--green-primary);
    color: var(--white);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-xl);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.search-btn:hover {
    background: var(--green-dark);
    box-shadow: 0 4px 14px rgba(58,125,92,0.3);
    transform: translateX(3px);
}

/* Hero Search Wrapper & Instant Dropdown */
.hero-search-wrapper {
    position: relative;
    flex: 1;
    z-index: 100;
}

.hero-search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1100;
}

.hero-search-dropdown.hidden {
    display: none;
}

.hero-dropdown-loading,
.hero-dropdown-empty {
    padding: 1.25rem;
    text-align: center;
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.hero-dropdown-section {
    padding: 0.5rem 0;
}

.hero-dropdown-section:not(:last-child) {
    border-bottom: 1px solid var(--gray-light);
}

.hero-dropdown-label {
    display: block;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-medium);
}

.hero-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    cursor: pointer;
}

.hero-dropdown-item:hover {
    background: var(--green-pale);
}

.hero-dropdown-img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-medium);
    font-size: 1rem;
}

.hero-dropdown-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-dropdown-info {
    flex: 1;
    min-width: 0;
}

.hero-dropdown-name {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-dropdown-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-dropdown-score {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    color: white;
    flex-shrink: 0;
}

.hero-dropdown-score.score-a { background: #1e8a3e; }
.hero-dropdown-score.score-b { background: #7cb342; }
.hero-dropdown-score.score-c { background: #fbc02d; color: #333; }
.hero-dropdown-score.score-d { background: #f57c00; }
.hero-dropdown-score.score-e { background: #e53935; }

.hero-dropdown-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--green-primary);
    border-top: 1px solid var(--gray-light);
    transition: background 0.15s;
}

.hero-dropdown-all:hover {
    background: var(--green-pale);
    border-radius: 0 0 16px 16px;
}

/* Country Selector */
.country-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.country-selector i {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

.country-flag-icon {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    height: 20px;
}

.country-flag-icon img {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.country-filter-select {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.country-filter-select option {
    background: var(--white);
    color: var(--gray-dark);
}

.hero-country .country-filter-select {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
}

/* Search Filters Bar */
.search-filters {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
    overflow-x: auto;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-medium);
    white-space: nowrap;
}

.filter-btn {
    padding: 0.35rem 0.7rem;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-dark);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.filter-btn.active {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

.filter-btn.score-a { border-color: #1e8f4e; }
.filter-btn.score-a.active { background: #1e8f4e; border-color: #1e8f4e; }
.filter-btn.score-b { border-color: #60ac0e; }
.filter-btn.score-b.active { background: #60ac0e; border-color: #60ac0e; }
.filter-btn.score-c { border-color: #f0c31e; color: #8a7000; }
.filter-btn.score-c.active { background: #f0c31e; border-color: #f0c31e; color: white; }

.filter-sort-select,
.filter-country-select {
    padding: 0.35rem 0.7rem;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-dark);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
}

.filter-country-select {
    color: var(--gray-dark);
    background: var(--white);
}

.no-filter-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-medium);
}

.no-filter-results i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}

@media (max-width: 600px) {
    .search-filters {
        gap: 0.5rem;
        padding: 0.75rem 0;
    }

    .filter-group {
        gap: 0.3rem;
    }

    .hero-country .country-filter-select {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

/* Barcode Scan Buttons */
.scan-barcode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-primary);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.scan-barcode-btn:hover {
    background: var(--green-dark);
    transform: scale(1.05);
}

/* Hero search with barcode */
.search-with-barcode {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.search-with-barcode .search-box {
    flex: 1;
}

.search-with-barcode .scan-barcode-btn {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.4rem;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}

/* Inline scan button inside search box — hidden on desktop, shown on mobile */
.search-scan-inline {
    display: none;
}

/* Nav search with barcode */
.nav-search-with-barcode {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 500px;
}

.nav-search-with-barcode .nav-search {
    flex: 1;
}

.nav-barcode-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 1rem;
}

/* Inline barcode button (meal builder, shopping list) */
.search-with-barcode-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

.search-with-barcode-inline .search-input-wrapper,
.search-with-barcode-inline .pad-search {
    flex: 1;
}

.inline-barcode-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.1rem;
}

/* Old scan-btn kept for backwards compat */
.scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-primary);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.scan-btn:hover {
    background: var(--green-dark);
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .nav-search-with-barcode {
        max-width: none;
    }

    .nav-barcode-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .search-with-barcode .scan-barcode-btn {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* Share Handler Page */
.share-handler {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: var(--bg-primary, #f8faf8);
}

.share-card {
    background: var(--white, #fff);
    border-radius: var(--radius-lg, 16px);
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.share-logo {
    margin-bottom: 1.5rem;
}

.share-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--green-dark, #1a4d3e);
}

.share-status.hidden {
    display: none;
}

.share-status i {
    color: var(--green-primary, #3a7d5c);
    font-size: 1.2rem;
}

.share-url-preview {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--gray-dark, #666);
    word-break: break-all;
    opacity: 0.7;
}

.share-url-preview:empty {
    display: none;
}

.share-error {
    margin-top: 1rem;
}

.share-error p {
    color: var(--gray-dark, #666);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.share-actions {
    display: flex;
    justify-content: center;
}

.share-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

[data-theme="dark"] .share-card {
    background: var(--dark-card, #1e1e1e);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .share-status {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .share-error p {
    color: rgba(255, 255, 255, 0.6);
}

/* Barcode Scanner Modal */
.scanner-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.scanner-modal-content {
    background: var(--white);
    border-radius: 16px;
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
    color: white;
}

.scanner-header h2 {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scanner-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.scanner-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.scanner-close-btn:active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0.95);
}

.scanner-body {
    padding: 1.5rem;
    text-align: center;
}

#scannerViewfinder {
    width: 100%;
    min-height: 280px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

#scannerViewfinder video {
    width: 100%;
    height: auto;
}

.scanner-instructions {
    color: var(--gray-dark);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.scanner-status {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--gray-light);
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.scanner-status.success {
    background: var(--green-pale);
    color: var(--green-dark);
}

.scanner-status.error {
    background: #ffebee;
    color: #c62828;
}

.scanner-status.warning {
    background: var(--gold-pale);
    color: var(--gold-dark);
}

.scanner-status i {
    margin-right: 0.5rem;
}

.scanner-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-light);
    display: flex;
    justify-content: center;
}

.scanner-footer .btn-secondary {
    background: var(--gray-light);
    color: var(--gray-dark);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    min-height: 44px;
}

.scanner-footer .btn-secondary:hover {
    background: var(--gray-medium);
    color: white;
}

.scanner-footer .btn-secondary:active {
    transform: scale(0.98);
}

.search-suggestions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.search-suggestions span {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
}

.suggestion {
    background: rgba(255,255,255,0.2);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: var(--transition);
}

.suggestion:hover {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
}

/* ==========================================
   Hero Stats
   ========================================== */

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.stat {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat i {
    font-size: 2.5rem;
    color: var(--gold-light);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white);
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
}

/* ==========================================
   Hero Quick Tools Grid
   ========================================== */

.hero-tools {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-bottom: 1rem;
}

.hero-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 100px;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), background 0.25s, box-shadow 0.25s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-tool-card i {
    font-size: 1.5rem;
    color: var(--gold-light);
    transition: var(--transition);
}

.hero-tool-card:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.hero-tool-card:hover i {
    transform: scale(1.15);
}

.hero-tool-premium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.1));
    border-color: rgba(245, 158, 11, 0.5);
}

.hero-tool-premium i {
    color: #fbbf24;
}

.hero-tool-premium:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(245, 158, 11, 0.2));
    border-color: rgba(245, 158, 11, 0.7);
}

.account-action-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
}

.account-action-premium:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
}

/* ==========================================
   Features Section
   ========================================== */

.features {
    padding: 6rem 5%;
    background: var(--off-white);
}

.features h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--green-dark);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid transparent;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-light);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--green-pale) 0%, var(--gold-pale) 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-icon i {
    font-size: 1.5rem;
    color: var(--green-primary);
}

.feature-card h3 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--gray-dark);
    font-size: 0.95rem;
}

/* ==========================================
   How It Works Section
   ========================================== */

.how-it-works {
    padding: 6rem 5%;
    background: var(--white);
}

.how-it-works h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--green-dark);
}

.section-subtitle {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem;
    color: var(--gray-dark);
    font-size: 1.2rem;
    line-height: 1.7;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.step {
    text-align: center;
    position: relative;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid rgba(58,125,92,0.06);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
}

.step:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.step-number {
    position: absolute;
    top: -15px;
    right: calc(50% - 15px);
    background: var(--gold-primary);
    color: var(--white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--green-light) 0%, var(--green-primary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}

.step-icon i {
    font-size: 2rem;
    color: var(--white);
}

/* Step icon colour variants */
.step-icon.icon-orange { background: linear-gradient(135deg, #e76f51, #f4a261); }
.step-icon.icon-teal   { background: linear-gradient(135deg, #264653, #2a9d8f); }
.step-icon.icon-green  { background: linear-gradient(135deg, #2d6a4f, #40916c); }
.step-icon.icon-blue   { background: linear-gradient(135deg, #457b9d, #74b3ce); }
.step-icon.icon-purple { background: linear-gradient(135deg, #6a4c93, #9d7cc0); }
.step-icon.icon-rose   { background: linear-gradient(135deg, #bc6c25, #dda15e); }

.step h3 {
    color: var(--green-dark);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.step p {
    color: var(--gray-dark);
    font-size: 1rem;
    line-height: 1.6;
}

/* Clickable steps */
a.step-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

a.step-link:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

/* Center last tile when alone on its row (7 items in 3-col grid) */
.steps-grid > .step:last-child:nth-child(3n+1) {
    grid-column: 2;
}

@media (max-width: 900px) and (min-width: 769px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   Import Recipes Section
   ========================================== */
.import-recipes {
    padding: 4rem 5%;
    background: var(--off-white);
    text-align: center;
}
.import-recipes h2 {
    font-size: 2.3rem;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
}
.import-recipes h2 .highlight {
    color: #c48a1a;
}
.import-recipes .section-subtitle {
    max-width: 650px;
    margin: 0 auto 2.5rem;
    color: var(--gray-medium);
    font-size: 1.05rem;
    line-height: 1.6;
}
.import-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}
.import-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,125,92,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.import-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.import-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--green-light), var(--green-primary));
}
.import-icon i {
    font-size: 1.4rem;
    color: white;
}
.import-icon.icon-teal {
    background: linear-gradient(135deg, #2a9d8f, #21867a);
}
.import-icon.icon-orange {
    background: linear-gradient(135deg, #f4a261, #e07b2a);
}
.import-icon.icon-green {
    background: linear-gradient(135deg, var(--green-light), var(--green-primary));
}
.import-card h3 {
    font-size: 1.2rem;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.import-card p {
    font-size: 0.95rem;
    color: var(--gray-medium);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 768px) {
    .import-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .import-recipes h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================
   Import Page (import.html)
   ========================================== */
.import-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    padding-top: calc(80px + 2rem);
}
.import-page-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.import-page-header h1 {
    font-size: 2.2rem;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
}
.import-page-header h1 i {
    color: var(--gold-primary);
    margin-right: 0.5rem;
}
.import-page-intro {
    color: var(--gray-medium);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}
.import-page-intro a {
    color: var(--green-primary);
    font-weight: 600;
    text-decoration: none;
}
.import-page-intro a:hover {
    text-decoration: underline;
}
.import-page-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.import-page-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,125,92,0.06);
}
.import-page-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.import-page-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--green-light), var(--green-primary));
}
.import-page-icon i {
    font-size: 1.2rem;
    color: white;
}
.import-page-icon.icon-teal {
    background: linear-gradient(135deg, #2a9d8f, #21867a);
}
.import-page-icon.icon-orange {
    background: linear-gradient(135deg, #f4a261, #e07b2a);
}
.import-page-icon.icon-green {
    background: linear-gradient(135deg, var(--green-light), var(--green-primary));
}
.import-page-card-header h2 {
    font-size: 1.15rem;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
    font-weight: 700;
}
.import-page-card-desc {
    color: var(--gray-medium);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}
.import-page-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* URL import row */
.import-url-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-light);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.import-url-row:focus-within {
    border-color: var(--green-primary);
}
.import-url-row i.fa-globe {
    color: var(--gray-medium);
    font-size: 1rem;
}
.import-url-row input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--black);
    outline: none;
    padding: 0.5rem 0;
}
.import-url-row input::placeholder {
    color: var(--gray-medium);
}

/* Action button (shared) */
.btn-import-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--green-primary);
    color: white;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.btn-import-action:hover:not(:disabled) {
    background: var(--green-dark);
    transform: translateY(-1px);
}
.btn-import-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Status messages */
.import-page-status {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}
.import-page-status.info {
    background: rgba(43,108,176,0.1);
    color: #2b6cb0;
}
.import-page-status.success {
    background: rgba(56,161,105,0.1);
    color: #276749;
}
.import-page-status.success a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
.import-page-status.error {
    background: rgba(197,48,48,0.1);
    color: #c53030;
}
.import-page-help-error {
    color: #c53030;
    font-size: 0.9rem;
}
.import-page-matching {
    color: var(--gray-medium);
    font-size: 0.9rem;
}

/* Bookmark tabs */
.import-bookmark-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.import-bm-tab {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--gray-light);
    color: var(--gray-medium);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.import-bm-tab.active {
    background: var(--green-primary);
    color: white;
}
.import-bm-tab:not(.active):hover {
    background: var(--green-pale);
    color: var(--green-dark);
}

/* File drop zone */
.import-file-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    border: 2px dashed var(--gray-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--gray-medium);
    text-align: center;
    font-size: 0.9rem;
}
.import-file-drop i {
    font-size: 1.8rem;
    color: var(--green-primary);
}
.import-file-drop:hover,
.import-file-drop.drag-over {
    border-color: var(--green-primary);
    background: var(--green-pale);
}

/* Paste textarea */
.import-page-card-body textarea {
    width: 100%;
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    color: var(--black);
    background: var(--white);
    transition: border-color 0.2s;
}
.import-page-card-body textarea:focus {
    outline: none;
    border-color: var(--green-primary);
}
.import-page-card-body textarea::placeholder {
    color: var(--gray-medium);
}

/* Receipt results */
.receipt-matched-header,
.receipt-unmatched-header {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.receipt-matched-header {
    color: var(--green-dark);
}
.receipt-unmatched-header {
    color: var(--gray-medium);
}
.receipt-matched-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}
.receipt-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.receipt-item:hover {
    background: var(--green-pale);
}
.receipt-item-name {
    font-size: 0.92rem;
    color: var(--black);
}
.receipt-brand {
    color: var(--gray-medium);
    font-size: 0.8rem;
}
.receipt-unmatched-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.receipt-unmatched-item {
    padding: 0.3rem 0.7rem;
    background: var(--gray-light);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--gray-medium);
}

/* Dark mode overrides */
[data-theme="dark"] .import-page-card {
    background: var(--white);
    border-color: rgba(107,191,138,0.08);
}
[data-theme="dark"] .import-page-status.info {
    background: rgba(43,108,176,0.15);
    color: #64b5f6;
}
[data-theme="dark"] .import-page-status.success {
    background: rgba(107,191,138,0.15);
    color: var(--green-primary);
}
[data-theme="dark"] .import-page-status.error {
    background: rgba(197,48,48,0.15);
    color: #ef9a9a;
}
[data-theme="dark"] .import-page-help-error {
    color: #ef9a9a;
}
[data-theme="dark"] .import-url-row {
    background: var(--gray-light);
    border-color: transparent;
}
[data-theme="dark"] .import-url-row:focus-within {
    border-color: var(--green-primary);
}
[data-theme="dark"] .import-file-drop {
    border-color: rgba(107,191,138,0.3);
}
[data-theme="dark"] .import-file-drop:hover,
[data-theme="dark"] .import-file-drop.drag-over {
    border-color: var(--green-primary);
    background: rgba(107,191,138,0.08);
}

@media (max-width: 768px) {
    .import-page-container {
        padding: 1rem;
        padding-top: calc(80px + 1rem);
    }
    .import-page-header h1 {
        font-size: 1.6rem;
    }
    .import-page-card-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .import-url-row {
        flex-wrap: wrap;
    }
    .import-url-row input {
        min-width: 0;
    }
}

/* ==========================================
   About Section
   ========================================== */

/* Know Your Fuel section */
.know-your-fuel {
    padding: 3.5rem 5%;
    background: var(--white);
    text-align: center;
}

.fuel-content {
    max-width: 750px;
    margin: 0 auto;
}

.know-your-fuel h2 {
    font-size: 2.3rem;
    color: var(--gray-dark);
    margin-bottom: 1rem;
}

.know-your-fuel h2 i {
    color: #e07b2a;
    margin-right: 0.4rem;
}

.highlight-fuel {
    color: #c07d1a;
}

.know-your-fuel p {
    font-size: 1.15rem;
    color: var(--gray-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.fuel-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.fuel-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--green-pale);
    color: var(--green-dark);
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
}

.fuel-tag i {
    font-size: 0.8rem;
    color: var(--green-primary);
}

/* ── Walkthrough Timeline ── */
.walkthrough {
    padding: 4rem 5%;
    background: var(--off-white);
    text-align: center;
}
.walkthrough h2 {
    font-size: 2.3rem;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
}
.walkthrough h2 .highlight {
    color: #c48a1a;
}
.walkthrough .section-subtitle {
    max-width: 650px;
    margin: 0 auto 3rem;
    color: var(--gray-medium);
    font-size: 1.1rem;
    line-height: 1.7;
}
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--green-primary), var(--gold-primary));
    transform: translateX(-50%);
}
.timeline-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    position: relative;
}
.timeline-step:last-child { margin-bottom: 0; }
.timeline-left { justify-content: flex-start; padding-right: calc(50% + 2rem); }
.timeline-right { justify-content: flex-end; padding-left: calc(50% + 2rem); }
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 1.5rem;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gold-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.timeline-dot span {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}
.timeline-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,125,92,0.06);
    text-align: left;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
}
.timeline-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.timeline-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-light), var(--green-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}
.timeline-icon i { font-size: 1.4rem; color: white; }
.timeline-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.badge-free {
    background: var(--green-pale);
    color: var(--green-dark);
}
.badge-pro {
    background: linear-gradient(135deg, #f4a261, #e07b2a);
    color: white;
}
.badge-pro i { font-size: 0.6rem; margin-right: 0.2rem; }
.timeline-card h3 {
    font-size: 1.35rem;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.timeline-card p {
    font-size: 1rem;
    color: var(--gray-medium);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.timeline-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--green-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.timeline-cta:hover { gap: 0.7rem; }
.timeline-cta i { font-size: 0.75rem; }

/* Walkthrough responsive — tablet */
@media (max-width: 900px) {
    .timeline::before { left: 24px; }
    .timeline-dot { left: 24px; }
    .timeline-left,
    .timeline-right {
        padding-left: 60px;
        padding-right: 0;
        justify-content: flex-start;
    }
}

/* Walkthrough responsive — mobile */
@media (max-width: 600px) {
    .walkthrough { padding: 2.5rem 4%; }
    .walkthrough h2 { font-size: 1.5rem; }
    .walkthrough .section-subtitle { font-size: 0.9rem; margin-bottom: 2rem; }
    .timeline::before { left: 20px; }
    .timeline-dot { left: 20px; width: 30px; height: 30px; }
    .timeline-dot span { font-size: 0.8rem; }
    .timeline-left,
    .timeline-right {
        padding-left: 50px;
        padding-right: 0;
    }
    .timeline-card { padding: 1.2rem; }
    .timeline-card h3 { font-size: 1.05rem; }
    .timeline-card p { font-size: 0.85rem; }
}

.about {
    padding: 6rem 5%;
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about h2 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 1.5rem;
}

.about p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.about-badges {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.15);
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    color: var(--white);
}

.badge i {
    color: var(--gold-light);
}

/* ==========================================
   Footer
   ========================================== */

.footer {
    background: var(--black);
    padding: 3rem 5%;
    text-align: center;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
}

.footer-logo i {
    color: var(--gold-light);
}

.footer-logo .brand-logo-img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}

.footer p {
    color: var(--gray-medium);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* SweetAlert2 Theme Override */
.swal2-popup {
    font-family: 'Poppins', sans-serif !important;
    border-radius: var(--radius-xl) !important;
    padding: 2rem !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(58,125,92,0.06) !important;
}

.swal2-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--gray-dark) !important;
}

.swal2-html-container {
    font-size: 0.9rem !important;
    color: var(--gray-medium) !important;
    line-height: 1.6 !important;
}

.swal2-confirm {
    border-radius: var(--radius-md) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.65rem 1.5rem !important;
    min-height: 42px !important;
    background: var(--green-primary) !important;
    border: none !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}

.swal2-confirm:hover {
    background: var(--green-dark) !important;
    box-shadow: 0 4px 14px rgba(58,125,92,0.3) !important;
}

.swal2-cancel {
    border-radius: var(--radius-md) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.65rem 1.5rem !important;
    min-height: 42px !important;
    background: var(--gray-light) !important;
    color: var(--gray-dark) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

.swal2-cancel:hover {
    background: #e8eae8 !important;
}

.swal2-icon {
    margin: 1rem auto !important;
    border-color: var(--green-light) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(58,125,92,0.2) !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--green-primary) !important;
}

.swal2-actions {
    gap: 0.75rem !important;
}

.footer a {
    color: var(--gold-light);
    text-decoration: none;
}

/* ==========================================
   Results Page Styles
   ========================================== */

.results-page {
    background: var(--off-white);
    min-height: 100vh;
}

.results-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Results page search bar */
.results-search-bar {
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.results-search-box {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,125,92,0.1);
    gap: 0.25rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.results-search-box:focus-within {
    box-shadow: var(--shadow-md);
    border-color: rgba(58,125,92,0.25);
}

.results-search-box > i {
    color: var(--gray-medium);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.results-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9rem;
    font-family: inherit;
    padding: 0.5rem 0.35rem;
    background: transparent;
    min-width: 0;
}

.results-scan-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.results-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.2s;
}

.results-search-submit:hover {
    background: var(--green-dark);
}

.results-nav {
    background: var(--green-dark);
    position: sticky;
    top: 0;
    padding: 1rem 5%;
    box-shadow: var(--shadow-md);
    min-height: 60px;
    box-sizing: border-box;
}

.results-nav .logo {
    font-size: 1.3rem;
}

.nav-search {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    border-radius: 25px;
    padding: 0.3rem 0.5rem;
    max-width: 520px;
    flex: 1;
    margin-left: 2rem;
}

.nav-search i {
    color: rgba(255,255,255,0.7);
    padding: 0 0.8rem;
}

.nav-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-family: inherit;
    padding: 0.5rem 0;
}

.nav-search input::placeholder {
    color: rgba(255,255,255,0.5);
}

.nav-search button {
    background: var(--gold-primary);
    border: none;
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.nav-search button:hover {
    background: var(--gold-dark);
}

/* ==========================================
   Loading State
   ========================================== */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: var(--green-primary);
}

.loader i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.loading-state p {
    font-size: 1.2rem;
    color: var(--gray-dark);
}

/* ==========================================
   No Results State
   ========================================== */

.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.no-results i {
    font-size: 5rem;
    color: var(--gray-medium);
    margin-bottom: 1.5rem;
}

.no-results h2 {
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
}

.no-results p {
    color: var(--gray-medium);
    margin-bottom: 2rem;
}

.btn-primary {
    background: var(--green-primary);
    color: var(--white);
    padding: 0.8rem 2rem;
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.btn-primary:hover {
    background: var(--green-dark);
    box-shadow: 0 4px 14px rgba(58,125,92,0.3);
    transform: translateY(-1px);
}

/* ==========================================
   Results Section
   ========================================== */

.results-section {
    padding: 2rem 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.results-header {
    margin-bottom: 0.75rem;
}

.results-header h1 {
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.results-header h1 i {
    color: var(--gold-primary);
}

.my-meals-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.btn-add-meal {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--green-primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}

.btn-add-meal:hover {
    background: var(--green-dark);
}

.my-meals-subtitle {
    color: var(--gray-dark);
    font-size: 0.95rem;
    margin-top: 0.4rem;
    line-height: 1.5;
}

#resultsCount {
    color: var(--gray-dark);
    margin-top: 0.5rem;
}

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

/* ==========================================
   Product Card (in results list)
   ========================================== */

.product-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
    border: 1px solid rgba(58,125,92,0.06);
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.product-card-image {
    height: 150px;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.product-card-image i {
    font-size: 3rem;
    color: var(--gray-medium);
}

.product-card-content {
    padding: 1.2rem;
}

.product-card-name {
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-brand {
    color: var(--gray-medium);
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.product-card-scores {
    display: flex;
    gap: 0.5rem;
}

.mini-score {
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--white);
}

.mini-score.grade-a { background: var(--grade-a); }
.mini-score.grade-b { background: var(--grade-b); }
.mini-score.grade-c { background: var(--grade-c); }
.mini-score.grade-d { background: var(--grade-d); }
.mini-score.grade-e { background: var(--grade-e); }
.mini-score.grade-unknown { background: var(--gray-medium); }

.mini-score.nova-1 { background: var(--grade-a); }
.mini-score.nova-2 { background: var(--grade-b); }
.mini-score.nova-3 { background: var(--grade-d); }
.mini-score.nova-4 { background: var(--grade-e); }
.mini-score.nova-unknown { background: var(--gray-medium); }

/* Dietary Flag Badges */
.product-card-diet-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.diet-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--white);
}

.diet-badge i {
    font-size: 0.6rem;
}

.diet-badge.diet-vegan {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
}

.diet-badge.diet-vegetarian {
    background: linear-gradient(135deg, #43a047, #2e7d32);
}

.diet-badge.diet-pescatarian {
    background: linear-gradient(135deg, #0288d1, #01579b);
}

.diet-badge.diet-gluten-free {
    background: linear-gradient(135deg, #f57c00, #e65100);
}

.diet-badge.diet-keto {
    background: linear-gradient(135deg, #7b1fa2, #4a148c);
}

/* Product Detail Page - Dietary Flags Section */
.dietary-flags-section {
    margin-bottom: 2rem;
}

.dietary-flags-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    color: var(--gray-dark);
    margin-bottom: 1rem;
}

.dietary-flags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.diet-badge-full {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
}

.diet-badge-full i {
    font-size: 0.85rem;
}

.diet-badge-full.diet-vegan {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
}

.diet-badge-full.diet-vegetarian {
    background: linear-gradient(135deg, #43a047, #2e7d32);
}

.diet-badge-full.diet-pescatarian {
    background: linear-gradient(135deg, #0288d1, #01579b);
}

.diet-badge-full.diet-gluten-free {
    background: linear-gradient(135deg, #f57c00, #e65100);
}

.diet-badge-full.diet-keto {
    background: linear-gradient(135deg, #7b1fa2, #4a148c);
}

.diet-badge-full.diet-negative {
    background: linear-gradient(135deg, #757575, #616161);
}

/* User Meal Card Styles */
.meal-card {
    position: relative;
    border: 1px solid rgba(212,164,76,0.15);
    background: var(--white);
}

.meal-card:hover {
    border-color: rgba(212,164,76,0.3);
}

.user-created-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(212, 165, 55, 0.4);
}

.user-created-badge i {
    font-size: 0.75rem;
}

.your-meal-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(45, 106, 79, 0.4);
}

.your-meal-badge i {
    font-size: 0.75rem;
}

.recipe-card {
    position: relative;
    border: 1px solid rgba(58,125,92,0.08);
    background: var(--white);
}

.recipe-card:hover {
    border-color: rgba(58,125,92,0.2);
}

.recipe-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    color: white;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(30, 100, 175, 0.4);
}

.recipe-badge i {
    font-size: 0.75rem;
}

.recipe-card-image {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
}

.recipe-card-image i {
    color: #1e88e5 !important;
    font-size: 3.5rem !important;
}

.meal-card-image {
    background: linear-gradient(135deg, var(--gold-pale), var(--green-pale)) !important;
}

.meal-card-image i {
    color: var(--gold-primary) !important;
    font-size: 3.5rem !important;
}

.meal-card-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.meal-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--gray-dark);
}

.meal-stat i {
    color: var(--gold-primary);
    font-size: 0.8rem;
}

.mini-score.meal-type-badge {
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
}

.mini-score.servings-badge {
    background: var(--gold-primary);
}

/* Meal Detail Page Styles */
.meal-header {
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-pale) 100%);
    border: 2px solid var(--gold-light);
}

.meal-image-large {
    background: linear-gradient(135deg, var(--gold-pale), var(--green-pale)) !important;
}

.meal-image-large i {
    font-size: 5rem;
    color: var(--gold-primary);
}

.user-meal-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: 0 3px 10px rgba(212, 165, 55, 0.3);
}

.user-meal-header-badge i {
    font-size: 0.9rem;
}

.meal-description {
    color: var(--gray-dark);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: none;
}

.meal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.meal-type-tag,
.meal-servings-tag,
.meal-items-tag,
.meal-time-tag,
.meal-difficulty-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--gray-light);
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.meal-type-tag i,
.meal-servings-tag i,
.meal-items-tag i,
.meal-time-tag i,
.meal-difficulty-tag i {
    color: var(--gold-primary);
}

/* Editable Servings */
.servings-editable.servings-owner {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    position: relative;
}

.servings-editable.servings-owner:hover {
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.servings-edit-icon {
    display: none;
    font-size: 0.65rem;
    opacity: 0.5;
    margin-left: 0.1rem;
}

.servings-editable.servings-owner:hover .servings-edit-icon {
    display: inline;
}

.servings-inline-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.servings-input {
    width: 52px;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--green-primary);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: center;
    outline: none;
    background: var(--white);
}

.servings-input:focus {
    box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.25);
}

.servings-save-btn,
.servings-cancel-btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1;
    transition: background 0.15s;
}

.servings-save-btn {
    color: var(--green-primary);
}

.servings-save-btn:hover {
    background: rgba(45, 106, 79, 0.12);
}

.servings-cancel-btn {
    color: #888;
}

.servings-cancel-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Timing detail chips */
.meal-timing-detail {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.timing-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    background: var(--gray-light);
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--gray-dark);
}
.timing-chip i { color: var(--gold-primary); }

/* Dietary flags on meal detail */
.meal-dietary-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Meal Items Detail List */
.meal-items-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.meal-detail-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-light);
    border-radius: 12px;
    transition: var(--transition);
}

.meal-detail-item:hover {
    background: var(--green-pale);
}

.meal-detail-item-image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meal-detail-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.meal-detail-item-image i {
    font-size: 1.5rem;
    color: var(--gray-medium);
}

.meal-detail-item-info {
    flex: 1;
    min-width: 0;
}

.meal-detail-item-name {
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.meal-detail-item-name.item-link {
    text-decoration: none;
    color: var(--green-dark);
    display: block;
}

a.meal-detail-item-name.item-link:hover {
    color: var(--green-primary);
    text-decoration: underline;
}

.meal-detail-item-brand {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 0.3rem;
}

.meal-detail-item-quantity {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--gold-dark);
    font-weight: 500;
}

.meal-detail-item-quantity i {
    font-size: 0.75rem;
}

.meal-detail-item-nutrition {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: right;
}

.meal-detail-item-nutrition span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--gray-dark);
}

.meal-detail-item-nutrition i {
    color: var(--gold-primary);
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .meal-detail-item {
        flex-wrap: wrap;
    }

    .meal-detail-item-nutrition {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 1rem;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--white);
    }

    .meal-meta {
        justify-content: center;
    }
}

/* ==========================================
   Modal Styles
   ========================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: var(--white);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--gray-light);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--danger);
    color: var(--white);
}

/* ==========================================
   Product Header
   ========================================== */

.product-header {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--gray-light);
}

.product-image-container {
    width: 200px;
    height: 200px;
    background: var(--gray-light);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.product-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-title-section {
    flex: 1;
}

.product-title-section h1 {
    color: var(--green-dark);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.product-brand {
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.product-quantity {
    color: var(--gray-medium);
    margin-bottom: 1rem;
}

.barcode {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-light);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.9rem;
}

.barcode i {
    color: var(--gray-dark);
}

/* ==========================================
   Scores Section
   ========================================== */

.scores-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.score-card {
    background: var(--gray-light);
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
}

.score-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--gray-dark);
    font-weight: 600;
}

.score-header i {
    color: var(--gold-primary);
}

.score-value {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.score-description {
    font-size: 0.85rem;
    color: var(--gray-medium);
}

.grade-a { color: var(--grade-a); }
.grade-b { color: var(--grade-b); }
.grade-c { color: var(--grade-c); }
.grade-d { color: var(--grade-d); }
.grade-e { color: var(--grade-e); }
.grade-unknown { color: var(--gray-medium); }

.nova-1 { color: var(--grade-a); }
.nova-2 { color: var(--grade-b); }
.nova-3 { color: var(--grade-d); }
.nova-4 { color: var(--grade-e); }
.nova-unknown { color: var(--gray-medium); }

/* ==========================================
   Nutrition Section
   ========================================== */

.nutrition-section {
    margin-bottom: 2rem;
}

.nutrition-section h2 {
    color: var(--green-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nutrition-section h2 i {
    color: var(--gold-primary);
}

.per-100g {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--gray-medium);
}

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

.nutrition-item {
    background: var(--gray-light);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nutrition-icon {
    width: 45px;
    height: 45px;
    background: var(--white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nutrition-icon i {
    color: var(--green-primary);
    font-size: 1.2rem;
}

.nutrition-info {
    flex: 1;
}

.nutrition-label {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-medium);
}

.nutrition-value {
    font-weight: 600;
    color: var(--gray-dark);
}

.nutrition-bar {
    width: 60px;
    height: 6px;
    background: var(--white);
    border-radius: 3px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--warning);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.bar-fill.good {
    background: var(--success);
}

.bar-fill.bad {
    background: var(--danger);
}

/* ==========================================
   Details Grid
   ========================================== */

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.detail-section {
    background: var(--gray-light);
    padding: 1.5rem;
    border-radius: 15px;
}

.detail-section h2 {
    font-size: 1.1rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-section h2 i {
    color: var(--gold-primary);
}

.ingredients-text {
    color: var(--gray-dark);
    font-size: 0.95rem;
    line-height: 1.6;
}

.allergens-list,
.traces-list,
.categories-list,
.labels-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.allergen-tag {
    background: var(--danger);
    color: var(--white);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.trace-tag {
    background: var(--warning);
    color: var(--white);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.category-tag,
.label-tag {
    background: var(--white);
    color: var(--gray-dark);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid var(--gray-medium);
}

.label-tag {
    background: var(--green-pale);
    border-color: var(--green-light);
    color: var(--green-dark);
}

.no-allergens,
.no-traces,
.no-categories,
.no-labels {
    color: var(--gray-medium);
    font-style: italic;
}

.origin-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.origin-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.origin-item i {
    color: var(--gold-primary);
    width: 20px;
}

.origin-item span:first-of-type {
    color: var(--gray-medium);
    min-width: 80px;
}

/* ==========================================
   Product Images Section
   ========================================== */

.product-images-section h2 {
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-images-section h2 i {
    color: var(--gold-primary);
}

.images-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.image-card {
    background: var(--gray-light);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
}

.image-card img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    background: var(--white);
}

.image-card span {
    display: block;
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-dark);
}

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-links {
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }


    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .hero-tools {
        gap: 0.6rem;
    }

    .hero-tool-card {
        min-width: 80px;
        padding: 0.75rem 0.75rem;
        font-size: 0.75rem;
    }

    .hero-tool-card i {
        font-size: 1.25rem;
    }

    .search-container {
        max-width: 360px;
        margin: 0 auto 2rem;
    }

    .search-box {
        padding: 0.35rem;
        border-radius: 16px;
        flex-direction: row-reverse;
        gap: 0.35rem;
    }

    .search-box .search-icon {
        display: none;
    }

    .search-box input {
        flex: 1;
        font-size: 0.85rem;
        padding: 0.5rem 0.5rem;
        text-align: left;
        min-width: 0;
    }

    /* Show inline barcode button, hide external one */
    .search-scan-inline {
        display: flex !important;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 0.85rem;
        flex-shrink: 0;
        order: -2;
    }

    .search-with-barcode > .scan-barcode-btn {
        display: none;
    }

    /* Compact submit — icon only, on the left */
    .search-btn {
        padding: 0.6rem 0.8rem;
        border-radius: 12px;
        order: -1;
    }

    .search-btn span {
        display: none;
    }

    .search-btn i {
        font-size: 0.9rem;
    }

    /* Hide search suggestions on mobile */
    .search-suggestions {
        display: none;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .scores-section {
        grid-template-columns: 1fr;
    }

    .product-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .modal-content {
        padding: 1rem;
        border-radius: 15px;
    }

    .results-nav {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-search {
        margin-left: 0;
        max-width: 100%;
    }
}

/* ==========================================
   Full Product Page Styles
   ========================================== */

.product-page {
    background: var(--off-white);
    min-height: 100vh;
}

.product-detail-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 5%;
    padding-top: 80px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--green-primary);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: var(--transition);
}

.back-btn:hover {
    background: var(--green-pale);
}

.product-header-full {
    display: flex;
    gap: 3rem;
    background: var(--white);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.product-image-large {
    width: 300px;
    height: 300px;
    background: var(--gray-light);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.product-image-large img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-title-section-full {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-title-section-full h1 {
    color: var(--green-dark);
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.product-brand-large {
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.product-quantity-large {
    color: var(--gray-medium);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.barcode-large {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--gray-light);
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    font-family: monospace;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.product-categories-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scores-section-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.score-card-full {
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.score-value-full {
    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 1rem 0;
}

.nutrition-section-full {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.nutrition-section-full h2 {
    color: var(--green-dark);
    margin-bottom: 2rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.nutrition-section-full h2 i {
    color: var(--gold-primary);
}

.nutrition-grid-full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    grid-auto-rows: 1fr;
}

.nutrition-card {
    background: var(--gray-light);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 110px;
    justify-content: center;
}

.nutrition-card-icon {
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.nutrition-card-icon i {
    font-size: 0.95rem;
    color: var(--green-primary);
}

.nutrition-card-icon.good i {
    color: var(--success);
}

.nutrition-card-content {
    margin-bottom: 0.5rem;
}

.nutrition-card-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-dark);
    line-height: 1.3;
}

.nutrition-card-label {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.nutrition-card-bar {
    width: 100%;
    height: 5px;
    background: var(--white);
    border-radius: 3px;
    overflow: hidden;
}

.card-bar-fill {
    height: 100%;
    background: var(--warning);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.card-bar-fill.good {
    background: var(--success);
}

.card-bar-fill.bad {
    background: var(--danger);
}

@media (max-width: 600px) {
    .nutrition-grid-full {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .nutrition-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 0.5rem 0.6rem;
        gap: 0.5rem;
        flex-wrap: wrap;
        min-height: 52px;
    }

    .nutrition-card-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .nutrition-card-icon i {
        font-size: 0.8rem;
    }

    .nutrition-card-content {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }

    .nutrition-card-value {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .nutrition-card-label {
        font-size: 0.68rem;
    }

    .nutrition-card-bar {
        width: 100%;
        flex-basis: 100%;
        height: 4px;
    }
}

@media (max-width: 380px) {
    .nutrition-grid-full {
        gap: 0.4rem;
    }

    .nutrition-card {
        padding: 0.4rem 0.5rem;
    }

    .nutrition-card-value {
        font-size: 0.82rem;
    }

    .nutrition-card-label {
        font-size: 0.65rem;
    }
}

.details-section-full {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.detail-card-full {
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    min-width: 0; /* Allow grid child to shrink below content size for overflow-x scroll */
}

.detail-card-full h2 {
    color: var(--green-dark);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-light);
}

.detail-card-full h2 i {
    color: var(--gold-primary);
}

.ingredients-text-full {
    color: var(--gray-dark);
    line-height: 1.8;
    font-size: 1rem;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.no-data {
    color: var(--gray-medium);
    font-style: italic;
}

.origin-grid {
    display: grid;
    gap: 1.5rem;
}

.origin-item-full {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.origin-item-full i {
    color: var(--gold-primary);
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

.origin-item-full div {
    display: flex;
    flex-direction: column;
}

.origin-label {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 0.2rem;
}

.origin-value {
    color: var(--gray-dark);
    font-weight: 500;
}

.images-section-full {
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.images-section-full h2 {
    color: var(--green-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.images-section-full h2 i {
    color: var(--gold-primary);
}

.images-gallery {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.gallery-item {
    background: var(--gray-light);
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
}

.gallery-item img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    background: var(--white);
}

.gallery-item span {
    display: block;
    padding: 0.8rem;
    font-weight: 500;
    color: var(--gray-dark);
}

/* Cooking Videos Section */
.videos-section {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.videos-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    color: var(--gray-dark);
    margin-bottom: 1.5rem;
}

.videos-section h2 i {
    color: #ff0000;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.video-card {
    border-radius: 12px;
    overflow: hidden;
    background: var(--gray-light);
    box-shadow: var(--shadow-sm);
}

.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px 12px 0 0;
}

.video-title {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.add-video-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.add-video-form input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 2px solid var(--gray-medium);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.add-video-form input:focus {
    outline: none;
    border-color: var(--green-primary);
}

.btn-add-video {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-add-video:hover {
    opacity: 0.9;
}

.btn-add-video:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.video-expand-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 2;
    transition: background 0.2s;
}

.video-expand-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
    .videos-section {
        padding: 1rem;
    }

    .videos-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .video-card {
        max-width: 100%;
    }

    .add-video-form {
        flex-wrap: wrap;
    }

    .add-video-form input {
        min-width: 0;
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }

    .btn-add-video {
        flex-shrink: 0;
        padding: 0.5rem 0.9rem;
        font-size: 0.82rem;
    }

    .video-expand-btn {
        display: flex;
    }
}

.data-source {
    text-align: center;
    padding: 1.5rem;
    color: var(--gray-medium);
}

.data-source a {
    color: var(--gold-dark);
}

/* Data Source Badge */
.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--green-pale), var(--gold-pale));
    border: 1px solid var(--green-light);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--green-dark);
    margin-top: 0.5rem;
}

.data-source-badge i {
    color: var(--gold-dark);
}

/* Vitamins & Minerals Section */
.vitamins-minerals-section {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.vitamins-minerals-section h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.4rem;
    color: var(--green-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--green-pale);
}

.vitamins-minerals-section h2 i {
    color: var(--gold-primary);
}

.vitamins-minerals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.micronutrient-group {
    background: var(--off-white);
    border-radius: 12px;
    padding: 1.5rem;
}

.micronutrient-group h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--green-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--green-pale);
}

.micronutrient-group h3 i {
    color: var(--gold-dark);
    font-size: 0.9rem;
}

.micronutrient-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.micronutrient-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--white);
    border-radius: 8px;
    transition: var(--transition);
}

.micronutrient-item:hover {
    background: var(--green-pale);
}

.micronutrient-item.no-data-row {
    opacity: 0.5;
}

.micronutrient-name {
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.micronutrient-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--green-dark);
    background: var(--green-pale);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
}

/* Product Page Responsive */
@media (max-width: 768px) {
    .product-header-full {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
    }

    .product-image-large {
        width: 200px;
        height: 200px;
    }

    .meal-image-column {
        width: 200px;
    }

    .meal-action-buttons.stacked {
        flex-direction: column;
    }

    .meal-action-buttons .btn-add-to-meal,
    .meal-action-buttons .btn-add-to-shopping-list,
    .meal-action-buttons .btn-cooking-videos,
    .meal-action-buttons .btn-add-to-planner,
    .meal-action-buttons .btn-delete-meal {
        min-width: unset;
        width: 100%;
    }

    .shopping-list-dropdown-wrapper {
        min-width: unset;
        width: 100%;
    }

    .product-title-section-full h1 {
        font-size: 1.6rem;
    }

    .scores-section-full {
        grid-template-columns: 1fr;
    }

    .score-value-full {
        font-size: 3rem;
    }

    .details-section-full {
        grid-template-columns: 1fr;
    }

    .detail-card-full {
        padding: 1rem;
    }

    .gallery-item img {
        width: 150px;
        height: 150px;
    }

    .vitamins-minerals-grid {
        grid-template-columns: 1fr;
    }

    .data-source-badge {
        margin: 0.5rem auto;
    }
}

/* ==========================================
   MEAL BUILDER STYLES
   ========================================== */

.meal-page {
    background: var(--gray-light);
    min-height: 100vh;
}

.meal-builder-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    padding-top: calc(80px + 2rem);
}

.meal-builder-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.meal-builder-header h1 {
    font-size: 2.5rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.meal-builder-header h1 i {
    color: var(--gold-primary);
    margin-right: 0.5rem;
}

.meal-builder-header p {
    color: var(--gray-medium);
    font-size: 1.1rem;
}

.meal-builder-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    align-items: start;
}

/* Left Column Cards */
.meal-builder-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.meal-info-card,
.product-search-card,
.meal-items-card,
.meal-ingredients-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.meal-info-card h2,
.product-search-card h2,
.meal-items-card h2,
.meal-ingredients-card h2 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meal-info-card h2 i,
.product-search-card h2 i,
.meal-items-card h2 i,
.meal-ingredients-card h2 i {
    color: var(--gold-primary);
}

/* ==========================================
   Ingredient Row Input (Meal Builder v3)
   ========================================== */

.ingredient-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ingredient-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    transition: opacity 0.2s, transform 0.2s;
}

.ingredient-amount {
    width: 64px;
    min-width: 54px;
    padding: 0.6rem 0.5rem;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: center;
    transition: border-color 0.2s;
}

.ingredient-amount:focus {
    outline: none;
    border-color: var(--green-primary);
}

.ingredient-unit {
    width: 90px;
    min-width: 80px;
    padding: 0.6rem 0.4rem;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.2s;
}

.ingredient-unit:focus {
    outline: none;
    border-color: var(--green-primary);
}

.ingredient-name {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.ingredient-name:focus {
    outline: none;
    border-color: var(--green-primary);
}

.ingredient-remove {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: none;
    background: transparent;
    color: var(--gray-medium);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.ingredient-remove:hover {
    background: #fdedef;
    color: #c0392b;
}

.add-ingredient-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 2px dashed rgba(58, 125, 92, 0.25);
    background: transparent;
    color: var(--green-primary);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.add-ingredient-btn:hover {
    border-color: var(--green-primary);
    background: rgba(58, 125, 92, 0.04);
}

/* Match confidence dots on ingredient rows */
.match-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin-left: 0.3rem;
}

.match-dot.match-high {
    background: var(--success, #2e7d32);
}

.match-dot.match-medium {
    background: #e67e22;
}

.match-dot.match-low {
    background: #e74c3c;
}

.match-dot.match-none {
    background: var(--gray-medium);
}

/* Ingredient icon on meal detail page */
.meal-detail-item-icon.ingredient-item-icon {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #e67e22;
}

/* Meal Form */
.meal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-medium);
}

.form-group input,
.form-group select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--green-primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Ingredient Search */
.ingredient-search {
    position: relative;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper i {
    position: absolute;
    left: 1rem;
    color: var(--gray-medium);
}

.search-input-wrapper input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid var(--gray-light);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.ingredient-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 0.5rem;
}

.ingredient-search-results.hidden {
    display: none;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--gray-light);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--gray-light);
}

.search-result-image {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--gray-light);
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-weight: 500;
    color: var(--green-dark);
    font-size: 0.95rem;
}

.search-result-brand {
    font-size: 0.85rem;
    color: var(--gray-medium);
}

.search-result-add {
    color: var(--green-primary);
    font-size: 1.2rem;
}

.search-loading,
.search-no-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-medium);
}

/* ==========================================
   Canonical Food Styles
   ========================================== */

/* Search results: canonical icon (replacing product image) */
.search-result-icon.canonical-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-icon.canonical-icon i {
    font-size: 1.3rem;
    color: var(--green-dark);
}

/* Canonical search result background */
.search-result-item.canonical-result {
    background: var(--green-pale);
}

.search-result-item.canonical-result:hover {
    background: rgba(58, 125, 92, 0.1);
}

/* Category label in search results */
.canonical-category {
    color: var(--green-primary);
    font-style: italic;
}

/* Divider between products and canonical foods */
.search-result-divider {
    padding: 0.5rem 1rem;
    background: var(--off-white);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(58, 125, 92, 0.08);
    border-bottom: 1px solid rgba(58, 125, 92, 0.08);
}

/* Meal item: canonical icon (replacing product image) */
.meal-item-icon.canonical-item-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meal-item-icon.canonical-item-icon i {
    font-size: 1.5rem;
    color: var(--green-dark);
}

/* Canonical item accent border */
.meal-item.canonical-item {
    border-left: 3px solid var(--green-primary);
}

/* "No nutrition data" label */
.canonical-no-nutrition {
    color: var(--gray-medium);
    font-style: italic;
    opacity: 0.7;
}

.canonical-no-nutrition i {
    color: var(--gray-medium) !important;
}

/* Category label under name */
.canonical-category-label {
    color: var(--green-primary);
    font-style: italic;
}

/* Unit selector for canonical items */
/* Unified unit selector for all meal items */
.item-unit-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--white);
    color: var(--green-dark);
    cursor: pointer;
    margin-bottom: 0.25rem;
    width: 100%;
}

.item-unit-select:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.1);
}

/* Meal detail: canonical icon */
.meal-detail-item-icon.canonical-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meal-detail-item-icon.canonical-item-icon i {
    font-size: 1.3rem;
    color: var(--green-dark);
}

.meal-detail-item.canonical-item {
    border-left: 3px solid var(--green-primary);
}

/* Meal Items List */
.meal-items-card h2 span {
    font-weight: 400;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.meal-items-list {
    min-height: 150px;
}

.empty-meal-message {
    text-align: center;
    padding: 2rem;
    color: var(--gray-medium);
}

.empty-meal-message i {
    font-size: 3rem;
    color: var(--gray-light);
    margin-bottom: 1rem;
}

.empty-meal-message p {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.empty-meal-message span {
    font-size: 0.9rem;
}

.meal-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-light);
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.meal-item:last-child {
    margin-bottom: 0;
}

.meal-item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--white);
}

.meal-item-info {
    flex: 1;
}

.meal-item-name {
    font-weight: 500;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

.meal-item-brand {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 0.5rem;
}

.meal-item-nutrition {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.meal-item-nutrition span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.meal-item-nutrition i {
    color: var(--gold-primary);
}

.meal-item-quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 130px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border-radius: 8px;
    padding: 0.25rem;
}

.quantity-controls button {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--green-light);
    color: var(--green-dark);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.quantity-controls button:hover {
    background: var(--green-primary);
    color: white;
}

.quantity-controls input {
    width: 60px;
    text-align: center;
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
}

.quantity-controls input:focus {
    outline: none;
}

.quantity-equivalent {
    font-size: 0.75rem;
    color: var(--gray-medium);
    text-align: center;
}

.meal-item-remove {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.meal-item-remove:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Right Column Cards */
.meal-builder-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: calc(80px + 2rem);
}

.nutrition-summary-card,
.allergens-summary-card,
.traces-summary-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.nutrition-summary-card h2,
.allergens-summary-card h2,
.traces-summary-card h2 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nutrition-summary-card h2 i {
    color: var(--gold-primary);
}

.allergens-summary-card h2 i {
    color: #dc3545;
}

.traces-summary-card h2 i {
    color: #fd7e14;
}

.serving-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--gray-medium);
}

.nutrition-toggle {
    display: flex;
    background: var(--gray-light);
    border-radius: 8px;
    padding: 0.25rem;
    margin: 0.75rem 0;
}

.nutrition-toggle-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    color: var(--gray-medium);
}

.nutrition-toggle-btn.active {
    background: var(--white);
    color: var(--green-dark);
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.per-serving-toggle {
    display: flex;
    background: var(--gray-light);
    border-radius: 8px;
    padding: 0.25rem;
}

.per-serving-toggle button {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    color: var(--gray-medium);
}

.per-serving-toggle button.active {
    background: var(--white);
    color: var(--green-dark);
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Nutrition Summary Grid */
.nutrition-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-light);
    border-radius: 10px;
}

.summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--gold-primary);
}

.summary-icon.good {
    color: var(--green-primary);
}

.summary-info {
    display: flex;
    flex-direction: column;
}

.summary-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--green-dark);
}

.summary-label {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

/* Allergens & Traces Summary */
.allergens-summary,
.traces-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.allergen-tag {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.trace-tag {
    background: rgba(253, 126, 20, 0.1);
    color: #fd7e14;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.no-allergens,
.no-traces {
    color: var(--gray-medium);
    font-size: 0.9rem;
}

/* Meal Builder Dietary Badges */
.meal-dietary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.diet-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.diet-badge.diet-vegan {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.diet-badge.diet-vegetarian {
    background: rgba(56, 142, 60, 0.12);
    color: #388e3c;
}

.diet-badge.diet-pescatarian {
    background: rgba(2, 119, 189, 0.12);
    color: #0277bd;
}

.diet-badge.diet-gluten-free {
    background: rgba(230, 81, 0, 0.12);
    color: #e65100;
}

.diet-badge.diet-none {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gray-medium);
    font-weight: 400;
}

/* Sharing Options Card */
.sharing-options-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.sharing-options-card h2 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sharing-options-card h2 i {
    color: var(--gold-primary);
}

.sharing-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.share-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1rem;
    background: var(--gray-light);
    border-radius: 12px;
    transition: all 0.2s;
}

.share-checkbox:hover {
    background: var(--green-pale);
}

.share-checkbox input[type="checkbox"] {
    display: none;
}

.share-checkbox .checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--gray-medium);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.share-checkbox input[type="checkbox"]:checked + .checkmark {
    background: var(--green-primary);
    border-color: var(--green-primary);
}

.share-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: 0.75rem;
}

.share-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.share-label strong {
    color: var(--green-dark);
    font-size: 0.95rem;
}

.share-label small {
    color: var(--gray-medium);
    font-size: 0.8rem;
}

.creator-name-group {
    margin-top: 0.5rem;
}

.creator-name-group input {
    width: 100%;
}

/* Recipe Editor (Meal Builder) */
.recipe-editor-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.recipe-editor-fullwidth {
    margin-top: 2rem;
}

.recipe-editor-card h2 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-editor-card h2 i {
    color: var(--gold-primary);
}

.recipe-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--gray-light);
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.toolbar-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--green-dark);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: rgba(45, 106, 79, 0.1);
}

.toolbar-btn:active {
    background: rgba(45, 106, 79, 0.2);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: #d0d0d0;
    margin: 0 0.25rem;
}

.recipe-editor-content {
    min-height: 250px;
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 12px 12px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--black);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s;
}

.recipe-editor-content:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.recipe-editor-content:empty::before {
    content: "Write your recipe instructions here...";
    color: var(--gray-medium);
    pointer-events: none;
}

.recipe-editor-content ul,
.recipe-editor-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.recipe-editor-content li {
    margin-bottom: 0.25rem;
}

/* Recipe Instructions (Meal Detail Page) */
.meal-instructions-section {
    margin-top: 2rem;
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.meal-instructions-section h2 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meal-instructions-section h2 i {
    color: var(--gold-primary);
}

.instructions-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
}

.instructions-content ul,
.instructions-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.instructions-content li {
    margin-bottom: 0.3rem;
}

/* Meal Actions */
.meal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-save-meal,
.btn-clear-meal {
    flex: 1;
    padding: 0.85rem 1rem;
    min-height: 44px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.btn-save-meal {
    background: var(--green-primary);
    color: white;
}

.btn-save-meal:hover:not(:disabled) {
    background: var(--green-dark);
    box-shadow: 0 4px 14px rgba(58,125,92,0.3);
    transform: translateY(-1px);
}

.btn-save-meal:disabled {
    background: var(--gray-medium);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-clear-meal {
    background: var(--gray-light);
    color: var(--gray-medium);
    border: 1px solid rgba(0,0,0,0.06);
}

.btn-clear-meal:hover {
    background: rgba(208, 74, 66, 0.08);
    color: var(--danger);
    border-color: rgba(208, 74, 66, 0.15);
}

/* Nav Links */
.nav-links {
    display: flex;
    gap: 1rem;
}

.nav-link {
    color: var(--gray-medium);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s;
}

.nav-link:hover {
    color: var(--green-primary);
    background: var(--green-light);
}

/* Add to Meal Button on Product Page */
.btn-add-to-meal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(212, 164, 76, 0.1);
    color: var(--green-dark);
    border: 1.5px solid rgba(212, 164, 76, 0.3);
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0;
}

.btn-add-to-meal:hover {
    background: rgba(212, 164, 76, 0.2);
    border-color: var(--gold-primary);
}

/* Meal Action Buttons Container (meal-detail page) */
.meal-action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.meal-action-buttons.stacked {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Unified action button sizing inside meal/recipe detail */
.meal-action-buttons .btn-add-to-meal,
.meal-action-buttons .btn-add-to-shopping-list,
.meal-action-buttons .btn-cooking-videos,
.meal-action-buttons .btn-add-to-planner,
.meal-action-buttons .btn-delete-meal,
.meal-action-buttons .btn-edit-recipe,
.meal-action-buttons .btn-save-edits,
.meal-action-buttons .btn-cancel-edits {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 140px;
    height: 40px;
    padding: 0 1rem;
    box-sizing: border-box;
    font-size: 0.82rem;
}

.btn-edit-meal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(212, 164, 76, 0.1);
    color: var(--green-dark);
    border: 1.5px solid rgba(212, 164, 76, 0.3);
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-meal:hover {
    background: rgba(212, 164, 76, 0.2);
    border-color: var(--gold-primary);
}

.btn-delete-meal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--danger);
    border: 1.5px solid rgba(208, 74, 66, 0.15);
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-meal:hover {
    background: rgba(208, 74, 66, 0.06);
    border-color: var(--danger);
}

.btn-delete-meal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cooking-videos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: #dc2626;
    color: white;
    border: none;
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cooking-videos:hover {
    background: #b91c1c;
}

/* Image column wrapper (image + edit/delete under it) */
.meal-image-column {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
}

.meal-image-column .product-image-large {
    width: 100%;
}

/* Edit/Delete buttons under meal image — pushed to bottom to align with action buttons */
.meal-owner-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.btn-meal-sm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 48px;
    padding: 0 1rem;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-meal-edit {
    background: var(--gold-primary);
    color: white;
}

.btn-meal-edit:hover {
    background: var(--gold-dark);
}

.btn-meal-delete {
    background: #e53935;
    color: white;
}

.btn-meal-delete:hover {
    background: #b71c1c;
}

.btn-meal-sm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Meal Photo Upload */
.meal-image-large {
    position: relative;
}

.meal-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.btn-add-photo {
    position: absolute;
    bottom: 0.8rem;
    right: 0.8rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
    color: white;
    border: 3px solid white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.btn-add-photo:hover {
    transform: scale(1.1);
}

/* Add to Shopping List Button */
.btn-add-to-shopping-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--green-primary);
    color: white;
    border: none;
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-to-shopping-list:hover {
    background: var(--green-dark);
}

.btn-add-to-shopping-list:disabled {
    background: var(--gray-medium);
    cursor: not-allowed;
}

/* Shopping List Dropdown */
.shopping-list-dropdown-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 140px;
}

.meal-action-buttons .shopping-list-dropdown-wrapper .btn-add-to-shopping-list {
    height: 40px;
    padding: 0 1rem;
    box-sizing: border-box;
}

.shopping-list-dropdown-wrapper .btn-add-to-shopping-list {
    width: 100%;
}

.btn-add-to-shopping-list .dropdown-arrow {
    font-size: 0.75rem;
    margin-left: 0.25rem;
    transition: transform 0.2s;
}

.shopping-list-dropdown,
.sl-dropdown {
    position: absolute;
    top: 100%;
    width: 300px;
    max-width: 90vw;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    margin-top: 0.5rem;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.sl-dropdown-loading,
.sl-dropdown-error {
    padding: 1rem;
    text-align: center;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.sl-dropdown-error {
    color: var(--danger);
}

.sl-dropdown-list {
    max-height: 250px;
    overflow-y: auto;
}

.sl-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--gray-dark);
    text-align: left;
    transition: background 0.15s;
}

.sl-dropdown-item:hover {
    background: var(--green-pale);
}

.sl-dropdown-item i {
    color: var(--green-primary);
    width: 1.2rem;
    text-align: center;
}

.sl-dropdown-new {
    color: var(--green-primary);
    font-weight: 600;
}

.sl-dropdown-new i {
    color: var(--green-primary);
}

.sl-dropdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0;
}

.product-action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.product-action-buttons .btn-add-to-meal,
.product-action-buttons .btn-save-as-meal,
.product-action-buttons .add-to-meal-dropdown,
.product-action-buttons .btn-add-to-shopping-list {
    margin-top: 0;
    flex: 1;
    min-width: 180px;
}

.btn-save-as-meal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-as-meal:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-save-as-meal:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Add to Meal Dropdown */
.add-to-meal-dropdown {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.btn-add-to-existing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #6366f1;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn-add-to-existing:hover {
    background: #4f46e5;
    transform: translateY(-2px);
}

.btn-add-to-existing .dropdown-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.btn-add-to-existing.active .dropdown-arrow {
    transform: rotate(180deg);
}

.meals-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    margin-top: 0.5rem;
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.meals-dropdown.hidden {
    display: none;
}

.meals-dropdown-loading,
.meals-dropdown-empty,
.meals-dropdown-login {
    padding: 1rem;
    text-align: center;
    color: var(--text-light);
}

.meals-dropdown-login a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.meals-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.meals-dropdown-item:last-child {
    border-bottom: none;
}

.meals-dropdown-item:hover {
    background: var(--green-light);
}

.meals-dropdown-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-primary);
    flex-shrink: 0;
}

.meals-dropdown-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.meals-dropdown-item-info {
    flex: 1;
    min-width: 0;
}

.meals-dropdown-item-name {
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meals-dropdown-item-meta {
    font-size: 0.8rem;
    color: var(--text-light);
}

.meals-dropdown-item-added {
    color: var(--green-primary);
    font-size: 0.9rem;
}

/* Meal Builder Responsive */
@media (max-width: 1024px) {
    .meal-builder-grid {
        grid-template-columns: 1fr;
    }

    .meal-builder-right {
        position: static;
    }
}

@media (max-width: 768px) {
    .meal-builder-container {
        padding: 1rem;
        padding-top: calc(80px + 1rem);
    }

    .meal-builder-header h1 {
        font-size: 1.8rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .nutrition-summary-grid {
        grid-template-columns: 1fr;
    }

    .meal-item {
        flex-wrap: wrap;
    }

    .meal-item-quantity {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.5rem;
    }

    .meal-actions {
        flex-direction: column;
    }

    /* Ingredient rows: stack on mobile */
    .ingredient-row {
        flex-wrap: wrap;
    }

    .ingredient-amount {
        width: 56px;
        min-width: 50px;
    }

    .ingredient-unit {
        width: 80px;
        min-width: 70px;
    }

    .ingredient-name {
        flex: 1 1 100%;
        order: 4;
        margin-top: 0.25rem;
    }

    .ingredient-remove {
        order: 3;
    }
}

/* ==========================================
   AUTHENTICATION STYLES
   ========================================== */

.auth-page {
    background: var(--off-white);
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
}

.auth-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(58,125,92,0.06);
    margin: 0 auto;
    box-sizing: border-box;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header i {
    font-size: 4rem;
    color: var(--green-primary);
    margin-bottom: 1rem;
}

.auth-header h1 {
    color: var(--green-dark);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: var(--gray-medium);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.auth-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--gray-dark);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 1rem;
    color: var(--gray-medium);
    font-size: 1rem;
}

.input-with-icon input {
    width: 100%;
    padding: 0.9rem 1rem 0.9rem 2.75rem;
    border: 1px solid rgba(58,125,92,0.12);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    background: var(--off-white);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.input-with-icon input:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(58,125,92,0.1);
    background: var(--white);
}

.btn-auth-submit {
    background: var(--green-primary);
    color: var(--white);
    border: none;
    padding: 1rem;
    min-height: 48px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    margin-top: 0.5rem;
}

.btn-auth-submit:hover:not(:disabled) {
    background: var(--green-dark);
    box-shadow: 0 4px 14px rgba(58,125,92,0.3);
    transform: translateY(-1px);
}

.btn-auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.error-message {
    background: rgba(244, 67, 54, 0.1);
    color: #c62828;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.success-message {
    background: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.hidden {
    display: none !important;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-light);
}

.auth-footer p {
    color: var(--gray-medium);
}

.auth-footer a {
    color: var(--green-primary);
    font-weight: 500;
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Nav auth elements */
#authNavContainer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    min-width: 180px;
}

.user-greeting {
    color: var(--gold-light);
    font-weight: 500;
    margin-right: 0.5rem;
}

.nav-link.login-btn,
.nav-link.register-btn,
.nav-link.logout-btn {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.nav-link.login-btn {
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.3);
}

.nav-link.login-btn:hover {
    background: rgba(255,255,255,0.1);
}

.nav-link.register-btn {
    background: var(--gold-primary);
    color: var(--white);
}

.nav-link.register-btn:hover {
    background: var(--gold-dark);
}


.nav-link.logout-btn {
    color: var(--white);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav-link.logout-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* Responsive auth */
@media (max-width: 480px) {
    .auth-card {
        padding: 1.5rem;
    }

    .auth-header i {
        font-size: 3rem;
    }

    .auth-header h1 {
        font-size: 1.5rem;
    }

    #authNavContainer {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ==========================================
   MY MEALS HISTORY STYLES
   ========================================== */

.meal-history-card {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
    border: 1px solid rgba(58,125,92,0.06);
}

.meal-history-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.meal-history-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.meal-history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meal-history-image i {
    font-size: 2rem;
    color: var(--green-primary);
}

.meal-history-content {
    flex: 1;
    padding: 0 1rem;
}

.meal-history-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

.meal-history-date {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 0.5rem;
}

.meal-history-date i {
    margin-right: 0.25rem;
}

.meal-history-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meal-history-stats .meal-stat {
    font-size: 0.85rem;
    color: var(--gray-dark);
}

.meal-history-stats .meal-stat i {
    color: var(--gold-primary);
    margin-right: 0.25rem;
}

.meal-type-tag {
    background: var(--green-pale);
    color: var(--green-dark);
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    text-transform: capitalize;
}

.meal-history-arrow {
    color: var(--gray-medium);
    font-size: 1.2rem;
}

.meal-history-card:hover .meal-history-arrow {
    color: var(--green-primary);
}

/* Shopping List History Cards */
.shopping-list-card {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
    border: 1px solid rgba(58,125,92,0.06);
}

.shopping-list-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.shopping-list-card.completed {
    opacity: 0.7;
}

.shopping-list-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--green-primary);
}

.shopping-list-card.completed .shopping-list-icon {
    background: var(--gray-light);
    color: var(--gray-medium);
}

.shopping-list-content {
    flex: 1;
    padding: 0 1rem;
}

.shopping-list-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

.shopping-list-date {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 0.5rem;
}

.shopping-list-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.meal-type-tag.active {
    background: var(--green-pale);
    color: var(--green-dark);
}

.meal-type-tag.completed {
    background: var(--gray-light);
    color: var(--gray-medium);
}

.shopping-list-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shopping-list-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-light);
    border-radius: 3px;
    overflow: hidden;
}

.shopping-list-progress-fill {
    height: 100%;
    background: var(--green-primary);
    border-radius: 3px;
    transition: width 0.3s;
}

.shopping-list-progress-text {
    font-size: 0.75rem;
    color: var(--gray-medium);
    white-space: nowrap;
}

/* Card Delete Button (My Meals & My Shopping Lists) */
.card-delete-btn {
    background: none;
    border: none;
    color: var(--gray-medium);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0;
}

.meal-history-card:hover .card-delete-btn,
.shopping-list-card:hover .card-delete-btn,
.account-item-card:hover .card-delete-btn {
    opacity: 1;
}

.card-delete-btn:hover {
    color: #3b82f6;
    background: #eff6ff;
}

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

/* Always show on touch devices */
@media (hover: none) {
    .card-delete-btn {
        opacity: 0.6;
    }
}

@media (max-width: 480px) {
    .meal-history-card {
        flex-wrap: wrap;
    }

    .meal-history-image {
        width: 60px;
        height: 60px;
    }

    .meal-history-content {
        padding: 0.5rem 0;
        width: calc(100% - 80px);
    }

    .meal-history-arrow {
        display: none;
    }
}

/* ==========================================
   Account Page Styles
   ========================================== */

.account-page {
    max-width: 900px;
    margin: 0 auto;
}

.account-profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--green-dark), var(--green-primary));
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.account-avatar {
    font-size: 4rem;
    opacity: 0.9;
}

.account-info {
    flex: 1;
    min-width: 200px;
}

.account-info h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.account-email,
.account-joined {
    margin: 0.2rem 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

.account-email i,
.account-joined i {
    width: 1.2rem;
    margin-right: 0.25rem;
}

.btn-logout {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.btn-logout:hover {
    background: rgba(255, 255, 255, 0.25);
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.account-stat-card {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.08);
}

.account-stat-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.account-stat-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--green-primary);
}

.account-stat-card i {
    font-size: 1.5rem;
    color: var(--green-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.account-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-dark);
}

.account-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-medium);
    margin-top: 0.25rem;
}

.account-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.account-action-btn {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--green-pale);
    color: var(--green-dark);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
    border: 1px solid var(--green-light);
}

.account-action-btn:hover {
    background: var(--green-primary);
    color: white;
    transform: translateY(-2px);
}

.account-section {
    background: var(--white);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.08);
}

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

.account-section-header h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--green-dark);
}

.account-section-header h2 i {
    margin-right: 0.4rem;
    color: var(--green-primary);
}

.account-view-all {
    font-size: 0.85rem;
    color: var(--green-primary);
    text-decoration: none;
    font-weight: 500;
}

.account-view-all:hover {
    text-decoration: underline;
}

.account-empty {
    color: var(--gray-medium);
    font-size: 0.9rem;
    text-align: center;
    padding: 1rem 0;
}

.account-empty a {
    color: var(--green-primary);
    text-decoration: none;
    font-weight: 500;
}

.account-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.account-item-card:last-child {
    border-bottom: none;
}

.account-item-card:hover {
    background: var(--green-pale);
}

.account-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    overflow: hidden;
}

.account-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-item-icon.meal-icon {
    background: var(--gold-pale);
    color: var(--gold-dark);
}

.account-item-icon.list-icon {
    background: var(--green-pale);
    color: var(--green-primary);
}

.account-item-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.account-item-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-item-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--gray-medium);
    flex-wrap: wrap;
}

.account-item-meta i {
    margin-right: 0.15rem;
}

.account-status-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.account-status-badge.active {
    background: var(--green-pale);
    color: var(--green-primary);
}

.account-status-badge.completed {
    background: var(--gray-light);
    color: var(--gray-medium);
}

.account-item-arrow {
    color: var(--gray-medium);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-profile-header {
        text-align: center;
        justify-content: center;
    }

    .account-avatar {
        font-size: 3rem;
    }

    .account-info {
        text-align: center;
    }

    .account-item-meta {
        gap: 0.5rem;
    }
}

/* ==========================================
   Fitness Integration Styles
   ========================================== */

.fitness-section-desc {
    font-size: 0.9rem;
    color: var(--gray-medium);
    margin: -0.5rem 0 1rem;
    line-height: 1.5;
}

.fitness-connections-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.integration-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(58,125,92,0.08);
    background: var(--white);
    transition: all 0.2s;
}

.integration-card:hover {
    border-color: rgba(58,125,92,0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.integration-card.loading-card {
    justify-content: center;
    color: var(--gray-medium);
    font-size: 0.9rem;
    padding: 2rem;
}

.integration-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.integration-info {
    flex: 1;
    min-width: 0;
}

.integration-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 2px;
}

.integration-status {
    font-size: 0.8rem;
}

.integration-connected {
    color: #2e7d32;
}

.integration-connected i {
    margin-right: 2px;
}

.integration-disconnected {
    color: var(--gray-medium);
}

.integration-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.integration-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.integration-btn.connect-btn {
    background: var(--green-primary);
    color: #fff;
}

.integration-btn.connect-btn:hover {
    background: var(--green-dark);
}

.integration-btn.sync-btn {
    background: var(--green-pale);
    color: var(--green-dark);
    border: 1px solid var(--green-light);
}

.integration-btn.sync-btn:hover {
    background: var(--green-light);
    color: #fff;
}

.integration-btn.sync-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.integration-btn.disconnect-btn {
    background: transparent;
    color: var(--gray-medium);
    padding: 0.45rem 0.6rem;
}

.integration-btn.disconnect-btn:hover {
    background: #fdedef;
    color: #c0392b;
}

/* Source badges on activity items */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.source-badge.strava-badge {
    background: #FC4C0218;
    color: #FC4C02;
}

.source-badge.fitbit-badge {
    background: #00B0B918;
    color: #00889a;
}

/* Health page sync button */
.fitness-sync-btn {
    background: var(--green-pale) !important;
    border: 1px solid var(--green-light) !important;
}

.fitness-sync-btn:hover {
    background: var(--green-primary) !important;
    color: #fff !important;
}

/* Dark mode overrides for fitness */
[data-theme="dark"] .integration-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .integration-card:hover {
    border-color: var(--green-primary);
}

[data-theme="dark"] .integration-name {
    color: var(--text);
}

[data-theme="dark"] .integration-connected {
    color: #4caf50;
}

[data-theme="dark"] .integration-btn.sync-btn {
    background: rgba(58,125,92,0.15);
    border-color: rgba(58,125,92,0.3);
    color: var(--green-light);
}

[data-theme="dark"] .integration-btn.disconnect-btn:hover {
    background: rgba(192,57,43,0.15);
    color: #e74c3c;
}

[data-theme="dark"] .source-badge.strava-badge {
    background: rgba(252,76,2,0.15);
}

[data-theme="dark"] .source-badge.fitbit-badge {
    background: rgba(0,176,185,0.15);
}

[data-theme="dark"] .fitness-section-desc {
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .integration-card {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .integration-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================
   Shopping List Styles
   ========================================== */

.shopping-list-page {
    background: linear-gradient(135deg, var(--green-pale) 0%, #f8faf8 50%, var(--gold-pale) 100%);
    min-height: 100vh;
}

.shopping-list-page .loading-state {
    text-align: center;
    padding: 4rem 2rem;
}

.shopping-list-page .loading-state i {
    font-size: 3rem;
    color: var(--green-primary);
}

.shopping-list-page .loading-state p {
    color: var(--green-dark);
    font-weight: 500;
    margin-top: 1rem;
}

.shopping-list-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0.75rem;
    padding-top: 160px;
    text-align: center;
}

/* Shopping Pad */
.shopping-pad {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: visible;
    position: relative;
    border: 1px solid rgba(58,125,92,0.08);
}

/* Pad Header */
.pad-header {
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: relative;
    text-align: center;
}

.pad-spiral {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 0 80px;
    transform: translateY(-50%);
}

.pad-spiral span {
    width: 24px;
    height: 24px;
    background: linear-gradient(145deg, var(--gold-light) 0%, var(--gold-dark) 100%);
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3);
    border: 2px solid var(--gold-dark);
}

.pad-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 1;
}

.pad-title i {
    font-size: 1.8rem;
    color: var(--gold-light);
}

.pad-title h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.pad-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.pad-date label {
    font-size: 0.75rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pad-date label i {
    color: var(--gold-light);
}

.pad-date-input {
    background: rgba(255,255,255,0.15);
    border: 2px solid var(--gold-light);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: white;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.2s;
}

.pad-date-input:focus {
    background: rgba(255,255,255,0.25);
    outline: none;
}

.pad-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.pad-actions {
    display: flex;
    gap: 0.5rem;
}

.pad-action-btn {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.pad-action-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: var(--gold-light);
    transform: translateY(-2px);
}

.pad-action-btn.danger:hover {
    background: #e74c3c;
    border-color: #c0392b;
}

.pad-action-btn.success:hover {
    background: var(--green-primary);
    border-color: var(--green-dark);
}

.pad-action-btn.buy-online {
    background: rgba(52, 152, 219, 0.25);
    border-color: rgba(52, 152, 219, 0.5);
}

.pad-action-btn.buy-online:hover {
    background: #3498db;
    border-color: #2980b9;
}

.pad-name-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    color: white;
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    width: 280px;
    padding: 0.2rem 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: border-color 0.2s;
}

.pad-name-input:focus {
    outline: none;
    border-bottom-color: var(--gold-light);
}

.pad-name-input::placeholder {
    color: rgba(255,255,255,0.5);
}

/* ---- Fixed Top Bar (search + actions always visible) ---- */
.pad-fixed-top {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--white);
    border-bottom: 1px solid rgba(58,125,92,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Desktop: offset for sidebar */
@media (min-width: 900px) {
    .pad-fixed-top {
        left: 240px;
    }
}

.pad-fixed-top.hidden {
    display: none;
}

[data-theme="dark"] .pad-fixed-top {
    background: var(--dark-card);
    border-bottom-color: rgba(255,255,255,0.06);
}

.pad-fixed-search {
    padding: 0.5rem 0.75rem 0;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pad-fixed-search .pad-search {
    max-width: 100%;
}

.pad-fixed-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem 0.45rem;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

/* Search results dropdown under fixed bar */
.pad-fixed-top .pad-search-results {
    position: absolute;
    left: 0;
    right: 0;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1.5px solid var(--green-primary);
    max-height: 50vh;
    margin-top: 0.3rem;
}

.pad-name-input-compact {
    flex: 1;
    min-width: 100px;
    max-width: 180px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--green-pale);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-dark);
    padding: 0.2rem 0.3rem;
}

.pad-name-input-compact:focus {
    outline: none;
    border-bottom-color: var(--green-primary);
}

[data-theme="dark"] .pad-name-input-compact {
    color: var(--dark-text);
    border-bottom-color: rgba(255,255,255,0.12);
}

.pad-date-input-compact {
    background: transparent;
    border: 1px solid var(--green-pale);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--gray-dark);
    max-width: 130px;
}

.pad-date-input-compact:focus {
    outline: none;
    border-color: var(--green-primary);
}

[data-theme="dark"] .pad-date-input-compact {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: var(--dark-text);
    color-scheme: dark;
}

.pad-actions-row {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.pad-action-chip {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--green-pale);
    background: var(--white);
    color: var(--gray-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s;
    text-decoration: none;
}

.pad-action-chip:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
    color: var(--green-dark);
}

.pad-action-chip.danger:hover {
    background: #ffeef0;
    border-color: #e74c3c;
    color: #e74c3c;
}

.pad-action-chip.success:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
    color: var(--green-primary);
}

[data-theme="dark"] .pad-action-chip {
    background: var(--dark-card);
    border-color: rgba(255,255,255,0.1);
    color: var(--dark-text-secondary);
}

[data-theme="dark"] .pad-action-chip:hover {
    background: rgba(255,255,255,0.08);
}

/* Health Summary */
/* Shopping Filter Bar */
.shopping-filter-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-bottom: 2px dashed var(--gold-pale);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.shopping-filter-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--gray-light);
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-medium);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.shopping-filter-tab:hover {
    border-color: var(--green-light);
    color: var(--green-dark);
}

.shopping-filter-tab.active {
    background: var(--green-primary);
    color: var(--white);
    border-color: var(--green-primary);
}

.shopping-filter-tab i {
    font-size: 0.8rem;
}

/* Pad Sections */
.pad-section {
    padding: 0.75rem;
    text-align: left;
}

.pad-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.pad-section-header i {
    color: var(--gold-primary);
    font-size: 0.85rem;
}

.section-count {
    font-weight: 500;
    color: var(--gray-medium);
    font-size: 0.72rem;
    background: var(--green-pale);
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
}

.empty-section {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--gray-medium);
    background: linear-gradient(135deg, var(--green-pale) 0%, #fff 100%);
    border-radius: 10px;
    border: 1px dashed var(--green-light);
}

.empty-section i {
    font-size: 1.8rem;
    color: var(--green-light);
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

.empty-section p {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Pad Items — compact single-row layout */
.pad-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pad-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--green-pale);
    transition: background 0.15s;
    text-align: left;
}

.pad-item:hover {
    background: var(--green-pale);
}

.pad-item.checked {
    opacity: 0.45;
    background: var(--gray-light);
    border-color: var(--gray-light);
}

.pad-item.checked .pad-item-name {
    text-decoration: line-through;
    color: var(--gray-medium);
}

.pad-item-check {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--green-primary);
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

.pad-item-check:hover {
    color: var(--green-dark);
}

.pad-item-content {
    flex: 1;
    min-width: 0;
}

.pad-item-name {
    font-weight: 600;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    line-height: 1.3;
}

.clickable {
    cursor: pointer;
}

.pad-item-name.clickable:hover,
.meal-item-name.clickable:hover {
    color: var(--green-primary);
    text-decoration: underline;
}

.pad-item-image.clickable:hover,
.meal-item-image.clickable:hover {
    opacity: 0.8;
}

.pad-item-brand {
    font-size: 0.7rem;
    color: var(--gray-medium);
    display: none;
}

.dup-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.15);
    border-radius: 3px;
    padding: 0.05rem 0.35rem;
    margin-top: 0.1rem;
}

.dup-badge i {
    font-size: 0.5rem;
}

.pad-item-meta {
    display: none;
}

/* Inline qty/unit next to product name */
.pad-item-qty-inline {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.pad-item-qty-inline .quantity-value {
    width: 42px;
    padding: 0.2rem 0.25rem;
    border: 1px solid var(--green-pale);
    border-radius: 5px;
    font-size: 0.78rem;
    text-align: center;
    font-weight: 500;
    font-family: inherit;
}

.pad-item-qty-inline .quantity-value:focus {
    border-color: var(--green-primary);
    outline: none;
}

.pad-item-qty-inline .quantity-type {
    padding: 0.2rem 0.2rem;
    border: 1px solid var(--green-pale);
    border-radius: 5px;
    font-size: 0.72rem;
    background: var(--white);
    color: var(--gray-dark);
    cursor: pointer;
    font-family: inherit;
}

.pad-item-qty-inline .quantity-type:focus {
    border-color: var(--green-primary);
    outline: none;
}

/* Legacy quantity row (kept for backward compat) */
.pad-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.quantity-type {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--green-pale);
    border-radius: 5px;
    font-size: 0.75rem;
    background: var(--white);
    color: var(--gray-dark);
    cursor: pointer;
}

.quantity-type:focus {
    border-color: var(--green-primary);
    outline: none;
}

.quantity-value {
    width: 50px;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--green-pale);
    border-radius: 5px;
    font-size: 0.78rem;
    text-align: center;
    font-weight: 500;
}

.quantity-value:focus {
    border-color: var(--green-primary);
    outline: none;
}

.pad-item-nutrition {
    display: none;
}

.item-calories {
    display: none;
}

.pad-item-remove {
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.3rem;
    transition: color 0.15s;
    border-radius: 4px;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pad-item-remove:hover {
    color: var(--danger);
    background: #fee;
}

/* Add Items Section */
.pad-add-section {
    padding: 0.6rem 0.75rem;
    background: var(--white);
    border-bottom: 1px solid rgba(58,125,92,0.06);
    text-align: center;
}

.pad-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1.5px solid var(--green-light);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s;
    max-width: 100%;
    margin: 0 auto;
}

.pad-search:focus-within {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.08);
}

.pad-search > i {
    color: var(--green-primary);
    font-size: 0.9rem;
}

.pad-search input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
}

.pad-search input::placeholder {
    color: var(--gray-medium);
}

.pad-search-add-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--green-primary);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}
.pad-search-add-btn:hover {
    background: var(--green-dark);
    transform: scale(1.1);
}

.pad-search-scan-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--green-primary);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
}

.pad-search-scan-btn:hover {
    background: var(--green-dark);
    transform: scale(1.1);
}

/* Editable custom item names */
.pad-item-name.editable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.pad-item-name.editable:hover {
    color: var(--green-primary);
}
.pad-item-name .edit-hint {
    font-size: 0.65rem;
    color: var(--gray-medium);
    opacity: 0;
    transition: opacity 0.2s;
}
.pad-item-name.editable:hover .edit-hint {
    opacity: 1;
}
.edit-item-input {
    width: 100%;
    border: 1px solid var(--green-primary);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.pad-search-results {
    background: var(--white);
    border: 1.5px solid var(--green-primary);
    border-radius: 10px;
    margin: 0.4rem 0.75rem 0.5rem;
    max-height: 260px;
    overflow: hidden auto;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    text-align: left;
}

.pad-search-results .search-result-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--green-pale);
}

.pad-search-results .search-result-item:hover {
    background: var(--green-pale);
}

.pad-search-results .search-result-item:last-child {
    border-bottom: none;
}

.pad-search-results .search-result-item img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--green-pale);
}

.pad-search-results .search-result-info {
    flex: 1;
    min-width: 0;
}

.pad-search-results .search-result-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pad-search-results .search-result-brand {
    font-size: 0.7rem;
    color: var(--gray-medium);
}

.pad-search-results .add-item-btn {
    background: var(--green-primary);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.pad-search-results .add-item-btn:hover {
    background: var(--green-dark);
}

.pad-search-results .search-loading,
.pad-search-results .no-results {
    padding: 1rem;
    text-align: center;
    color: var(--gray-medium);
    font-size: 0.85rem;
}

/* Progress */
.pad-progress {
    padding: 0.5rem 0.75rem;
    background: var(--green-dark);
    text-align: center;
    border-radius: 0 0 14px 14px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.progress-text {
    font-size: 0.72rem;
    color: white;
    font-weight: 500;
    white-space: nowrap;
}

.progress-text span {
    color: var(--gold-light);
    font-weight: 700;
}

.progress-bar {
    height: 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
    flex: 1;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Buy With Retailers */
.buy-with-section {
    padding: 0.75rem;
    border-top: 1px solid rgba(58,125,92,0.08);
    text-align: center;
}

.buy-with-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.buy-with-header i {
    color: var(--green-primary);
}

.buy-with-description {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 1rem;
}

.buy-with-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.buy-with-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    color: white;
    min-width: 120px;
}

.buy-with-btn i {
    font-size: 1.2rem;
}

.buy-with-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.buy-with-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.buy-with-btn.tesco {
    background: linear-gradient(135deg, #00539f, #003d78);
}
.buy-with-btn.sainsburys {
    background: linear-gradient(135deg, #f06c00, #d45e00);
}
.buy-with-btn.asda {
    background: linear-gradient(135deg, #78b82a, #5f9a1f);
}

/* Floating Buy Online FAB */
.floating-buy-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.floating-buy-fab.hidden {
    display: none;
}

.fab-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(45, 106, 79, 0.4);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(45, 106, 79, 0.5);
}

.floating-buy-fab.open .fab-toggle {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
    transform: rotate(45deg);
}

.fab-menu {
    display: none;
    position: absolute;
    bottom: 68px;
    right: 0;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 1rem;
    min-width: 220px;
    animation: fabSlideUp 0.25s ease-out;
}

.floating-buy-fab.open .fab-menu {
    display: block;
}

@keyframes fabSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fab-menu-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    text-align: center;
}

.fab-menu-share {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    justify-content: center;
}

.fab-share-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--green-primary);
    color: white;
}

.fab-share-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.fab-share-btn.whatsapp {
    background: #25D366;
}

.fab-share-btn.email {
    background: #1976d2;
}

.fab-menu-retailers {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fab-retailer-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    width: 100%;
}

.fab-retailer-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.fab-retailer-btn.tesco {
    background: linear-gradient(135deg, #00539f, #003d78);
}

.fab-retailer-btn.sainsburys {
    background: linear-gradient(135deg, #f06c00, #d45e00);
}

.fab-retailer-btn.asda {
    background: linear-gradient(135deg, #78b82a, #5f9a1f);
}

@media (max-width: 768px) {
    .floating-buy-fab {
        bottom: 16px;
        right: 16px;
    }

    .fab-toggle {
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }

    .fab-menu {
        bottom: 56px;
        min-width: 200px;
    }
}

/* Floating Barcode FAB — bottom-left */
.floating-barcode-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9998;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(45, 106, 79, 0.4);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-barcode-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(45, 106, 79, 0.5);
}

/* Offset both FABs above the mobile bottom nav */
.has-app-nav .floating-barcode-fab {
    bottom: 80px;
}

.has-app-nav .floating-buy-fab {
    bottom: 80px;
}

@media (max-width: 768px) {
    .floating-barcode-fab,
    .floating-buy-fab {
        display: none !important;
    }
}

@media print {
    .floating-buy-fab,
    .floating-barcode-fab {
        display: none !important;
    }
}

/* Buy With Panel */
.buy-with-panel {
    margin-top: 1rem;
    background: var(--off-white);
    border: 1px solid rgba(58, 125, 92, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.buy-with-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--green-dark);
    color: white;
}

.buy-with-panel-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buy-with-panel-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.buy-with-panel-close:hover {
    background: rgba(255,255,255,0.25);
}

.buy-with-panel-hint {
    padding: 0.75rem 1.25rem;
    font-size: 0.8rem;
    color: var(--gray-medium);
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin: 0;
}

.buy-with-items {
    max-height: 400px;
    overflow-y: auto;
}

.buy-with-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.buy-with-item:last-child {
    border-bottom: none;
}

.buy-with-item.opened {
    background: var(--green-pale);
    opacity: 0.7;
}

.buy-with-item.opened .buy-with-item-name {
    text-decoration: line-through;
}

.buy-with-item-check {
    cursor: pointer;
    color: var(--gray-medium);
    font-size: 1.1rem;
}

.buy-with-item.opened .buy-with-item-check {
    color: var(--green-primary);
}

.buy-with-item-info {
    flex: 1;
    min-width: 0;
}

.buy-with-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buy-with-item-brand {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.buy-with-item-qty {
    font-size: 0.75rem;
    color: var(--green-primary);
    font-weight: 600;
}

.buy-with-item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--green-primary);
    color: white;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.buy-with-item-link:hover {
    background: var(--green-dark);
}

.buy-with-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-medium);
}

/* Share & Copy Buttons */
.buy-with-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}

.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.share-btn.copy-btn {
    background: var(--green-primary);
}
.share-btn.copy-btn:hover {
    background: var(--green-dark);
}

.share-btn.whatsapp-btn {
    background: #25D366;
}
.share-btn.whatsapp-btn:hover {
    background: #1da851;
}

.share-btn.email-btn {
    background: #5c6bc0;
}
.share-btn.email-btn:hover {
    background: #3f51b5;
}

.copy-confirmation {
    color: var(--green-primary);
    font-size: 0.85rem;
    font-weight: 600;
    animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-8px); }
    15% { opacity: 1; transform: translateX(0); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Sequential Buy Navigator */
.buy-sequential-nav {
    padding: 1rem 1.25rem;
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.buy-sequential-progress {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 0.75rem;
}

.buy-sequential-progress strong {
    color: var(--green-primary);
}

.buy-sequential-item {
    text-align: center;
    padding: 0.75rem 1rem;
    background: var(--green-pale);
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.buy-sequential-item-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

.buy-sequential-item-detail {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.buy-sequential-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.buy-seq-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.buy-seq-btn.primary {
    background: var(--green-primary);
    color: white;
}

.buy-seq-btn.primary:hover {
    background: var(--green-dark);
}

.buy-seq-btn.secondary {
    background: var(--off-white);
    color: var(--gray-dark);
}

.buy-seq-btn.secondary:hover {
    background: var(--gray-light);
}

/* Panel Divider */
.buy-with-panel-divider {
    padding: 0.6rem 1.25rem;
    background: var(--off-white);
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Highlight current item in checklist */
.buy-with-item.current {
    background: #e8f5e9;
    border-left: 3px solid var(--green-primary);
}

.buy-with-item.current .buy-with-item-name {
    color: var(--green-primary);
    font-weight: 600;
}

@media (max-width: 600px) {
    .buy-with-buttons {
        flex-direction: column;
        align-items: center;
    }

    .buy-sequential-actions {
        flex-direction: column;
    }

    .buy-seq-btn {
        justify-content: center;
    }

    .buy-with-share {
        flex-direction: column;
    }

    .share-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Top Add Section */
.pad-add-top {
    border-bottom: 2px dashed var(--gold-light);
    border-top: none;
}

/* Shopping List Search Filters */
.sl-search-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0 0.25rem;
    flex-wrap: wrap;
    max-width: 540px;
    margin: 0 auto;
}

.sl-filter-btn {
    padding: 0.3rem 0.7rem;
    border: 1.5px solid var(--green-light);
    border-radius: 16px;
    background: var(--green-pale);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--green-primary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sl-filter-btn:hover {
    background: #e0f2e0;
    border-color: var(--green-primary);
}

.sl-filter-btn.active {
    background: var(--green-primary);
    border-color: var(--green-primary);
    color: white;
}

.sl-filter-btn.score-a {
    border-color: #2d8b36;
    color: #2d8b36;
    background: #eaf5ea;
}
.sl-filter-btn.score-a:hover {
    background: #d4ebd4;
}
.sl-filter-btn.score-a.active {
    background: #2d8b36;
    color: white;
}
.sl-filter-btn.score-b {
    border-color: #85bb2f;
    color: #5a8a10;
    background: #f2f9e8;
}
.sl-filter-btn.score-b:hover {
    background: #e4f2d0;
}
.sl-filter-btn.score-b.active {
    background: #85bb2f;
    color: white;
}
.sl-filter-btn.score-c {
    border-color: #e6b800;
    color: #b89a00;
    background: #fdf8e1;
}
.sl-filter-btn.score-c:hover {
    background: #faf0c0;
}
.sl-filter-btn.score-c.active {
    background: #fecb02;
    color: #333;
}

.sl-filter-divider {
    width: 1px;
    height: 20px;
    background: #ddd;
    margin: 0 0.25rem;
}

/* Search Section Labels */
.search-section-label {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-result-meal-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.search-result-meal-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Shopping Templates Section */
.template-section {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

.template-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: var(--white);
    border: 1px solid var(--green-primary);
    color: var(--green-dark);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.template-btn:hover {
    background: var(--green-light);
    border-color: var(--green-dark);
}

.template-btn i {
    color: var(--green-primary);
}

.template-badge {
    background: var(--green-primary);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-weight: 700;
    min-width: 1.2rem;
    text-align: center;
}

/* Recurring Items Modal */
.recurring-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recurring-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.recurring-modal-content {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.recurring-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.recurring-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

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

.recurring-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.recurring-modal-footer .btn-cancel {
    padding: 0.5rem 1.25rem;
    background: var(--off-white);
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.recurring-modal-footer .btn-primary {
    padding: 0.5rem 1.25rem;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.recurring-modal-footer .btn-primary:hover {
    background: var(--green-dark);
}

.recurring-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.recurring-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 400px;
    overflow-y: auto;
}

.recurring-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.recurring-item:hover {
    background: var(--off-white);
}

.recurring-item.in-list {
    opacity: 0.5;
}

.recurring-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green-primary);
    flex-shrink: 0;
}

.recurring-item-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
}

.recurring-item-freq {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--off-white);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
}

.recurring-item-tag {
    font-size: 0.7rem;
    color: var(--green-primary);
    font-weight: 600;
    font-style: italic;
}

/* Recipe Import Section */
.pad-recipe-import {
    padding: 0 2rem;
    border-bottom: 2px dashed var(--gold-light);
}

.recipe-import-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    cursor: pointer;
    color: var(--green-primary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.recipe-import-toggle:hover {
    color: var(--green-dark);
}

.recipe-import-toggle .toggle-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.recipe-import-toggle .toggle-arrow.rotated {
    transform: rotate(180deg);
}

.recipe-import-panel {
    padding-bottom: 1.25rem;
}

.recipe-import-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.recipe-import-url {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.recipe-import-url:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1);
}

.recipe-import-fetch-btn {
    padding: 0.75rem 1.25rem;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-import-fetch-btn:hover {
    background: var(--green-dark);
}

.recipe-import-status {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-import-status.loading {
    background: var(--gold-pale);
    color: var(--gold-dark);
}

.recipe-import-status.error {
    background: #fde8e8;
    color: var(--danger);
}

.recipe-import-status.success {
    background: var(--green-pale);
    color: var(--green-dark);
}

/* Recipe Import Preview */
.recipe-import-preview {
    margin-top: 0.75rem;
    background: var(--white);
    border: 2px solid var(--green-light);
    border-radius: 12px;
    overflow: hidden;
}

.recipe-preview-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--green-pale);
    border-bottom: 1px solid #e0e0e0;
}

.recipe-preview-header > i {
    font-size: 1.5rem;
    color: var(--green-primary);
}

.recipe-preview-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--gray-dark);
}

.recipe-preview-count {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.recipe-preview-ingredients {
    max-height: 250px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.recipe-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
}

.recipe-preview-item i {
    color: var(--green-light);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.recipe-preview-qty {
    color: var(--green-primary);
    font-weight: 600;
    min-width: 50px;
    font-size: 0.85rem;
}

.recipe-preview-name-text {
    color: var(--gray-dark);
}

.recipe-preview-actions {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.recipe-add-all-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.recipe-add-all-btn:hover {
    background: var(--green-dark);
}

.recipe-cancel-btn {
    padding: 0.7rem 1.25rem;
    background: var(--off-white);
    color: var(--gray-dark);
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.recipe-cancel-btn:hover {
    background: #e0e0e0;
}

.recipe-import-adding {
    padding: 1.5rem;
    text-align: center;
    color: var(--green-primary);
    font-weight: 500;
}

/* Receipt Import */
.receipt-import-options {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.receipt-option-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem;
    border: 2px dashed var(--green-light);
    border-radius: 12px;
    background: var(--green-pale);
    color: var(--green-dark);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.receipt-option-btn i {
    font-size: 1.5rem;
}

.receipt-option-btn:hover {
    border-color: var(--green-primary);
    background: #d8f3dc;
    transform: translateY(-1px);
}

.receipt-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    resize: vertical;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.receipt-textarea:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1);
}

.receipt-preview-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.receipt-preview-item input[type="checkbox"] {
    accent-color: var(--green-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.receipt-preview-item label {
    flex: 1;
    font-size: 0.9rem;
    cursor: pointer;
}

.receipt-preview-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Shopping Item Groups (meals & recipes on the list) */
/* Sort Toggle Bar */
.sort-toggle-bar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.25rem;
}

.sort-toggle-label {
    font-size: 0.8rem;
    color: var(--gray-medium);
    font-weight: 500;
    white-space: nowrap;
}

.sort-toggle-label i {
    margin-right: 0.25rem;
}

.sort-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--gray-light);
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-medium);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.sort-toggle-btn:hover {
    border-color: var(--green-light);
    color: var(--green-dark);
}

.sort-toggle-btn.active {
    background: var(--green-primary);
    color: var(--white);
    border-color: var(--green-primary);
}

/* Aisle Group Styling */
.aisle-group .shopping-group-header {
    background: linear-gradient(135deg, var(--aisle-color, var(--green-pale)) 0%, #fff 100%);
}

.aisle-group .shopping-group-header > i {
    color: var(--aisle-icon-color, var(--green-primary));
    font-size: 1.15rem;
}

/* Combined Item (aisle mode - merged duplicates) */
.combined-item .pad-item-combined-qty {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--green-primary);
    flex-shrink: 0;
    white-space: nowrap;
}

.combined-item .pad-item-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.combined-source {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.6rem;
    color: var(--gray-medium);
    background: var(--gray-light);
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
}

.combined-source i {
    font-size: 0.5rem;
}

/* Retailer panel source tags */
.rp-source-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: var(--gray-medium);
    background: rgba(255, 255, 255, 0.5);
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    margin-right: 0.25rem;
}

.rp-source-tag i {
    font-size: 0.6rem;
}

/* Auto-scroll highlight pulse when panel navigates to an item */
.pad-item.rp-highlight {
    animation: rpHighlightPulse 1.5s ease;
}

@keyframes rpHighlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4); }
    30% { box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.3); border-color: var(--green-primary); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.shopping-group {
    margin-bottom: 0.5rem;
    border: 1px solid var(--green-pale);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}

.shopping-group-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--green-pale);
    border-bottom: 1px solid var(--green-pale);
    font-size: 0.78rem;
    color: var(--green-dark);
}

.shopping-group-header > i {
    font-size: 0.85rem;
    color: var(--green-primary);
}

.shopping-group-name {
    font-weight: 600;
    flex: 1;
}

a.shopping-group-link {
    color: var(--green-dark);
    text-decoration: none;
    transition: color 0.2s;
}

a.shopping-group-link:hover {
    color: var(--green-primary);
    text-decoration: underline;
}

a.shopping-group-link i.fa-external-link-alt {
    font-size: 0.65rem;
    opacity: 0.5;
    margin-left: 0.3rem;
}

.shopping-group-count {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.shopping-group-meta {
    font-size: 0.75rem;
    color: var(--gold-primary);
    font-weight: 500;
}

.shopping-group-remove {
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.shopping-group-remove:hover {
    color: var(--danger);
    background: rgba(244, 67, 54, 0.1);
}

.shopping-group-items .pad-item {
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.shopping-group-items .pad-item:last-child {
    border-bottom: none;
}

.shopping-group .empty-section.small {
    padding: 1rem;
    font-size: 0.85rem;
}

.shopping-group .empty-section.small i {
    display: none;
}

/* Recipe Ingredients Groups (on the list) */
.recipe-group {
    margin-bottom: 0.5rem;
}

.recipe-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fff3e0, #fff8f0);
    border-bottom: 1px solid #ffe0b2;
    font-size: 0.9rem;
    color: var(--gold-dark);
}

.recipe-group-header > i {
    font-size: 1rem;
}

.recipe-group-name {
    font-weight: 600;
    flex: 1;
}

.recipe-group-count {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.recipe-group-remove {
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.recipe-group-remove:hover {
    color: var(--danger);
    background: rgba(244, 67, 54, 0.1);
}

.recipe-ingredient-item {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
}

.recipe-ingredient-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-light);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.pad-item-quantity-text {
    font-size: 0.8rem;
    color: var(--green-primary);
    font-weight: 500;
}

@media (max-width: 600px) {
    .pad-recipe-import {
        padding: 0 1rem;
    }

    .recipe-import-input-row {
        flex-direction: column;
    }

    .recipe-import-fetch-btn {
        width: 100%;
        justify-content: center;
    }

    .recipe-preview-actions {
        flex-direction: column;
    }

    .recipe-preview-ingredients {
        max-height: 200px;
    }

    .sl-search-filters {
        gap: 0.3rem;
    }

    .sl-filter-btn {
        padding: 0.25rem 0.55rem;
        font-size: 0.7rem;
    }
}

/* Print Template */
.print-template {
    display: none;
}

@media print {
    @page {
        margin: 0.5cm;
        size: A4;
    }

    body * {
        visibility: hidden;
    }

    .print-template,
    .print-template * {
        visibility: visible;
    }

    .print-template {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0.5rem;
        background: var(--white);
        font-size: 9pt;
    }

    .print-header {
        text-align: center;
        border-bottom: 1px solid #333;
        padding-bottom: 0.4rem;
        margin-bottom: 0.5rem;
    }

    .print-header h1 {
        margin: 0;
        font-size: 12pt;
        font-weight: 700;
    }

    .print-date {
        color: #666;
        margin-top: 0.2rem;
        font-size: 8pt;
    }

    .print-content {
        column-count: 2;
        column-gap: 1rem;
        column-rule: 1px solid #ddd;
    }

    .print-section {
        break-inside: avoid;
        margin-bottom: 0.5rem;
        page-break-inside: avoid;
    }

    .print-section h2 {
        font-size: 9pt;
        font-weight: 600;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.2rem;
        margin-bottom: 0.3rem;
        margin-top: 0;
    }

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

    .print-list li {
        padding: 0.15rem 0;
        border-bottom: 1px dotted #eee;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 8pt;
        line-height: 1.3;
    }

    .print-list li.checked {
        text-decoration: line-through;
        color: #999;
    }

    .print-checkbox {
        font-size: 9pt;
        width: 12px;
        flex-shrink: 0;
    }

    .print-item-name {
        flex: 1;
        font-size: 8pt;
    }

    .print-item-qty {
        color: #666;
        font-size: 7pt;
        white-space: nowrap;
    }

    .print-item-meta {
        color: #666;
        font-size: 7pt;
    }

    .print-summary {
        background: #f9f9f9;
        padding: 0.4rem;
        border-radius: 4px;
        margin-top: 0.5rem;
        font-size: 7pt;
        break-inside: avoid;
    }

    .print-footer {
        text-align: center;
        margin-top: 2rem;
        color: #999;
        font-size: 0.8rem;
    }
}

/* Shopping List Responsive */
@media (max-width: 768px) {
    .shopping-list-container {
        padding: 0.5rem;
        padding-top: 150px;
    }

    .pad-fixed-search {
        padding: 0.5rem 0.5rem 0;
    }

    .pad-fixed-actions {
        gap: 0.35rem;
        padding: 0.3rem 0.5rem 0.4rem;
    }

    .pad-fixed-top .pad-search-results {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .pad-name-input-compact {
        font-size: 0.8rem;
        max-width: 130px;
    }

    .pad-date-input-compact {
        font-size: 0.7rem;
        max-width: 110px;
    }

    .pad-action-chip {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .pad-section-header {
        font-size: 0.8rem;
    }

    .pad-search {
        max-width: 100%;
        padding: 0.4rem 0.6rem;
    }

    .pad-search input {
        font-size: 0.8rem;
    }

    .pad-search-results {
        max-width: 100%;
    }

    .pad-item {
        padding: 0.4rem 0.5rem;
        gap: 0.4rem;
    }

    .pad-item-name {
        font-size: 0.78rem;
    }

    .pad-item-qty-inline .quantity-value {
        width: 38px;
        font-size: 0.72rem;
    }

    .pad-item-qty-inline .quantity-type {
        font-size: 0.68rem;
    }
}

/* Add to Shopping List Button */
.btn-add-to-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.btn-add-to-shopping:hover {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4);
}

.btn-add-to-shopping:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    transform: none;
}

/* ==============================================
   RECIPE IMPORT MODAL
   ============================================== */

.btn-import-recipe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(212, 165, 55, 0.3);
}

.btn-import-recipe:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 165, 55, 0.4);
}

#recipeImportModal {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.recipe-import-modal {
    max-width: 600px;
    width: 95%;
    z-index: 1001;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-light);
}

.modal-header h2 {
    font-size: 1.3rem;
    color: var(--green-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header h2 i {
    color: var(--gold-primary);
}

.modal-header .modal-close {
    position: static;
    flex-shrink: 0;
}

.modal-body {
    padding: 0;
}

.recipe-url-section {
    text-align: center;
}

.recipe-url-section p {
    color: var(--gray-medium);
    margin-bottom: 1.5rem;
}

.url-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--gray-light);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

.url-input-wrapper:focus-within {
    border-color: var(--green-primary);
    background: var(--white);
}

.url-input-wrapper i {
    color: var(--gray-medium);
    margin-right: 0.75rem;
    font-size: 1.1rem;
}

.url-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--green-dark);
}

.url-input-wrapper input:focus {
    outline: none;
}

.url-input-wrapper input::placeholder {
    color: var(--gray-medium);
}

.btn-fetch-recipe {
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.btn-fetch-recipe:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.recipe-error {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: center;
}

.recipe-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
}

.recipe-loading .loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-light);
    border-top-color: var(--green-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.recipe-loading p {
    margin-top: 1rem;
    color: var(--gray-medium);
}

.recipe-results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recipe-info h3 {
    font-size: 1.3rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.recipe-description {
    color: var(--gray-medium);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ingredients-list h4 {
    font-size: 1rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ingredients-list h4 i {
    color: var(--gold-primary);
}

.ingredients-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.ingredient-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-light);
    border-radius: 10px;
    transition: all 0.2s;
}

.ingredient-item.matched {
    background: rgba(46, 125, 50, 0.08);
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.ingredient-item.unmatched {
    background: rgba(212, 165, 55, 0.08);
    border: 1px solid rgba(212, 165, 55, 0.2);
}

.ingredient-checkbox {
    flex-shrink: 0;
    padding-top: 2px;
}

.ingredient-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green-primary);
    cursor: pointer;
}

.ingredient-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.ingredient-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ingredient-original {
    color: var(--green-dark);
    font-size: 0.95rem;
}

.ingredient-match {
    font-size: 0.8rem;
    color: var(--green-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ingredient-match i {
    font-size: 0.75rem;
}

.ingredient-no-match {
    font-size: 0.8rem;
    color: var(--gold-dark);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ingredient-no-match i {
    font-size: 0.75rem;
}

.recipe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-add-matched {
    flex: 1;
    background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-dark) 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-add-matched:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
}

.btn-add-matched:disabled {
    background: var(--gray-medium);
    cursor: not-allowed;
}

.btn-add-shopping-list {
    flex: 1;
    background: var(--white);
    color: #2563eb;
    border: 2px solid #2563eb;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-add-shopping-list:hover:not(:disabled) {
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-add-shopping-list:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-try-another {
    background: var(--gray-light);
    color: var(--gray-medium);
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-try-another:hover {
    background: var(--green-pale);
    color: var(--green-dark);
}

/* Ingredient inline search and action buttons */
.ingredient-item {
    flex-wrap: wrap;
}

.ingredient-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ingredient-match small {
    color: var(--gray-medium);
    font-size: 0.7rem;
}

.btn-search-ingredient,
.btn-change-match {
    background: transparent;
    border: 1px solid var(--gray-medium);
    color: var(--gray-medium);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.btn-search-ingredient:hover {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: white;
}

.btn-change-match:hover {
    background: var(--green-primary);
    border-color: var(--green-primary);
    color: white;
}

.ingredient-inline-search {
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gray-medium);
}

.ingredient-inline-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-medium);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.ingredient-inline-search input:focus {
    outline: none;
    border-color: var(--green-primary);
}

.inline-search-results {
    max-height: 200px;
    overflow-y: auto;
}

.inline-search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.inline-search-result:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
}

.inline-search-result img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--gray-light);
}

.inline-result-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.inline-result-name {
    font-size: 0.85rem;
    color: var(--green-dark);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inline-result-brand {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.inline-search-loading,
.inline-search-empty,
.inline-search-error {
    padding: 1rem;
    text-align: center;
    color: var(--gray-medium);
    font-size: 0.85rem;
}

.inline-search-loading i {
    margin-right: 0.5rem;
}

/* ==========================================
   Retailer Panel (Inline Shopping)
   ========================================== */

/* ==========================================
   RETAILER MINI-BAR (floating bottom bar)
   ========================================== */

.rp-mini-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background: #1a1a2e;
    color: white;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    pointer-events: none;
    display: flex !important;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rp-mini-bar.visible {
    transform: translateY(0);
    pointer-events: auto;
}

.rp-mini-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.rp-mini-progress-fill {
    height: 100%;
    background: var(--rp-color, #2d6a4f);
    transition: width 0.3s ease;
}

.rp-mini-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
}

.rp-mini-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.rp-mini-badge {
    background: var(--rp-color, #2d6a4f);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rp-mini-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp-mini-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-mini-group {
    font-size: 0.6rem;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-mini-group:empty {
    display: none;
}

.rp-mini-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.rp-mini-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.rp-mini-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.rp-mini-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

.rp-mini-btn.rp-mini-search {
    background: var(--rp-color, #2d6a4f);
    width: 42px;
    height: 42px;
    font-size: 1rem;
    border-radius: 10px;
}

.rp-mini-btn.rp-mini-search:hover {
    filter: brightness(1.15);
}

.rp-mini-btn.rp-mini-save {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    font-size: 0.8rem;
}

.rp-mini-btn.rp-mini-save:hover {
    background: rgba(255, 193, 7, 0.4);
}

.rp-mini-btn.rp-mini-save.saved {
    background: rgba(76, 175, 80, 0.25);
    color: #4caf50;
}

.rp-mini-btn.rp-mini-save.hidden {
    display: none;
}

.rp-mini-btn.rp-mini-expand {
    background: transparent;
    opacity: 0.6;
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
}

.rp-mini-btn.rp-mini-expand:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}


@media (max-width: 600px) {
    .rp-mini-content {
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .rp-mini-btn {
        width: 34px;
        height: 34px;
    }

    .rp-mini-btn.rp-mini-search {
        width: 38px;
        height: 38px;
    }

    .rp-mini-name {
        font-size: 0.8rem;
    }
}

/* ==========================================
   MOBILE SHOPPING CONTROLLER (bottom sheet)
   ========================================== */

.rp-mobile-ctrl {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: #1a1a2e;
    color: white;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
    border-radius: 16px 16px 0 0;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    animation: rpMobileSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rp-mobile-ctrl.hidden {
    display: none;
}

@keyframes rpMobileSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.rp-mobile-ctrl-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.rp-mobile-ctrl-progress-fill {
    height: 100%;
    background: var(--rp-color, #3a7d5c);
    transition: width 0.3s ease;
}

/* Split-screen tip */
.rp-mobile-ctrl-tip {
    background: rgba(212, 164, 76, 0.15);
    border-bottom: 1px solid rgba(212, 164, 76, 0.25);
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rp-mobile-ctrl-tip.hidden {
    display: none;
}

.rp-mobile-ctrl-tip-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.35;
}

.rp-mobile-ctrl-tip-content i {
    color: #d4a44c;
    font-size: 1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.rp-mobile-ctrl-tip-content strong {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.15rem;
}

.rp-mobile-ctrl-tip-content p {
    margin: 0;
    opacity: 0.85;
}

.rp-mobile-ctrl-tip-content em {
    color: #d4a44c;
    font-style: normal;
    font-weight: 600;
}

.rp-mobile-ctrl-tip-dismiss {
    align-self: flex-end;
    background: rgba(212, 164, 76, 0.2);
    border: 1px solid rgba(212, 164, 76, 0.35);
    color: #d4a44c;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}

.rp-mobile-ctrl-tip-dismiss:active {
    background: rgba(212, 164, 76, 0.35);
}

.rp-mobile-ctrl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.25rem;
}

.rp-mobile-ctrl-retailer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}

.rp-mobile-ctrl-retailer i {
    color: var(--rp-color, #3a7d5c);
}

.rp-mobile-ctrl-badge {
    background: var(--rp-color, #3a7d5c);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
}

.rp-mobile-ctrl-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.rp-mobile-ctrl-close:active {
    background: rgba(255, 255, 255, 0.25);
}

.rp-mobile-ctrl-body {
    padding: 0.35rem 0.75rem 0.5rem;
}

.rp-mobile-ctrl-body.hidden {
    display: none;
}

.rp-mobile-ctrl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.rp-mobile-ctrl-name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.rp-mobile-ctrl-qty {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.rp-mobile-ctrl-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rp-mobile-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    height: 42px;
    min-width: 42px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s, transform 0.1s;
}

.rp-mobile-btn:active {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0.95);
}

.rp-mobile-btn-search {
    flex: 1;
    background: var(--rp-color, #3a7d5c);
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0 1rem;
    border-radius: 12px;
}

.rp-mobile-btn-search:active {
    filter: brightness(0.9);
}

.rp-mobile-btn-search.searched {
    background: rgba(76, 175, 80, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.rp-mobile-ctrl-status {
    font-size: 0.7rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 0.75rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.rp-mobile-ctrl-status.visible {
    max-height: 2rem;
    padding: 0.25rem 0.75rem 0.4rem;
}

.rp-mobile-ctrl-done {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.rp-mobile-ctrl-done.hidden {
    display: none;
}

.rp-mobile-ctrl-done i {
    color: #ffc107;
}

.rp-mobile-btn-checkout {
    background: var(--rp-color, #3a7d5c);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.rp-mobile-btn-checkout:active {
    filter: brightness(0.9);
    transform: scale(0.97);
}

/* When mobile controller is visible, hide bottom nav */
.shopping-list-page .rp-mobile-ctrl:not(.hidden) ~ .app-bottomnav {
    display: none !important;
}

/* ==========================================
   RETAILER PANEL
   ========================================== */

.retailer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 460px;
    height: 100vh;
    background: #f8f9fa;
    z-index: 900;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.retailer-panel.hidden {
    display: none;
}

.retailer-panel.open {
    transform: translateX(0);
}

/* Page layout shift when panel is open */
.shopping-list-container.panel-open {
    max-width: calc(100% - 480px);
    margin-left: 1rem;
    margin-right: 480px;
    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel Header */
.rp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    color: white;
    background: var(--rp-gradient, linear-gradient(135deg, var(--green-primary), var(--green-dark)));
    flex-shrink: 0;
}

.rp-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rp-retailer-icon {
    font-size: 1.2rem;
}

.rp-retailer-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.rp-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rp-progress-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.rp-close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s;
}

.rp-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Progress Bar */
.rp-progress-bar {
    height: 4px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.rp-progress-fill {
    height: 100%;
    background: var(--green-primary);
    transition: width 0.4s ease;
    border-radius: 0 2px 2px 0;
}

/* Extension Install Prompt */
.rp-extension-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #eef2ff, #e8f0fe);
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    gap: 10px;
}

.rp-extension-prompt.hidden {
    display: none;
}

.rp-ext-prompt-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.rp-ext-icon {
    font-size: 1.4rem;
    color: #6366f1;
    flex-shrink: 0;
}

.rp-ext-prompt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82rem;
    line-height: 1.3;
}

.rp-ext-prompt-text strong {
    font-size: 0.88rem;
    color: #312e81;
}

.rp-ext-prompt-text span {
    color: #4b5563;
}

.rp-ext-prompt-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rp-ext-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s;
}

.rp-ext-install-btn:hover {
    background: #4f46e5;
    color: #fff;
    text-decoration: none;
}

.rp-ext-dismiss-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.rp-ext-dismiss-btn:hover {
    color: #6b7280;
}

/* Quick Shop Banner */
.rp-quick-shop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #fff8e1, #fff3c4);
    border-bottom: 1px solid #ffe082;
    flex-shrink: 0;
}
.rp-quick-shop-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6d4c00;
    font-weight: 500;
}
.rp-quick-shop-info i {
    color: #f9a825;
    font-size: 1rem;
}
.rp-quick-shop-btn {
    padding: 0.4rem 1rem;
    background: #f9a825;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 0.2s;
}
.rp-quick-shop-btn:hover {
    background: #f57f17;
}

/* Price Estimate */
.rp-price-estimate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem;
    background: #f1f8e9;
    border-bottom: 1px solid #c5e1a5;
    font-size: 0.82rem;
    color: #33691e;
    font-weight: 500;
    flex-shrink: 0;
}
.rp-price-estimate i {
    color: #689f38;
}

/* Scrollable Body */
.rp-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Current Item Card */
.rp-current-item {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    border: 2px solid var(--green-pale);
    text-align: center;
}

.rp-current-item.searched {
    border-color: var(--green-primary);
    background: var(--green-pale);
}

.rp-item-group {
    font-size: 0.75rem;
    color: var(--gray-medium);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.rp-item-group i {
    margin-right: 0.25rem;
}

.rp-item-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.25rem;
}

.rp-item-qty {
    font-size: 0.9rem;
    color: var(--gray-medium);
    font-weight: 500;
}

/* Action Buttons */
.rp-actions {
    display: flex;
    gap: 0.6rem;
}

.rp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.rp-btn-search {
    background: var(--rp-color, var(--green-primary));
    color: white;
}

.rp-btn-search:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.rp-btn-buyagain {
    background: linear-gradient(135deg, var(--gold-primary), #e6a700);
    color: white;
}

.rp-btn-buyagain:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.rp-btn-open-tab {
    background: var(--white);
    color: var(--gray-dark);
    border: 2px solid var(--gray-light);
    flex: none;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

.rp-btn-open-tab:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.rp-btn-finish {
    background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
    color: white;
    flex: none;
    padding: 0.75rem 1.5rem;
}

.rp-btn-finish:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Fallback Area */
.rp-fallback-area {
    background: var(--white);
    border-radius: 12px;
    border: 2px dashed var(--gray-light);
    overflow: hidden;
}

.rp-fallback-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-medium);
    gap: 0.5rem;
}

.rp-fallback-content > i {
    font-size: 2rem;
    color: var(--rp-color, var(--green-primary));
    opacity: 0.6;
}

.rp-fallback-content > p {
    margin: 0;
    font-size: 0.85rem;
}

.rp-fallback-hint {
    font-size: 0.78rem !important;
    color: var(--gray-medium);
    font-style: italic;
}

/* Save Link Area */
.rp-save-area {
    min-height: 0;
}

.rp-saved-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: #e8f5e9;
    border-radius: 10px;
    font-size: 0.8rem;
}

.rp-saved-badge {
    background: var(--green-primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.rp-price-badge {
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.rp-community-votes {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.rp-upvote-btn {
    background: none;
    border: 1.5px solid #1565c0;
    color: #1565c0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.rp-upvote-btn:hover {
    background: #1565c0;
    color: white;
}

.rp-share-toggle {
    padding: 0.35rem 0.75rem;
    background: var(--off-white);
    border-radius: 6px;
    margin-top: 0.35rem;
}

.rp-share-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.rp-share-label input[type="checkbox"] {
    accent-color: var(--green-primary);
}

.rp-share-label i {
    color: #1565c0;
    font-size: 0.8rem;
}

.rp-saved-name {
    flex: 1;
    color: var(--green-dark);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-saved-remove {
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: color 0.2s;
}

.rp-saved-remove:hover {
    color: var(--danger);
}

.rp-save-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    padding: 0.85rem;
}

.rp-save-label {
    font-size: 0.8rem;
    color: var(--gray-medium);
    font-weight: 500;
}

.rp-save-label i {
    margin-right: 0.25rem;
}

.rp-save-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.rp-save-input:focus {
    outline: none;
    border-color: var(--green-primary);
}

.rp-save-input-name {
    font-size: 0.8rem;
}

.rp-save-btns {
    display: flex;
    gap: 0.5rem;
}

.rp-save-confirm {
    background: var(--green-primary);
    color: white;
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.2s;
}

.rp-save-confirm:hover {
    filter: brightness(1.1);
}

.rp-save-cancel {
    background: var(--gray-light);
    color: var(--gray-dark);
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.rp-save-cancel:hover {
    background: #d0d0d0;
}

.rp-save-link-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 2px dashed var(--gray-light);
    color: var(--gray-medium);
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: all 0.2s;
}

.rp-save-link-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

/* Navigation */
.rp-nav {
    display: flex;
    gap: 0.5rem;
}

.rp-nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem;
    background: var(--white);
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--gray-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.rp-nav-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.rp-nav-skip {
    flex: 0.8;
    color: var(--gray-medium);
}

.rp-nav-next {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

/* Auto-Advance */
.rp-auto-advance {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--white);
    border-radius: 10px;
    border: 1px solid var(--gray-light);
}

.rp-auto-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gray-light);
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--gray-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.rp-auto-toggle.active {
    background: var(--green-primary);
    color: white;
}

.rp-auto-countdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.rp-countdown-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green-dark);
    background: conic-gradient(var(--green-primary) 100%, #e0e0e0 100%);
}

.rp-countdown-ring span {
    background: var(--white);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-auto-speed {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.rp-auto-speed select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    background: var(--white);
}

/* All Done Banner */
.rp-all-done {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--green-pale), #fffde7);
    border-radius: 12px;
    border: 2px solid var(--green-light);
}

.rp-all-done i.fa-trophy {
    font-size: 2.5rem;
    color: var(--gold-primary);
    margin-bottom: 0.5rem;
}

.rp-all-done h3 {
    color: var(--green-dark);
    margin: 0.5rem 0 0.25rem;
    font-size: 1.1rem;
}

.rp-all-done p {
    color: var(--gray-medium);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

/* Footer */
.rp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-top: 1px solid rgba(58, 125, 92, 0.08);
    background: var(--off-white);
    flex-shrink: 0;
}

.rp-kbd-hint {
    font-size: 0.7rem;
    color: var(--gray-medium);
}

.rp-kbd-hint kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
    font-family: inherit;
    background: var(--white);
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 0 #ccc;
}

.rp-legacy-link {
    font-size: 0.7rem;
    color: var(--gray-medium);
    text-decoration: none;
    transition: color 0.2s;
}

.rp-legacy-link:hover {
    color: var(--green-primary);
}

/* Panel Overlay (unused - kept for potential future use) */
.rp-overlay {
    display: none;
}

/* Responsive: Mobile - Bottom Sheet */
@media (max-width: 899px) {
    .retailer-panel {
        width: 100%;
        height: auto;
        max-height: 52vh;
        top: auto;
        bottom: 0;
        border-radius: 20px 20px 0 0;
        z-index: 1100;
        transform: translateY(100%);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    }

    .retailer-panel.open {
        transform: translateY(0);
    }

    /* Keep the list visible above the bottom sheet */
    .shopping-list-container.panel-open {
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: 54vh;
    }

    /* Drag handle indicator at top of sheet */
    .rp-header::before {
        content: '';
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 2px;
    }

    .rp-header {
        position: relative;
        padding-top: 1.25rem;
    }

    /* Compact body on mobile */
    .rp-body {
        padding: 0.75rem 1rem;
        gap: 0.6rem;
    }

    /* Bigger touch targets */
    .rp-btn {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
        min-height: 48px;
    }

    .rp-nav-btn {
        min-height: 44px;
        padding: 0.65rem;
    }

    .rp-current-item {
        padding: 0.85rem;
    }

    .rp-item-name {
        font-size: 1.05rem;
    }

    /* Hide non-essential items on mobile */
    .rp-auto-advance {
        display: none;
    }

    .rp-footer {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 1rem;
    }

    .rp-kbd-hint {
        display: none;
    }

    /* Compact save area */
    .rp-save-form {
        padding: 0.65rem;
    }

    .rp-fallback-content {
        padding: 0.85rem;
    }

    .rp-fallback-content > i {
        font-size: 1.5rem;
    }

    .rp-fallback-content > p {
        font-size: 0.8rem;
    }
}

/* Responsive: Narrow desktop */
@media (min-width: 900px) and (max-width: 1200px) {
    .retailer-panel {
        width: 380px;
    }

    .shopping-list-container.panel-open {
        margin-right: 400px;
        max-width: calc(100% - 400px);
    }
}

@media print {
    .retailer-panel,
    .rp-overlay,
    .sort-toggle-bar {
        display: none !important;
    }
}

/* ==========================================
   Shopping Helper Page
   ========================================== */

.shopping-helper-page {
    background: var(--off-white);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.shopping-helper {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

/* Header */
.sh-header {
    text-align: center;
    padding: 20px 0 16px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 16px;
}

.sh-header h1 {
    font-size: 1.4rem;
    color: var(--green-dark);
    margin: 8px 0 4px;
}

.sh-header h1 i {
    color: var(--green-primary);
}

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

.sh-back-link {
    font-size: 0.85rem;
    color: var(--green-primary);
    text-decoration: none;
    font-weight: 500;
}

.sh-back-link:hover {
    text-decoration: underline;
}

.sh-close-btn {
    background: none;
    border: none;
    color: var(--gray-medium);
    font-size: 1.1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.sh-close-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--gray-dark);
}

.sh-retailer-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 4px 0;
}

.sh-subtitle {
    font-size: 0.9rem;
    color: var(--gray-medium);
    margin: 0;
}

/* Toolbar */
.sh-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.sh-btn-primary {
    flex: 2;
    background: var(--sh-retailer-gradient, var(--green-primary));
    color: white;
    min-height: 48px;
}

.sh-btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sh-btn-copy {
    flex: 1;
    background: #6c757d;
    color: white;
    min-height: 48px;
}

.sh-btn-copy:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sh-btn-pip {
    flex: 1;
    background: #1a1a2e;
    color: white;
    min-height: 48px;
}

.sh-btn-pip:hover {
    background: #2a2a4e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Auto-Advance Controls */
.sh-auto-advance {
    background: var(--white);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sh-auto-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sh-auto-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--sh-retailer-color, var(--green-primary));
    border-radius: 8px;
    background: var(--white);
    color: var(--sh-retailer-color, var(--green-primary));
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sh-auto-toggle:hover {
    background: rgba(0, 0, 0, 0.03);
}

.sh-auto-toggle.active {
    background: var(--sh-retailer-color, var(--green-primary));
    color: white;
}

.sh-auto-toggle.active:hover {
    filter: brightness(1.1);
}

.sh-auto-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.sh-countdown-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--sh-retailer-color, var(--green-primary)) 100%, #e0e0e0 100%);
    flex-shrink: 0;
    transition: background 0.3s;
}

.sh-countdown-ring span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.sh-countdown-text {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.sh-countdown-text strong {
    color: var(--sh-retailer-color, var(--green-primary));
}

.sh-auto-speed {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.sh-auto-speed label {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.sh-auto-speed select {
    padding: 4px 8px;
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--gray-dark);
    background: var(--off-white);
    cursor: pointer;
}

.sh-auto-hint {
    font-size: 0.75rem;
    color: var(--gray-medium);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    display: none;
    line-height: 1.6;
}

.sh-auto-hint.visible {
    display: block;
}

.sh-kbd-hint {
    display: block;
    margin-top: 2px;
}

.sh-kbd-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-family: inherit;
    background: var(--off-white);
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 3px;
    color: var(--gray-dark);
}

.sh-ext-badge {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Progress */
.sh-progress {
    background: var(--white);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sh-progress-text {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 8px;
}

.sh-progress-text span:first-child {
    font-weight: 700;
    color: var(--green-primary);
}

.sh-progress-track {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

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

/* All Done / Congratulations Banner */
.sh-all-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 20px;
    background: linear-gradient(135deg, var(--green-pale), #f0faf0);
    border: 2px solid var(--green-primary);
    border-radius: 14px;
    margin-bottom: 16px;
    color: var(--green-dark);
    animation: sh-done-appear 0.5s ease;
}

@keyframes sh-done-appear {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.sh-done-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-done-icon i {
    font-size: 1.6rem;
    color: white;
}

.sh-all-done h3 {
    font-size: 1.3rem;
    color: var(--green-dark);
    margin: 0;
}

.sh-all-done p {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

.sh-all-done p strong {
    color: var(--sh-retailer-color, var(--green-dark));
}

.sh-btn-finish {
    margin-top: 6px;
    padding: 14px 28px;
    background: var(--sh-retailer-gradient, var(--green-primary));
    color: white;
    font-size: 1rem;
    border-radius: 10px;
    border: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sh-btn-finish:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Items List */
.sh-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sh-group-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sh-group-header i {
    font-size: 0.75rem;
}

/* Individual Item Row */
.sh-item {
    background: var(--white);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.sh-item.current {
    border-left-color: var(--sh-retailer-color, var(--green-primary));
    background: #f0f7ff;
}

.sh-item.searched {
    opacity: 0.55;
    background: var(--off-white);
}

.sh-item.searched .sh-item-name {
    text-decoration: line-through;
}

.sh-item-check {
    font-size: 1.15rem;
    color: #ccc;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s, transform 0.15s;
}

.sh-item-check:hover {
    color: var(--green-primary);
    transform: scale(1.15);
}

.sh-item.searched .sh-item-check {
    color: var(--green-primary);
}

.sh-item-delete-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: none;
    color: #ccc;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-item-delete-btn:hover {
    color: #e63946;
    background: #fdedef;
}

.sh-item-info {
    flex: 1;
    min-width: 0;
}

.sh-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--gray-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-item-qty {
    font-size: 0.75rem;
    color: var(--green-primary);
    font-weight: 600;
    margin-top: 2px;
}

.sh-item-search-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: var(--sh-retailer-gradient, var(--green-primary));
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 0.85rem;
}

.sh-item-search-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

/* Footer */
.sh-footer {
    margin-top: 24px;
    text-align: center;
}

.sh-footer-hint {
    font-size: 0.8rem;
    color: var(--gray-medium);
    line-height: 1.5;
}

.sh-footer-hint i {
    color: var(--info);
    margin-right: 4px;
}

/* Empty State */
.sh-empty {
    text-align: center;
    padding: 60px 20px;
}

.sh-empty i {
    font-size: 3rem;
    color: var(--gray-medium);
    margin-bottom: 16px;
}

.sh-empty h2 {
    color: var(--gray-dark);
    margin-bottom: 8px;
}

.sh-empty p {
    color: var(--gray-medium);
    margin-bottom: 20px;
}

/* Toast */
.sh-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sh-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.sh-toast i {
    color: var(--green-primary);
    margin-right: 6px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .sh-toolbar {
        flex-direction: column;
    }

    .sh-btn-primary,
    .sh-btn-copy,
    .sh-btn-pip {
        flex: unset;
        width: 100%;
    }

    .sh-item-name {
        font-size: 0.85rem;
    }

    .sh-auto-row {
        flex-wrap: wrap;
    }

    .sh-auto-countdown {
        order: 3;
        flex-basis: 100%;
    }

    .sh-kbd-hint {
        display: none;
    }
}

/* ==========================================
   Shopping Helper - Saved Product Links
   ========================================== */

.sh-item.has-saved {
    border-left: 3px solid #ff9800;
}

.sh-item-saved-hint {
    font-size: 0.7rem;
    color: #ff9800;
    font-weight: 500;
    margin-top: 2px;
}

.sh-item-saved-hint i {
    font-size: 0.65rem;
    margin-right: 2px;
}

.sh-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.sh-item-buyagain-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 0.85rem;
}

.sh-item-buyagain-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.sh-item-search-btn-small {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
    opacity: 0.6;
    background: #e0e0e0;
    color: #666;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.sh-item-search-btn-small:hover {
    opacity: 1;
    background: var(--sh-retailer-gradient, var(--green-primary));
    color: white;
}

/* Save link area */
.sh-item-save-link {
    padding: 4px 14px 8px 52px;
}

.sh-save-link-btn {
    border: 1px dashed #ccc;
    background: none;
    color: var(--gray-medium);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    transition: all 0.2s;
}

.sh-save-link-btn:hover {
    border-color: #ff9800;
    color: #ff9800;
    background: #fff8e1;
}

/* Save form (expanded) */
.sh-save-form {
    padding: 8px 14px 10px 52px;
    background: #fffde7;
    border-radius: 0 0 10px 10px;
    margin-top: -4px;
}

.sh-save-form-label {
    font-size: 0.75rem;
    color: var(--gray-medium);
    margin-bottom: 6px;
}

.sh-save-form-label i {
    color: #ff9800;
    margin-right: 4px;
}

.sh-save-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.sh-save-input:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.15);
}

.sh-save-input.sh-input-error {
    border-color: #e53935;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15);
}

.sh-save-input-name {
    font-size: 0.78rem;
    color: var(--gray-medium);
}

.sh-save-form-btns {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.sh-save-confirm-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #ff9800;
    color: white;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.sh-save-confirm-btn:hover {
    background: #f57c00;
}

.sh-save-cancel-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: var(--white);
    color: var(--gray-medium);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
}

.sh-save-cancel-btn:hover {
    background: #f5f5f5;
}

/* Saved link info row */
.sh-item-saved-info {
    padding: 4px 14px 8px 52px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-saved-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #ff9800;
    white-space: nowrap;
}

.sh-saved-badge i {
    font-size: 0.65rem;
}

.sh-saved-name {
    font-size: 0.72rem;
    color: var(--gray-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.sh-saved-remove {
    border: none;
    background: none;
    color: #ccc;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.75rem;
}

.sh-saved-remove:hover {
    color: #e53935;
}

.sh-item.searched.has-saved {
    opacity: 0.7;
}

/* ==========================================
   Recipe Ideas / Inspiration Page
   ========================================== */

.inspiration-page {
    background: var(--off-white);
    min-height: 100vh;
}

.insp-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

/* Hero */
.insp-hero {
    text-align: center;
    padding: 28px 0 20px;
}

.insp-hero h1 {
    font-size: 1.8rem;
    color: var(--green-dark);
    margin: 0 0 8px;
}

.insp-hero h1 i {
    color: var(--gold-light);
}

.insp-hero p {
    font-size: 0.95rem;
    color: var(--gray-medium);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Search Bar */
.insp-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,125,92,0.08);
    margin-bottom: 20px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.insp-search-bar:focus-within {
    box-shadow: var(--shadow-md);
    border-color: rgba(58,125,92,0.2);
}

.insp-search-bar > i {
    color: var(--gray-medium);
    font-size: 1rem;
}

.insp-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--gray-dark);
    background: transparent;
}

.insp-search-bar input::placeholder {
    color: #bbb;
}

.insp-surprise-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--gold-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.insp-surprise-btn:hover {
    background: var(--gold-dark);
}

/* Filters Row */
.insp-filters-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.insp-dropdowns {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.insp-filter-select {
    padding: 6px 30px 6px 12px;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-dark);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.insp-filter-select:hover {
    border-color: var(--green-primary);
}

.insp-filter-select:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

/* Loading & Empty */
.insp-loading,
.insp-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.insp-loading i {
    margin-right: 8px;
}

.insp-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* Meal Grid */
.insp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

/* Meal Card */
.insp-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58,125,92,0.06);
}

.insp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.insp-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.insp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.insp-card:hover .insp-card-img img {
    transform: scale(1.05);
}

.insp-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.insp-card-body {
    padding: 12px 14px 14px;
}

.insp-card-body h3 {
    font-size: 0.95rem;
    color: var(--gray-dark);
    margin: 0 0 4px;
    line-height: 1.3;
}

.insp-card-area {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.insp-card-area i {
    margin-right: 3px;
    font-size: 0.7rem;
}

/* DummyJSON card extras */
.insp-card-extras {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0 0;
    font-size: 0.72rem;
    color: var(--gray-medium);
}

.insp-card-extras span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.insp-card-extras i {
    font-size: 0.65rem;
    color: var(--green-primary);
}

.insp-card-diet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-top: 4px;
}

/* Card Action Icons */
.insp-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-light);
}

.insp-card-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    background: var(--white);
    border-radius: 8px;
    cursor: pointer;
    color: var(--gray-medium);
    font-size: 0.8rem;
    transition: all 0.2s;
}

.insp-card-action-btn:hover {
    color: var(--green-primary);
    border-color: var(--green-primary);
    background: var(--green-pale);
}

.insp-card-action-btn.insp-card-action-done {
    color: white;
    background: var(--green-primary);
    border-color: var(--green-primary);
}

/* Modal metadata strip */
.insp-modal-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 16px;
}

.insp-modal-meta .meta-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--gray-medium);
    background: var(--off-white);
    padding: 4px 10px;
    border-radius: 20px;
}

.insp-modal-meta .meta-badge i {
    color: var(--green-primary);
    font-size: 0.75rem;
}

/* ==========================================
   Meal Detail Modal
   ========================================== */

.insp-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.insp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.insp-modal-content {
    position: relative;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(58,125,92,0.08);
    max-width: 650px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.08);
    animation: inspModalIn 0.3s cubic-bezier(.4,0,.2,1);
}

@keyframes inspModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.insp-modal-maximize {
    position: absolute;
    top: 12px;
    right: 56px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.insp-modal-maximize:hover {
    background: rgba(0, 0, 0, 0.7);
}

.insp-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.insp-modal-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Maximized modal - full page */
.insp-modal.maximized {
    padding: 0;
}

.insp-modal.maximized .insp-modal-content {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    animation: none;
}

.insp-modal.maximized .insp-modal-hero img {
    border-radius: 0;
    aspect-ratio: 21 / 9;
}

.insp-modal.maximized .insp-modal-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 32px 32px;
}

.insp-modal.maximized .insp-ingredients-list {
    grid-template-columns: 1fr 1fr 1fr;
}

.insp-modal-hero {
    position: relative;
}

.insp-modal-hero img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 16px 16px 0 0;
}

.insp-modal-badges {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
}

.insp-badge {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}

.insp-badge.category {
    background: rgba(76, 175, 80, 0.85);
    color: white;
}

.insp-badge.area {
    background: rgba(37, 99, 235, 0.85);
    color: white;
}

.insp-modal-body {
    padding: 20px 24px 24px;
}

.insp-modal-body h2 {
    font-size: 1.4rem;
    color: var(--gray-dark);
    margin: 0 0 16px;
}

/* Modal Sections */
.insp-modal-section {
    margin-bottom: 20px;
}

.insp-modal-section h3 {
    font-size: 0.9rem;
    color: var(--green-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.insp-modal-section h3 i {
    color: var(--green-primary);
    font-size: 0.85rem;
}

/* Ingredients List */
.insp-ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.insp-ingredients-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    background: var(--off-white);
    border-radius: 8px;
    font-size: 0.85rem;
}

.insp-ing-measure {
    color: var(--green-primary);
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.insp-ing-name {
    color: var(--gray-dark);
}

/* Instructions */
.insp-instructions {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.7;
}

.insp-instructions p {
    margin-bottom: 8px;
}

/* Video Link */
.insp-video-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ff0000;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.15s;
}

.insp-video-link:hover {
    background: #cc0000;
    transform: translateY(-1px);
}

/* Add to Meal Builder Button */
.insp-modal-actions {
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 8px;
}

.insp-btn-add {
    width: 100%;
    padding: 0.85rem 1.25rem;
    min-height: 44px;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.insp-btn-add:hover {
    background: var(--green-dark);
    box-shadow: 0 4px 14px rgba(58,125,92,0.3);
    transform: translateY(-1px);
}

.insp-btn-shopping {
    width: 100%;
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    background: transparent;
    color: var(--green-primary);
    border: 1px solid rgba(58,125,92,0.2);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.insp-btn-shopping:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
    transform: translateY(-1px);
}

.insp-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .insp-hero h1 {
        font-size: 1.4rem;
    }

    .insp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .insp-card-body h3 {
        font-size: 0.85rem;
    }

    .insp-modal {
        padding: 10px;
    }

    .insp-modal-content {
        max-height: 95vh;
    }

    .insp-modal-body {
        padding: 16px;
    }

    .insp-ingredients-list {
        grid-template-columns: 1fr;
    }

    .insp-search-bar {
        padding: 8px 12px;
    }

    .insp-surprise-btn span {
        display: none;
    }

    .insp-surprise-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        justify-content: center;
        font-size: 0.85rem;
    }

    .insp-search-mode-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .insp-search-mode-btn i {
        font-size: 0.7rem;
    }

    .insp-filter-select {
        font-size: 0.78rem;
        padding: 5px 28px 5px 10px;
    }
}

@media (max-width: 380px) {
    .insp-grid {
        grid-template-columns: 1fr;
    }
}

/* Inspiration Import Banner (on Meal Builder page) */
.insp-import-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--green-pale), #f0faf0);
    border: 1px solid var(--green-primary);
    border-radius: 10px;
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--green-dark);
    animation: inspBannerIn 0.3s ease;
}

.insp-import-banner strong {
    color: var(--green-dark);
}

@keyframes inspBannerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   COOKBOOK FEATURE STYLES
   ========================================== */

/* Cookbook Header */
.cookbook-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.cookbook-header h1 {
    font-size: 1.8rem;
    color: var(--green-dark);
    margin-bottom: 0.3rem;
}

.cookbook-header h1 i {
    color: var(--green-primary);
}

.cookbook-subtitle {
    color: var(--gray-medium);
    font-size: 0.95rem;
}

/* Cookbook Tabs */
.cookbook-tabs {
    display: flex;
    gap: 0;
    background: var(--gray-light);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.2rem;
}

.cookbook-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-medium);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.cookbook-tab:hover {
    color: var(--green-dark);
}

.cookbook-tab.active {
    background: var(--white);
    color: var(--green-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cookbook-tab-count {
    background: var(--green-pale);
    color: var(--green-dark);
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.cookbook-tab.active .cookbook-tab-count {
    background: var(--green-primary);
    color: white;
}

/* Cookbook Filters — single compact row */
.cookbook-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.cookbook-search {
    flex: 1;
    min-width: 140px;
    position: relative;
}

.cookbook-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-medium);
    font-size: 0.8rem;
}

.cookbook-search input {
    width: 100%;
    height: 38px;
    padding: 0 0.6rem 0 2rem;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    transition: border-color 0.2s;
    background: var(--white);
    color: var(--gray-dark);
}

.cookbook-search input:focus {
    outline: none;
    border-color: var(--green-primary);
}

.cookbook-filter-select {
    height: 38px;
    padding: 0 0.6rem;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    background: var(--white);
    cursor: pointer;
    color: var(--gray-dark);
}

.cookbook-filter-select:focus {
    outline: none;
    border-color: var(--green-primary);
}

/* Import trigger button — same size as filter dropdowns */
.cookbook-import-trigger {
    height: 38px;
    padding: 0 0.75rem;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--white);
    color: var(--green-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    transition: all 0.2s;
}

.cookbook-import-trigger:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
}

.cookbook-import-trigger.active {
    background: rgba(58, 125, 92, 0.08);
    border-color: var(--green-primary);
    color: var(--green-dark);
}

/* Compact Import Panel */
.cookbook-import-compact {
    background: var(--white);
    border: 1.5px solid rgba(58, 125, 92, 0.12);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.cookbook-import-compact.hidden {
    display: none;
}

.cookbook-import-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1.5px solid rgba(58, 125, 92, 0.08);
    padding-bottom: 0;
}

.cookbook-import-tab {
    padding: 0.4rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.cookbook-import-tab:hover {
    color: var(--green-primary);
}

.cookbook-import-tab.active {
    color: var(--green-primary);
    border-bottom-color: var(--green-primary);
}

.cookbook-import-tab-content.hidden {
    display: none;
}

.cookbook-import-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cookbook-import-url {
    flex: 1;
    height: 38px;
    padding: 0 0.75rem;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color 0.2s;
    background: var(--white);
    color: var(--gray-dark);
}

.cookbook-import-url:focus {
    border-color: var(--green-primary);
}

.cookbook-import-btn {
    height: 38px;
    padding: 0 1rem;
    background: var(--green-primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cookbook-import-btn:hover {
    background: var(--green-dark);
}

.cookbook-import-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.cookbook-import-status {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.cookbook-import-status.info {
    background: var(--gold-pale);
    color: var(--gold-dark);
}

.cookbook-import-status.success {
    background: var(--green-pale);
    color: var(--green-dark);
}

.cookbook-import-status.error {
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 500px) {
    .cookbook-import-row {
        flex-direction: column;
    }
    .cookbook-import-url {
        width: 100%;
    }
    .cookbook-import-btn {
        width: 100%;
    }
}

/* Bookmark Import */
.bookmark-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--gray-light);
    padding-bottom: 0;
}

.bookmark-tab {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.bookmark-tab:hover {
    color: var(--green-primary);
}

.bookmark-tab.active {
    color: var(--green-primary);
    border-bottom-color: var(--green-primary);
}

.bookmark-tab-content.hidden {
    display: none;
}

.bookmark-browser-steps {
    margin-bottom: 1rem;
}

.bookmark-steps-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.4rem;
}

.bookmark-steps-header i {
    font-size: 1.1rem;
}

.bookmark-steps-list {
    margin: 0 0 0.5rem;
    padding-left: 1.4rem;
    font-size: 0.82rem;
    color: var(--gray-darker);
    line-height: 1.7;
}

.bookmark-steps-list kbd {
    background: var(--gray-light);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: inherit;
    border: 1px solid #d1d5db;
}

.bookmark-other-browsers {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.bookmark-other-browsers summary {
    color: var(--green-primary);
    cursor: pointer;
    font-weight: 500;
}

.bookmark-other-browsers summary:hover {
    text-decoration: underline;
}

.bookmark-other-list {
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

.bookmark-other-item {
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    color: var(--gray-darker);
}

.bookmark-other-item strong {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.15rem;
}

.bookmark-other-item ol {
    margin: 0;
    padding-left: 1.4rem;
    line-height: 1.6;
}

.bookmark-paste-textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.bookmark-paste-textarea:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1);
}

.bookmark-paste-textarea::placeholder {
    color: var(--gray-medium);
}

.bookmark-paste-btn {
    margin-top: 0.5rem;
}

.bookmark-import-help {
    font-size: 0.8rem;
    color: var(--gray-dark);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.bookmark-file-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bookmark-file-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 38px;
    padding: 0 0.75rem;
    background: var(--white);
    border: 1.5px solid rgba(58, 125, 92, 0.2);
    color: var(--green-primary);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.bookmark-file-label:hover {
    background: var(--green-primary);
    color: white;
}

.bookmark-file-name {
    font-size: 0.8rem;
    color: var(--gray-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookmark-selection {
    margin-top: 1rem;
}

.bookmark-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.bookmark-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-dark);
}

.bookmark-select-toggle {
    background: none;
    border: none;
    color: var(--green-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.bookmark-list {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    padding: 0.5rem;
}

.bookmark-folder-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.4rem 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.bookmark-folder-header:not(:first-child) {
    border-top: 1px solid var(--gray-light);
    margin-top: 0.3rem;
    padding-top: 0.6rem;
}

.bookmark-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.bookmark-item:hover {
    background: var(--green-pale);
}

.bookmark-item input[type="checkbox"] {
    accent-color: var(--green-primary);
    flex-shrink: 0;
}

.bookmark-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-darker);
}

.bookmark-item-domain {
    font-size: 0.75rem;
    color: var(--gray-medium);
    flex-shrink: 0;
}

.bookmark-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.bookmark-selected-count {
    font-size: 0.85rem;
    color: var(--gray-dark);
    font-weight: 500;
}

.bookmark-import-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
}

.bookmark-progress-view {
    margin-top: 0.75rem;
}

.bookmark-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-darker);
}

.bookmark-cancel-btn {
    background: none;
    border: 1px solid var(--red-primary, #dc2626);
    color: var(--red-primary, #dc2626);
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 600;
}

.bookmark-cancel-btn:hover {
    background: var(--red-primary, #dc2626);
    color: white;
}

.bookmark-progress-bar {
    height: 8px;
    background: var(--gray-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

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

.bookmark-log {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    padding: 0.5rem;
}

.bookmark-log-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    font-size: 0.82rem;
    border-radius: 4px;
}

.bookmark-log-item.success {
    color: var(--green-dark);
}

.bookmark-log-item.success i {
    color: var(--green-primary);
}

.bookmark-log-item.skipped {
    color: var(--gray-dark);
}

.bookmark-log-item.skipped i {
    color: var(--gray-medium);
}

.bookmark-log-item.duplicate {
    color: var(--gold-dark);
}

.bookmark-log-item.duplicate i {
    color: var(--gold-primary);
}

.bookmark-log-item.failed {
    color: #b91c1c;
}

.bookmark-log-item.failed i {
    color: #dc2626;
}

.bookmark-log-detail {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: auto;
    flex-shrink: 0;
}

.bookmark-log-summary {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--green-pale);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-dark);
    text-align: center;
}

/* Cookbook Grid */
.cookbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
}

/* Cookbook Card */
.cookbook-card {
    position: relative;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    transition: all 0.2s;
    overflow: hidden;
}

.cookbook-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--green-light);
    transform: translateY(-3px);
}

.cookbook-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.cookbook-card-image {
    width: 100%;
    height: 160px;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

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

.cookbook-card-image > i {
    font-size: 2.5rem;
    color: var(--gray-medium);
}

.cookbook-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.85);
    color: white;
    backdrop-filter: blur(4px);
}

.cookbook-card-body {
    padding: 0.9rem 1rem;
}

.cookbook-card-body h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--green-dark);
    margin: 0 0 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cookbook-card-stars {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: #f59e0b;
    cursor: pointer;
    display: inline-flex;
    gap: 2px;
}

.cookbook-card-stars i {
    transition: transform 0.15s, color 0.15s;
}

.cookbook-card-stars i:hover {
    transform: scale(1.3);
}

.cookbook-card-stars .far {
    color: #d1d5db;
}

.cookbook-card-meta {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--gray-medium);
}

.cookbook-card-meta i {
    margin-right: 0.2rem;
}

.cookbook-card-diet {
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.cookbook-card-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, background 0.15s;
    z-index: 2;
}

.cookbook-card:hover .cookbook-card-remove {
    opacity: 1;
}

.cookbook-card-remove:hover {
    background: rgba(244, 67, 54, 0.85);
}

/* Cookbook Empty State */
.cookbook-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gray-medium);
}

.cookbook-empty i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.cookbook-empty p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.cookbook-empty .btn-primary {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: var(--green-primary);
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
}

/* ==========================================
   STAR RATING WIDGET
   ========================================== */

.star-rating {
    display: inline-flex;
    gap: 2px;
}

.star-rating-sm { font-size: 0.8rem; }
.star-rating-md { font-size: 1.1rem; }
.star-rating-lg { font-size: 1.4rem; }

.star-rating-star {
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.1s, transform 0.1s;
    user-select: none;
}

.star-rating-star.filled {
    color: #f59e0b;
}

.star-rating-star.hovered {
    color: #fbbf24;
    transform: scale(1.15);
}

.star-rating-readonly .star-rating-star {
    cursor: default;
}

/* Community Rating */
.community-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-medium);
}

.community-rating-stars {
    color: #f59e0b;
    font-size: 0.85rem;
}

.community-rating-stars .far {
    color: #d1d5db;
}

.community-rating-text {
    font-size: 0.8rem;
}

.community-rating-empty {
    font-size: 0.8rem;
    color: var(--gray-medium);
    font-style: italic;
}

/* ==========================================
   SOURCE BADGES
   ========================================== */

.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.source-badge-themealdb {
    background: rgba(76, 175, 80, 0.12);
    color: #2e7d32;
}

.source-badge-url {
    background: rgba(37, 99, 235, 0.1);
    color: #1e40af;
}

.source-badge-manual {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

/* ==========================================
   RECIPE DETAIL PAGE
   ========================================== */

/* Recipe source URL link */
.recipe-source-url {
    margin-top: 0.5rem;
}

.recipe-source-url a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--green-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.recipe-source-url a:hover {
    color: var(--green-dark);
    text-decoration: underline;
}

/* Recipe Times */
.recipe-times {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.recipe-time-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--off-white);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--gray-dark);
}

.recipe-time-tag i {
    color: var(--green-primary);
}

.recipe-time-tag strong {
    color: var(--green-dark);
}

/* Difficulty badges */
.difficulty-easy { color: #2d6a4f; }
.difficulty-medium { color: #e67e22; }
.difficulty-hard { color: #c0392b; }

.recipe-difficulty-badge {
    font-weight: 600;
}

.recipe-difficulty-badge.difficulty-easy {
    background: #d4edda;
}

.recipe-difficulty-badge.difficulty-medium {
    background: #fff3cd;
}

.recipe-difficulty-badge.difficulty-hard {
    background: #f8d7da;
}

/* Recipe Ingredients List */
.recipe-ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.recipe-ingredients-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    background: var(--off-white);
    border-radius: 8px;
    font-size: 0.88rem;
}

.recipe-ing-measure {
    color: var(--green-primary);
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

.recipe-ing-name {
    color: var(--gray-dark);
}

/* Recipe Instructions */
.recipe-instructions {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
}

.recipe-instructions p {
    margin-bottom: 8px;
}

/* Recipe Edit Mode */
.btn-edit-recipe {
    background: var(--green-primary);
    color: white;
    border: none;
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
}

.btn-edit-recipe:hover {
    background: var(--green-dark);
}

.btn-save-edits {
    background: var(--green-primary);
    color: white;
    border: none;
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
}

.btn-save-edits:hover {
    background: var(--green-dark);
}

.btn-cancel-edits {
    background: var(--gray-light);
    color: var(--gray-dark);
    border: 1.5px solid rgba(58, 125, 92, 0.1);
    height: 40px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
}

.btn-cancel-edits:hover {
    background: #d4d4d4;
}

.recipe-ing-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.recipe-ing-edit-row input {
    padding: 8px 12px;
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 8px;
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.recipe-ing-edit-row input:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.ing-edit-measure {
    width: 120px;
    flex-shrink: 0;
}

.ing-edit-name {
    flex: 1;
    min-width: 0;
}

.btn-remove-ingredient {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 8px;
    cursor: pointer;
    color: var(--gray-medium);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-remove-ingredient:hover {
    background: #fee;
    border-color: #e55;
    color: #c33;
}

.btn-add-ingredient {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    background: transparent;
    border: 1px dashed var(--green-primary);
    border-radius: 8px;
    color: var(--green-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-ingredient:hover {
    background: rgba(45, 106, 79, 0.05);
}

.recipe-edit-mode .recipe-ingredients-list {
    grid-template-columns: 1fr;
}

.recipe-editor-active {
    min-height: 150px;
    padding: 1rem;
    border: 1px solid rgba(58, 125, 92, 0.12);
    border-radius: 0 0 12px 12px;
    outline: none;
    transition: border-color 0.2s;
}

.recipe-editor-active:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.recipe-editor-active:empty::before {
    content: "Write your recipe instructions here...";
    color: #aaa;
    pointer-events: none;
}

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

.recipe-steps-list li {
    counter-increment: step-counter;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

.recipe-steps-list li:last-child {
    border-bottom: none;
}

.recipe-steps-list li::before {
    content: counter(step-counter);
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--green-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Recipe Video Embed */
.recipe-video-embed .video-card {
    margin-bottom: 1rem;
}

/* Recipe Notes */
.recipe-notes-textarea {
    width: 100%;
    padding: 0.9rem;
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
}

.recipe-notes-textarea:focus {
    outline: none;
    border-color: var(--green-primary);
}

.notes-save-status {
    font-size: 0.78rem;
    margin-top: 0.4rem;
    height: 1rem;
}

.notes-save-status.saved {
    color: var(--green-primary);
}

.notes-save-status.error {
    color: var(--danger);
}

/* ==========================================
   SOCIAL SHARE BUTTONS
   ========================================== */

.social-share-buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.share-btn.native-share-btn {
    background: var(--green-primary);
}

.share-btn.native-share-btn:hover {
    background: var(--green-dark);
}

.share-btn.facebook-btn {
    background: #1877F2;
}

.share-btn.facebook-btn:hover {
    background: #0c5dc9;
}

.share-btn.twitter-btn {
    background: #000000;
}

.share-btn.twitter-btn:hover {
    background: #333333;
}

.share-btn.tiktok-btn {
    background: #010101;
}

.share-btn.tiktok-btn:hover {
    background: #333333;
}

.share-btn.instagram-btn {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.share-btn.instagram-btn:hover {
    filter: brightness(1.1);
}

/* ==========================================
   INSPIRATION - Save to Cookbook Button
   ========================================== */

.insp-btn-save {
    width: 100%;
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    background: transparent;
    color: var(--gold-primary);
    border: 1px solid rgba(212,164,76,0.25);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.insp-btn-save:hover {
    background: var(--gold-pale);
    border-color: var(--gold-primary);
    transform: translateY(-1px);
}

/* Inspiration - Add to Meal Planner Button */
.insp-btn-planner {
    width: 100%;
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    background: transparent;
    color: var(--gray-dark);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.insp-btn-planner:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
    color: var(--green-primary);
    transform: translateY(-1px);
}

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

/* Inspiration - Search Mode Switcher */
.insp-search-mode {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
}

.insp-search-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-dark);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.insp-search-mode-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
    background: var(--green-pale);
}

.insp-search-mode-btn.active {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

.insp-search-mode-btn i {
    font-size: 0.8rem;
}

/* Meal rating row */
.meal-rating-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.4rem 0;
    flex-wrap: wrap;
}

/* ==========================================
   MOBILE RESPONSIVE - COOKBOOK
   ========================================== */

@media (max-width: 600px) {
    .cookbook-header h1 { font-size: 1.4rem; }

    .cookbook-grid {
        grid-template-columns: 1fr;
    }

    .cookbook-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .cookbook-search {
        grid-column: 1 / -1;
        min-width: unset;
    }

    .cookbook-import-trigger span { display: none; }

    .recipe-ingredients-list {
        grid-template-columns: 1fr;
    }

    .social-share-buttons {
        flex-direction: column;
    }

    .social-share-buttons .share-btn {
        justify-content: center;
    }

    .cookbook-card-remove,
    .cookbook-card-planner,
    .cookbook-card-shopping {
        opacity: 1;
    }
}

/* ==========================================
   SUBSCRIPTION & PREMIUM
   ========================================== */

/* Account Subscription Section */
.account-subscription {
    margin-bottom: 2rem;
}

.subscription-card {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.subscription-plan {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.subscription-plan > i {
    font-size: 2.5rem;
    color: #F59E0B;
}

.subscription-plan h3 {
    margin: 0;
    font-size: 1.3rem;
}

.subscription-plan h3.premium-active {
    color: #F59E0B;
    font-size: 1.8rem;
}

/* When premium: lay out "Pro" and "All features unlocked" side by side */
.subscription-plan > div {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.subscription-status {
    margin: 0;
    opacity: 0.85;
    font-size: 0.95rem;
}

.subscription-trial {
    margin-top: 0.75rem;
}

.trial-progress {
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
}

.trial-progress-bar {
    background: #F59E0B;
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
}

.trial-days-text {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 0.3rem;
}

.subscription-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-start-trial-account,
.btn-upgrade-account {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.btn-start-trial-account {
    background: var(--white);
    color: #1E3A8A;
}

.btn-start-trial-account:hover {
    background: #E8F5E9;
}

.btn-upgrade-account {
    background: #F59E0B;
    color: #1E3A8A;
}

.btn-upgrade-account:hover {
    background: #D97706;
}

/* Premium Badge Inline */
.premium-badge-inline {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.3rem;
    letter-spacing: 0.05em;
}


/* ==========================================
   UPGRADE MODAL
   ========================================== */

.upgrade-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.upgrade-modal.visible {
    opacity: 1;
    pointer-events: all;
}

.upgrade-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.upgrade-modal-content {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.upgrade-modal.visible .upgrade-modal-content {
    transform: translateY(0);
}

.upgrade-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--gray-medium);
    cursor: pointer;
}

.upgrade-modal-header {
    text-align: center;
    margin-bottom: 2rem;
}

.upgrade-modal-header i {
    font-size: 3rem;
    color: #F59E0B;
    margin-bottom: 0.5rem;
}

.upgrade-modal-header h2 {
    margin: 0.5rem 0 0.3rem;
    color: var(--black);
}

.upgrade-modal-header p {
    color: var(--gray-medium);
}

.upgrade-modal-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.upgrade-plan-card {
    border: 2px solid var(--gray-light);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    transition: var(--transition);
}

.upgrade-plan-card:hover {
    border-color: var(--gold-primary);
    box-shadow: var(--shadow-md);
}

.plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green-primary);
    color: white;
    padding: 0.15rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.plan-badge.premium {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.upgrade-plan-card h3 {
    text-align: center;
    margin: 0.5rem 0;
    font-size: 1.3rem;
}

.plan-price {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--green-dark);
    margin: 0.5rem 0;
}

.plan-price span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--gray-medium);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.plan-features li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.plan-features li i {
    color: var(--green-primary);
    margin-right: 0.5rem;
}

.btn-start-trial,
.btn-subscribe {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.btn-start-trial {
    background: var(--green-primary);
    color: white;
}

.btn-start-trial:hover {
    background: var(--green-dark);
}

.btn-start-trial.disabled {
    background: var(--gray-light);
    color: var(--gray-medium);
    cursor: not-allowed;
}

.btn-subscribe {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}

.btn-subscribe:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
}

/* ==========================================
   PREMIUM GATE (Meal Planner)
   ========================================== */

.premium-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.premium-gate-card {
    text-align: center;
    max-width: 500px;
    background: var(--white);
    border-radius: 20px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow-md);
}

.premium-gate-card > i {
    font-size: 4rem;
    color: #F59E0B;
    margin-bottom: 1rem;
}

.premium-gate-card h2 {
    margin: 0.5rem 0;
    color: var(--black);
}

.premium-gate-card p {
    color: var(--gray-medium);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.premium-gate-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-start-trial-gate,
.btn-upgrade-gate {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.btn-start-trial-gate {
    background: var(--green-primary);
    color: white;
}

.btn-start-trial-gate:hover {
    background: var(--green-dark);
}

.btn-upgrade-gate {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}

.btn-upgrade-gate:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
}

.premium-gate-link {
    display: block;
    margin-top: 1rem;
    color: var(--gold-primary);
    font-size: 0.9rem;
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 20000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-notification.visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background: #EDF3ED;
    color: #005F02;
    border: 1px solid #427A43;
}

.toast-error {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid #f44336;
}

.toast-warning {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #ff9800;
}

.toast-info {
    background: #E3F2FD;
    color: #1565C0;
    border: 1px solid #2196f3;
}

/* ==========================================
   MEAL PLANNER
   ========================================== */

.planner-content {
    padding: 0.5rem 3%;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Page header */
.planner-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.planner-page-header h1 {
    font-size: 1.8rem;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-new-plan {
    background: var(--green-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.btn-new-plan:hover {
    background: var(--green-dark);
}

/* Saved Plans */
.saved-plans-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.2rem;
    width: 100%;
}

.planner-empty {
    text-align: center;
    color: var(--gray-medium);
    padding: 4rem 2rem;
    font-size: 1.2rem;
    grid-column: 1 / -1;
}

.planner-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
    color: var(--green-primary);
}

.saved-plan-card {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem 1.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.08);
    min-height: 120px;
}

.saved-plan-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--green-primary);
}

.saved-plan-icon {
    width: 60px;
    height: 60px;
    background: var(--green-pale);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-primary);
    font-size: 1.6rem;
    flex-shrink: 0;
}

.saved-plan-info {
    flex: 1;
    min-width: 0;
}

.saved-plan-info h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--green-dark);
}

.saved-plan-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--gray-medium);
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.saved-plan-meta i {
    margin-right: 0.25rem;
}

.plan-status-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.plan-draft { background: #FFF3E0; color: #E65100; }
.plan-active { background: #EDF3ED; color: #005F02; }
.plan-completed { background: #E3F2FD; color: #1565C0; }

.saved-plan-types {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.meal-type-chip {
    background: var(--gold-pale);
    color: var(--gold-primary);
    padding: 0.2rem 0.7rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.saved-plan-arrow {
    color: var(--gray-medium);
    font-size: 1.1rem;
    margin-top: 0.3rem;
    flex-shrink: 0;
}

/* Setup Wizard */
.planner-wizard {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: auto;
    padding: 0 2rem;
}

.wizard-card {
    background: var(--white);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    max-width: 550px;
    width: 100%;
    box-shadow: var(--shadow-md);
}

.wizard-card h2 {
    color: var(--green-dark);
    margin: 0 0 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
}

.wizard-card h2 i {
    color: #F59E0B;
}

.wizard-subtitle {
    color: var(--gray-medium);
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.wizard-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wizard-step {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-light);
}

.wizard-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wizard-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--black);
    font-size: 0.9rem;
}

.wizard-step-num {
    width: 24px;
    height: 24px;
    background: var(--green-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wizard-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wizard-day-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--green-primary);
    background: var(--white);
    color: var(--green-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.wizard-day-btn:hover {
    background: var(--green-primary);
    color: white;
}

.wizard-day-input {
    width: 80px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    padding: 0.3rem;
    color: var(--green-dark);
}

.wizard-hint {
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.wizard-date-input {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    color: var(--black);
}

.wizard-date-input:focus {
    border-color: var(--green-primary);
    outline: none;
}

.wizard-meal-types {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wizard-checkbox {
    cursor: pointer;
}

.wizard-checkbox input {
    display: none;
}

.wizard-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    font-weight: 500;
    transition: var(--transition);
    user-select: none;
}

.wizard-checkbox input:checked + .wizard-checkbox-label {
    border-color: var(--green-primary);
    background: var(--green-pale);
    color: var(--green-dark);
}

.wizard-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Wizard Mode Toggle (Standard / Custom) */
.wizard-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
}

.wizard-mode-btn {
    padding: 0.5rem 1.2rem;
    border: none;
    background: var(--white);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
    color: var(--gray-dark);
    font-family: 'Poppins', sans-serif;
}

.wizard-mode-btn.active {
    background: var(--green-primary);
    color: white;
}

.wizard-mode-btn:not(.active):hover {
    background: var(--green-pale);
}

.wizard-custom-meals.hidden { display: none; }

.wizard-custom-desc {
    color: var(--gray-medium);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Editable Column Headers */
.planner-col-name {
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: var(--transition);
}

.planner-col-name:hover {
    background: rgba(45, 106, 79, 0.15);
}

.planner-col-name-input {
    width: 90px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    border: 2px solid var(--green-primary);
    border-radius: 6px;
    padding: 0.15rem 0.3rem;
    font-family: 'Poppins', sans-serif;
    color: var(--green-dark);
    background: var(--white);
    outline: none;
}

.wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn-wizard-cancel {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    color: var(--gray-dark);
    transition: var(--transition);
}

.btn-wizard-cancel:hover {
    border-color: var(--gray-medium);
}

.btn-wizard-create {
    padding: 0.6rem 1.5rem;
    border: none;
    background: var(--green-primary);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.btn-wizard-create:hover {
    background: var(--green-dark);
}

/* Plan Grid Header */
.planner-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--white);
    padding: 1.2rem 1.5rem;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.planner-header-left {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.btn-back-plans {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--gray-dark);
    cursor: pointer;
    padding: 0.3rem;
    margin-top: 0.2rem;
}

.planner-title {
    font-size: 1.6rem;
    color: var(--green-dark);
    margin: 0;
    outline: none;
    border-bottom: 2px dashed transparent;
    padding-bottom: 2px;
}

.planner-title:focus {
    border-bottom-color: var(--green-primary);
}

.planner-dates {
    font-size: 0.9rem;
    color: var(--gray-medium);
    margin: 0.3rem 0 0;
}

.planner-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-planner-action {
    height: 38px;
    padding: 0 1rem;
    border: 1.5px solid rgba(58, 125, 92, 0.15);
    background: var(--white);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--gray-dark);
    transition: var(--transition);
    font-family: inherit;
    white-space: nowrap;
}

.btn-planner-action:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
    background: rgba(58, 125, 92, 0.04);
}

#btnAddAllToList {
    background: rgba(58, 125, 92, 0.06);
    border-color: rgba(58, 125, 92, 0.2);
    color: var(--green-dark);
}

#btnAddAllToList:hover {
    background: rgba(58, 125, 92, 0.12);
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.btn-save-plan {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

.btn-save-plan:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: white;
}

.btn-delete-plan {
    padding: 0 0.7rem;
}

.btn-delete-plan:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(208, 74, 66, 0.04);
}

/* Column Headers */
.planner-grid-section {
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.planner-column-headers {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
    width: fit-content;
    min-width: 100%;
}

.planner-col-header {
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-dark);
    padding: 0.4rem 0.25rem;
}

.planner-col-header.planner-mealtype-corner {
    visibility: hidden;
}

/* Day column headers */
.planner-col-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: relative;
}

.planner-col-day-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.planner-col-day-date {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--gray-medium);
}

/* Grid Body */
.planner-grid-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Meal type rows (new swapped layout) */
.planner-mealtype-row {
    display: grid;
    gap: 0.5rem;
    align-items: stretch;
    width: fit-content;
    min-width: 100%;
}

.planner-mealtype-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    gap: 0.3rem;
    position: relative;
}

.planner-mealtype-label i {
    font-size: 1.1rem;
    color: var(--green-primary);
}

.planner-mealtype-label .planner-col-name {
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    color: var(--gray-dark);
}

.planner-mealtype-label .planner-col-name:hover {
    color: var(--green-primary);
}

/* Legacy day-row support (kept for backward compat) */
.planner-day-row {
    display: grid;
    gap: 0.5rem;
    align-items: stretch;
}

.planner-day-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
}

.planner-day-name {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--black);
}

.planner-day-date {
    font-size: 1rem;
    color: var(--gray-medium);
}

/* ---- Mobile Card Layout ---- */
.planner-mobile-card {
    background: var(--white);
    border: 1px solid var(--gray-light);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.planner-mobile-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid var(--green-pale);
}

.planner-mobile-day-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--green-dark);
    line-height: 1.2;
}

.planner-mobile-day-date {
    font-size: 0.8rem;
    color: var(--gray-medium);
    line-height: 1.2;
}

.planner-mobile-slot {
    margin-bottom: 0.6rem;
}

.planner-mobile-slot:last-child {
    margin-bottom: 0;
}

.planner-mobile-slot-type {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.planner-mobile-slot-type i {
    color: var(--green-primary);
    font-size: 0.8rem;
}

.planner-mobile .planner-cell {
    min-height: 70px;
    width: auto;
    height: auto;
    min-width: 0;
    border-radius: 10px;
}

.planner-mobile .planner-cell-filled {
    flex-direction: row;
    padding: 0.5rem;
    gap: 0.5rem;
    width: auto;
    height: auto;
}

.planner-mobile .planner-cell-image {
    width: 55px;
    height: 55px;
    flex: none;
    border-radius: 8px;
}

.planner-mobile .planner-cell-link {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.planner-mobile .planner-cell-name {
    font-size: 0.9rem;
    white-space: normal;
}

.planner-mobile .planner-cell-kcal {
    font-size: 0.8rem;
}

.planner-mobile .planner-cell-kcal i {
    display: inline;
}

.planner-mobile .planner-cell-actions {
    position: static;
    opacity: 1;
    flex-shrink: 0;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
}

.planner-mobile .planner-cell-empty {
    flex-direction: row;
    gap: 0.5rem;
    min-height: 50px;
    width: auto;
    height: auto;
    font-size: 0.9rem;
}

.planner-mobile .planner-cell-empty i {
    font-size: 1rem;
}

/* ---- Add Day / Add Meal Type controls (desktop grid) ---- */
.planner-add-col {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-medium);
    font-size: 0.9rem;
    border-radius: 8px;
    transition: var(--transition);
}

.planner-add-col:hover {
    color: var(--green-primary);
    background: var(--green-pale);
}

.planner-add-col-spacer {
    width: 40px;
}

.planner-add-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 2px dashed var(--gray-light);
    border-radius: 10px;
    color: var(--gray-medium);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 0.25rem;
}

.planner-add-row:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
    background: var(--green-pale);
}

/* ---- Mobile add/remove controls ---- */
.planner-mobile-card-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.planner-mobile-remove-day {
    background: none;
    border: none;
    color: var(--gray-medium);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: var(--transition);
}

.planner-mobile-remove-day:hover {
    color: var(--red);
    background: rgba(220,53,69,0.08);
}

.planner-mobile-remove-type {
    background: none;
    border: none;
    color: var(--gray-medium);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    margin-left: 0.3rem;
    border-radius: 4px;
    transition: var(--transition);
}

.planner-mobile-remove-type:hover {
    color: var(--red);
}

.planner-mobile-add-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.planner-mobile-add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 2px dashed var(--gray-light);
    border-radius: 10px;
    background: none;
    color: var(--gray-medium);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.planner-mobile-add-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
    background: var(--green-pale);
}

/* Grid Cells — square tile style */
.planner-cell {
    border-radius: 10px;
    width: 140px;
    height: 140px;
    min-width: 140px;
    transition: var(--transition);
}

.planner-cell-empty {
    border: 2px dashed var(--gray-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--gray-medium);
    cursor: pointer;
    font-size: 0.75rem;
    width: 140px;
    height: 140px;
}

.planner-cell-empty:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
    background: var(--green-pale);
}

.planner-cell-empty i {
    font-size: 1.1rem;
}

.planner-cell-filled {
    background: var(--white);
    border: 2px solid var(--gray-light);
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 140px;
    height: 140px;
}

.planner-cell-filled:hover {
    border-color: var(--green-primary);
}

.planner-cell-image {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-medium);
    font-size: 1.3rem;
}

.planner-cell-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.planner-cell-info {
    padding: 0.3rem 0.4rem;
    min-width: 0;
}

.planner-cell-name {
    display: block;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact mode: many day columns (>7) — smaller text */
.planner-compact .planner-cell-name {
    font-size: 0.65rem;
}

.planner-compact .planner-cell-kcal {
    font-size: 0.6rem;
}

.planner-compact .planner-col-header {
    font-size: 0.85rem;
    padding: 0.4rem 0.25rem;
}

.planner-cell-kcal {
    font-size: 0.65rem;
    color: var(--gray-medium);
    display: block;
}

.planner-cell-kcal i {
    display: none;
}

.planner-cell-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: var(--transition);
}

.planner-cell-filled:hover .planner-cell-actions {
    opacity: 1;
}

.planner-cell-move,
.planner-cell-remove {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--gray-medium);
    transition: var(--transition);
}

.planner-cell-move:hover {
    background: var(--green-primary);
    color: white;
}

.planner-cell-remove:hover {
    background: var(--danger);
    color: white;
}

/* Move mode styles */
.planner-cell.move-source {
    border-color: var(--green-primary);
    background: var(--green-pale);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.3);
}

.planner-cell.move-source .planner-cell-actions {
    opacity: 1;
}

.planner-cell-empty.move-target {
    border-color: var(--green-primary);
    border-style: solid;
    background: var(--green-pale);
    color: var(--green-primary);
    animation: pulse-border 1.5s ease-in-out infinite;
}

.planner-cell-filled:not(.move-source) {
    cursor: default;
}

/* When in move mode, non-source filled cells become swap targets */
.planner-cell-filled:not(.move-source):hover {
    border-color: var(--green-primary);
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.15); }
}

/* Drag and Drop */
.planner-cell-filled[draggable="true"] {
    cursor: grab;
}
.planner-cell-filled[draggable="true"]:active {
    cursor: grabbing;
}
.planner-cell-filled.dragging {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--green-primary);
}
.planner-cell.drag-over {
    border-color: var(--green-primary);
    border-style: solid;
    background: var(--green-pale);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.3);
    transition: all 0.15s ease;
}
.planner-cell-empty.drag-over {
    color: var(--green-primary);
}
.planner-cell-empty.drag-over i {
    transform: scale(1.2);
    transition: transform 0.15s ease;
}

/* Planner Delete Buttons (column & row) */
.planner-delete-col-btn,
.planner-delete-row-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-medium);
    font-size: 0.7rem;
    padding: 0.2rem;
    border-radius: 4px;
    transition: var(--transition);
    opacity: 0.5;
    margin-left: 0.3rem;
}

.planner-delete-col-btn:hover,
.planner-delete-row-btn:hover {
    color: var(--danger);
    opacity: 1;
    background: rgba(220, 53, 69, 0.08);
}

.planner-day-label,
.planner-mealtype-label {
    position: relative;
}

.planner-delete-row-btn {
    margin-left: 0;
    margin-top: 0.25rem;
}

.planner-col-day-header .planner-delete-col-btn {
    position: absolute;
    top: 2px;
    right: 2px;
}

/* ==========================================
   MEAL PICKER MODAL
   ========================================== */

.meal-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meal-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.meal-picker-content {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.meal-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--gray-light);
}

.meal-picker-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--green-dark);
}

.meal-picker-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--gray-medium);
    cursor: pointer;
}

.meal-picker-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-light);
}

.meal-picker-tab {
    flex: 1;
    padding: 0.7rem;
    border: none;
    background: none;
    font-weight: 500;
    cursor: pointer;
    color: var(--gray-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.meal-picker-tab.active {
    color: var(--green-primary);
    border-bottom-color: var(--green-primary);
}

.meal-picker-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--gray-light);
}

.meal-picker-search i {
    color: var(--gray-medium);
}

.meal-picker-search input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}

.meal-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.picker-loading,
.picker-empty {
    text-align: center;
    color: var(--gray-medium);
    padding: 2rem;
}

.picker-empty a {
    color: var(--green-primary);
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.picker-item:hover {
    background: var(--green-pale);
}

.picker-item-image {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-medium);
}

.picker-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picker-item-info {
    flex: 1;
    min-width: 0;
}

.picker-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-item-meta {
    font-size: 0.8rem;
    color: var(--gray-medium);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.picker-item-type {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.picker-type-meal {
    background: rgba(45, 106, 79, 0.12);
    color: #2d6a4f;
}

.picker-type-recipe {
    background: rgba(142, 68, 173, 0.12);
    color: #8e44ad;
}

/* Picker Diet Filter Bar */
.picker-diet-filter {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--gray-light);
    flex-wrap: wrap;
}

.picker-diet-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border: 1.5px solid var(--gray-light);
    border-radius: 20px;
    background: var(--white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.picker-diet-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.picker-diet-btn.active {
    background: var(--green-primary);
    border-color: var(--green-primary);
    color: white;
}

.picker-item-diet {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

/* Import URL Tab in Picker */
.meal-picker-import-url {
    padding: 1.5rem;
    text-align: center;
}

.import-url-desc {
    font-size: 0.9rem;
    color: var(--gray-medium);
    margin-bottom: 1rem;
}

.import-url-input-row {
    display: flex;
    gap: 0.5rem;
}

.import-url-input-row input {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 2px solid var(--gray-light);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: var(--transition);
}

.import-url-input-row input:focus {
    border-color: var(--green-primary);
}

.import-url-input-row button {
    padding: 0.7rem 1.2rem;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: var(--transition);
}

.import-url-input-row button:hover {
    background: var(--green-dark);
}

.import-url-input-row button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.import-url-status {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.import-url-status-info {
    background: #ebf8ff;
    color: #2b6cb0;
}

.import-url-status-success {
    background: #f0fff4;
    color: #276749;
}

.import-url-status-error {
    background: #fff5f5;
    color: #c53030;
}

/* Create New Meal panel in picker */
.meal-picker-create-new {
    padding: 2rem 1.5rem;
    text-align: center;
}
.create-new-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.create-new-icon {
    font-size: 2.5rem;
    color: var(--green-primary);
    opacity: 0.8;
}
.create-new-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.create-new-desc {
    color: var(--gray-medium);
    font-size: 0.9rem;
    max-width: 320px;
    line-height: 1.5;
}
.btn-create-new-meal {
    padding: 0.7rem 1.5rem;
    background: var(--green-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    transition: background 0.2s;
}
.btn-create-new-meal:hover {
    background: var(--green-dark);
}

/* Planner context banner on meal builder */
.planner-context-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--green-pale);
    border: 1px solid var(--green-primary);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--green-dark);
}
.planner-context-banner i:first-child {
    color: var(--green-primary);
}
.planner-context-banner button {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.25rem;
}
.planner-context-banner button:hover {
    color: #e53e3e;
}

/* Picker Section Labels (unified search) */
.picker-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-medium);
    border-top: 1px solid var(--gray-light);
    background: var(--off-white);
}

.picker-section-label i {
    font-size: 0.7rem;
}

.picker-type-inspired {
    background: rgba(241, 196, 15, 0.15);
    color: #b7950b;
}

/* Cookbook Card Planner Button */
.cookbook-card-planner {
    position: absolute;
    top: 8px;
    right: 36px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--green-dark);
    opacity: 0;
    transition: var(--transition);
    z-index: 5;
}

.cookbook-card:hover .cookbook-card-planner {
    opacity: 1;
}

.cookbook-card-planner:hover {
    background: var(--green-primary);
    color: white;
}

/* Cookbook Card Shopping Button */
.cookbook-card-shopping {
    position: absolute;
    top: 8px;
    right: 64px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--green-dark);
    opacity: 0;
    transition: var(--transition);
    z-index: 5;
}

.cookbook-card:hover .cookbook-card-shopping {
    opacity: 1;
}

.cookbook-card-shopping:hover {
    background: #e65100;
    color: white;
}

/* Cookbook Tag Badge Colors */
.cookbook-card-badge.tag-your-meal {
    background: rgba(45, 106, 79, 0.85);
}

.cookbook-card-badge.tag-recipe {
    background: rgba(30, 100, 175, 0.85);
}

/* Add to Meal Planner Button */
.btn-add-to-planner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 40px;
    padding: 0 1rem;
    background: rgba(58, 125, 92, 0.08);
    color: var(--green-dark);
    border: 1.5px solid rgba(58, 125, 92, 0.2);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-add-to-planner:hover {
    background: rgba(58, 125, 92, 0.15);
    border-color: var(--green-primary);
}

/* Planner Dropdown (for choosing plan slot) */
.planner-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    border: 2px solid var(--gray-light);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    margin-top: 0.5rem;
    min-width: 320px;
    max-width: 500px;
}

.planner-dropdown-title {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-dark);
    border-bottom: 1px solid var(--gray-light);
}

.planner-dropdown-plan {
    padding: 0.5rem;
    border-bottom: 1px solid var(--gray-light);
}

.planner-dropdown-plan:last-child {
    border-bottom: none;
}

.planner-dropdown-plan-name {
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--green-dark);
}

.planner-dropdown-plan-name small {
    font-weight: 400;
    color: var(--gray-medium);
}

.planner-dropdown-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
}

.planner-dropdown-slot {
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

/* Grid layout for plan & slot picker */
.planner-dropdown-grid {
    display: grid;
    gap: 2px;
    padding: 0.5rem;
}

.planner-dropdown-grid-corner {
    /* Empty top-left cell */
}

.planner-dropdown-grid-header {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--green-dark);
    padding: 0.3rem 0.2rem;
    border-bottom: 2px solid var(--green-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planner-dropdown-grid-day {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-dark);
    padding: 0.3rem 0.4rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.planner-dropdown-grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    border-radius: 6px;
    font-size: 0.7rem;
    min-height: 28px;
    border: 1px solid var(--gray-light);
    transition: var(--transition);
}

.planner-dropdown-grid-cell.available {
    background: var(--white);
    color: var(--gray-medium);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.planner-dropdown-grid-cell.available:hover {
    background: var(--green-pale);
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.planner-dropdown-grid-cell.occupied {
    background: var(--green-pale);
    color: var(--green-primary);
    font-size: 0.6rem;
    opacity: 0.6;
}

.planner-dropdown-more {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-medium);
    font-style: italic;
}

/* Planner Cell Clickable Link */
.planner-cell-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    text-decoration: none;
    color: inherit;
}

.planner-cell-link:hover .planner-cell-name {
    color: var(--green-primary);
    text-decoration: underline;
}

/* ==========================================
   NAV DROPDOWN (Mobile + Crowded Nav)
   ========================================== */

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.3rem;
}

@media (max-width: 1100px) {
    .navbar .nav-links,
    .navbar.results-nav .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--white);
        border-radius: 0 0 12px 12px;
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        min-width: 240px;
        padding: 0.5rem 0;
        z-index: 1000;
    }

    .navbar .nav-links.nav-open,
    .navbar.results-nav .nav-links.nav-open {
        display: flex;
    }

    .navbar .nav-links a,
    .navbar .nav-links .nav-link,
    .navbar.results-nav .nav-links a,
    .navbar.results-nav .nav-links .nav-link {
        color: var(--gray-dark);
        padding: 0.75rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
    }

    .navbar .nav-links a:hover,
    .navbar.results-nav .nav-links a:hover {
        background: var(--green-pale);
        color: var(--green-dark);
    }


    .nav-hamburger {
        display: flex;
    }

    /* Flatten "Pro Tools" dropdown into the mobile menu */
    .nav-more {
        display: contents;
    }

    .nav-more-btn {
        display: flex;
        width: 100%;
        color: #fff !important;
        background: #f97316 !important;
        border: none;
        border-top: 1px solid #ea580c;
        border-radius: 0 !important;
        padding: 0.6rem 1.5rem !important;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        pointer-events: none;
    }

    .nav-more-dropdown {
        display: contents !important;
        position: static;
        background: none;
        box-shadow: none;
        padding: 0;
        animation: none;
    }

    .nav-more-dropdown .nav-link {
        color: var(--gray-dark) !important;
        padding: 0.75rem 1.5rem 0.75rem 2.2rem !important;
        border-radius: 0 !important;
        font-size: inherit !important;
    }

    .nav-more-dropdown .nav-link:hover {
        background: var(--green-pale) !important;
    }

    /* Hide nav search on small screens (hamburger menu active) */
    .results-nav .nav-search {
        display: none;
    }

    #authNavContainer {
        border-top: 1px solid var(--gray-light);
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
    }

    #authNavContainer a,
    #authNavContainer button {
        color: var(--gray-dark) !important;
        padding: 0.75rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        font-size: inherit;
        font-family: inherit;
        cursor: pointer;
        text-align: left;
        width: 100%;
    }

    #authNavContainer a:hover,
    #authNavContainer button:hover {
        background: var(--green-pale);
        color: var(--green-dark) !important;
    }

    .upgrade-modal-plans {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   MEAL PLANNER RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .planner-header {
        flex-direction: column;
        padding: 0.6rem 0.75rem;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }

    .planner-title {
        font-size: 1.15rem;
    }

    .planner-dates {
        font-size: 0.75rem;
    }

    .planner-header-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 0.35rem;
    }

    .btn-planner-action {
        padding: 0.4rem 0.7rem;
        font-size: 0.72rem;
        border-width: 1.5px;
        border-radius: 8px;
    }

    .btn-planner-action i {
        font-size: 0.72rem;
    }

    /* Hide button text, show only icons on small screens */
    .btn-planner-action span {
        display: none;
    }

    .planner-column-headers {
        display: none;
    }

    .planner-day-row {
        grid-template-columns: 1fr !important;
        background: var(--white);
        border-radius: 10px;
        padding: 0.5rem;
        box-shadow: var(--shadow-sm);
    }

    .planner-day-label {
        flex-direction: row;
        gap: 0.5rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--gray-light);
        margin-bottom: 0.4rem;
    }

    .planner-cell {
        min-height: 50px;
        width: auto;
        height: auto;
        min-width: 0;
    }

    .planner-cell-empty,
    .planner-cell-filled {
        width: auto;
        height: auto;
    }

    .planner-cell-actions {
        opacity: 1;
    }

    .planner-mobile-card {
        padding: 0.6rem;
        margin-bottom: 0.5rem;
    }

    .planner-mobile-day-name {
        font-size: 0.95rem;
    }

    .planner-mobile-day-date {
        font-size: 0.78rem;
    }

    .planner-mobile-card-header {
        padding-bottom: 0.35rem;
        margin-bottom: 0.35rem;
    }

    .planner-mobile-slot {
        margin-bottom: 0.4rem;
    }

    .planner-mobile-slot-type {
        font-size: 0.75rem;
        margin-bottom: 0.2rem;
    }

    .planner-mobile .planner-cell {
        min-height: 50px;
    }

    .planner-mobile .planner-cell-filled {
        padding: 0.35rem;
        gap: 0.35rem;
    }

    .planner-mobile .planner-cell-image {
        width: 42px;
        height: 42px;
    }

    .planner-mobile .planner-cell-name {
        font-size: 0.78rem;
    }

    .planner-mobile .planner-cell-kcal {
        font-size: 0.7rem;
    }

    .planner-mobile .planner-cell-empty {
        min-height: 40px;
        font-size: 0.78rem;
    }

    .planner-mobile .planner-cell-empty i {
        font-size: 0.85rem;
    }

    .planner-mobile-add-controls {
        gap: 0.4rem;
    }

    .planner-mobile-add-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .planner-content {
        padding: 0.25rem 2%;
    }

    .planner-page-header {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }

    .planner-page-header h1 {
        font-size: 1.3rem;
    }

    .wizard-card {
        padding: 1rem;
    }

    .wizard-meal-types {
        flex-direction: column;
    }

    .wizard-mode-toggle {
        width: 100%;
    }

    .wizard-mode-btn {
        flex: 1;
        justify-content: center;
    }

    .planner-col-name-input {
        width: 70px;
        font-size: 0.7rem;
    }

    .subscription-card {
        flex-direction: column;
        text-align: center;
    }

    .subscription-plan {
        flex-direction: column;
    }
}

/* ==========================================
   PWA INSTALL BANNER
   ========================================== */

.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.pwa-install-banner.pwa-install-visible {
    transform: translateY(0);
}

.pwa-install-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    padding: 0.85rem 1rem;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
    border-top: 3px solid var(--green-primary);
}

.pwa-install-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.pwa-install-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.pwa-install-text strong {
    font-size: 0.95rem;
    color: var(--green-dark);
}

.pwa-install-text span {
    font-size: 0.78rem;
    color: var(--gray-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-install-btn {
    background: var(--green-primary);
    color: white;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.pwa-install-btn:hover {
    background: var(--green-dark);
}

.pwa-install-dismiss {
    background: none;
    border: none;
    color: var(--gray-medium);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.3rem;
    flex-shrink: 0;
}

/* iOS Install Instructions Modal */
.ios-install-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ios-install-modal.ios-install-visible {
    opacity: 1;
    pointer-events: all;
}

.ios-install-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.ios-install-card {
    position: relative;
    background: var(--white);
    border-radius: 20px 20px 0 0;
    padding: 2rem 1.5rem 2.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.ios-install-visible .ios-install-card {
    transform: translateY(0);
}

.ios-install-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--gray-medium);
    cursor: pointer;
}

.ios-install-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    margin-bottom: 0.75rem;
}

.ios-install-card h3 {
    font-size: 1.15rem;
    color: var(--green-dark);
    margin-bottom: 1.2rem;
}

.ios-install-steps {
    text-align: left;
    margin: 0 auto 1rem;
    max-width: 300px;
}

.ios-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
}

.ios-step-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ios-step span {
    font-size: 0.9rem;
    color: var(--text-dark);
}

.ios-install-note {
    font-size: 0.8rem;
    color: var(--gray-medium);
    margin-top: 0.5rem;
}

/* ==========================================
   Go Premium Page
   ========================================== */

.premium-page {
    background: #f8faf9;
}

.premium-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Hero */
.premium-hero {
    text-align: center;
    padding: 1rem 1rem 1.5rem;
}

.premium-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.3);
}

.premium-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 1rem;
}

.premium-highlight {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.premium-subtitle {
    font-size: 1.15rem;
    color: var(--gray-medium);
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

.premium-trial-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
}

.premium-trial-banner i {
    font-size: 1.2rem;
}

/* Tier Cards */
.premium-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem 0 3rem;
    align-items: start;
}

.premium-tier-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    position: relative;
    border: 2px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s;
}

.premium-tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.featured-tier {
    border-color: #f59e0b;
    box-shadow: 0 4px 24px rgba(245, 158, 11, 0.15);
}

.tier-popular-badge,
.tier-coming-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.35rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-popular-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.tier-coming-badge {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
}

.tier-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tier-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
    color: white;
}

.free-icon {
    background: linear-gradient(135deg, #2d6a4f, #40916c);
}

.premium-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.plus-icon {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.tier-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
}

.tier-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.price-period {
    font-size: 1rem;
    color: var(--gray-medium);
}

.tier-price-alt {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-top: 0.5rem;
}

.price-save {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

/* Tier Features List */
.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tier-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.tier-features li > i {
    margin-top: 0.15rem;
    flex-shrink: 0;
    font-size: 1rem;
}

.feature-included > i {
    color: #22c55e;
}

.feature-excluded > i {
    color: #d1d5db;
}

.feature-excluded > div > span {
    color: #9ca3af;
}

.feature-coming > i {
    color: #8b5cf6;
}

.feature-highlight {
    background: #fffbeb;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    margin: 0 -0.75rem;
}

.tier-features li > div > strong {
    display: block;
    color: var(--gray-dark);
    font-weight: 600;
}

.tier-features li > div > span {
    color: var(--gray-medium);
    font-size: 0.82rem;
}

/* Tier Buttons */
.tier-btn {
    display: block;
    width: 100%;
    padding: 0.875rem;
    border-radius: 12px;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
}

.free-btn {
    background: var(--white);
    color: var(--green-primary);
    border: 2px solid var(--green-primary);
}

.free-btn:hover {
    background: var(--green-pale);
}

.premium-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.premium-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.premium-btn.active-plan {
    background: #22c55e;
    cursor: default;
    box-shadow: none;
}

.plus-btn {
    background: #e5e7eb;
    color: #6b7280;
    cursor: not-allowed;
}

.tier-btn-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-medium);
    margin-top: 0.75rem;
}

/* Feature Highlights Grid */
.premium-highlights {
    padding: 3rem 0;
}

.premium-highlights h2 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 2rem;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.highlight-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.highlight-card:hover {
    transform: translateY(-3px);
}

.highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.highlight-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 0.5rem;
}

.highlight-card p {
    font-size: 0.9rem;
    color: var(--gray-medium);
    line-height: 1.5;
}

/* FAQ */
.premium-faq {
    padding: 2rem 0 3rem;
    max-width: 700px;
    margin: 0 auto;
}

.premium-faq h2 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 1.5rem;
}

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

.faq-item {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-dark);
    cursor: pointer;
    text-align: left;
}

.faq-question i {
    transition: transform 0.3s;
    color: var(--gray-medium);
    font-size: 0.85rem;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 1.25rem 1rem;
    font-size: 0.9rem;
    color: var(--gray-medium);
    line-height: 1.6;
}

/* CTA */
.premium-cta {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, #2d6a4f, #40916c);
    border-radius: 24px;
    margin-bottom: 2rem;
}

.premium-cta h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.premium-cta > p {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.premium-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
    transition: all 0.2s;
}

.premium-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.5);
}

.premium-cta-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.75rem;
}

/* Responsive */
@media (max-width: 900px) {
    .premium-tiers {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin: 0 auto;
    }
    .premium-tiers .featured-tier {
        order: -1;
    }
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .premium-hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
    .premium-hero h1 {
        font-size: 1.6rem;
    }
    .premium-trial-banner {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
}

/* ==========================================
   Features Page
   ========================================== */

.features-page {
    background: var(--bg-light);
}

.features-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* Hero */
.features-hero {
    text-align: center;
    padding: 1rem 1rem 1.5rem;
}

.features-hero h1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.features-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Tier Section */
.features-tier-section {
    margin-bottom: 3rem;
}

.features-tier-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid;
}

.features-tier-header i {
    font-size: 1.5rem;
}

.features-tier-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.features-tier-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* Free tier colors */
.free-header {
    border-color: #2d6a4f;
    color: #2d6a4f;
}

.free-header i { color: #2d6a4f; }

.free-badge {
    background: rgba(45, 106, 79, 0.1);
    color: #2d6a4f;
}

/* Pro tier colors */
.pro-header {
    border-color: #f59e0b;
    color: #b45309;
}

.pro-header i { color: #f59e0b; }

.pro-badge {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

/* Coming soon colors */
.coming-header {
    border-color: #888;
    color: #666;
}

.coming-header i { color: #888; }

.coming-badge {
    background: rgba(0,0,0,0.06);
    color: #666;
}

.features-tier-desc {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* Feature Cards Grid */
.features-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-detail-card {
    display: flex;
    gap: 1.5rem;
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

.feature-detail-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature-detail-card.pro-card {
    border-left: 3px solid #f59e0b;
}

.feature-detail-card.coming-card {
    opacity: 0.7;
    border-left: 3px solid #aaa;
}

.feature-detail-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-detail-icon i {
    font-size: 1.6rem;
    color: #fff;
}

.feature-detail-content {
    flex: 1;
    min-width: 0;
}

.feature-detail-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pro-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
}

.pro-tag i {
    font-size: 0.6rem;
    color: #f59e0b;
}

.feature-detail-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.feature-detail-content p a {
    color: var(--green-primary);
    text-decoration: underline;
}

.feature-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.feature-detail-list li i {
    color: #2d6a4f;
    margin-top: 0.2rem;
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* CTA */
.features-cta {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #2d6a4f, #1b4332);
    border-radius: 20px;
    color: #fff;
    margin-top: 1rem;
}

.features-cta h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.features-cta > p {
    opacity: 0.85;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.features-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.features-cta-btn {
    padding: 0.9rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.features-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.features-cta-btn.pro-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.features-cta-btn.pro-btn.active-plan {
    background: rgba(255,255,255,0.2);
    cursor: default;
}

.features-cta-btn.outline-btn {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
}

.features-cta-btn.outline-btn:hover {
    background: rgba(255,255,255,0.2);
}

.features-cta-note {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .features-hero h1 {
        font-size: 1.8rem;
    }

    .features-subtitle {
        font-size: 1rem;
    }

    .feature-detail-card {
        flex-direction: column;
        padding: 1.5rem;
    }

    .feature-detail-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
    }

    .feature-detail-icon i {
        font-size: 1.3rem;
    }

    .features-tier-header {
        flex-wrap: wrap;
    }

    .features-tier-header h2 {
        font-size: 1.3rem;
    }

    .features-cta {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }

    .features-cta h2 {
        font-size: 1.4rem;
    }

    .features-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .features-cta-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .features-hero h1 {
        font-size: 1.5rem;
    }

    .features-hero {
        padding: 2rem 0.5rem 1.5rem;
    }

    .feature-detail-content h3 {
        font-size: 1.1rem;
    }
}

/* ==========================================
   Health — Health Tracker Styles
   ========================================== */

/* Profile Setup */
.health-setup {
    max-width: 700px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.health-setup-header {
    text-align: center;
    margin-bottom: 2rem;
}

.health-setup-header i {
    font-size: 3rem;
    color: var(--green-primary);
    margin-bottom: 1rem;
    display: block;
}

.health-setup-header h1 {
    font-size: 1.8rem;
    color: var(--black);
    margin-bottom: 0.5rem;
}

.health-setup-header p {
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.health-setup-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.health-setup-form .form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-dark);
}

.health-setup-form .form-group label i {
    margin-right: 0.4rem;
    color: var(--green-primary);
}

.health-setup-form .form-group input,
.health-setup-form .form-group select {
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s;
}

.health-setup-form .form-group input:focus,
.health-setup-form .form-group select:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.health-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.optional-label {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.health-setup-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    margin-top: 1rem;
}

/* BMR Preview */
.health-bmr-preview {
    background: var(--green-pale);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1rem;
    text-align: center;
}

.bmr-preview-title {
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.bmr-preview-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.bmr-preview-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bmr-preview-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-dark);
}

.bmr-preview-label {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

/* Dashboard */
.health-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.health-page-header h1 {
    font-size: 1.6rem;
    color: var(--black);
}

.health-page-header h1 i {
    color: var(--green-primary);
    margin-right: 0.5rem;
}

.health-edit-profile-btn {
    background: var(--green-pale);
    color: var(--green-primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    transition: var(--transition);
}

.health-edit-profile-btn:hover {
    background: var(--green-primary);
    color: var(--white);
}

/* Today's Summary Cards */
.health-today-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.health-today-card {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.health-today-card i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.food-card i { color: #ff9800; }
.burn-card i { color: #f44336; }
.net-card i { color: var(--green-primary); }
.budget-card i { color: #2196f3; }

.health-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black);
}

.health-card-label {
    font-size: 0.8rem;
    color: var(--gray-medium);
    font-weight: 500;
}

.calorie-surplus { color: #f44336 !important; }
.calorie-deficit { color: var(--green-primary) !important; }

/* Balance Bar */
.health-balance-section {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.health-balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.health-balance-status {
    font-size: 0.85rem;
}

.health-balance-bar {
    height: 12px;
    background: #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
}

.health-balance-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.health-balance-fill.under-budget {
    background: linear-gradient(90deg, var(--green-primary), var(--green-light));
}

.health-balance-fill.over-budget {
    background: linear-gradient(90deg, #ff9800, #f44336);
}

.health-balance-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--gray-medium);
}

/* Quick Actions */
.health-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.health-action-btn {
    flex: 1;
    padding: 1rem;
    background: var(--green-pale);
    color: var(--green-primary);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.health-action-btn:hover {
    background: var(--green-primary);
    color: var(--white);
}

/* Sections */
.health-section {
    background: var(--white);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

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

.health-section-header h2 {
    font-size: 1.1rem;
    color: var(--black);
}

.health-section-header h2 i {
    color: var(--green-primary);
    margin-right: 0.4rem;
}

.health-section-close {
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
}

.health-section-close:hover {
    color: var(--danger);
}

.health-section-total {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--green-primary);
}

.health-empty {
    text-align: center;
    color: var(--gray-medium);
    padding: 1.5rem;
    font-size: 0.9rem;
}

/* Exercise Search */
.health-exercise-search {
    position: relative;
    margin-bottom: 1rem;
}

.health-exercise-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-medium);
}

.health-exercise-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.health-exercise-search input:focus {
    outline: none;
    border-color: var(--green-primary);
}

.health-exercise-results {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.health-exercise-category {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-medium);
    padding: 0.5rem 0.75rem 0.25rem;
}

.health-exercise-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}

.health-exercise-item:hover {
    background: var(--green-pale);
}

.health-exercise-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--black);
}

.health-exercise-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.health-met-badge {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.health-cal-hint {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

/* Exercise Form */
.health-exercise-form {
    border-top: 1px solid #e0e0e0;
    padding-top: 1rem;
}

.health-exercise-selected {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.health-cal-estimate {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--green-dark);
    padding: 0.5rem;
}

/* Activity Card */
.health-activity-card {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
}

.health-activity-card:last-child {
    border-bottom: none;
}

.health-activity-info {
    flex: 1;
}

.health-activity-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--black);
}

.health-activity-meta {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.health-activity-cal {
    font-weight: 700;
    color: #f44336;
    font-size: 0.9rem;
    white-space: nowrap;
}

.health-activity-delete {
    background: none;
    border: none;
    color: var(--gray-medium);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.health-activity-card:hover .health-activity-delete {
    opacity: 1;
}

.health-activity-delete:hover {
    color: var(--danger);
}

/* Weight Section */
.health-weight-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.health-weight-current {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.health-weight-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--black);
}

.health-weight-unit {
    font-size: 1rem;
    color: var(--gray-medium);
    font-weight: 500;
}

.health-bmi-badge {
    margin-left: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.bmi-underweight { background: #e3f2fd; color: #1565c0; }
.bmi-normal { background: #e8f5e9; color: #2e7d32; }
.bmi-overweight { background: #fff3e0; color: #e65100; }
.bmi-obese { background: #ffebee; color: #c62828; }

.health-weight-meta {
    font-size: 0.85rem;
    color: var(--gray-medium);
}

.health-weight-meta i {
    margin-right: 0.25rem;
}

/* Weight Chart */
.health-chart-container {
    display: flex;
    gap: 0.5rem;
    height: 200px;
    position: relative;
}

.health-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--gray-medium);
    padding: 0 0.25rem;
    min-width: 30px;
    text-align: right;
}

.health-chart-area {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.health-chart-grid {
    position: absolute;
    inset: 0;
}

.health-chart-gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #f0f0f0;
}

.health-chart-points {
    position: absolute;
    inset: 0;
}

.health-chart-point {
    position: absolute;
    transform: translate(-50%, 50%);
    z-index: 2;
}

.health-chart-dot {
    width: 8px;
    height: 8px;
    background: var(--green-primary);
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.health-chart-tooltip {
    display: none;
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-dark);
    color: var(--white);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.health-chart-point:hover .health-chart-tooltip {
    display: block;
}

.health-chart-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.health-chart-x-axis {
    position: relative;
    height: 20px;
    margin-top: 0.25rem;
}

.health-chart-x-axis span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--gray-medium);
}

/* Weekly Chart */
.health-weekly-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 180px;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

.health-weekly-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.health-weekly-day.today {
    font-weight: 700;
}

.health-weekly-bar-group {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 140px;
    width: 100%;
}

.health-weekly-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}

.food-bar {
    background: linear-gradient(180deg, #ff9800, #ffb74d);
}

.burn-bar {
    background: linear-gradient(180deg, #f44336, #ef5350);
}

.health-weekly-label {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.health-weekly-net {
    font-size: 0.7rem;
    font-weight: 600;
}

.health-weekly-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.food-dot { background: #ff9800; }
.burn-dot { background: #f44336; }

/* Responsive */
@media (max-width: 768px) {
    .health-today-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .health-form-row {
        grid-template-columns: 1fr;
    }

    .health-actions {
        flex-direction: column;
    }

    .health-setup {
        margin: 1rem;
        padding: 1.25rem;
    }

    .bmr-preview-stats {
        gap: 1rem;
    }

    .health-weight-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .health-weekly-bars {
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .health-today-cards {
        grid-template-columns: 1fr 1fr;
    }

    .health-card-value {
        font-size: 1.3rem;
    }

    .health-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Touch devices — always show delete */
@media (hover: none) {
    .health-activity-delete {
        opacity: 1;
    }
}

/* ==========================================
   Add Product Page
   ========================================== */
.add-product-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 0;
}

.add-product-header {
    margin-bottom: 1.5rem;
}

.add-product-header h1 {
    font-size: 1.6rem;
    color: var(--green-dark);
    margin-bottom: 0.3rem;
}

.add-product-header h1 i {
    color: var(--green-primary);
}

.add-product-header p {
    color: #777;
    font-size: 0.9rem;
}

.add-product-section {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.add-product-section h2 {
    font-size: 1.1rem;
    color: var(--green-dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.add-product-section h2 i {
    color: var(--green-primary);
    font-size: 1rem;
}

.section-hint {
    font-size: 0.8rem;
    font-weight: 400;
    color: #999;
}

.section-desc {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
}

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

.add-product-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.3rem;
}

.required {
    color: #e55;
}

.optional-label {
    font-weight: 400;
    color: #aaa;
    font-size: 0.8rem;
}

.add-product-form input[type="text"],
.add-product-form input[type="number"],
.add-product-form input[type="url"],
.add-product-form textarea,
.add-product-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.add-product-form input:focus,
.add-product-form textarea:focus,
.add-product-form select:focus {
    outline: none;
    border-color: var(--green-primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.barcode-readonly {
    background: var(--off-white);
    color: var(--gray-medium);
    font-weight: 600;
    font-family: monospace;
    font-size: 1rem !important;
    letter-spacing: 1px;
}

.auto-calc {
    background: #f9f9f9;
    color: #999;
}

.input-error {
    border-color: #e55 !important;
    box-shadow: 0 0 0 3px rgba(238, 85, 85, 0.1) !important;
}

.form-hint {
    display: block;
    font-size: 0.78rem;
    color: #aaa;
    margin-top: 3px;
}

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.nutrition-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}

.dietary-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.dietary-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dietary-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green-primary);
    cursor: pointer;
}

.dietary-checkbox-label {
    font-size: 0.9rem;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dietary-checkbox-label i {
    color: var(--green-primary);
    font-size: 0.85rem;
}

.add-product-actions {
    text-align: center;
    padding: 1rem 0 2rem;
}

.btn-submit-product {
    background: var(--green-primary);
    color: white;
    border: none;
    padding: 14px 40px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3);
}

.btn-submit-product:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(45, 106, 79, 0.4);
}

.btn-submit-product:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 600px) {
    .form-row-2col,
    .form-row-3col,
    .nutrition-input-grid,
    .dietary-checkboxes {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Auto Fill Modal (Meal Planner)
   ========================================== */

.auto-fill-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-fill-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.auto-fill-content {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
}

.auto-fill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.auto-fill-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--green-dark);
}

.auto-fill-header h3 i {
    color: var(--gold-primary);
}

.auto-fill-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--gray-medium);
    cursor: pointer;
}

.auto-fill-explainer {
    color: var(--gray-dark);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-light);
}

.auto-fill-section {
    margin-bottom: 1rem;
}

.auto-fill-section-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.auto-fill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auto-fill-tag {
    padding: 0.45rem 0.9rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transition);
}

.auto-fill-tag:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.auto-fill-tag.active {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

.auto-fill-tag.active:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.auto-fill-source {
    padding: 0.45rem 0.9rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transition);
}

.auto-fill-source:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.auto-fill-source.active {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

.auto-fill-source.active:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.auto-fill-results {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.auto-fill-results.auto-fill-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.auto-fill-results.auto-fill-warning {
    background: #fff3e0;
    color: #e65100;
}

.auto-fill-results.auto-fill-info {
    background: var(--green-pale);
    color: var(--green-dark);
}

.auto-fill-results.auto-fill-error {
    background: #ffebee;
    color: #c62828;
}

.auto-fill-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-light);
}

.btn-auto-fill-cancel {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    color: var(--gray-dark);
    transition: var(--transition);
}

.btn-auto-fill-cancel:hover {
    border-color: var(--gray-medium);
}

.btn-auto-fill-run {
    padding: 0.6rem 1.5rem;
    border: none;
    background: var(--green-primary);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.btn-auto-fill-run:hover {
    background: var(--green-dark);
}

.btn-auto-fill-run:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-auto-fill.btn-planner-action {
    background: rgba(212, 164, 76, 0.1);
    border-color: rgba(212, 164, 76, 0.3);
    color: var(--green-dark);
}

.btn-auto-fill.btn-planner-action:hover {
    background: rgba(212, 164, 76, 0.2);
    border-color: var(--gold-primary);
    color: var(--green-dark);
}

[data-theme="dark"] .btn-auto-fill.btn-planner-action {
    background: var(--white);
    border-color: var(--gold-primary);
    color: var(--gold-primary);
}

[data-theme="dark"] .btn-auto-fill.btn-planner-action:hover {
    background: var(--gold-pale);
    color: var(--gold-light);
}

/* Auto Fill Mode Buttons */
.auto-fill-slot-info {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin: 0 0 0.5rem;
}

.auto-fill-mode-btns {
    display: flex;
    gap: 0.5rem;
}

.auto-fill-mode-btn {
    padding: 0.45rem 0.9rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: var(--transition);
}

.auto-fill-mode-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.auto-fill-mode-btn.active {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

/* Keto Score Badge (compact, for cards/lists) */
.keto-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.keto-badge i {
    font-size: 0.7rem;
}

.keto-badge.keto-ideal {
    background: #ede0f5;
    color: #6c3483;
    border: 1px solid #c9a5e3;
}

.keto-badge.keto-friendly {
    background: #f0e4f7;
    color: #7d3c98;
    border: 1px solid #d2b4de;
}

.keto-badge.keto-lowcarb {
    background: #f5eef8;
    color: #8e44ad;
    border: 1px solid #dcc6e9;
}

.keto-badge.keto-notketo {
    background: #f9f4fc;
    color: #999;
    border: 1px solid #e0d5e8;
}

/* ==========================================
   Legal / Info Page Navigation
   ========================================== */

.legal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5%;
    background: var(--white);
    border-bottom: 1px solid var(--gray-light);
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--green-dark);
}

.legal-nav-logo i {
    color: var(--green-primary);
    font-size: 1.2rem;
}

.legal-nav-logo .brand-logo-img {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    object-fit: cover;
}

.legal-nav-logo .brand-light {
    font-weight: 400;
    color: var(--gray-medium);
}

.legal-nav-home {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--green-primary);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.legal-nav-home:hover {
    background: var(--green-pale);
    color: var(--green-dark);
}

/* ==========================================
   Legal Pages (Privacy, Terms, Cookies)
   ========================================== */

.legal-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 5% 4rem;
}

.legal-content {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-md);
}

.legal-content h1 {
    font-size: 1.8rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.legal-updated {
    color: var(--gray-medium);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.legal-content h2 {
    font-size: 1.15rem;
    color: var(--green-dark);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-light);
}

.legal-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
}

.legal-content h3 {
    font-size: 1rem;
    color: var(--gray-dark);
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}

.legal-content p {
    color: var(--gray-dark);
    line-height: 1.7;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
}

.legal-content ul,
.legal-content ol {
    color: var(--gray-dark);
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
    line-height: 1.7;
}

.legal-content li {
    margin-bottom: 0.4rem;
}

.legal-notice {
    background: #e8f4fd;
    border: 1px solid #b6d9f2;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #1a5276;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.legal-notice i {
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.legal-warning {
    background: #fdf3e7;
    border: 1px solid #f0c88a;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #7a4a0a;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.legal-warning i {
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    color: #e67e22;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.85rem;
}

.legal-table th,
.legal-table td {
    border: 1px solid #e0e0e0;
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--green-pale);
    color: var(--green-dark);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.legal-table td {
    color: var(--gray-dark);
    line-height: 1.5;
}

.legal-table tr:nth-child(even) td {
    background: #fafaf7;
}

.legal-table code {
    background: #f0f0ec;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--green-dark);
}

/* Footer Legal Links */
.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.footer-legal-links a {
    color: var(--gray-medium);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.2s;
}

.footer-legal-links a:hover {
    color: var(--gold-light);
}

@media (max-width: 600px) {
    .legal-content {
        padding: 1.5rem 1.25rem;
    }

    .legal-content h1 {
        font-size: 1.4rem;
    }

    .legal-table {
        font-size: 0.78rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 0.4rem 0.5rem;
    }

    .footer-legal-links {
        gap: 1rem;
    }
}

/* Sitemap Page */
.sitemap-intro {
    font-size: 1rem;
    color: var(--gray-medium);
    margin-bottom: 1.5rem;
}

.sitemap-content h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sitemap-content h2 i {
    color: var(--green-primary);
    font-size: 1rem;
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 1.5rem;
}

.sitemap-list li {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: var(--bg-light);
    transition: all 0.2s;
}

.sitemap-list li:hover {
    background: #e8f5e9;
    transform: translateX(4px);
}

.sitemap-list li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.sitemap-list li a:hover {
    color: var(--green-primary);
}

.sitemap-list li a i {
    width: 20px;
    text-align: center;
    color: var(--green-primary);
    font-size: 0.9rem;
}

.sitemap-desc {
    display: block;
    font-size: 0.82rem;
    color: var(--gray-medium);
    padding-left: 1.75rem;
    line-height: 1.4;
}

.sitemap-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f9a825, #f57f17);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.sitemap-coming-soon {
    background: var(--bg-light);
    border: 1px dashed #ccc;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    color: var(--gray-medium);
    font-style: italic;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .sitemap-list li {
        padding: 0.6rem 0.75rem;
    }

    .sitemap-list li a {
        font-size: 0.88rem;
    }

    .sitemap-desc {
        font-size: 0.78rem;
        padding-left: 1.5rem;
    }
}

/* Cookie Consent Banner */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--black);
    color: var(--white);
    padding: 1rem 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 10000;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    font-size: 0.85rem;
    line-height: 1.4;
    flex-wrap: wrap;
}

.cookie-consent-text {
    flex: 1;
    min-width: 200px;
}

.cookie-consent-text a {
    color: var(--gold-light);
    text-decoration: underline;
}

.cookie-consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-consent-accept {
    background: var(--green-primary);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    transition: background 0.2s;
}

.cookie-consent-accept:hover {
    background: var(--green-dark);
}

@media (max-width: 600px) {
    .cookie-consent {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }
}

/* ==========================================
   Help & FAQ Page
   ========================================== */

.help-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 5% 4rem;
}

.help-header {
    text-align: center;
    margin-bottom: 1rem;
}

.help-header i {
    font-size: 2.5rem;
    color: var(--green-primary);
    margin-bottom: 0.75rem;
}

.help-header h1 {
    font-size: 1.8rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.help-header p {
    color: var(--gray-medium);
    font-size: 0.95rem;
}

.help-search {
    position: relative;
    max-width: 480px;
    margin: 1.25rem auto 0;
}

.help-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--gray-medium);
}

.help-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.help-search input:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.1);
}

.help-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--gray-medium);
}

.help-no-results i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
}

.help-no-results p {
    font-size: 0.95rem;
}

.help-no-results a {
    color: var(--green-primary);
    font-weight: 500;
}

/* FAQ Categories */
.help-faq-section {
    margin-bottom: 3rem;
}

.help-faq-category {
    margin-bottom: 2rem;
}

.help-faq-category h2 {
    font-size: 1.1rem;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-faq-category h2 i {
    font-size: 1rem;
    color: var(--green-primary);
}

.help-faq-category .faq-list {
    padding: 0;
}

.help-faq-category .faq-item {
    margin-bottom: 0.5rem;
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    overflow: hidden;
}

.help-faq-category .faq-question {
    width: 100%;
    background: var(--white);
    border: none;
    padding: 0.9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-dark);
    text-align: left;
    transition: background 0.2s;
}

.help-faq-category .faq-question:hover {
    background: var(--green-pale);
}

.help-faq-category .faq-question i {
    transition: transform 0.3s;
    color: var(--gray-medium);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.help-faq-category .faq-item.open .faq-question i {
    transform: rotate(180deg);
}

.help-faq-category .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.help-faq-category .faq-item.open .faq-answer {
    max-height: 600px;
    padding: 0 1rem 1rem;
}

.help-faq-category .faq-answer p {
    color: var(--gray-dark);
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.help-faq-category .faq-answer a {
    color: var(--green-primary);
    text-decoration: underline;
}

/* Contact Form Section */
.help-contact-section {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

.help-contact-section h2 {
    font-size: 1.2rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-contact-section h2 i {
    color: var(--green-primary);
}

.help-contact-section > p {
    color: var(--gray-medium);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.help-contact-form .form-group {
    margin-bottom: 1.25rem;
}

.help-contact-form label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin-bottom: 0.4rem;
}

.help-contact-form label i {
    color: var(--green-primary);
    margin-right: 0.3rem;
}

.help-contact-form input,
.help-contact-form textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: var(--gray-dark);
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.help-contact-form input:focus,
.help-contact-form textarea:focus {
    border-color: var(--green-primary);
    outline: none;
}

.help-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.help-submit-btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 0.95rem;
    border-radius: 10px;
    margin-top: 0.5rem;
}

.help-form-success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #2e7d32;
    font-size: 0.88rem;
}

.help-form-success i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .help-header h1 {
        font-size: 1.4rem;
    }

    .help-contact-section {
        padding: 1.5rem 1.25rem;
    }
}

/* ==========================================
   Recipe Nutrition - Calculate Button & Breakdown
   ========================================== */

.recipe-nutrition-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-calculate-nutrition,
.btn-recalculate-nutrition {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.btn-calculate-nutrition {
    background: var(--green-primary);
    color: white;
}

.btn-calculate-nutrition:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
}

.btn-calculate-nutrition:disabled,
.btn-recalculate-nutrition:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-recalculate-nutrition {
    background: var(--gray-light);
    color: var(--gray-dark);
}

.btn-recalculate-nutrition:hover:not(:disabled) {
    background: #d4d4d4;
}

/* Nutrition source badge */
.nutrition-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.nutrition-source-calculated {
    background: #e8f5e9;
    color: #2e7d32;
}

.nutrition-source-imported {
    background: #e3f2fd;
    color: #1565c0;
}

/* Ingredient breakdown table */
.ingredient-breakdown-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid rgba(58, 125, 92, 0.08);
    background: var(--white);
    display: block;
    max-width: 100%;
}

.ingredient-breakdown-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    min-width: 580px;
}

.ingredient-breakdown-table th {
    background: rgba(58, 125, 92, 0.06);
    padding: 0.6rem 0.8rem;
    text-align: right;
    font-weight: 600;
    color: var(--green-dark);
    white-space: nowrap;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ingredient-breakdown-table th:first-child,
.ingredient-breakdown-table td:first-child {
    text-align: left;
    min-width: 140px;
    position: sticky;
    left: 0;
    z-index: 1;
}

/* Frozen column background — must be opaque to cover scrolling content */
.ingredient-breakdown-table th:first-child {
    background: rgba(58, 125, 92, 0.06);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

.ingredient-breakdown-table td:first-child {
    background: var(--white);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

.ingredient-breakdown-table tbody tr:nth-child(even) td:first-child {
    background: var(--off-white);
}

.ingredient-breakdown-table td {
    padding: 0.5rem 0.8rem;
    text-align: right;
    border-bottom: 1px solid rgba(58, 125, 92, 0.06);
}

.ingredient-breakdown-table tbody tr:nth-child(even) {
    background: rgba(58, 125, 92, 0.03);
}

.ingredient-breakdown-table tbody tr:hover {
    background: rgba(58, 125, 92, 0.06);
}

.ingredient-breakdown-table tbody tr:hover td:first-child {
    background: rgba(58, 125, 92, 0.06);
}

.ingredient-breakdown-table tr.unmatched td {
    color: var(--gray-medium);
    font-style: italic;
}

.ingredient-breakdown-table tr.totals-row {
    font-weight: 700;
    background: rgba(58, 125, 92, 0.08);
}

.ingredient-breakdown-table tr.totals-row td {
    border-top: 2px solid var(--green-primary);
    border-bottom: none;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    color: var(--green-dark);
}

.ingredient-breakdown-table tr.totals-row td:first-child {
    background: rgba(58, 125, 92, 0.08);
}

.match-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.match-indicator.matched {
    background: var(--success);
}

.match-indicator.unmatched {
    background: var(--gray-medium);
}

.matched-to {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-medium);
    margin-left: 1rem;
}

@media (max-width: 600px) {
    .ingredient-breakdown-table {
        font-size: 0.78rem;
    }

    .recipe-nutrition-actions {
        flex-direction: column;
    }

    .btn-calculate-nutrition,
    .btn-recalculate-nutrition {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================
   Nutrition Report Modal
   ========================================== */

/* Button */
.btn-nutrition-report {
    background: rgba(212, 164, 76, 0.1) !important;
    border-color: rgba(212, 164, 76, 0.3) !important;
    color: var(--gray-dark) !important;
}

.btn-nutrition-report:hover {
    background: rgba(212, 164, 76, 0.2) !important;
    border-color: var(--gold-primary) !important;
    color: var(--green-dark) !important;
}

/* Modal Shell */
.nutrition-report-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nutrition-report-modal.hidden {
    display: none;
}

.nutrition-report-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
}

.nutrition-report-content {
    position: relative;
    background: var(--off-white);
    border-radius: 20px;
    width: 92%;
    max-width: 820px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* Header */
.nutrition-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--gray-light);
    background: var(--white);
    flex-shrink: 0;
}

.nutrition-report-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nutrition-report-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.btn-report-print {
    padding: 0.45rem 1rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.btn-report-print:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.btn-report-maximize {
    padding: 0.45rem 0.7rem;
    border: 2px solid var(--gray-light);
    background: var(--white);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.btn-report-maximize:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

/* Maximized state */
.nutrition-report-modal.maximized .nutrition-report-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
}

.nutrition-report-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.3rem;
    transition: var(--transition);
}

.nutrition-report-close:hover {
    color: var(--danger);
}

/* Loading */
.report-loading {
    padding: 4rem 2rem;
    text-align: center;
    font-size: 1.05rem;
    color: var(--gray-medium);
}

.report-loading.hidden {
    display: none;
}

/* Report Body (scrollable) */
.report-body {
    overflow-y: auto;
    padding: 1.5rem;
    flex: 1;
}

.report-body.hidden {
    display: none;
}

/* Sections */
.report-section {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.report-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--green-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-subtitle {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--gray-medium);
}

/* ── Section 1: Overview Grid ── */

.report-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.report-stat-card {
    background: var(--gray-light);
    border-radius: 12px;
    padding: 1.2rem 0.8rem;
    text-align: center;
}

.report-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.2;
}

.report-stat-value small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-medium);
}

.report-stat-label {
    font-size: 0.8rem;
    color: var(--gray-medium);
    margin-top: 0.3rem;
}

/* ── Section 1b: Meal List ── */

.report-meal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.report-meal-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-light);
    border-radius: 10px;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, box-shadow 0.15s;
    font-size: 0.85rem;
}

a.report-meal-item:hover {
    background: #e8f5e9;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.report-meal-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.report-meal-thumb-fallback {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--green-primary);
    font-size: 0.75rem;
}

.report-meal-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.report-meal-kcal {
    font-size: 0.75rem;
    color: var(--gray-medium);
    white-space: nowrap;
}

/* Day breakdown meal links */
.report-meal-link {
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 500;
}

.report-meal-link:hover {
    text-decoration: underline;
    color: var(--green-primary);
}

/* ── Section 2: Health Score Gauge ── */

.health-score-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.health-score-gauge {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: conic-gradient(
        var(--green-primary) calc(var(--score) * 3.6deg),
        var(--gray-light) calc(var(--score) * 3.6deg)
    );
}

.health-score-gauge.score-excellent {
    background: conic-gradient(
        #10b981 calc(var(--score) * 3.6deg),
        var(--gray-light) calc(var(--score) * 3.6deg)
    );
}

.health-score-gauge.score-good {
    background: conic-gradient(
        #22c55e calc(var(--score) * 3.6deg),
        var(--gray-light) calc(var(--score) * 3.6deg)
    );
}

.health-score-gauge.score-fair {
    background: conic-gradient(
        #f59e0b calc(var(--score) * 3.6deg),
        var(--gray-light) calc(var(--score) * 3.6deg)
    );
}

.health-score-gauge.score-poor {
    background: conic-gradient(
        #ef4444 calc(var(--score) * 3.6deg),
        var(--gray-light) calc(var(--score) * 3.6deg)
    );
}

.health-score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.health-score-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1;
}

.health-score-label {
    font-size: 0.6rem;
    color: var(--gray-medium);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.15rem;
    max-width: 90px;
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.score-excellent .health-score-number { color: #10b981; }
.score-good .health-score-number { color: #22c55e; }
.score-fair .health-score-number { color: #f59e0b; }
.score-poor .health-score-number { color: #ef4444; }

/* Factor Breakdown Bars */
.health-score-factors {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.health-score-factor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.factor-name {
    width: 90px;
    font-size: 0.8rem;
    color: var(--gray-dark);
    text-align: right;
    flex-shrink: 0;
}

.factor-bar-bg {
    flex: 1;
    height: 10px;
    background: var(--gray-light);
    border-radius: 5px;
    overflow: hidden;
}

.factor-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.6s ease;
}

.factor-bar-fill.factor-good { background: #10b981; }
.factor-bar-fill.factor-ok   { background: #f59e0b; }
.factor-bar-fill.factor-poor { background: #ef4444; }

.factor-value {
    width: 28px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-medium);
    text-align: right;
}

.factor-advice {
    font-size: 0.7rem;
    margin: -0.2rem 0 0.3rem 0;
    padding-left: calc(90px + 0.6rem);
    line-height: 1.3;
}

.factor-advice.factor-ok {
    color: #b45309;
}

.factor-advice.factor-poor {
    color: #dc2626;
}

/* ── Section 3: Daily Calorie Bar Chart ── */

.report-bar-chart {
    min-height: 200px;
}

.report-bar-chart-inner {
    display: flex;
    gap: 0.6rem;
    height: 220px;
    position: relative;
    padding-top: 1.4rem;
}

.report-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.report-bar-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-dark);
    margin-bottom: 0.25rem;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    background: var(--off-white, #f8faf8);
    padding: 0 2px;
    border-radius: 3px;
    white-space: nowrap;
}

.report-bar-wrapper {
    width: 100%;
    max-width: 48px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    flex-shrink: 0;
}

.report-bar-fill {
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0 0;
    min-height: 2px;
}

.bar-good { background: #10b981; }
.bar-low  { background: #f59e0b; }
.bar-high { background: #ef4444; }

.report-bar-labels-row {
    display: flex;
    gap: 0.6rem;
}

.report-bar-label {
    flex: 1;
    font-size: 0.72rem;
    color: var(--gray-medium);
    text-align: center;
    padding-top: 0.4rem;
    white-space: nowrap;
}

.report-bar-reference {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px dashed rgba(100, 116, 139, 0.6);
    pointer-events: none;
    z-index: 2;
}

.report-bar-reference span {
    position: absolute;
    right: 0;
    top: -18px;
    font-size: 0.68rem;
    color: var(--gray-dark);
    font-weight: 700;
    background: var(--white);
    padding: 0 0.4rem;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    white-space: nowrap;
    z-index: 4;
}

/* ── Section 4: Macro Cards ── */
/* Reuses existing .nutrition-grid-full and .nutrition-card styles */

/* ── Section 5: Macro Split ── */

.macro-split-bar {
    display: flex;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}

.macro-split-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
    min-width: 30px;
}

.macro-split-segment span {
    font-size: 0.78rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.macro-split-segment.fat     { background: #ef4444; }
.macro-split-segment.carbs   { background: #3b82f6; }
.macro-split-segment.protein { background: #10b981; }

.macro-split-legend {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--gray-dark);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.fat     { background: #ef4444; }
.legend-dot.carbs   { background: #3b82f6; }
.legend-dot.protein { background: #10b981; }

.macro-split-guideline {
    text-align: center;
    font-size: 0.78rem;
    color: var(--gray-medium);
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

/* ── Section 6: Dietary Compliance ── */

.report-dietary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
}

.report-diet-card {
    display: flex;
    flex-direction: column;
    padding: 0.9rem 1rem;
    background: var(--gray-light);
    border-radius: 12px;
    border: 2px solid transparent;
    transition: var(--transition);
}

.diet-card-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.diet-card-top > i:first-child {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.report-diet-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.report-diet-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-dark);
}

.report-diet-count {
    font-size: 0.75rem;
    color: var(--gray-medium);
}

.report-diet-card.diet-pass {
    border-color: #10b981;
    background: #f0fdf4;
}

.diet-check {
    color: #10b981;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Section 7: Allergens ── */

.report-allergen-group {
    margin-bottom: 0.8rem;
}

.report-allergen-group strong {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-dark);
    margin-bottom: 0.4rem;
}

.report-no-data {
    font-size: 0.88rem;
    color: var(--gray-medium);
    font-style: italic;
    margin: 0;
    padding: 0.5rem 0;
}

/* ── Section 8: Day-by-Day Breakdown ── */

.report-day-section {
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.report-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    cursor: pointer;
    background: var(--gray-light);
    transition: background 0.2s;
    user-select: none;
}

.report-day-header:hover {
    background: #e8e8e2;
}

.report-day-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-day-chevron {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: var(--gray-medium);
}

.report-day-summary {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.report-day-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 1rem;
}

.report-day-body.expanded {
    max-height: 600px;
    padding: 0.8rem 1rem;
}

.report-day-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.report-day-table thead th {
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--green-dark);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(58, 125, 92, 0.06);
    border-bottom: 2px solid rgba(58, 125, 92, 0.12);
}

.report-day-table tbody td {
    padding: 0.5rem 0.6rem;
    color: var(--gray-dark);
    border-bottom: 1px solid rgba(58, 125, 92, 0.06);
}

.report-day-table tbody tr:nth-child(even) {
    background: rgba(58, 125, 92, 0.03);
}

.report-day-table tbody tr:hover {
    background: rgba(58, 125, 92, 0.06);
}

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

.no-nutrition-row td {
    color: var(--gray-medium);
    font-style: italic;
}

/* ── Report Tips ── */

.report-tip-box {
    margin-top: 1rem;
}

.report-tip {
    font-size: 0.82rem;
    color: var(--gray-dark);
    background: var(--gold-pale);
    border-left: 3px solid var(--gold-primary);
    padding: 0.6rem 0.8rem;
    border-radius: 0 8px 8px 0;
    margin: 0 0 0.4rem 0;
    line-height: 1.5;
}

.report-tip:last-child {
    margin-bottom: 0;
}

.report-tip i {
    color: var(--gold-dark);
    margin-right: 0.3rem;
}

.report-tip strong {
    color: var(--green-dark);
}

/* ── Health Score Explainer ── */

.health-score-explainer {
    font-size: 0.82rem;
    color: var(--gray-medium);
    margin: 0 0 1rem 0;
    line-height: 1.5;
    font-style: italic;
}

.factor-heading {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.4rem 0;
}

/* ── Fat Breakdown ── */

.fat-breakdown-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.fat-stat {
    text-align: center;
}

.fat-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gray-dark);
}

.fat-stat.sat .fat-stat-value { color: #ef4444; }
.fat-stat.unsat .fat-stat-value { color: #10b981; }

.fat-stat-label {
    font-size: 0.8rem;
    color: var(--gray-medium);
}

.fat-breakdown-bar {
    display: flex;
    height: 30px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}

.fat-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    transition: width 0.5s ease;
}

.fat-bar-segment span {
    font-size: 0.78rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.fat-bar-segment.sat   { background: #ef4444; }
.fat-bar-segment.unsat { background: #10b981; }

.fat-breakdown-legend {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.legend-dot.fat-sat   { background: #ef4444; }
.legend-dot.fat-unsat { background: #10b981; }

.fat-breakdown-tip {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-medium);
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

/* ── Dietary Compliance: Expandable Meal Links ── */

.diet-card-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
}

.diet-expand-icon {
    font-size: 0.6rem;
    margin-left: 0.2rem;
    transition: transform 0.3s ease;
    color: var(--gray-medium);
}

.diet-meal-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, margin 0.35s ease;
    margin-top: 0;
}

.diet-meal-list.expanded {
    max-height: 300px;
    margin-top: 0.6rem;
    overflow-y: auto;
}

.diet-meal-link {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    color: var(--green-dark);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.diet-meal-link:hover {
    background: var(--green-pale);
}

.diet-meal-link i {
    font-size: 0.7rem;
    margin-right: 0.3rem;
    color: var(--gray-medium);
}

/* ── Share PDF Button ── */

.btn-report-share {
    padding: 0.45rem 1rem;
    border: 2px solid var(--green-primary);
    background: var(--green-primary);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.btn-report-share:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

/* ── Print Styles (Nutrition Report) ── */

@media print {
    /* Report print header with logo */
    .print-report-header {
        text-align: center;
        margin-bottom: 1rem;
        padding-bottom: 0.8rem;
        border-bottom: 3px solid #005F02;
    }

    .print-logo {
        font-size: 14pt;
        font-weight: 800;
        color: #005F02;
        margin-bottom: 0.3rem;
    }

    .print-logo i {
        margin-right: 0.3rem;
    }

    .print-logo .brand-logo-img {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        vertical-align: middle;
        margin-right: 0.3rem;
    }

    .print-report-header h1 {
        font-size: 16pt;
        color: #1C2420;
        margin: 0.3rem 0 0.2rem 0;
    }

    .print-subtitle {
        font-size: 9pt;
        color: #8C9186;
        margin: 0;
    }

    /* Report print content — override shopping list's column-count */
    .print-report-content {
        column-count: 1 !important;
        padding: 0.5rem 0;
    }

    .print-report-content .report-section {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 0.8rem;
        padding: 0.8rem;
    }

    /* Keep health score gauge + factors together */
    .print-report-content .health-score-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Keep each day breakdown together */
    .print-report-content .report-day-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Expand accordions and meal lists */
    .print-report-content .report-day-body {
        max-height: none !important;
        padding: 0.5rem 1rem !important;
        overflow: visible;
    }

    .print-report-content .diet-meal-list {
        max-height: none !important;
        overflow: visible;
    }

    /* Chart sizing */
    .print-report-content .report-bar-chart-inner {
        height: 140px;
    }

    .print-report-content .health-score-gauge {
        width: 100px;
        height: 100px;
    }

    .print-report-content .health-score-circle {
        width: 76px;
        height: 76px;
    }

    .print-report-content .health-score-number {
        font-size: 1.4rem;
    }

    /* Force colors to print */
    .print-report-content .health-score-gauge,
    .print-report-content .factor-bar-fill,
    .print-report-content .report-bar-fill,
    .print-report-content .macro-split-segment,
    .print-report-content .fat-bar-segment,
    .print-report-content .card-bar-fill {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Smaller text for print */
    .print-report-content .report-section h4 {
        font-size: 10pt;
        margin-bottom: 0.5rem;
    }

    .print-report-content .nutrition-card {
        padding: 0.6rem;
    }

    .print-report-content .report-tip {
        font-size: 8pt;
    }

    /* Footer */
    .print-report-footer {
        text-align: center;
        font-size: 8pt;
        color: #8C9186;
        margin-top: 1rem;
        padding-top: 0.5rem;
        border-top: 1px solid #ddd;
    }

    /* Hide interactive elements */
    .btn-report-print,
    .btn-report-share,
    .nutrition-report-close,
    .nutrition-report-modal,
    .diet-expand-icon {
        display: none !important;
    }
}

/* ── Responsive: Nutrition Report ── */

@media (max-width: 768px) {
    .nutrition-report-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .report-body {
        padding: 1rem;
    }

    .report-section {
        padding: 1.1rem;
        border-radius: 12px;
    }

    /* Compact macro tiles: 4 per row in nutrition report on mobile */
    .nutrition-report-content .nutrition-grid-full {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
    }

    .nutrition-report-content .nutrition-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.4rem;
        gap: 0.2rem;
        flex-wrap: nowrap;
        min-height: 72px;
    }

    .nutrition-report-content .nutrition-card-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 0;
    }

    .nutrition-report-content .nutrition-card-icon i {
        font-size: 0.65rem;
    }

    .nutrition-report-content .nutrition-card-content {
        margin-bottom: 0.15rem;
    }

    .nutrition-report-content .nutrition-card-value {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .nutrition-report-content .nutrition-card-label {
        font-size: 0.55rem;
    }

    .nutrition-report-content .nutrition-card-bar {
        flex-basis: auto;
        height: 3px;
    }

    .report-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .report-stat-value {
        font-size: 1.4rem;
    }

    .health-score-row {
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
    }

    .health-score-gauge {
        width: 130px;
        height: 130px;
    }

    .health-score-circle {
        width: 100px;
        height: 100px;
    }

    .health-score-number {
        font-size: 1.8rem;
    }

    .health-score-label {
        font-size: 0.55rem;
        max-width: 72px;
    }

    .health-score-factors {
        width: 100%;
    }

    .factor-name {
        width: 75px;
        font-size: 0.75rem;
    }

    .report-bar-chart-inner {
        height: 180px;
        gap: 0.3rem;
    }

    .report-bar-value {
        font-size: 0.6rem;
    }

    .report-bar-label {
        font-size: 0.65rem;
    }

    .fat-breakdown-stats {
        gap: 1rem;
    }

    .fat-stat-value {
        font-size: 1.1rem;
    }

    .report-dietary-grid {
        grid-template-columns: 1fr;
    }

    .report-day-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .report-day-table {
        font-size: 0.78rem;
        min-width: 400px;
    }

    .report-day-table thead th,
    .report-day-table tbody td {
        padding: 0.35rem 0.4rem;
    }

    .macro-split-legend,
    .fat-breakdown-legend {
        gap: 0.8rem;
        font-size: 0.78rem;
    }

    .btn-report-share span,
    .btn-report-print span {
        display: none;
    }

    .btn-report-share,
    .btn-report-print {
        padding: 0.35rem 0.5rem;
        font-size: 0.78rem;
    }

    .nutrition-report-header-actions {
        gap: 0.35rem;
    }

    .nutrition-report-header h3 {
        font-size: 0.95rem;
    }
}

/* ==============================================
   NUTRITION METRICS PAGE
   ============================================== */

.nm-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

.nm-header h1 {
    font-size: 1.8rem;
    color: var(--green-dark);
    margin-bottom: 0.3rem;
}

.nm-header h1 i {
    color: var(--green-primary);
    margin-right: 0.4rem;
}

.nm-subtitle {
    color: var(--gray-medium);
    font-size: 0.95rem;
}

/* Date Range Picker */

.nm-range-picker {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.nm-range-btn {
    background: var(--gray-light);
    border: 2px solid transparent;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.nm-range-btn:hover {
    border-color: var(--green-primary);
    color: var(--green-primary);
}

.nm-range-btn.active {
    background: var(--green-primary);
    color: white;
    border-color: var(--green-primary);
}

/* Summary Cards */

.nm-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.nm-summary-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.nm-summary-card i {
    font-size: 1.6rem;
    color: var(--green-primary);
    margin-bottom: 0.5rem;
}

.nm-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-dark);
    margin-bottom: 0.2rem;
}

.nm-summary-label {
    font-size: 0.78rem;
    color: var(--gray-medium);
    font-weight: 500;
}

/* Sections */

.nm-section {
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.nm-section h2 {
    font-size: 1.15rem;
    color: var(--green-dark);
    margin-bottom: 0.3rem;
}

.nm-section h2 i {
    color: var(--green-primary);
    margin-right: 0.3rem;
}

.nm-section-desc {
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin-bottom: 1.2rem;
}

/* Empty States */

.nm-empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--gray-medium);
}

.nm-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    opacity: 0.4;
}

.nm-empty-state p {
    font-size: 0.9rem;
}

/* Bar chart adjustments for Nutrition Metrics page */

.nm-bar-chart-inner {
    height: 240px;
    overflow-x: auto;
    min-width: 0;
}

.nm-bar-chart-inner .report-bar-col {
    min-width: 42px;
}

/* Macro cards grid inside macro split section */

.nm-macro-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.nm-macro-card {
    background: var(--gray-light);
    border-radius: 12px;
    padding: 0.8rem;
    text-align: center;
}

.nm-macro-card i {
    font-size: 1.1rem;
    color: var(--green-primary);
    margin-bottom: 0.3rem;
}

.nm-macro-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--green-dark);
}

.nm-macro-lbl {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-medium);
    margin-bottom: 0.5rem;
}

.nm-macro-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.nm-macro-bar-fill {
    height: 100%;
    background: var(--green-primary);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Shopping List Table */

.nm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid rgba(58, 125, 92, 0.08);
}

.nm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.nm-table th {
    text-align: left;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    color: var(--green-dark);
    background: rgba(58, 125, 92, 0.06);
    border-bottom: 2px solid rgba(58, 125, 92, 0.12);
    white-space: nowrap;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nm-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid rgba(58, 125, 92, 0.06);
    color: var(--gray-dark);
}

.nm-table tbody tr:nth-child(even) {
    background: rgba(58, 125, 92, 0.03);
}

.nm-table tbody tr:hover {
    background: rgba(58, 125, 92, 0.06);
}

.nm-table tfoot td {
    border-top: 2px solid var(--green-primary);
    border-bottom: none;
    background: rgba(58, 125, 92, 0.06);
    font-weight: 600;
    color: var(--green-dark);
}

.nm-tbl-name {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nm-tbl-kcal {
    font-weight: 600;
    color: var(--green-dark);
}

/* Planned vs Purchased */

.nm-pvp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.nm-pvp-card {
    background: var(--gray-light);
    border-radius: 14px;
    padding: 1.2rem;
}

.nm-pvp-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--green-dark);
    margin-bottom: 0.8rem;
}

.nm-pvp-header i {
    color: var(--green-primary);
    margin-right: 0.3rem;
}

.nm-pvp-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.nm-pvp-col {
    flex: 1;
}

.nm-pvp-label {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-medium);
    margin-bottom: 0.2rem;
}

.nm-pvp-label i {
    margin-right: 0.2rem;
}

.nm-pvp-val {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--green-dark);
}

.nm-pvp-diff {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.04);
    color: var(--gray-medium);
}

.nm-pvp-diff.nm-diff-over {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.nm-pvp-diff.nm-diff-under {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* ── Nutrition Metrics Responsive ── */

@media (max-width: 768px) {
    .nm-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .nm-macro-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .nm-pvp-grid {
        grid-template-columns: 1fr;
    }

    .nm-summary-value {
        font-size: 1.2rem;
    }

    .nm-bar-chart-inner {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .nm-summary-cards {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .nm-summary-card {
        padding: 0.8rem;
    }

    .nm-macro-cards {
        grid-template-columns: 1fr 1fr;
    }

    .nm-range-btn {
        padding: 0.4rem 0.9rem;
        font-size: 0.8rem;
    }
}


/* ==========================================
   App Navigation — Sidebar, Top Bar, Bottom Tabs
   ========================================== */

/* ── Page transition loader ──
   The inline <head> script adds .app-page to <html> instantly.
   body::before = solid overlay, body::after = spinner.
   Both disappear the moment initAppNav() adds .has-app-nav to body. */

html.app-page body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--off-white);
}
html.app-page body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100000;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--green-pale);
    border-top-color: var(--green-primary);
    border-radius: 50%;
    animation: fms-spin 0.6s linear infinite;
}
@keyframes fms-spin { to { transform: rotate(360deg); } }

/* Outgoing: overlay when clicking a link to leave */
body.page-leaving::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--off-white);
}

/* Remove loader once app nav is built */
body.has-app-nav::before,
body.has-app-nav::after {
    display: none !important;
}

/* Also hide old chrome as defense-in-depth */
html.app-page .navbar,
html.app-page .results-nav {
    display: none !important;
}

/* Hide old navbar (after JS adds .has-app-nav) */
.has-app-nav .navbar,
.has-app-nav .results-nav,
.nav-hidden {
    display: none !important;
}

/* ── Sidebar (desktop) ── */

.app-sidebar {
    --sidebar-w: 240px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-right: 1px solid rgba(58,125,92,0.08);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

.sidebar-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    border-bottom: 1px solid rgba(58,125,92,0.08);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--green-dark);
    font-weight: 700;
    font-size: 1.25rem;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}

.sidebar-logo i {
    font-size: 1.2rem;
    color: var(--green-primary);
}

.sidebar-logo .brand-logo-img,
.sidebar-logo .brand-logo-svg {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.sidebar-nav {
    flex: 1;
    padding: 0.6rem 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    margin: 1px 0.5rem;
    color: var(--gray-dark);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    border-radius: var(--radius-sm);
    border-left: none;
}

.sidebar-link:hover {
    background: rgba(58,125,92,0.08);
    color: var(--green-dark);
}

.sidebar-link.active {
    background: var(--green-pale);
    color: var(--green-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--green-primary);
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 0.92rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-link:hover i,
.sidebar-link.active i {
    opacity: 1;
}

.sidebar-footer {
    border-top: 1px solid rgba(58,125,92,0.08);
    padding: 0.4rem 0;
    flex-shrink: 0;
}

/* ── Top Bar ── */

.app-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 240px;
    height: 56px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(58,125,92,0.08);
    z-index: 1099;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--gray-dark);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.topbar-hamburger:hover {
    background: var(--gray-light);
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-dark);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
.topbar-title i {
    color: var(--green-primary);
    margin-right: 0.3rem;
    font-size: 1rem;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-theme-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--gray-medium);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

.topbar-theme-btn:hover {
    color: var(--gold-primary);
    background: rgba(212,164,76,0.1);
}

.topbar-avatar {
    font-size: 1.5rem;
    color: var(--gray-medium);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1;
}

.topbar-avatar:hover {
    color: var(--green-primary);
}

/* ── Bottom Navigation (mobile) ── */

.app-bottomnav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid rgba(58,125,92,0.08);
    z-index: 1100;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottomnav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #aaa;
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.35rem 0;
    gap: 0.15rem;
    flex: 1;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.bottomnav-tab i {
    font-size: 1.15rem;
}

.bottomnav-tab.active {
    color: var(--green-primary);
    font-weight: 600;
}

.bottomnav-tab:active {
    color: var(--green-dark);
}

/* ── Layout offsets ── */

.has-app-nav {
    padding-top: 56px !important;
    background: var(--off-white);
}

/* Desktop: sidebar visible, bottom nav hidden */
@media (min-width: 900px) {
    .has-app-nav {
        padding-left: 240px !important;
    }
    .has-app-nav .app-bottomnav {
        display: none !important;
    }
}

/* Mobile: sidebar hidden (slide-in), bottom nav visible */
@media (max-width: 899px) {
    .has-app-nav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
    }
    .app-sidebar {
        transform: translateX(-100%);
    }
    .app-sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    }
    .app-topbar {
        left: 0;
    }
    .topbar-hamburger {
        display: block;
    }
    .app-bottomnav {
        display: flex;
    }
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1099;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s, visibility 0.25s;
    }
    .sidebar-overlay.visible {
        opacity: 1;
        visibility: visible;
    }
}

/* ── Hero compaction under app nav ── */
/* Hide all page h1 titles — title+icon is now in the topbar */
.has-app-nav .insp-hero h1,
.has-app-nav .hero-section h1,
.has-app-nav .mp-hero h1,
.has-app-nav .nm-hero h1,
.has-app-nav .health-hero h1,
.has-app-nav .cookbook-hero h1,
.has-app-nav .sl-hero h1,
.has-app-nav .results-header h1,
.has-app-nav .meal-builder-header h1,
.has-app-nav .cookbook-header h1,
.has-app-nav .planner-page-header h1,
.has-app-nav .health-page-header h1,
.has-app-nav .nm-header h1,
.has-app-nav .sh-header h1,
.has-app-nav .import-page-header h1 {
    display: none;
}

/* Reduce hero padding — content sits right below topbar */
.has-app-nav .insp-hero,
.has-app-nav .hero-section,
.has-app-nav .mp-hero,
.has-app-nav .nm-hero,
.has-app-nav .health-hero,
.has-app-nav .cookbook-hero,
.has-app-nav .sl-hero {
    padding-top: 0;
    padding-bottom: 0.25rem;
}

/* Show explainer text (p) — tighten spacing */
.has-app-nav .insp-hero p,
.has-app-nav .hero-section p,
.has-app-nav .nm-hero p,
.has-app-nav .nm-subtitle,
.has-app-nav .cookbook-subtitle,
.has-app-nav .my-meals-subtitle,
.has-app-nav .meal-builder-header p {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-medium);
    margin: 0 auto 1.2rem;
    max-width: 600px;
    text-align: center;
}

.has-app-nav .meal-builder-intro {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.has-app-nav .meal-builder-intro p {
    margin: 0;
    max-width: none;
    text-align: left;
}

.has-app-nav .meal-builder-intro .btn-import-recipe {
    flex-shrink: 0;
}

/* Index page hero: compact under app nav */
.has-app-nav .hero {
    min-height: auto;
    padding: 1.5rem 5% 0;
    background-image: none;
    background: var(--off-white);
}

.has-app-nav .hero::before {
    display: none;
}

.has-app-nav .hero-content {
    padding-top: 0;
    max-width: 100%;
    text-align: center;
}

.has-app-nav .hero h1 {
    font-size: 2.3rem;
    color: var(--green-dark);
    margin-bottom: 1.25rem;
}

.has-app-nav .hero h1 .highlight {
    color: #c48a1a;
}

.has-app-nav .hero .tagline {
    color: var(--gray-medium);
    font-size: 1.08rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Search/hero elements need dark text when hero bg is light */
.has-app-nav .search-box input {
    color: var(--gray-dark);
}

.has-app-nav .hero .search-container {
    max-width: 700px;
    margin: 0 auto 1.25rem;
}

/* Hide standalone barcode button in app layout so search bar is truly centered */
.has-app-nav .search-with-barcode > .scan-barcode-btn {
    display: none;
}

/* Show inline barcode button inside search box instead */
.has-app-nav .search-scan-inline {
    display: flex !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 0.95rem;
    margin-right: 0.4rem;
}

.has-app-nav .country-filter-select {
    background: var(--white);
    color: var(--gray-dark);
    border: 1px solid #ddd;
}

.has-app-nav .scan-barcode-btn {
    background: var(--white);
    color: var(--green-primary);
    border: 1px solid #ddd;
}

/* Search suggestions — restyle for light bg */
.has-app-nav .search-suggestions {
    color: var(--gray-medium);
}

.has-app-nav .search-suggestions .suggestion {
    color: var(--gray-dark);
    border-color: #ddd;
    background: var(--white);
}

/* Hide marketing sections for logged-in app users */
.has-app-nav .features-preview,
.has-app-nav .cta-section {
    display: none;
}

/* Restyle "How It Works" as a compact dashboard grid */
.has-app-nav .how-it-works {
    background: var(--off-white);
    padding: 0.5rem 5% 2rem;
}

.has-app-nav .how-it-works h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--gray-dark);
    text-align: center;
}

.has-app-nav .how-it-works .section-subtitle {
    display: none;
}

.has-app-nav .steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    max-width: none;
}

@media (max-width: 1200px) {
    .has-app-nav .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .has-app-nav .steps-grid {
        grid-template-columns: 1fr;
    }
}

.has-app-nav .step {
    background: var(--white);
    border: 1px solid #e5e8e5;
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.has-app-nav .step:hover {
    border-color: var(--green-primary);
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.has-app-nav .step .step-number {
    display: none;
}

.has-app-nav .step .step-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.6rem;
}

.has-app-nav .step .step-icon i {
    font-size: 1.2rem;
}

.has-app-nav .step h3 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.has-app-nav .step p {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--gray-medium);
}

/* Restyle About section */
.has-app-nav .know-your-fuel {
    padding: 3rem 5%;
}

.has-app-nav .know-your-fuel h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.has-app-nav .know-your-fuel p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.has-app-nav .fuel-tag {
    font-size: 0.88rem;
    padding: 0.45rem 0.85rem;
}

.has-app-nav .walkthrough { padding: 1.25rem 5% 1.5rem; }
.has-app-nav .walkthrough h2 { font-size: 1.6rem; }
.has-app-nav .walkthrough .section-subtitle { font-size: 0.95rem; margin-bottom: 2.5rem; }

.has-app-nav .import-recipes { padding: 2rem 5%; }
.has-app-nav .import-recipes h2 { font-size: 1.6rem; }
.has-app-nav .timeline-card h3 { font-size: 1.2rem; }
.has-app-nav .timeline-card p { font-size: 0.95rem; }
.has-app-nav .timeline-card { padding: 1.5rem; }
.has-app-nav .timeline-icon { width: 56px; height: 56px; }
.has-app-nav .timeline-icon i { font-size: 1.4rem; }

.has-app-nav .about {
    background: var(--white);
    padding: 3rem 5%;
}

.has-app-nav .about h2 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    color: var(--gray-dark);
}

.has-app-nav .about h2 .brand-title {
    color: var(--green-dark);
}

.has-app-nav .about h2 .brand-title .brand-light {
    font-weight: 400;
    color: var(--gray-medium);
}

.has-app-nav .how-it-works h2 .highlight {
    color: #c07d1a;
}

.has-app-nav .about p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--gray-medium);
}

.has-app-nav .badge {
    background: var(--green-pale);
    color: var(--green-dark);
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
}

.has-app-nav .badge i {
    color: var(--green-primary);
}

/* Compact footer */
.has-app-nav .footer {
    background: var(--off-white);
    padding: 1.5rem 5%;
    border-top: 1px solid #e5e8e5;
}

.has-app-nav .footer-logo {
    display: none;
}

.has-app-nav .footer p {
    color: var(--gray-medium);
    font-size: 0.78rem;
}

.has-app-nav .footer-legal-links a {
    color: var(--gray-dark);
    font-size: 0.78rem;
}

.has-app-nav .footer-legal-links a:hover {
    color: var(--green-primary);
}

/* Quick links row on index — hide the text labels, keep compact */
.has-app-nav .quick-links-row h2 {
    display: none;
}

/* Results page — clear the fixed topbar */
.has-app-nav .results-container {
    padding-top: 8px !important;
}

/* Product/detail pages — clear the fixed topbar */
.has-app-nav .product-detail-container,
.has-app-nav .meal-detail-container {
    padding-top: 8px !important;
}

.has-app-nav {
    scroll-padding-top: 60px;
}

/* Meal builder — clear the fixed topbar */
.has-app-nav .meal-builder-container {
    padding-top: 8px !important;
}

/* Other page containers — minimal gap below topbar */
.has-app-nav .insp-container {
    padding-top: 8px;
}
.has-app-nav .help-page {
    padding-top: 0.5rem;
}
.has-app-nav .features-main {
    padding-top: 0.5rem;
}
.has-app-nav .premium-main {
    padding-top: 0.5rem;
}
.has-app-nav .import-page-container {
    padding-top: 8px;
}
.has-app-nav .import-page-header {
    margin-bottom: 1rem;
}