/* custom.css – your overrides; load after main.css */

/*--------------------------------
  0. Custom Scrollbars (dark theme)
--------------------------------*/
/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(27, 31, 34, 0.6);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(27, 31, 34, 0.6);
}

/*--------------------------------
  0b. App Button Reset
  Neutralize main.css global button defaults (height, uppercase,
  letter-spacing) for all app UI buttons inside articles.
  Individual components then style from a clean slate.
--------------------------------*/
#main article button:not(.button):not(.close) {
    height: auto;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 400;
    box-shadow: none;
    white-space: normal;
}

/*--------------------------------
  1. Background & Layout
--------------------------------*/
#bg {
    opacity: 0.5;
}
#bg:after {
    background-image: url("../../images/CozyNook7.jpg") !important;
}

/*--------------------------------
  2. Header & Logo
--------------------------------*/
#header {
    position: relative;
}
#header > *:before {
    background: transparent !important;
}
.logo-image {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
}

/* ── BAGL first-letter boxes ── */
.bagl-letter {
    display: inline-block;
    background: rgba(78,205,196,0.18);
    border: 1.5px solid rgba(78,205,196,0.5);
    border-radius: 4px;
    padding: 0 0.12em;
    margin-right: 0.02em;
    font-weight: 800;
    color: #4ecdc4;
    line-height: 1;
    vertical-align: baseline;
}

#header .content.inner {
    overflow: hidden !important;
    position: static !important;
}
body:not(.is-preload) #header .content.inner {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ── Sticky Article Toolbar (hamburger, collapse, close) ── */
.article-toolbar {
    position: sticky;
    top: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    /* Extend full width into article padding */
    margin: -2.5rem -2.5rem 0.75rem -2.5rem;
    padding: 0 0.25rem;
    background: rgba(27, 31, 34, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px 4px 0 0;
    backdrop-filter: blur(8px);
}

/* Override article top padding — toolbar replaces the reserved space */
#main article {
    padding-top: 2.5rem !important;
}

/* ── Hamburger Menu (inside toolbar, left side) ── */
.hamburger-wrap {
    position: relative;
    top: auto;
    left: auto;
    z-index: 10001;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hamburger-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
}
.hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #fff;
}
.hamburger-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.4rem;
    min-width: 200px;
    background: rgba(27, 31, 34, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.hamburger-dropdown.open {
    display: block;
}
.hamburger-link {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.15s;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}
.hamburger-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.hamburger-link + .hamburger-link {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Override template button styles on hamburger sign-out */
.hamburger-signout {
    text-transform: none !important;
    font-weight: normal !important;
    height: auto !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

/* ── Article-level collapse/expand all toggle (centered in toolbar) ── */
.article-collapse-toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    background: none;
    border: none;
    border-radius: 100%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    padding: 0;
    line-height: 1;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}
.article-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #fff;
}

/* Settings-specific: show text label beside the triangle chevron */
.settings-collapse-toggle {
    width: auto;
    gap: 0.3rem;
    padding: 0 0.6rem;
    border-radius: 1rem;
    font-size: 1rem;
}
.settings-collapse-toggle .collapse-chevron {
    font-size: 1.15rem;
    line-height: 1;
}
.settings-collapse-toggle .collapse-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Close button override when inside toolbar ── */
.article-toolbar .close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    flex-shrink: 0;
}

/*--------------------------------
  3. Google Login Container & Welcome
--------------------------------*/

/* Header corner buttons (Settings & Sign Out) */
.header-corner-btn {
    position: absolute !important;
    top: 2rem;
    display: none;
    z-index: 10;
    background: none !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.78em;
    padding: 0.3rem 0.7rem !important;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    margin-top: 0 !important;
    /* Normalize <button> vs <a> sizing */
    font-family: inherit;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    box-sizing: border-box;
    /* Override template button styles */
    text-transform: none !important;
    font-weight: 300 !important;
    height: auto !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.header-corner-btn::before {
    display: none !important;
    content: none !important;
}
#header > .content {
    margin-top: 0;
}
.header-corner-btn:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.header-left {
    left: 1rem;
}
.header-right {
    right: 1rem;
}

#google-login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto 2rem auto;
    width: fit-content;
    max-width: none;
}
#google-login {
    display: block;
    margin: 0 auto;
}
#welcome-message {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    text-align: center;
    color: #fff;
}

/*--------------------------------
  4. Form & Input Styles
--------------------------------*/
input[type=number] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
    display: none;
}
#ingredient-quantity {
    min-width: 4rem;
    height: 2.75rem;
    padding: 0 1rem;
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    margin-bottom: 1rem;
}
#ingredient-unit {
    margin-top: 1rem;
}
#ingredient-unit-label {
    margin-top: 1rem;
}
.submit-ingredient-button {
    align-self: flex-end;
    margin-top: 1rem;
}
.quantity-inputs {
    display: flex;
    gap: 1rem;
}
.quantity-inputs > * {
    flex: 1;
}

/*--------------------------------
  5. Add-Dishes / Meal Creation Styles
--------------------------------*/
/* ── Meal Editor Panel ── */
.meal-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.meal-editor-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

#meal-editor-back {
    flex-shrink: 0;
}

.meal-editor-add-section {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 1rem;
    margin-top: 0.75rem;
}

.meal-editor-add-section label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

.dish-name-wrapper {
    margin-bottom: 1.25rem;
}

.dish-name-wrapper input {
    font-size: 1.1rem;
    font-weight: 600;
}
.autocomplete-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

/* Ingredient search dropdown */
#dish-ingredients-list {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 100;
    background: rgba(27, 31, 34, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0 !important;
    height: auto !important;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0;
}
#dish-ingredients-list .dropdown-item {
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#dish-ingredients-list .dropdown-item:last-child {
    border-bottom: none;
}
#dish-ingredients-list .dropdown-item.create-new {
    background: rgba(39, 174, 96, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#dish-ingredients-list button {
    width: 100%;
    display: block;
}

/* Generic dropdown / list button style (replaces inline styles) */
.dropdown-btn {
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Dish preview */
#dish-preview {
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}
.dish-preview-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
    position: relative;
}
.dish-preview-item .ingredient-edit-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 0.75rem 1rem;
    cursor: pointer;
    outline: none;
    overflow-x: auto;
    overflow-y: hidden;
}
.dish-preview-item .ingredient-edit-btn:hover,
.dish-preview-item .ingredient-edit-btn:focus {
    background: rgba(255,255,255,0.08);
}
.dish-preview-item .remove-ingredient {
    flex: 0 0 auto;
    position: sticky;
    right: 0;
    z-index: 2;
}

/* Highlight selected ingredient in dish preview */
.dish-preview-item.dish-preview-item-editing,
.dish-preview-item.dish-preview-item-editing .ingredient-edit-btn {
    background: rgba(93, 91, 91, 0.7) !important;
    color: #fff !important;
    border-left: 3px solid #fff;
}

/* Inline ingredient edit row in dish preview */
.dish-preview-item.ingredient-edit-row {
    background: rgba(255,255,255,0.04);
    padding: 0.5rem 0.25rem;
    gap: 0.5rem;
}
.dish-preview-item.ingredient-edit-row input {
    background: #222;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
}
.dish-preview-item.ingredient-edit-row button {
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    cursor: pointer;
}
.dish-preview-item.ingredient-edit-row .cancel-edit-btn {
    background: #e74c3c;
}
.dish-preview-item.ingredient-edit-row .cancel-edit-btn:hover {
    background: #c0392b;
}

/* Dish action buttons */
#add-dishes .dish-action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}
#delete-dish.button.secondary {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
#delete-dish.button.secondary:hover {
    background: #e74c3c;
    color: #fff;
}
#create-new-meal {
    margin-top: 1rem;
    width: 100%;
}

/*--------------------------------
  6. Ingredients Tab Styles
--------------------------------*/
#ingredients-tab .ingredient-fields {
    display: flex;
    flex-direction: column;
}
.store-mfg-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 2rem;
}
.section-start {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 2rem;
    display: block;
    font-weight: 500;
}
.section-sub {
    margin-top: 1rem;
}
.section-entry {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
}
article#ingredients-tab #ingredient-list .ingredient-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
}
article#ingredients-tab #ingredient-list .ingredient-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}
article#ingredients-tab #ingredient-list .ing-name {
    font-weight: 500;
    font-size: 1rem;
}
article#ingredients-tab #ingredient-list .ing-meta {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
article#ingredients-tab #ingredient-list .ingredient-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
article#ingredients-tab #ingredient-list .ing-count {
    flex: 0 0 auto;
    text-align: left;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
}
article#ingredients-tab #ingredient-list .ingredient-footer .delete-button {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.8em;
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
article#ingredients-tab #ingredient-list .ingredient-footer .delete-button:hover {
    background: #e74c3c;
    color: #fff;
}
article#ingredients-tab #ingredient-list li {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.15s;
}
article#ingredients-tab #ingredient-list li:hover {
    background: rgba(255, 255, 255, 0.03);
}
article#ingredients-tab #ingredient-list li:last-child {
    border-bottom: none;
}

/*--------------------------------
  7. Scroll Containers & Sticky Headers
  (shared across grocery list, dishes, pantry, ingredients)
--------------------------------*/
#meals-scroll,
#dishes-scroll,
#pantry-scroll,
#ingredient-scroll,
#recurring-scroll {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    position: relative;
    padding: 0 !important;
    height: auto;
    min-height: 0;
}
#all-meals-list,
#dishes-list,
#pantry-list,
#ingredient-list {
    min-height: 0;
}

/* Sticky headers */
.meal-list-header,
.dish-list-header,
.pantry-list-header,
.ingredient-list-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #1b1f22;
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 10;
}
.ingredient-list-header {
    padding: 0.75rem 3rem;
}
#ingredient-scroll ul {
    margin: 0;
    padding: 0 1rem;
    list-style: none;
}

/*--------------------------------
  8. Meal Menu Styles
--------------------------------*/
.menu-subtitle {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9em;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

/* ─── DoorDash-Style Menu Tabs ─── */
.tabs-scroll-wrap {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
    margin-bottom: 0.75rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.tabs-scroll-arrow {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 1.6rem !important;
    line-height: 1 !important;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    opacity: 0.85;
    z-index: 100;
    position: relative;
}
.tabs-scroll-arrow:hover {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    opacity: 1;
}
.tabs-scroll-arrow.hidden {
    opacity: 0;
    pointer-events: none;
    width: 0;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 !important;
}
.tabs-scroll-wrap .menu-tabs {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.menu-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 99;
    background: rgba(27, 31, 34, 0.97);
    backdrop-filter: blur(8px);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.35rem;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    box-shadow: none !important;
    height: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3;
}
.menu-tab:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.menu-tab.active {
    background: rgba(39,174,96,0.2);
    border-color: #27ae60;
    color: #fff;
}
.menu-tab-icon { font-size: 1em; }
.menu-tab-count {
    font-size: 0.7em;
    opacity: 0.5;
    margin-left: 0.15rem;
}

/* ─── Meal Cards ─── */
.menu-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.meal-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.meal-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}
.meal-card.meal-selected {
    background: rgba(39,174,96,0.1);
    border-color: #27ae60;
    border-left: 3px solid #27ae60;
}
.meal-card-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
.meal-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meal-card.meal-selected .meal-card-title::before {
    content: "\2713  ";
    color: #27ae60;
    font-weight: 700;
}
.meal-card-count {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}
.meal-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.meal-card-preview {
    font-size: 0.78em;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meal-card-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}
.meal-tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}
.meal-tag-allergen {
    background: rgba(231, 76, 60, 0.1);
    color: rgba(231, 76, 60, 0.8);
    border-color: rgba(231, 76, 60, 0.2);
}

/* ── Dish form goal/allergen toggle buttons ── */
.dish-goals-wrapper,
.dish-allergens-wrapper {
    margin-bottom: 0.6rem;
}
.dish-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
}
.dish-toggle-btn {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.dish-toggle-btn:hover {
    background: rgba(78, 205, 196, 0.08);
    border-color: rgba(78, 205, 196, 0.25);
}
.dish-toggle-btn.active {
    background: rgba(78, 205, 196, 0.18);
    border-color: rgba(78, 205, 196, 0.5);
    color: #4ecdc4;
    font-weight: 600;
}
.dish-toggle-allergen.active {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.45);
    color: #e74c3c;
}

/* ── Menu filter bar (goal + allergen pills in meal menu) ── */
.menu-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.menu-filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.menu-filter-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    white-space: nowrap;
}
.menu-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.menu-filter-pill {
    padding: 0.2rem 0.55rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.menu-filter-pill:hover {
    background: rgba(78, 205, 196, 0.08);
    border-color: rgba(78, 205, 196, 0.2);
}
.menu-filter-pill.active {
    background: rgba(78, 205, 196, 0.18);
    border-color: rgba(78, 205, 196, 0.5);
    color: #4ecdc4;
    font-weight: 600;
}
.menu-filter-allergen.active {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.45);
    color: #e74c3c;
}

/* Planner assignment pills inside menu cards */
.meal-card-assigns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.assign-pill {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    line-height: 1.3;
}
.assign-pill-saved {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39,174,96,0.2);
}
.assign-pill-unsaved {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.08);
}

/* New Plan badge — empty count variant */
.meal-badge-empty-text {
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ── Category Selector in Meal Editor ── */
.dish-category-wrapper {
    margin-bottom: 0.75rem;
}
.dish-category-wrapper label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    display: block;
    margin-bottom: 0.3rem;
}
.dish-category-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.dish-category-row select {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
}
.dish-category-row select option {
    background: #1b1f22;
    color: #fff;
}

/* ── Meal Picture Upload ── */
.dish-picture-wrapper {
    margin-bottom: 0.75rem;
}
.dish-picture-wrapper > label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    display: block;
    margin-bottom: 0.3rem;
}
.dish-picture-preview {
    position: relative;
    width: 100%;
    max-width: 200px;
    height: 140px;
    border-radius: 10px;
    border: 2px dashed rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
    background: rgba(255,255,255,0.02);
}
.dish-picture-preview:hover {
    border-color: rgba(255,255,255,0.3);
}
.dish-picture-placeholder {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.3);
}
.dish-picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.dish-picture-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background 0.2s;
}
.dish-picture-remove-btn:hover {
    background: rgba(231,76,60,0.8);
}

/* ── Meal Card Category Icon / Picture Thumb ── */
.meal-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
}
.meal-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* Meal card inner flex layout (info left, photo right) */
.meal-card-inner {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
}
.meal-card-info {
    flex: 1;
    min-width: 0;
}
/* Thumbnail photo on the right side of the card */
.meal-card-photo {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    align-self: center;
}
.meal-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Dish item photo thumbnail (Build Meals list) */
.dish-item-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.dish-item-photo {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.dish-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* Legacy meal-item styles kept for backward compat */
#all-meals-list .meal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
#all-meals-list .meal-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
#all-meals-list .meal-item:last-child {
    border-bottom: none;
}
#all-meals-list .meal-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
#all-meals-list .meal-name {
    font-weight: 500;
}
#all-meals-list .meal-preview {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#all-meals-list .meal-count {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85em;
    flex-shrink: 0;
    margin-left: 1rem;
}
#all-meals-list .meal-selected {
    background: rgba(39, 174, 96, 0.12);
    border-left: 3px solid #27ae60;
}
#all-meals-list .meal-selected .meal-name::before {
    content: "\2713  ";
    color: #27ae60;
    font-weight: 700;
}
.meal-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9em;
}
#grocery-list-output {
    margin-top: 1rem;
}
#grocery-list-output:empty {
    display: none;
}
.grocery-header {
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.75rem 0 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Enhanced grocery table with pantry columns */
.grocery-table {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.grocery-table-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 0.5rem 0.75rem;
    background: rgba(27, 31, 34, 0.9);
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.grocery-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.9em;
    transition: background 0.15s;
}
.grocery-table-row:last-child {
    border-bottom: none;
}
.grocery-table-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.grocery-name {
    font-weight: 500;
}
.grocery-col {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88em;
    white-space: nowrap;
}
.grocery-col.pantry-col {
    color: rgba(39, 174, 96, 0.6);
}
.grocery-col.buy-col {
    color: #fff;
    font-weight: 600;
}

/* Strikethrough rows for hidden-store items */
.grocery-table-row.grocery-strikethrough {
    text-decoration: line-through;
    opacity: 0.35;
}
.grocery-store-group.grocery-store-hidden .grocery-store-label {
    opacity: 0.35;
}

/* Checkout unfillable section */
.checkout-unfillable-section {
    margin-top: 1rem;
    border: 1px solid rgba(255, 180, 50, 0.25);
    border-radius: 0.5rem;
    overflow: hidden;
}
.checkout-unfillable-header {
    padding: 0.4rem 0.6rem;
    background: rgba(255, 180, 50, 0.1);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 200, 100, 0.9);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.checkout-unfillable-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    border-radius: 0.7rem;
    background: rgba(255, 180, 50, 0.2);
    font-size: 0.75rem;
}
.checkout-unfillable-row {
    opacity: 0.55;
}
.checkout-unfillable-row .grocery-name {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 180, 50, 0.4);
}
/* Migrated ingredient label */
.grocery-migrated {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    margin-left: 0.3rem;
}

/* Brand badge in grocery list */
.grocery-brand-badge {
    display: inline-block;
    font-size: 0.7em;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    padding: 0.1em 0.45em;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: middle;
    font-weight: 400;
}

/* Inline brand/store override selects in grocery list */
.grocery-brand-select,
.grocery-store-select {
    display: inline-block;
    font-size: 0.72em;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    padding: 0.1em 0.3em;
    margin-left: 0.3rem;
    vertical-align: middle;
    cursor: pointer;
    max-width: 8em;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.grocery-brand-select:focus,
.grocery-store-select:focus {
    outline: none;
    border-color: rgba(78, 205, 196, 0.45);
}
.grocery-store-select {
    background: rgba(78, 205, 196, 0.06);
    border-color: rgba(78, 205, 196, 0.15);
}

/* Grocery option select — unified store/brand/price picker */
.grocery-option-select {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.72em;
    background: rgba(78, 205, 196, 0.06);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(78, 205, 196, 0.18);
    border-radius: 4px;
    padding: 0.2em 0.4em;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,0.35)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4em center;
    padding-right: 1.4em;
}
.grocery-option-select:focus {
    outline: none;
    border-color: rgba(78, 205, 196, 0.45);
    background-color: rgba(78, 205, 196, 0.1);
}
.grocery-option-select option {
    background: #1b1f22;
    color: rgba(255, 255, 255, 0.85);
}

/* Grocery store filter pills */
.grocery-store-filters {
    margin-bottom: 0.5rem;
}

.grocery-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.93em;
}
.grocery-item:last-child {
    border-bottom: none;
}
.grocery-item .grocery-qty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.88em;
    white-space: nowrap;
}
.grocery-item.in-pantry {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: line-through;
}

/* Full meal toggle label — styled as a visible switch */
.full-meal-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    margin: 1rem 0;
    padding: 0.65rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    user-select: none;
}
.full-meal-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 2.8rem;
    height: 1.5rem;
    background: rgba(255,255,255,0.15);
    border-radius: 1rem;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.full-meal-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.full-meal-toggle input[type="checkbox"]:checked {
    background: #4ecdc4;
}
.full-meal-toggle input[type="checkbox"]:checked::after {
    transform: translateX(1.3rem);
}

/* Error and success messages */
.error-message {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9em;
}
.success-message {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
    border: 1px solid rgba(39, 174, 96, 0.3);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    font-size: 0.9em;
}

/*--------------------------------
  9. Dishes List Styles
--------------------------------*/
#dishes-list .dish-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
    cursor: pointer;
}
#dishes-list .dish-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
#dishes-list .dish-item:last-child {
    border-bottom: none;
}
.dish-item-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}
.dish-item-info .dish-item-preview {
    width: 100%;
}
.dish-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
}
.dish-item-cat-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.dish-item-preview {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dish-item-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.dish-item-count {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
    min-width: 1.5rem;
    text-align: center;
}
.dish-edit-btn {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.45rem !important;
    min-width: unset !important;
}

/* Expandable dish detail preview */
.dish-detail-preview {
    display: none;
    flex: 0 0 100%;
    padding: 0.4rem 0 0.1rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 0.35rem;
}
.dish-item-expanded .dish-detail-preview {
    display: block;
}
.dish-item-expanded {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    margin: 0.15rem 0;
}
.dish-detail-ingredients {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.dish-detail-ing {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    padding: 0.1rem 0;
}
.dish-detail-qty {
    display: inline-block;
    min-width: 3rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
}
.dish-detail-meta {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
}
.dish-detail-tag {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.3rem;
    padding-top: 0.2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Highlight animation when returning from editor */
#dishes-list .dish-item.dish-highlighted {
    background: rgba(78, 205, 196, 0.15);
    border-left: 3px solid #4ecdc4;
    transition: background 0.3s, border-left 0.3s;
}
#dishes-list .dish-selected {
    background-color: rgba(93, 91, 91, 0.7);
    border-left: 3px solid #fff;
}
#dishes-scroll {
    margin-top: 1rem;
}

/* ── Dish Category Sections (Build Meal collapsible) ── */
.dish-category {
    margin-bottom: 0.5rem;
}
.dish-cat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    transition: background 0.15s;
    user-select: none;
}
.dish-cat-header:hover {
    background: rgba(255,255,255,0.07);
}
.dish-cat-icon {
    font-size: 1rem;
}
.dish-cat-name {
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.85);
}
.dish-cat-count {
    font-size: 0.72rem;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    min-width: 1.2em;
    text-align: center;
}
.dish-cat-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s;
}
.dish-category.collapsed .dish-cat-chevron {
    transform: rotate(-90deg);
}
.dish-cat-items {
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.dish-category.collapsed .dish-cat-items {
    display: none;
}

/*--------------------------------
  10. Pantry Styles
--------------------------------*/
/* Category headers */
.pantry-category {
    margin-bottom: 0.5rem;
}
.pantry-cat-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    transition: background 0.15s;
    user-select: none;
}
.pantry-cat-header:hover {
    background: rgba(255,255,255,0.07);
}
.pantry-cat-name {
    font-weight: 600;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.85);
}
.pantry-cat-count {
    font-size: 0.72rem;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    min-width: 1.2em;
    text-align: center;
}
.pantry-cat-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s;
}
.pantry-category.collapsed .pantry-cat-chevron {
    transform: rotate(-90deg);
}
.pantry-cat-items {
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.pantry-category.collapsed .pantry-cat-items {
    display: none;
}
.pantry-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 0.9rem;
}

/* Pantry item rows — card style */
#pantry-list .pantry-item {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
#pantry-list .pantry-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
#pantry-list .pantry-item:last-child {
    margin-bottom: 0;
}

/* Card top: info left + qty right */
.pantry-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    gap: 0.5rem;
    cursor: pointer;
}
.pantry-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}
#pantry-list .pantry-name,
.essentials-item .pantry-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pantry-subtitle {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pantry expand preview */
.pantry-preview {
    display: none;
    padding: 0.5rem 0.85rem 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.pantry-item-expanded .pantry-preview {
    display: block;
}
.pantry-item-expanded {
    background: rgba(255,255,255,0.04);
    border-color: rgba(78, 205, 196, 0.25);
    box-shadow: 0 0 0 1px rgba(78, 205, 196, 0.1);
}
.pantry-preview-section {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    padding: 0.15rem 0;
}
.pantry-preview-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}
.pantry-preview-grocery {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.78rem;
    padding: 0.2rem 0 0.2rem 0.6rem;
    color: rgba(255,255,255,0.65);
    border-left: 2px solid rgba(78,205,196,0.25);
    margin: 0.15rem 0;
}
.ppg-name { font-weight: 500; color: rgba(255,255,255,0.75); }
.ppg-price { color: #4ecdc4; font-weight: 600; }
.ppg-unit { color: rgba(255,255,255,0.45); font-size: 0.72rem; }
.ppg-notes { color: rgba(255,255,255,0.4); font-style: italic; font-size: 0.72rem; }
.ppg-ppu { color: #4ecdc4; font-weight: 600; font-size: 0.72rem; }
.pantry-preview-groceries { flex-direction: column; }
.pantry-preview-default {
    display: inline-block;
    font-size: 0.62rem;
    background: rgba(45,140,100,0.3);
    color: rgba(255,255,255,0.7);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 0.3rem;
}
/* Quantity inputs in card */
#pantry-list .quantity-inputs {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-shrink: 0;
}
#pantry-list .quantity-inputs > * {
    flex: none;
}/* (quantity-inputs is now inside pantry-card-top) */
/* Hide default browser number spinners */
#pantry-list input[type="number"]::-webkit-inner-spin-button,
#pantry-list input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#pantry-list input[type="number"] {
    -moz-appearance: textfield;
}
/* Custom +/- buttons */
.pantry-qty-btn {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7) !important; /* override main.css !important */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pantry-qty-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff !important;
    border-color: rgba(255,255,255,0.35);
}
.pantry-qty-btn:active {
    background: rgba(39,174,96,0.25);
    border-color: #27ae60;
}

/* Qty badge — always visible on card top now */
.qty-badge {
    display: none; /* hidden by default, shown for essentials/recurring on mobile */
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 0.8rem;
    background: rgba(78,205,196,0.15);
    color: #4ecdc4;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Always-visible badge for pantry cards */
.qty-badge-always {
    display: flex;
}

/* Pantry card right side: badge + edit/trash */
.pantry-card-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.pantry-action-btn {
    padding: 0.2rem;
    font-size: 0.85rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
    line-height: 1;
}
.pantry-action-btn:hover {
    opacity: 1;
}
.pantry-action-btn:active {
    opacity: 1;
    transform: scale(0.85);
}

/* Qty controls inside expanded preview */
.pantry-expanded-qty {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.pantry-expanded-qty .pantry-whole {
    width: 3rem;
    text-align: center;
}
.pantry-preview-qty-section {
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0.2rem;
}

@media screen and (max-width: 736px) {
    /* Hide full qty controls on mobile for essentials/recurring, show compact badge */
    .essentials-item .quantity-inputs,
    .recurring-item .quantity-inputs {
        display: none !important;
    }
    .essentials-item .qty-badge,
    .recurring-item .qty-badge {
        display: flex;
    }
    /* Expanded: show full controls below name, hide badge */
    .pantry-item-expanded .qty-badge:not(.qty-badge-always) {
        display: none;
    }
    .pantry-item-expanded .pantry-card-top {
        flex-wrap: wrap;
    }
    .pantry-item-expanded .quantity-inputs {
        display: flex !important;
        width: 100%;
        justify-content: center;
        padding-top: 0.4rem;
    }
}
#pantry-list input[type="number"],
#pantry-list select {
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background-color: rgba(27, 31, 34, 0.9);
    color: #fff;
    font-size: 0.9em;
}
#pantry-list input[type="number"]:focus,
#pantry-list select:focus {
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}
#save-pantry {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*--------------------------------
  11. Inline Create Forms (ingredient/store/brand)
  (Legacy — kept for reference; modal replaces these)
--------------------------------*/
.inline-create-ingredient {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(27, 31, 34, 0.98);
    border-radius: 4px;
    border: 1px solid #fff;
    width: 100%;
    min-width: 220px;
    min-height: 280px;
    box-sizing: border-box;
}
.inline-create-ingredient input,
.inline-create-ingredient select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #222;
    color: #fff;
    margin: 0;
}
.inline-create-ingredient .button {
    width: 100%;
    margin-top: 0.5rem;
    box-sizing: border-box;
}
.inline-create-ingredient .button:not(:last-child) {
    margin-bottom: 0.5rem;
}
.inline-create-ingredient .cancel-btn {
    background: #e74c3c;
    color: #fff;
}
.inline-create-ingredient .cancel-btn:hover {
    background: #c0392b;
}
.inline-create-ingredient .create-btn {
    background: #27ae60;
    color: #fff;
    border: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.2s;
}
.inline-create-ingredient .create-btn:hover {
    background: #219150;
}

/*--------------------------------
  12. Ingredient Creation Modal
--------------------------------*/
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.modal-overlay.active {
    display: flex;
}
.modal-content {
    position: relative;
    background: #1b1f22;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 2rem;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.modal-content h3 {
    margin-top: 0;
    margin-bottom: 1.25rem;
}
.modal-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}
.modal-close-btn:hover {
    color: #fff;
}
.modal-content label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.7);
}
.modal-content input,
.modal-content select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.95em;
}
.modal-content input:focus,
.modal-content select:focus {
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}
.modal-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.modal-row select {
    flex: 1;
}
.modal-row .button.small {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8em;
    white-space: nowrap;
}
.modal-submit {
    margin-top: 1.25rem;
    width: 100%;
}

/* Inline Confirm / Alert Dialog */
.inline-confirm-box {
    max-width: 380px;
    text-align: center;
    padding: 1.5rem 2rem;
}
.inline-confirm-box p {
    margin: 0 0 1.25rem;
    font-size: 0.95em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    white-space: pre-line;
}
.inline-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.inline-confirm-actions .button {
    min-width: 5rem;
    white-space: normal;
    height: auto;
    line-height: 1.4;
    padding: 0.5rem 1rem;
    letter-spacing: 0.1rem;
}

/*--------------------------------
  13. Settings Page
--------------------------------*/
.collapsible-section .section-toggle-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
    gap: 0.5rem;
}
.collapsible-section .section-toggle-header h4 {
    margin: 0;
}
.section-chevron {
    font-size: 1rem;
    transition: transform 0.2s;
    color: rgba(255,255,255,0.4);
    margin-left: auto;
    flex-shrink: 0;
}
.collapsible-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}
.collapsible-section .section-toggle-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    max-height: 1000px;
    opacity: 1;
}
.collapsible-section.collapsed .section-toggle-body {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ── Section status badges (visible in header, most useful when collapsed) ── */
.section-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.collapsible-section.collapsed .section-badges {
    opacity: 1;
}
/* When badges are present, chevron shouldn't also auto-push */
.section-badges + .section-chevron {
    margin-left: 0.4rem;
}
.section-badge {
    font-size: 0.75rem;
    line-height: 1;
}
.section-badge-text {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    white-space: nowrap;
}
.section-badge-empty {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.25);
    font-style: italic;
}

/* Meal badges in day headers */
.meal-badge {
    font-size: 0.65rem;
    line-height: 1;
    white-space: nowrap;
}
.meal-badge-empty {
    opacity: 0.35;
}
.meal-badge-saved {
    color: #27ae60;
}
.meal-badge-unsaved {
    color: rgba(255,255,255,0.6);
}

.settings-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-section:last-of-type {
    border-bottom: none;
}
.settings-section h4 {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
}
.settings-desc {
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 1rem;
}
.clear-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.clear-btn {
    font-size: 0.85em !important;
    padding: 0.45rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s !important;
}
.clear-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
.clear-btn.danger {
    background: rgba(231, 76, 60, 0.15) !important;
    color: #e74c3c !important;
    border-color: rgba(231, 76, 60, 0.3) !important;
}
.clear-btn.danger:hover {
    background: #e74c3c !important;
    color: #fff !important;
}

/*--------------------------------
  14. Seed Data Prompt
--------------------------------*/
#empty-data-guide {
    max-width: 520px;
    margin: 1rem auto 0;
}
#empty-data-guide:empty {
    display: none;
}
.seed-prompt {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 1.25rem;
    text-align: center;
    margin-top: 0.5rem;
}
.seed-prompt p {
    margin: 0 0 0.5rem;
}
.seed-detail {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.45);
}
.seed-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.seed-actions .button {
    font-size: clamp(0.72rem, 2.2vw, 0.85rem);
    padding: 0.5rem 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    text-align: center;
    line-height: 1.3;
}

/* ── Fix: allow seed-prompt / hey-there to not get clipped on mobile ── */
body:not(.is-preload) #header .content .inner {
    max-height: none;
    overflow: visible;
}
.ignore-empty-toggle {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Demo Mode Toggle ── */
.demo-mode-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    background: rgba(78, 205, 196, 0.04);
    border: 1px solid rgba(78, 205, 196, 0.12);
}
.demo-mode-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    cursor: default;
}
.demo-mode-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.demo-mode-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}
.demo-toggle-btn {
    flex-shrink: 0;
    padding: 0.35rem 1rem !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    min-width: 60px;
    text-align: center;
}
.demo-toggle-btn.active {
    background: rgba(78, 205, 196, 0.2) !important;
    border-color: rgba(78, 205, 196, 0.5) !important;
    color: #4ecdc4 !important;
}
.demo-toggle-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.ignore-empty-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82em !important;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer;
    padding: 0.4rem 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03) !important;
    transition: all 0.2s;
    user-select: none;
    text-transform: none !important;
    font-weight: normal !important;
    height: auto !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    white-space: normal !important;
    text-align: left;
}
.ignore-empty-btn:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.ignore-empty-btn.active {
    color: rgba(100, 180, 255, 0.9) !important;
    border-color: rgba(100, 180, 255, 0.4) !important;
    background: rgba(100, 180, 255, 0.08) !important;
}

/* Highlight pulse for guiding user to a section */
@keyframes highlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.5); }
    50%  { box-shadow: 0 0 12px 4px rgba(100, 180, 255, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0); }
}
.highlight-pulse {
    animation: highlightPulse 1s ease-in-out 2;
    border-radius: 6px;
}

/* Flashing glow on the Settings header button when data is empty */
@keyframes settingsGlow {
    0%, 100% {
        color: rgba(255,255,255,0.7);
        border-color: rgba(100,180,255,0.35);
        box-shadow: 0 0 4px 1px rgba(100,180,255,0.15);
        background: rgba(100,180,255,0.05);
    }
    50% {
        color: #fff;
        border-color: rgba(100,180,255,0.9);
        box-shadow: 0 0 18px 6px rgba(100,180,255,0.5);
        background: rgba(100,180,255,0.15);
    }
}
.header-corner-btn.guide-flash {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: settingsGlow 1.2s ease-in-out infinite;
    z-index: 100 !important;
}

/*--------------------------------
  15. Tab Search Inputs
--------------------------------*/
.tab-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
}
.tab-search:focus {
    border-color: rgba(255, 255, 255, 0.35);
}
.tab-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/*--------------------------------
  16. Category Filter Pills
--------------------------------*/
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.category-pill {
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78em;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.category-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.category-pill.active {
    background: rgba(39, 174, 96, 0.2);
    border-color: rgba(39, 174, 96, 0.5);
    color: #27ae60;
    font-weight: 600;
}

/*--------------------------------
  17. Ingredient Category Headers
--------------------------------*/
.ingredient-category-header {
    padding: 0.6rem 0.5rem 0.3rem !important;
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02);
    list-style: none !important;
}

/*--------------------------------
  18. Meal Favorites
--------------------------------*/
.meal-fav-btn {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.3em;
    cursor: pointer;
    padding: 0.35rem;
    line-height: 1;
    height: auto !important;
    min-width: 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: color 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.meal-fav-btn:hover {
    color: rgba(255, 215, 0, 0.6);
    transform: scale(1.2);
}
.meal-fav-btn.active {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255,215,0,0.4);
}

/*--------------------------------
  19. Checkout Page
--------------------------------*/
.store-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.store-pill {
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
    font-size: 0.78em;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.store-pill:hover {
    background: rgba(39, 174, 96, 0.2);
}
.store-pill.hidden-store {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    text-decoration: line-through;
}

.checkout-view-toggle {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}
.toggle-btn {
    flex: 1;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 4px;
}
.toggle-btn:first-child {
    border-radius: 4px 0 0 4px;
}
.toggle-btn:last-child {
    border-radius: 0 4px 4px 0;
}
.toggle-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.checkout-store-group {
    margin-bottom: 1rem;
}
.checkout-store-header {
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.5rem 0 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.checkout-item {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.checkout-item:last-child {
    border-bottom: none;
}
.checkout-item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}
.checkout-item-name {
    font-weight: 500;
}
.checkout-item-qty {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88em;
    white-space: nowrap;
}
.checkout-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
}

/*--------------------------------
  20. Grocery Store Group Labels
--------------------------------*/
.grocery-store-group {
    margin-bottom: 0.75rem;
}
.grocery-store-label {
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(39, 174, 96, 0.7);
    padding: 0.5rem 0 0.15rem;
}

/* ── Ingredient Manager (edit/delete list) ────── */

.ing-manager-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

/* Grocery-store category grouping */
.ing-mgr-category {
    margin-bottom: 0.25rem;
}
.ing-mgr-cat-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.15rem;
    transition: background 0.15s;
}
.ing-mgr-cat-header:hover {
    background: rgba(255,255,255,0.07);
}
.ing-mgr-cat-name {
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
    color: rgba(255,255,255,0.85);
}
.ing-mgr-cat-count {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}
.ing-mgr-cat-chevron {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    transition: transform 0.15s;
}
.ing-mgr-cat-items {
    padding-left: 0.5rem;
    overflow: hidden;
    transition: max-height 0.2s ease;
}
.ing-mgr-cat-items.collapsed {
    max-height: 0 !important;
    overflow: hidden;
    padding: 0;
}

.ing-mgr-row {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ing-mgr-row:last-child { border-bottom: none; }
.ing-mgr-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.4rem;
    gap: 0.5rem;
}
.ing-mgr-row.has-groceries .ing-mgr-card-top {
    cursor: pointer;
    transition: background 0.15s;
}
.ing-mgr-row.has-groceries .ing-mgr-card-top:hover {
    background: rgba(255,255,255,0.04);
}
.ing-mgr-row.has-groceries .ing-mgr-name::after {
    content: " ▸";
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    transition: transform 0.2s;
}
.ing-mgr-row.ing-mgr-expanded .ing-mgr-name::after {
    content: " ▾";
}
/* Grocery preview dropdown */
.ing-mgr-grocery-preview {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
    padding: 0 0.6rem;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ing-mgr-expanded .ing-mgr-grocery-preview {
    max-height: 300px;
    padding: 0.45rem 0.6rem;
}
.ing-mgr-gp-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-wrap: wrap;
}
.ing-mgr-gp-item:last-child { border-bottom: none; }
.ing-mgr-gp-label { font-weight: 600; color: rgba(255,255,255,0.85); }
.ing-mgr-gp-price { color: #4ecdc4; font-weight: 600; }
.ing-mgr-gp-default {
    font-size: 0.6rem;
    background: rgba(78,205,196,0.15);
    color: #4ecdc4;
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.ing-mgr-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.ing-mgr-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ing-grocery-badge {
    display: inline-block;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.55);
    margin-left: 0.3rem;
    vertical-align: middle;
}
.ing-side-badge {
    display: inline-block;
    font-size: 0.65rem;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.12);
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    margin-left: 0.3rem;
    vertical-align: middle;
}
.ing-mgr-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ing-mgr-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.ing-mgr-edit,
.ing-mgr-delete {
    background: none;
    border: none;
    box-shadow: none;
    height: auto;
    line-height: 1;
    padding: 0.3rem 0.4rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255,255,255,0.6);
}
.ing-mgr-edit:hover { background: rgba(255,255,255,0.1); }
.ing-mgr-delete:hover { background: rgba(231,76,60,0.2); color: #e74c3c; }
.ing-mgr-empty {
    text-align: center;
    padding: 1rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}
.ing-mgr-edit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
}
.ing-mgr-edit-form input {
    flex: 1 1 120px;
    min-width: 0;
}
.ing-edit-multi-field {
    flex: 1 1 100%;
}
.ing-edit-label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.15rem;
    text-transform: none;
    letter-spacing: 0;
    padding-left: 0;
}
.ing-edit-label::before { display: none; }
.ing-edit-hint {
    font-size: 0.65rem;
    opacity: 0.5;
    font-style: italic;
}
.ing-edit-btns {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    justify-content: flex-end;
}

/* ── Grocery Items in Ingredient Editor ── */
.ing-edit-groceries {
    flex: 1 1 100%;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.4rem;
}
.grocery-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.grocery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 0.35rem 0.4rem;
}
.grocery-row select,
.grocery-row input {
    flex: 1 1 80px;
    min-width: 0;
    font-size: 0.82rem !important;
    padding: 0.3rem 0.4rem !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
}
.grocery-row .grocery-store { flex: 1 1 100px; }
.grocery-row .grocery-brand { flex: 1 1 90px; }
.grocery-row .grocery-price { flex: 0 0 55px; text-align: center; }
.grocery-price-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}
.grocery-price-wrap .grocery-price {
    flex: 0 0 55px !important;
    text-align: center;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
}
.grocery-price-btn {
    flex: 0 0 auto;
    width: 1.8rem !important;
    height: 1.8rem !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    transition: background 0.15s, color 0.15s;
}
.grocery-price-minus { border-radius: 4px 0 0 4px !important; }
.grocery-price-plus  { border-radius: 0 4px 4px 0 !important; }
.grocery-price-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.grocery-row .grocery-unit  { flex: 0 0 60px; }
.grocery-row .grocery-notes { flex: 1 1 120px; }
.grocery-row .grocery-url {
    flex: 1 1 100%;
    font-size: 0.78rem !important;
    color: #4ecdc4;
}
.grocery-row .grocery-url::placeholder { color: rgba(255,255,255,0.25); }
.grocery-row .grocery-qty {
    flex: 0 0 48px;
    text-align: center;
    font-size: 0.78rem !important;
    padding: 0.25rem !important;
}
.grocery-ppu {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4ecdc4;
    white-space: nowrap;
    min-width: 55px;
    text-align: center;
}
.grocery-remove-btn {
    flex: 0 0 auto;
    background: none !important;
    border: none !important;
    color: rgba(255,100,100,0.7);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 0.25rem !important;
    line-height: 1;
    box-shadow: none !important;
}
.grocery-remove-btn:hover { color: #ff5555; }
.grocery-add-btn {
    font-size: 0.78rem !important;
    padding: 0.25rem 0.6rem !important;
}
.ing-edit-option-toggle {
    flex: 1 1 100%;
    margin-top: 0.2rem;
}
.ing-edit-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 0.3rem 0;
}
/* Hidden native checkbox */
.ing-edit-toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
/* Toggle switch track */
.ing-edit-toggle-label .toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.4rem;
    height: 1.3rem;
    background: rgba(255,255,255,0.15);
    border-radius: 0.65rem;
    transition: background 0.25s;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
}
/* Toggle switch knob */
.ing-edit-toggle-label .toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Checked state */
.ing-edit-toggle-label input[type="checkbox"]:checked + .toggle-switch {
    background: #4ecdc4;
    border-color: #4ecdc4;
}
.ing-edit-toggle-label input[type="checkbox"]:checked + .toggle-switch::after {
    transform: translateX(1.1rem);
}
/* Essential subcategory dropdown inside ingredient editor */
.ing-edit-essential-subcat {
    margin-left: 3.4rem;
    margin-top: 0.25rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    background: rgba(27, 31, 34, 0.9);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.ing-manager-section {
    margin-bottom: 0.5rem;
}


/*--------------------------------
  22. Searchable Dropdown Component
--------------------------------*/
.searchable-wrap {
    position: relative;
}
.searchable-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 180px;
    overflow-y: auto;
    background: #1b1f22;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.modal-content .searchable-list {
    z-index: 10001;
}
.searchable-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.searchable-option:hover,
.searchable-option.highlighted {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.searchable-option.searchable-add {
    color: #27ae60;
    font-weight: 500;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.searchable-option.searchable-add:hover {
    background: rgba(39, 174, 96, 0.15);
}

/*--------------------------------
  23. Checkout History
--------------------------------*/
.history-section {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}
.history-section h4 {
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95em;
}
.history-empty {
    text-align: center;
    padding: 1.25rem 1rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9em;
}
.history-entry {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s;
    gap: 0.5rem;
}
.history-header:hover {
    background: rgba(255, 255, 255, 0.06);
}
.history-info {
    flex: 1;
    min-width: 0;
}
.history-date {
    font-weight: 500;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}
.history-meals-summary {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-toggle {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8em;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.history-entry.open .history-toggle {
    transform: rotate(90deg);
}
.history-body {
    display: none;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.history-entry.open .history-body {
    display: block;
}
.history-item {
    padding: 0.3rem 0;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: space-between;
}
.history-item-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}
.history-item-detail {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9em;
}
.history-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
.history-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.35rem 0.4rem !important;
    font-size: 0.78em !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-btn.load-btn {
    background: rgba(39, 174, 96, 0.15) !important;
    color: #27ae60 !important;
    border: 1px solid rgba(39, 174, 96, 0.3) !important;
}
.history-btn.load-btn:hover {
    background: rgba(39, 174, 96, 0.25) !important;
}
.history-btn.delete-btn {
    background: rgba(231, 76, 60, 0.15) !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231, 76, 60, 0.3) !important;
}
.history-btn.delete-btn:hover {
    background: #e74c3c !important;
    color: #fff !important;
}

/* Checkout item cell — wraps name + controls into a single grid cell */
.checkout-item-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.checkout-item-cell .grocery-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkout searchable overrides */
.checkout-item-controls {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.checkout-item-controls .searchable-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.checkout-item-controls .searchable-input {
    padding: 0.2rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(27, 31, 34, 0.9);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75em;
    width: 100%;
    box-sizing: border-box;
}
.checkout-item-controls .searchable-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

/*--------------------------------
  24. Media Queries
--------------------------------*/
@media screen and (max-width: 736px) {
    body.is-article-visible #header {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    #dish-ingredients-list {
        min-height: 260px;
        max-height: 340px;
    }
    .inline-create-ingredient {
        min-height: 220px;
        padding: 1rem;
    }
    .header-corner-btn {
        font-size: 0.65em;
        padding: 0.2rem 0.5rem;
        top: 2rem;
    }
    .header-left {
        left: 0.5rem;
    }
    .sub-tab {
        font-size: 0.78rem;
        padding: 0.5rem 0.35rem;
    }

    /* Prevent nav item text wrapping at medium widths */
    #header nav ul li a {
        min-width: 0;
        padding: 0 0.6rem 0 0.7rem;
        font-size: 0.7rem;
        letter-spacing: 0.12rem;
    }
}

@media screen and (max-width: 480px) {
    .header-corner-btn {
        top: 3rem;
        font-size: 0.6em;
        padding: 0.15rem 0.4rem;
    }
    .header-left {
        left: 0.4rem;
    }
    .header-right {
        right: 0.4rem;
    }
}

/* ====================================================
   ONBOARDING STYLES
   ==================================================== */

.onboarding-article {
    max-width: 600px !important;
}

.onboarding-screen {
    text-align: center;
    padding: 1rem 0;
}

.onboarding-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.onboarding-screen h2 {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.onboarding-tagline {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.onboarding-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

.onboarding-hint {
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.onboarding-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.onboarding-btn {
    min-width: 120px;
}

/* Progress dots */
.onboarding-progress {
    margin-top: 1.5rem;
}
.progress-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.progress-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.3s;
}
.progress-dots .dot.active {
    background: #27ae60;
}
.progress-dots .dot.done {
    background: rgba(39,174,96,0.5);
}

/* Chip selectors */
.ob-question {
    margin-bottom: 1.2rem;
    text-align: left;
}
.ob-question label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}
.ob-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ob-chip {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.ob-chip:hover {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.1);
}
.ob-chip.active {
    border-color: #27ae60;
    background: rgba(39,174,96,0.2);
    color: #fff;
}

/* Food grid */
.ob-food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ob-food-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.2s;
}
.ob-food-card:hover {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
}
.ob-food-card.selected {
    border-color: #27ae60;
    background: rgba(39,174,96,0.2);
}
.ob-food-icon {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}
.ob-food-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

/* Pantry textarea */
.ob-textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    padding: 0.75rem;
    font-size: 0.9rem;
    resize: vertical;
}
.ob-textarea:focus {
    border-color: #27ae60;
    outline: none;
}

/* Spinner */
.onboarding-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #27ae60;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: ob-spin 0.8s linear infinite;
}
@keyframes ob-spin {
    to { transform: rotate(360deg); }
}

/* ====================================================
   WEEKLY PLANNER STYLES
   ==================================================== */

/* ── Active Settings Bar (top of planner) ── */
.planner-settings-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.planner-settings-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.planner-settings-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.15rem;
}
.planner-setting-pill {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 14px;
    white-space: nowrap;
}
.planner-pill-goal {
    background: rgba(78, 205, 196, 0.12);
    color: #4ecdc4;
    border: 1px solid rgba(78, 205, 196, 0.25);
}
.planner-pill-allergy {
    background: rgba(255, 107, 107, 0.1);
    color: #ff8a8a;
    border: 1px solid rgba(255, 107, 107, 0.25);
}
.planner-pill-none {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    font-style: italic;
}
.planner-settings-edit {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    margin-left: 0.2rem;
    transition: color 0.2s;
}
.planner-settings-edit:hover {
    color: rgba(255,255,255,0.7);
}

/* ── Inline goals bar ── */
.planner-goals-bar {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.planner-goals-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.planner-inline-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.4rem 0;
}

/* ── Inline allergy bar (inside combined goals/allergies panel) ── */
.planner-allergy-bar {
    padding: 0.75rem;
    background: rgba(255, 107, 107, 0.03);
    border: 1px solid rgba(255, 107, 107, 0.08);
    border-radius: 10px;
}
.planner-allergy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.planner-allergy-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 107, 107, 0.2);
    background: rgba(255, 107, 107, 0.05);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
.planner-allergy-btn:hover {
    background: rgba(255, 107, 107, 0.12);
    color: rgba(255,255,255,0.8);
    border-color: rgba(255, 107, 107, 0.35);
}
.planner-allergy-btn.active {
    background: rgba(255, 107, 107, 0.18);
    color: #ff8a8a;
    border-color: rgba(255, 107, 107, 0.5);
    font-weight: 600;
}

/* ── Planner Sub-tabs (Planner/Menu/Checkout) ── */
.planner-sub-tabs,
.pantry-sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(27, 31, 34, 0.97);
    position: sticky;
    top: 3.25rem; /* sits just below the article-toolbar */
    z-index: 9999;
    backdrop-filter: blur(8px);
}
.sub-tab {
    flex: 1;
    padding: 0.65rem 0.5rem;
    background: none;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.sub-tab:last-child {
    border-right: none;
}
.sub-tab:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
}
.sub-tab.active {
    background: rgba(39,174,96,0.2);
    color: #fff;
    font-weight: 600;
}
.sub-tab-content {
    display: none;
}
.sub-tab-content.active {
    display: block;
}

/* ── Import Section in Build Meal ── */
.import-section-panel {
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
}
.import-section-toggle {
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    transition: background 0.15s;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.import-section-toggle::before {
    content: "▸";
    font-size: 0.8em;
    transition: transform 0.15s;
}
.import-section-panel[open] .import-section-toggle::before {
    transform: rotate(90deg);
}
.import-section-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.import-section-toggle::-webkit-details-marker {
    display: none;
}
.import-section-body {
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── Clickable slot meal names ── */
.slot-clickable {
    cursor: pointer;
    transition: color 0.15s;
}
.slot-clickable:hover {
    color: #27ae60;
    text-decoration: underline;
}
.planner-goal-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 20px !important;
    padding: 0.3rem 0.7rem !important;
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.7) !important;
    cursor: pointer;
    transition: all 0.2s;
}
.planner-goal-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.planner-goal-btn.active {
    background: rgba(39,174,96,0.25) !important;
    border-color: rgba(39,174,96,0.5) !important;
    color: #fff !important;
}

/* ── Slot pantry coverage ── */
.slot-coverage-row {
    margin-bottom: 0.3rem;
}
.slot-coverage {
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    cursor: help;
    white-space: nowrap;
}
.coverage-full {
    background: rgba(39,174,96,0.2);
    color: #6ddb9e;
}
.coverage-partial {
    background: rgba(241,196,15,0.15);
    color: #f1c40f;
}
.coverage-low {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
}

.planner-empty {
    text-align: center;
    padding: 2rem 1rem;
}
.planner-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.planner-empty h3 {
    margin-bottom: 0.5rem;
}
.planner-empty p {
    color: rgba(255,255,255,0.5);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.planner-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255,255,255,0.5);
}

/* ── Week Navigation Bar ── */
.planner-day-picker-bar {
    margin-bottom: 1rem;
}
.planner-day-picker-bar .order-day-picker {
    margin-bottom: 0;
}

/* Week divider between this-week and next-week day cards */
.planner-week-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.planner-week-divider::before,
.planner-week-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}

/* Day-week tag (e.g. "Next") shown on next-week day headers */
.day-week-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(78, 205, 196, 0.8);
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid rgba(78, 205, 196, 0.25);
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* No days selected message */
.planner-no-days {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

/* Unsaved edits banner */
.planner-unsaved-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    background: rgba(240, 192, 64, 0.1);
    border: 1px solid rgba(240, 192, 64, 0.3);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}
.planner-unsaved-banner .button {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.6rem !important;
    min-width: unset;
}


.planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.planner-title h3 {
    margin: 0;
}
.planner-week {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* Adaptation messages */
.planner-adapt {
    margin-bottom: 1rem;
}
.adapt-message {
    background: rgba(39,174,96,0.1);
    border: 1px solid rgba(39,174,96,0.3);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.5rem;
}
.adapt-message.adapt-warning {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.35);
    color: rgba(255, 220, 100, 0.9);
}

/* Allergy notice */
.planner-allergy-notice {
    background: rgba(241,196,15,0.1);
    border: 1px solid rgba(241,196,15,0.3);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
}
.allergy-shield {
    margin-right: 0.3rem;
}

/* Planner grid */
.planner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.planner-day {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.planner-day-header {
    background: rgba(255,255,255,0.05);
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Meal slot */
.planner-slot {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.2s;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.planner-slot-empty {
    cursor: default;
}
.planner-slot:last-child {
    border-bottom: none;
}

.slot-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.slot-icon {
    font-size: 0.9rem;
}
.slot-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.slot-allergy-badge {
    font-size: 0.8rem;
    cursor: help;
}
.slot-score {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: auto;
}

.slot-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.slot-meal-name {
    font-size: 0.95rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slot-meal-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.slot-meal-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.slot-edit-btn {
    font-size: 0.72rem !important;
    padding: 0.15rem 0.35rem !important;
    min-width: unset !important;
    opacity: 0.5;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.slot-edit-btn:hover {
    opacity: 1;
}
.slot-edit-btn:active {
    transform: scale(0.9);
    opacity: 1;
}

/* Slot footer: coverage + action buttons inline */
.slot-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

/* Slot action buttons — hidden by default, shown on tap */
.slot-actions {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    padding-top: 0.35rem;
}
.planner-slot.slot-selected {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
}
.planner-slot.slot-selected .slot-actions {
    display: grid;
}
/* Skipped slots always show their actions (Add/Random) */
.slot-skipped .slot-actions {
    display: grid;
}
.slot-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
}
.slot-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
}
.slot-btn:active {
    transform: scale(0.95);
    filter: brightness(1.3);
}

/* ── Per-action subtle tinted buttons ── */
.slot-btn.slot-accept {
    background: rgba(39,174,96,0.12);
    border-color: rgba(39,174,96,0.3);
    color: rgba(39,174,96,0.95);
}
.slot-btn.slot-accept:hover {
    background: rgba(39,174,96,0.25);
    border-color: rgba(39,174,96,0.5);
}
.slot-btn.slot-skip {
    background: rgba(231,76,60,0.12);
    border-color: rgba(231,76,60,0.3);
    color: rgba(231,76,60,0.9);
}
.slot-btn.slot-skip:hover {
    background: rgba(231,76,60,0.25);
    border-color: rgba(231,76,60,0.5);
}
.slot-btn.slot-change {
    background: rgba(52,152,219,0.12);
    border-color: rgba(52,152,219,0.3);
    color: rgba(52,152,219,0.95);
}
.slot-btn.slot-change:hover {
    background: rgba(52,152,219,0.25);
    border-color: rgba(52,152,219,0.5);
}
.slot-btn.slot-random {
    background: rgba(155,89,182,0.12);
    border-color: rgba(155,89,182,0.3);
    color: rgba(155,89,182,0.95);
}
.slot-btn.slot-random:hover {
    background: rgba(155,89,182,0.25);
    border-color: rgba(155,89,182,0.5);
}
.slot-btn.slot-add {
    background: rgba(78,205,196,0.12);
    border-color: rgba(78,205,196,0.3);
    color: rgba(78,205,196,0.95);
}
.slot-btn.slot-add:hover {
    background: rgba(78,205,196,0.25);
    border-color: rgba(78,205,196,0.5);
}

/* Slot status */
.slot-accepted {
    border-left: 3px solid #27ae60;
}
.slot-rejected {
    opacity: 0.5;
}
.slot-skipped .slot-body {
    text-decoration: none;
    opacity: 0.5;
}
.slot-skipped-label {
    color: rgba(255,255,255,0.35);
    font-style: italic;
}
.meal-badge-skipped {
    opacity: 0.5;
}

.planner-slot-empty .slot-body {
    padding: 0.3rem 0;
}
.slot-empty-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.3);
    font-style: italic;
}

/* Drag & Drop states */
.slot-drag-handle {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.25);
    cursor: grab;
    user-select: none;
    margin-right: 0.1rem;
    transition: color 0.2s;
}
.planner-slot:hover .slot-drag-handle {
    color: rgba(255,255,255,0.5);
}
.planner-slot.slot-dragging {
    opacity: 0.35;
    border: 1px dashed rgba(78, 205, 196, 0.4);
    background: rgba(78, 205, 196, 0.04);
}
.planner-slot.slot-drop-over {
    background: rgba(78, 205, 196, 0.1);
    border: 2px dashed rgba(78, 205, 196, 0.5);
    border-radius: 8px;
}

/* Grocery summary in planner */
.planner-grocery-summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}
.grocery-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.grocery-summary-store {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}
.grocery-store-count {
    background: rgba(255,255,255,0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
}
.grocery-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0 0.25rem 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}
.grocery-check {
    font-size: 1.1rem;
}

/* ====================================================
   OCR / RECIPE IMPORT STYLES
   ==================================================== */

.ocr-upload-area {
    margin-bottom: 1rem;
}
.ocr-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 0.5rem;
}
.ocr-upload-label:hover {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.03);
}
.ocr-upload-icon {
    font-size: 2rem;
}
.ocr-upload-hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
}

/* OCR progress */
.ocr-progress {
    text-align: center;
    padding: 2rem 0;
}
.ocr-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 1rem 0;
}
.ocr-progress-fill {
    height: 100%;
    width: 0;
    background: #27ae60;
    transition: width 0.3s;
    border-radius: 3px;
}
.ocr-progress-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

/* OCR review */
.ocr-review {
    margin-top: 1rem;
}
.ocr-review-header {
    margin-bottom: 1rem;
}
.ocr-subtitle {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.ocr-review-body {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.ocr-source-image {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.ocr-field {
    margin-bottom: 0.75rem;
}
.ocr-field label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.3rem;
}
.ocr-ingredient-row {
    display: grid;
    grid-template-columns: 50px 60px 1fr 30px;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
    align-items: start;
}
.ocr-ingredient-row input {
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    min-width: 0;
    box-sizing: border-box;
}
/* Name field wrapper for dropdown positioning */
.ocr-ing-name-wrap {
    position: relative;
}
.ocr-ing-name-wrap input {
    width: 100%;
    box-sizing: border-box;
}
.ocr-ing-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #1b1f22;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.ocr-ing-dd-item {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ocr-ing-dd-item:hover {
    background: rgba(39,174,96,0.2);
}
.ocr-dd-unit {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-left: 0.5rem;
}
.ocr-ing-remove {
    background: rgba(231,76,60,0.2);
    border: none;
    color: #e74c3c;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ocr-ingredient-row.ocr-flagged {
    border-left: 3px solid rgba(241,196,15,0.7);
    padding-left: 0.3rem;
    background: rgba(241,196,15,0.06);
    border-radius: 4px;
}
.ocr-review-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ── OCR Crop UI ────────────────────────────── */

.ocr-crop-ui {
    text-align: center;
}
.ocr-crop-ui h3 {
    margin-bottom: 0.25rem;
}
.ocr-canvas-wrap {
    position: relative;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.ocr-crop-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.ocr-crop-hint {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.25rem;
}
.ocr-error {
    text-align: center;
    padding: 1.5rem 0;
}
.ocr-error h3 {
    color: #e74c3c;
    margin-bottom: 0.5rem;
}
.ocr-error p {
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.6);
}

/* ====================================================
   AFFILIATE CART STYLES
   ==================================================== */

.cart-execution {
    margin-top: 0.5rem;
}
.cart-header {
    margin-bottom: 1rem;
}
.cart-subtitle {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.cart-store-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.cart-store-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cart-store-icon {
    font-size: 1.1rem;
}
.cart-store-name {
    font-weight: 600;
    flex: 1;
}
.cart-store-count {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.cart-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
}
.cart-badge.supported {
    background: rgba(39,174,96,0.2);
    color: #27ae60;
}
.cart-badge.manual {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
}
.cart-launch-btn {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.6rem !important;
}
.cart-items {
    padding: 0.25rem 0;
}
.cart-item {
    padding: 0.3rem 0.75rem;
}
.cart-item-link {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.85rem;
}
.cart-item-link:hover {
    color: #27ae60;
}
.cart-item-qty {
    color: rgba(255,255,255,0.4);
}
.cart-disclaimer {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    text-align: center;
    margin-top: 1rem;
    padding: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.cart-empty {
    text-align: center;
    padding: 2rem;
    color: rgba(255,255,255,0.4);
}

/* ====================================================
   SETTINGS ADDITIONS
   ==================================================== */

.allergy-disclaimer {
    font-size: 0.8rem;
    color: rgba(241,196,15,0.8);
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.6rem;
    background: rgba(241,196,15,0.08);
    border-radius: 6px;
}

#allergy-custom-section {
    margin-top: 1rem;
}
#allergy-custom-section label {
    margin-top: 0.75rem;
}

.allergy-toggles,
.goal-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Goals section action row: Save + Go to Planner buttons side by side */
.goals-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.goals-actions .button {
    margin: 0 !important;
}

.allergy-toggle,
.goal-toggle {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    /* Override Dimension button defaults */
    box-shadow: none;
    height: auto;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
}
.allergy-toggle:hover,
.goal-toggle:hover {
    border-color: rgba(255,255,255,0.4);
}
.allergy-toggle.active {
    border-color: #e74c3c;
    background: rgba(231,76,60,0.2);
    color: #fff;
}
.goal-toggle.active {
    border-color: #27ae60;
    background: rgba(39,174,96,0.2);
    color: #fff;
}

.slot-toggles {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.slot-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.slot-toggle input[type="checkbox"] {
    /* Override Dimension template's hidden checkbox for our toggles */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    opacity: 1;
    width: auto;
    height: auto;
    z-index: auto;
    float: none;
    margin-right: 0.3rem;
    accent-color: #27ae60;
    cursor: pointer;
}
.slot-toggle label {
    /* Override Dimension's label styles for our use */
    padding-left: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    display: inline !important;
}
.slot-toggle label:before {
    /* Hide Dimension's fake checkbox — we show the real one */
    display: none !important;
}

/* ====================================================
   PLANNER — COLLAPSIBLE SECTIONS & NEW FEATURES
   ==================================================== */

/* Planner section (collapsible wrapper) */
.planner-section {
    margin-bottom: 0.75rem;
}
.planner-section .section-toggle-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: background 0.15s;
    user-select: none;
}
.planner-section .section-toggle-header:hover {
    background: rgba(255,255,255,0.07);
}
.planner-section-title {
    font-weight: 600;
    font-size: 0.88rem;
}
.planner-section .section-toggle-body {
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
    padding: 0.6rem 0.75rem 0.2rem;
}
.planner-section.collapsed .section-toggle-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.planner-section .section-chevron {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
}
.planner-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}

/* Planner day collapsible — reuse same chevron pattern */
.planner-day.collapsible-section .planner-day-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}
.planner-day .section-chevron {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
}
.planner-day.collapsed .section-chevron {
    transform: rotate(-90deg);
}
.planner-day .section-toggle-body {
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}
.planner-day.collapsed .section-toggle-body {
    max-height: 0;
    opacity: 0;
}

/* ── New Plan inline section ── */
.planner-plan-options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.plan-option {
    display: block;
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.plan-option:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
}

/* ── Empty slot action buttons ── */
.slot-empty-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.slot-empty-actions .slot-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
}

/* ── Store filter pills inside planner ── */
.planner-store-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

/* ── Store link ── */
.planner-store-link {
    color: #27ae60;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}
.planner-store-link:hover {
    color: #6ddb9e;
    text-decoration: underline;
}

/* ====================================================
   DAY PICKER POPUP (from Menu → Planner)
   ==================================================== */
.day-picker-popup {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 0.4rem;
    background: #1e1e2f;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 0.6rem;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    max-height: 320px;
    overflow-y: auto;
}
.day-picker-header {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.day-picker-auto {
    margin-bottom: 0.5rem;
}
.day-picker-auto-btn {
    width: 100%;
    background: rgba(39,174,96,0.2);
    border: 1px solid rgba(39,174,96,0.4);
    border-radius: 8px;
    color: #6ddb9e;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}
.day-picker-auto-btn:hover {
    background: rgba(39,174,96,0.35);
}
.day-picker-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.day-picker-option {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.75);
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.day-picker-option:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}
.day-picker-empty {
    border-color: rgba(39,174,96,0.25);
}
.day-picker-skip {
    width: 100%;
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.45);
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.15s;
}
.day-picker-skip:hover {
    color: rgba(255,255,255,0.7);
}

/* ====================================================
   RESPONSIVE ADJUSTMENTS
   ==================================================== */

@media screen and (max-width: 736px) {
    .ocr-review-body {
        grid-template-columns: 1fr;
    }
    .ocr-ingredient-row {
        grid-template-columns: 50px 80px 1fr 36px;
        gap: 0.35rem;
    }
    .ob-food-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .planner-grid {
        grid-template-columns: 1fr;
    }
    .slot-actions {
        gap: 0.2rem;
    }
    .slot-footer {
        flex-wrap: wrap;
    }
    .slot-btn {
        padding: 0.2rem 0.35rem;
        font-size: 0.75rem;
    }
    .planner-header {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    .article-collapse-toggle {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.1rem;
    }
    .article-toolbar {
        margin: -2rem -2rem 0.5rem -2rem;
        min-height: 3rem;
    }
    #main article {
        padding-top: 2rem !important;
    }
    .article-toolbar .close {
        width: 3rem !important;
        height: 3rem !important;
    }
    .hamburger-wrap {
        width: 3rem;
        height: 3rem;
    }
}

@media screen and (max-width: 480px) {
    .article-toolbar {
        margin: -1.5rem -1.5rem 0.5rem -1.5rem;
    }
    #main article {
        padding-top: 1.5rem !important;
    }
    /* Receipt store/date row — stack vertically on very small screens */
    .receipt-store-date-row {
        flex-direction: column;
    }
    /* Grocery table — abbreviate column widths, prevent text overflow */
    .grocery-table-head,
    .grocery-table-row {
        grid-template-columns: 2fr 0.7fr 0.7fr 0.7fr;
        font-size: 0.8em;
    }
    .grocery-col {
        white-space: normal;
        overflow-wrap: break-word;
    }
    /* Essentials card & preview — prevent right-side clipping */
    .essentials-item .pantry-preview,
    .essentials-item .essentials-cart-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .essentials-cart-expand-btn {
        padding: 0.45rem 0.6rem;
        font-size: 0.85rem;
    }
    .essentials-cart-qty-row {
        gap: 0.3rem;
    }
    .essentials-cart-qty-label {
        font-size: 0.78rem;
    }
    .essentials-cart-qty-row .pantry-whole {
        width: 2.5rem;
        font-size: 0.85rem;
        padding: 0.3rem 0.2rem;
    }
    .essentials-cart-qty-row .pantry-qty-btn {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1rem;
    }
}


/* ====================================================
   Receipt Importer
   ==================================================== */

/* ── Paste / Input Section ── */
.receipt-paste-section h3 {
    margin-bottom: 0.25rem;
}

.receipt-textarea {
    width: 100%;
    min-height: 180px;
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.75rem;
    resize: vertical;
    transition: border-color 0.3s;
}
.receipt-textarea:focus {
    border-color: rgba(255,255,255,0.5);
    outline: none;
}
.receipt-textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

/* Input mode toggle (Paste / Quick List) */
.receipt-input-mode-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.receipt-input-mode-toggle .toggle-btn {
    flex: 1;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.receipt-input-mode-toggle .toggle-btn.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

.receipt-hint {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.25rem;
}

/* Store / Date row */
.receipt-store-date-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.receipt-field {
    flex: 1;
}
.receipt-field label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    display: block;
    margin-bottom: 0.2rem;
}
.receipt-field input {
    width: 100%;
    font-size: 0.85rem;
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px;
}
.receipt-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Actions bar */
.receipt-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: center;
}

/* Status messages */
.receipt-status-loading {
    color: rgba(255,255,255,0.7);
    padding: 0.5rem 0;
    font-style: italic;
}
.receipt-status-error {
    color: #ff6b6b;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

/* ── Approval Screen ── */
.receipt-approval-header {
    margin-bottom: 1rem;
}
.receipt-approval-header h3 {
    margin-bottom: 0.25rem;
}

.receipt-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.receipt-meta-badge {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}

/* Editable meta fields in review screen */
.receipt-meta-editable {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.receipt-meta-field {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    flex: 1;
    min-width: 100px;
}
.receipt-meta-field-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}
.receipt-meta-input {
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.82rem !important;
    padding: 0.2rem 0.15rem !important;
    width: 100%;
    min-width: 0;
    outline: none;
    box-shadow: none !important;
    margin: 0 !important;
}
.receipt-meta-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.receipt-meta-input:focus {
    color: #fff !important;
}

/* Group containers */
.receipt-group {
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
}
.receipt-group-auto {
    border-left: 3px solid #4ecdc4;
}
.receipt-group-confirm {
    border-left: 3px solid #ffe66d;
}
.receipt-group-new {
    border-left: 3px solid #ff6b6b;
}

.receipt-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    user-select: none;
}
.receipt-group-header:hover {
    background: rgba(255,255,255,0.08);
}
.receipt-group-icon {
    font-size: 1.1rem;
}
.receipt-group-title {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}
.receipt-group-chevron {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

.receipt-group-body {
    padding: 0.5rem 0.75rem;
}
.receipt-group-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.5rem;
}

/* Individual approval rows */
.receipt-approval-row {
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.35rem;
    transition: opacity 0.2s;
}
.receipt-approval-row.skipped {
    opacity: 0.4;
}

.receipt-row-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.receipt-row-checkbox input {
    margin: 0;
    cursor: pointer;
}
.receipt-row-delete {
    background: none;
    border: none;
    color: rgba(255,107,107,0.6);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}
.receipt-row-delete:hover {
    color: #ff6b6b;
}
.receipt-row-info {
    flex: 1;
    min-width: 0;
}
.receipt-row-raw {
    font-size: 0.85rem;
    word-break: break-word;
    white-space: normal;
}
.receipt-row-price {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.receipt-row-arrow {
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.receipt-row-mapping {
    flex: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.receipt-mapped-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4ecdc4;
}

/* Confidence badges */
.receipt-confidence-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    flex-shrink: 0;
}
.receipt-confidence-badge.high {
    background: rgba(78,205,196,0.2);
    color: #4ecdc4;
}
.receipt-confidence-badge.medium {
    background: rgba(255,230,109,0.2);
    color: #ffe66d;
}
.receipt-confidence-badge.low {
    background: rgba(255,107,107,0.15);
    color: #ff6b6b;
}

/* Mapping input (autocomplete) */
.receipt-mapping-select-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.receipt-mapping-input {
    width: 100%;
    font-size: 0.82rem !important;
    padding: 0.25rem 0.5rem !important;
    height: auto !important;
}
.receipt-mapping-suggestions {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.receipt-suggestion-item {
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.receipt-suggestion-item:hover {
    background: rgba(255,255,255,0.08);
}
.receipt-suggestion-cat {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
}
.receipt-suggestion-conf {
    font-size: 0.65rem;
    color: #4ecdc4;
    margin-left: auto;
    font-weight: 600;
}
.receipt-suggestion-create {
    color: #4ecdc4;
    border-top: 1px solid rgba(255,255,255,0.07);
}

/* Row details (qty, unit, category) */
.receipt-row-details {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.35rem;
    padding-left: 1.75rem;
    flex-wrap: wrap;
}
.receipt-row-details label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
}
.receipt-qty-input {
    width: 3.5rem !important;
    font-size: 0.8rem !important;
    padding: 0.15rem 0.3rem !important;
    height: auto !important;
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px;
    text-align: center;
}
.receipt-unit-select,
.receipt-cat-select,
.receipt-brand-input {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.3rem !important;
    height: auto !important;
    max-width: 7rem;
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px;
}
.receipt-brand-input {
    max-width: 9rem;
}

/* Approval actions bar */
.receipt-approval-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Success Screen ── */
.receipt-success-section {
    text-align: center;
    padding: 2rem 0;
}
.receipt-success-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
.receipt-success-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.receipt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5rem;
}
.receipt-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ecdc4;
}
.receipt-stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 0.15rem;
}
.receipt-success-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin: 0.75rem 0;
}
.receipt-success-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ── Purchase History Section ── */
.receipt-history-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.receipt-history-stats {
    display: flex;
    gap: 1rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.receipt-top-items,
.receipt-by-store {
    margin-top: 0.5rem;
}
.receipt-top-items h5,
.receipt-by-store h5 {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.25rem;
}
.receipt-top-items ul,
.receipt-by-store ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.receipt-top-items li,
.receipt-by-store li {
    font-size: 0.82rem;
    padding: 0.2rem 0;
    color: rgba(255,255,255,0.6);
}
.receipt-freq-badge {
    font-size: 0.7rem;
    background: rgba(255,255,255,0.08);
    padding: 0.1rem 0.3rem;
    border-radius: 8px;
    margin-left: 0.25rem;
}

/* ── Alerts ── */
.receipt-alerts {
    margin-bottom: 1rem;
}
.receipt-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}
.receipt-alert-icon {
    flex-shrink: 0;
}
.receipt-alert-expired {
    background: rgba(255,107,107,0.12);
    border-left: 3px solid #ff6b6b;
    color: rgba(255,255,255,0.8);
}
.receipt-alert-expiring {
    background: rgba(255,230,109,0.1);
    border-left: 3px solid #ffe66d;
    color: rgba(255,255,255,0.8);
}
.receipt-alert-low {
    background: rgba(78,205,196,0.1);
    border-left: 3px solid #4ecdc4;
    color: rgba(255,255,255,0.8);
}

/* ── Receipt OCR Upload ── */
.receipt-ocr-upload {
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.receipt-ocr-upload:hover {
    border-color: rgba(78,205,196,0.5);
}
.receipt-ocr-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
}
.receipt-ocr-icon {
    font-size: 2rem;
}
.receipt-ocr-hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
}
.receipt-ocr-thumb {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 0.5rem;
}
#receipt-ocr-preview {
    text-align: center;
}
.receipt-status-success {
    color: #4ecdc4;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

/* ── Stacked Review Layout (source on top, items below) ── */
.receipt-review-stacked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.receipt-source-panel {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
    overflow: hidden;
}
.receipt-source-toggle {
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.receipt-source-toggle::-webkit-details-marker { display: none; }
.receipt-source-toggle::before {
    content: '▸';
    transition: transform 0.2s;
}
details.receipt-source-panel[open] > .receipt-source-toggle::before {
    transform: rotate(90deg);
}
.receipt-source-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255,255,255,0.4);
}
.receipt-source-body {
    max-height: 40vh;
    overflow-y: auto;
    padding: 0 0.75rem 0.75rem;
}
.receipt-source-image {
    width: 100%;
    max-width: 500px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
}
.receipt-source-text {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 35vh;
    overflow-y: auto;
    color: rgba(255,255,255,0.5);
    margin: 0;
}
.receipt-source-hit {
    color: #4ecdc4;
    font-weight: 600;
}
.receipt-source-skip {
    color: rgba(255,255,255,0.3);
}
.receipt-items-panel {
    min-width: 0;
}

/* ── Mobile responsive ── */
@media screen and (max-width: 600px) {
    .receipt-store-date-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .receipt-row-main {
        flex-wrap: wrap;
    }
    .receipt-row-mapping {
        flex-basis: 100%;
        margin-top: 0.25rem;
        padding-left: 1.75rem;
    }
    .receipt-row-arrow {
        display: none;
    }
    .receipt-success-stats {
        gap: 0.5rem;
    }
    .receipt-row-details {
        padding-left: 0;
    }
}

/* ═══════════════════════════════════════════════════
   Ignored / Uncertain Lines Section
   ═══════════════════════════════════════════════════ */
.receipt-ignored-section {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem;
}
.receipt-ignored-toggle {
    cursor: pointer;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    user-select: none;
    padding: 0.35rem 0;
}
.receipt-ignored-toggle:hover {
    color: rgba(255,255,255,0.75);
}
.receipt-ignored-body {
    margin-top: 0.5rem;
}
.receipt-ignored-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
}
.receipt-ignored-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}
.receipt-ignored-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.receipt-ignored-text {
    font-family: 'Courier New', Courier, monospace;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.receipt-ignored-reason {
    font-size: 0.7rem;
    color: rgba(255,200,50,0.6);
    background: rgba(255,200,50,0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Recover buttons on dropped lines */
.receipt-ignored-recoverable li {
    align-items: center;
}
.receipt-recover-btn {
    background: rgba(78,205,196,0.12);
    border: 1px solid rgba(78,205,196,0.25);
    color: #4ecdc4;
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.receipt-recover-btn:hover {
    background: rgba(78,205,196,0.25);
}
li.receipt-recovered {
    opacity: 0.35;
}
li.receipt-recovered .receipt-ignored-text {
    text-decoration: line-through;
}
/* No items banner */
.receipt-no-items-banner {
    background: rgba(255,200,50,0.08);
    border: 1px solid rgba(255,200,50,0.2);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    text-align: center;
    color: rgba(255,255,255,0.75);
    font-size: 0.9rem;
}
.receipt-no-items-banner p { margin: 0.25rem 0; }
/* Unit input (datalist-backed free text) */
.receipt-unit-input,
.receipt-unit-select {
    width: 5.5rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #e0e0e0;
    border-radius: 4px;
    font-size: 0.85rem;
}
/* Grocery name input in receipt approval row */
.receipt-grocery-name-input {
    width: 100%;
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #e0e0e0;
    border-radius: 4px;
    font-size: 0.85rem;
    min-width: 0;
}
.receipt-grocery-name-input:focus {
    border-color: rgba(78,205,196,0.5);
    outline: none;
}
/* Field labels for grocery / pantry item in approval row */
.receipt-field-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.15rem;
}

/* ═══════════════════════════════════════════════════
   Recipe Import Toggle (reuses receipt toggle styles)
   ═══════════════════════════════════════════════════ */
.recipe-import-toggle {
    margin-bottom: 1rem;
}
.recipe-input-area {
    margin-bottom: 0.75rem;
}
#recipe-text-mode .receipt-textarea {
    min-height: 200px;
}
#recipe-text-parse-btn {
    margin-top: 0.5rem;
}

/* When no image in recipe review, make text side full width */
.ocr-review-body-full {
    display: block !important;
}
.ocr-review-body-full .ocr-text-side {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   Reports Sub-tab
   ═══════════════════════════════════════════════════ */

#reports-view h3 {
    margin: 0 0 0.4rem;
}

.reports-tagline {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 1.2rem;
    font-style: italic;
}

/* ═══════ Reports Article ═══════ */

/* Fixed subtabs bar at top of reports */
.reports-sub-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    background: rgba(27, 31, 34, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 3.25rem; /* offset for the article toolbar height */
    z-index: 9999;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -2.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.reports-sub-tabs::-webkit-scrollbar { display: none; }

.reports-nav-tab {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.reports-nav-tab:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
}
.reports-nav-tab.active {
    background: rgba(78, 205, 196, 0.15);
    border-color: rgba(78, 205, 196, 0.4);
    color: #4ecdc4;
    font-weight: 600;
}

/* Pulse animation for Essentials tab when overdue */
@keyframes reports-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.5); }
    50% { box-shadow: 0 0 8px 3px rgba(255, 107, 107, 0.35); }
}
.reports-tab-pulse {
    animation: reports-pulse 2s ease-in-out infinite;
    border-color: rgba(255, 107, 107, 0.5) !important;
    color: #ff6b6b !important;
}

/* Reports scrollable body */
#reports-view {
    padding: 0.5rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Dismiss button in overdue banner */
.reports-dismiss-overdue {
    margin-left: auto;
    font-size: 0.72rem !important;
    padding: 0.2rem 0.6rem !important;
    min-width: unset;
    flex-shrink: 0;
}

/* Overdue badge in essentials section header */
.reports-badge-overdue {
    background: rgba(255, 107, 107, 0.15) !important;
    color: #ff6b6b !important;
    font-weight: 600;
}

/* Section body wrapper for overview (non-collapsible) */
.reports-section-body {
    display: block; /* always visible for overview */
}

.reports-loading {
    text-align: center;
    padding: 2rem;
    color: rgba(255,255,255,0.5);
}

.reports-empty {
    color: rgba(255,255,255,0.5);
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Section containers ── */
.reports-section {
    margin-bottom: 1.25rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.reports-section-header {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
}

.reports-section-header .section-chevron {
    margin-left: auto;
    font-size: 0.85rem;
    transition: transform 0.25s;
}

.collapsible-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.collapsible-section.collapsed .section-toggle-body {
    display: none;
}

.reports-section-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin: 0 0 0.75rem;
}

.reports-subsection {
    margin-bottom: 1rem;
}

.reports-subheader {
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0.8rem 0 0.5rem;
    color: rgba(255,255,255,0.85);
}

/* Section badges (item counts etc) */
.section-badges {
    margin-left: 0.5rem;
}

.section-badge-text {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.06);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}

/* ── Stat cards grid ── */
.reports-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.reports-stat-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.7rem 0.55rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.reports-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    color: #4ecdc4;
    word-break: break-word;
}

.reports-stat-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reports-stat-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}

.reports-stat-alert .reports-stat-num { color: #ff6b6b; }
.reports-stat-high .reports-stat-num  { color: #4ecdc4; }
.reports-stat-medium .reports-stat-num { color: #f0c040; }
.reports-stat-low .reports-stat-num   { color: #ff6b6b; }

/* ── Needed Soon pills ── */
.reports-needed-soon {
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.reports-needed-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin-right: 0.2rem;
}

.reports-needed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.reports-needed-pill {
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}

.reports-needed-overdue {
    background: rgba(255, 107, 107, 0.18);
    color: #ff6b6b;
    font-weight: 600;
}
.reports-needed-soon-pill {
    background: rgba(240, 192, 64, 0.15);
    color: #f0c040;
}
.reports-needed-upcoming {
    background: rgba(78, 205, 196, 0.12);
    color: #4ecdc4;
}

/* ── Alert banners ── */
.reports-alert-banners {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.reports-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}

.reports-alert-expired { border-color: rgba(255, 107, 107, 0.3); background: rgba(255, 107, 107, 0.06); }
.reports-alert-expiring { border-color: rgba(240, 192, 64, 0.3); background: rgba(240, 192, 64, 0.06); }
.reports-alert-low { border-color: rgba(78, 205, 196, 0.3); background: rgba(78, 205, 196, 0.06); }

.reports-alert-icon {
    flex-shrink: 0;
}

/* ── Bar charts ── */
.reports-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reports-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.82rem;
}

.reports-bar-label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: rgba(255,255,255,0.8);
}

.reports-bar-track {
    height: 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 7px;
    overflow: hidden;
}

.reports-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ecdc4, #44b3ab);
    border-radius: 7px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.reports-bar-fill.reports-bar-store {
    background: linear-gradient(90deg, #ff6b6b, #ee5a24);
}

.reports-bar-value {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* ── Trends ── */
.reports-trend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    padding: 0.3rem 0;
    color: rgba(255,255,255,0.65);
}

.reports-trend-up {
    color: #ff6b6b;
    font-weight: 600;
}

.reports-trend-down {
    color: #4ecdc4;
    font-weight: 600;
}

/* ── Price Tracking table ── */
.reports-price-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.82rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 50vh;
}

.reports-price-header,
.reports-price-row {
    display: grid;
    grid-template-columns: 1.5fr 0.6fr 0.6fr 0.6fr 0.5fr;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    align-items: center;
}

.reports-price-header {
    background: rgba(255,255,255,0.06);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    position: sticky;
    top: 0;
    z-index: 2;
}

.reports-price-row {
    border-top: 1px solid rgba(255,255,255,0.04);
}

.reports-price-row:hover {
    background: rgba(255,255,255,0.03);
}

.reports-price-name {
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

.reports-price-low {
    color: #4ecdc4;
}

.reports-price-high {
    color: #ff6b6b;
}

.reports-price-trend {
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ── Repeatables table ── */
.reports-repeatables-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 60vh;
    font-size: 0.82rem;
}

.reports-rep-header {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.7fr 0.8fr 0.5fr 0.8fr;
    gap: 0.35rem;
    padding: 0.65rem;
    background: rgba(0, 25, 35, 0.95);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 0.73rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.reports-rep-row {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 0.7fr 0.8fr 0.5fr 0.8fr;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    align-items: center;
}

.reports-rep-row:hover {
    background: rgba(255,255,255,0.03);
}

.reports-rep-overdue {
    border-left: 3px solid #ff6b6b;
    background: rgba(255, 107, 107, 0.04);
}

.reports-rep-cell {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.reports-rep-name-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.reports-rep-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}

.reports-rep-interval {
    font-weight: 600;
    color: #4ecdc4;
}

.reports-override-btn {
    background: none;
    border: none;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.15rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.reports-override-btn:hover {
    opacity: 1;
}

.reports-rep-overdue-text {
    color: #ff6b6b;
    font-weight: 600;
}

.reports-conf-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
}

.reports-conf-high {
    background: rgba(78, 205, 196, 0.15);
    color: #4ecdc4;
}

.reports-conf-medium {
    background: rgba(240, 192, 64, 0.15);
    color: #f0c040;
}

.reports-conf-low {
    background: rgba(255, 107, 107, 0.12);
    color: #ff6b6b;
}

.reports-rep-actions {
    display: flex;
    gap: 0.3rem;
}

.reports-overdue-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.8rem;
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.25);
    font-size: 0.82rem;
}

.reports-reminder-btn,
.reports-add-list-btn {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.4rem !important;
    min-width: unset;
}

.reports-btn-done {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Waste & Efficiency ── */
.reports-waste-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.8rem;
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.2);
    font-size: 0.88rem;
}

.reports-waste-icon {
    font-size: 1.1rem;
}

.reports-waste-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.reports-waste-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 0.82rem;
}

.reports-waste-risk {
    border-color: rgba(240, 192, 64, 0.25);
    background: rgba(240, 192, 64, 0.04);
}

.reports-waste-name {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

.reports-waste-detail {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
}

.reports-waste-loss {
    font-weight: 600;
    color: #ff6b6b;
    margin-left: auto;
}

/* ── Store & Brand ── */
.reports-store-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.65rem;
}

.reports-store-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.7rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.reports-store-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.reports-store-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.reports-store-spend {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4ecdc4;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 0.35rem;
    margin-top: 0.15rem;
}

/* ── Category comparison table ── */
.reports-comparison-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.82rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.reports-comp-header,
.reports-comp-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.6fr 0.6fr;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    align-items: center;
}

.reports-comp-header {
    background: rgba(255,255,255,0.06);
    font-weight: 600;
    font-size: 0.73rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.reports-comp-row {
    border-top: 1px solid rgba(255,255,255,0.04);
}

.reports-comp-row:hover {
    background: rgba(255,255,255,0.03);
}

.reports-comp-best {
    font-weight: 600;
    color: #4ecdc4;
}

/* ── Timeline ── */
.reports-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reports-timeline-trip {
    border-left: 3px solid rgba(78, 205, 196, 0.4);
    padding-left: 0.75rem;
}

.reports-timeline-trip summary {
    cursor: pointer;
    list-style: none;
}

.reports-timeline-trip summary::-webkit-details-marker {
    display: none;
}

.reports-timeline-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-size: 0.82rem;
    align-items: center;
    padding: 0.3rem 0;
}

.reports-timeline-date {
    font-weight: 700;
    color: #4ecdc4;
}

.reports-timeline-store {
    color: rgba(255,255,255,0.7);
}

.reports-timeline-total {
    font-weight: 600;
}

.reports-timeline-count {
    color: rgba(255,255,255,0.4);
    font-size: 0.78rem;
}

.reports-timeline-body {
    margin-top: 0.4rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.reports-timeline-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    padding: 0.15rem 0;
}

/* ── Mobile reports ── */
@media screen and (max-width: 600px) {
    .reports-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .reports-bar-row {
        grid-template-columns: 70px 1fr auto;
    }
    .reports-trend-row {
        flex-direction: column;
        gap: 0.3rem;
    }
    .reports-rep-header,
    .reports-rep-row {
        grid-template-columns: 1.2fr 0.6fr 0.6fr 0.7fr 0.4fr 0.7fr;
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }
    .reports-price-header,
    .reports-price-row {
        grid-template-columns: 1.2fr 0.5fr 0.5fr 0.5fr 0.4fr;
        font-size: 0.75rem;
    }
    .reports-store-cards {
        grid-template-columns: 1fr;
    }
    .reports-comp-header,
    .reports-comp-row {
        grid-template-columns: 1fr 0.8fr 0.5fr 0.5fr;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════
   Demo Tour Overlay & Tooltip
═══════════════════════════════════════════════ */

/* Overlay: dark backdrop with optional spotlight cutout */
.demo-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    transition: opacity 0.3s;
}
.demo-tour-overlay.no-spotlight {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}
.demo-tour-overlay.has-spotlight {
    background: rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}

/* Spotlight ring on the highlighted element */
.demo-tour-spotlight {
    position: relative;
    z-index: 99999;
    box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.6), 0 0 20px rgba(78, 205, 196, 0.3) !important;
    border-radius: 8px;
    transition: box-shadow 0.3s;
}

/* During tour: keep sub-tabs and toolbar visible above the overlay */
body.demo-tour-active .planner-sub-tabs,
body.demo-tour-active .pantry-sub-tabs {
    z-index: 99999;
    pointer-events: none;
}
body.demo-tour-active .article-toolbar {
    z-index: 99999;
    pointer-events: none;
}

/* Tooltip card */
.demo-tour-tooltip {
    position: fixed;
    z-index: 100000;
    background: #1b1f22;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    line-height: 1.45;
    max-width: min(400px, calc(100vw - 16px));
    min-width: 0;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    box-sizing: border-box;
    animation: demoTooltipIn 0.25s ease-out;
}
@media screen and (min-width: 440px) {
    .demo-tour-tooltip {
        width: auto;
        min-width: 260px;
        padding: 1.25rem 1.5rem;
        font-size: 0.88rem;
    }
}
@keyframes demoTooltipIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.demo-tour-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.demo-tour-step-counter {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.demo-tour-close {
    background: none;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    height: auto;
    letter-spacing: normal;
    text-transform: none;
}
.demo-tour-close:hover {
    color: rgba(255, 255, 255, 0.8);
}
.demo-tour-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}
.demo-tour-text {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.8rem;
    font-size: 0.8rem;
    word-break: break-word;
}
.demo-tour-text b {
    color: rgba(255, 255, 255, 0.95);
}
.demo-tour-text ul {
    margin: 0.4rem 0 0.2rem 1rem;
    padding: 0;
}
.demo-tour-text li {
    margin-bottom: 0.2rem;
}
.demo-tour-nav {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.demo-tour-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    color: #fff;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex: 1 1 auto;
    text-align: center;
    min-width: 0;
    height: auto;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}
@media screen and (min-width: 440px) {
    .demo-tour-btn {
        flex: 0 0 auto;
        padding: 0.3rem 0.7rem;
    }
}
.demo-tour-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
}
.demo-tour-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.demo-tour-btn.primary {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
}
.demo-tour-btn.primary:hover {
    background: rgba(255, 255, 255, 0.22);
}
.demo-tour-end-btn {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.6rem !important;
    color: rgba(255, 100, 100, 0.8) !important;
    border-color: rgba(255, 100, 100, 0.25) !important;
}
.demo-tour-end-btn:hover {
    background: rgba(255, 100, 100, 0.15) !important;
}

/* Demo controls bar at top of settings */
.demo-controls-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: rgba(78, 205, 196, 0.06);
    border: 1px solid rgba(78, 205, 196, 0.2);
    border-radius: 10px;
}
.demo-controls-bar .demo-mode-toggle-wrap {
    flex: 1;
    min-width: 180px;
}
.demo-controls-bar #start-demo-tour-btn {
    white-space: nowrap;
}

/* Logo wrapper for DEMO badge positioning */
.logo-wrap {
    position: relative;
    display: inline-block;
}

/* DEMO badge on header when demo mode is active */
.demo-badge {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(78, 205, 196, 0.35);
    color: #4ecdc4;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    border: 1px solid rgba(78, 205, 196, 0.5);
    animation: demoBadgePulse 2s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}
@keyframes demoBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── Icon Picker Modal ─── */
.icon-picker-box {
    max-width: 420px;
    width: 92vw;
    padding: 1.25rem;
    text-align: center;
}
.icon-picker-box h3 {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
}
.icon-picker-btn {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.icon-picker-btn:hover {
    background: rgba(78, 205, 196, 0.18);
    transform: scale(1.15);
}
.icon-picker-actions {
    text-align: right;
}

/* ─── Order Day Picker ─── */
.order-day-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}
.order-week-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.order-week-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    min-width: 70px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.order-day-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.order-day-pill {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
}
.order-day-pill:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
}
.order-day-pill.active {
    background: rgba(78, 205, 196, 0.18);
    border-color: rgba(78, 205, 196, 0.4);
    color: #4ecdc4;
    font-weight: 600;
}

/* ── Suggestions flash animation ── */
@keyframes suggestionsFlash {
    0%, 100% { border-color: rgba(241, 196, 15, 0.15); }
    50% { border-color: rgba(241, 196, 15, 0.6); box-shadow: 0 0 8px rgba(241, 196, 15, 0.25); }
}
.suggestions-flash {
    animation: suggestionsFlash 2s ease-in-out infinite;
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: 8px;
}
.suggestions-flash > .section-toggle-header {
    animation: suggestionsFlash 2s ease-in-out infinite;
}
.adapt-warning-badge {
    color: rgba(255, 220, 100, 0.95) !important;
    font-weight: 600;
    font-size: 0.72rem;
}
.adapt-ack-btn {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(39, 174, 96, 0.4);
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
    cursor: pointer;
    transition: all 0.15s;
    vertical-align: middle;
}
.adapt-ack-btn:hover {
    background: rgba(39, 174, 96, 0.25);
    border-color: rgba(39, 174, 96, 0.6);
}
.adapt-message.adapt-acked {
    opacity: 0.45;
    border-style: dashed;
}

/* ── Essentials section ── */
.essentials-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    max-height: 75vh;
    overflow-y: auto;
}

/* Category horizontal tabs — now inside suggest sticky header */
.essentials-cat-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
    padding: 0.3rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.essentials-cat-tabs::-webkit-scrollbar { display: none; }

/* Override negative margins on essentials tabs so arrows aren't clipped by overflow parent */
.essentials-tabs-wrap {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Suggested container: holds sticky header + scrollable list */
.essentials-suggest-container {
    margin-top: 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sticky header inside suggested container */
.essentials-suggest-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(27, 31, 34, 0.97);
    backdrop-filter: blur(8px);
    padding: 0.4rem 0.5rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* Header row with label + Add All button */
.essentials-suggest-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0 0.1rem;
}
.essentials-suggest-header-row .essentials-category-label {
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
}

/* Scrollable suggested items area */
.essentials-suggest-scroll {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.3rem 0.5rem;
}

/* Empty state */
.essentials-suggest-empty {
    padding: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
}

/* Suggested table rows — slightly different from added rows */
.essentials-suggest-table-row {
    color: rgba(255, 255, 255, 0.6);
}
.essentials-suggest-table-row .grocery-name {
    color: rgba(255, 255, 255, 0.6);
}
.essentials-suggest-overdue-row {
    background: rgba(231, 76, 60, 0.04);
}
.essentials-suggest-overdue-row .grocery-name {
    color: rgba(231, 76, 60, 0.85);
}
.essentials-suggest-subcat-group {
    margin-bottom: 0.2rem;
}
.essentials-cat-tab {
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    box-shadow: none;
    height: auto;
    line-height: 1.4;
}
.essentials-cat-tab:hover {
    background: rgba(78, 205, 196, 0.08);
    border-color: rgba(78, 205, 196, 0.25);
    color: rgba(255, 255, 255, 0.8);
}
.essentials-cat-tab.active {
    background: rgba(78, 205, 196, 0.15);
    border-color: rgba(78, 205, 196, 0.5);
    color: #4ecdc4;
    font-weight: 600;
}

/* Search bar */
.essentials-search-bar {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 0.3rem;
}

/* Essentials table — uses the standard grocery-table 4-col grid (Item/Need/Have/Buy) */
.essentials-group {
    margin-bottom: 0.3rem;
}

/* ── Stock Level Colors ── */
/* Out of stock (red) — completely out, urgently need to buy */
.essentials-out-of-stock {
    background: rgba(231, 76, 60, 0.08);
    border-left: 3px solid rgba(231, 76, 60, 0.6);
}
.essentials-out-of-stock .grocery-name {
    color: rgba(231, 76, 60, 0.9);
}
.essentials-out-of-stock .buy-col {
    color: rgba(231, 76, 60, 0.9);
    font-weight: 600;
}
/* Running low (yellow) — have some but need more */
.essentials-running-low {
    background: rgba(241, 196, 15, 0.06);
    border-left: 3px solid rgba(241, 196, 15, 0.5);
}
.essentials-running-low .grocery-name {
    color: rgba(241, 196, 15, 0.9);
}
.essentials-running-low .buy-col {
    color: rgba(241, 196, 15, 0.9);
    font-weight: 600;
}
/* Running close (yellow in On Hand) — on hand but just barely enough */
.essentials-running-close {
    background: rgba(241, 196, 15, 0.04);
    border-left: 3px solid rgba(241, 196, 15, 0.35);
    opacity: 0.85;
}
.essentials-running-close .grocery-name {
    color: rgba(241, 196, 15, 0.8);
}
.essentials-running-close .pantry-col {
    color: rgba(241, 196, 15, 0.85);
    font-weight: 600;
}
/* In stock / plenty — visible but secondary */
.essentials-in-stock {
    opacity: 0.7;
}
.essentials-in-stock .pantry-col {
    color: rgba(39, 174, 96, 0.8);
    font-weight: 600;
}
.essentials-grocery-select {
    margin-top: 0.2rem !important;
}
/* Essential badge in shopping list / checkout */
.grocery-essential-badge {
    display: inline-block;
    font-size: 0.65em;
    background: rgba(78, 205, 196, 0.1);
    color: rgba(78, 205, 196, 0.7);
    padding: 0.08em 0.4em;
    border-radius: 3px;
    margin-left: 0.3rem;
    vertical-align: middle;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Essentials rows with remove button — extend grid to include rightmost X */
.essentials-row-with-remove {
    grid-template-columns: 2fr 1fr 1fr 1fr auto !important;
    align-items: center;
}
.essentials-table-head {
    grid-template-columns: 2fr 1fr 1fr 1fr auto !important;
}
.essentials-remove-btn {
    background: none;
    border: none;
    color: rgba(255,100,100,0.4);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 0.2rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.essentials-remove-btn:hover {
    color: #e74c3c;
    background: rgba(231,76,60,0.1);
}
/* Cart toggle for essentials — expand button only */
.essentials-cart-expand-btn {
    display: block;
    width: 100%;
    margin: 0 0 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    opacity: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    text-shadow: none;
    box-sizing: border-box;
    word-wrap: break-word;
    white-space: normal;
}
.essentials-cart-expand-btn:hover {
    background: rgba(255,255,255,0.12);
    opacity: 1;
}
.essentials-cart-expand-btn.essentials-cart-on {
    background: rgba(78,205,196,0.12);
    border-color: rgba(78,205,196,0.3);
    color: #4ecdc4;
    text-shadow: none;
}
.essentials-cart-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.35rem 0 0.1rem;
}
/* Cart qty row inside expanded essentials panel */
.essentials-cart-qty-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
.essentials-cart-qty-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
}
.essentials-cart-qty-row .quantity-inputs {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex: 0 1 auto;
}
.essentials-cart-qty-row .pantry-whole {
    width: 3rem;
    text-align: center;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    background-color: rgba(27, 31, 34, 0.9);
    color: #fff;
    border-radius: 4px;
    font-size: 0.9em;
    -moz-appearance: textfield;
}
.essentials-cart-qty-row .pantry-whole::-webkit-inner-spin-button,
.essentials-cart-qty-row .pantry-whole::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.essentials-cart-qty-row .pantry-whole:focus {
    border-color: rgba(255,255,255,0.4);
    outline: none;
}
.essentials-cart-qty-row .pantry-qty-btn {
    flex-shrink: 0;
}
/* Essentials cart badge (compact view) */
.essentials-cart-badge {
    background: rgba(76, 175, 80, 0.25);
    color: #81c784;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    white-space: nowrap;
}
/* Old pill styles removed — now using grocery-table layout */
.essentials-suggest-pills {
    display: none;
}
.essentials-suggest-pill {
    display: none;
}

/* ── Essentials category group headers ── */
.essentials-category-group {
    margin-bottom: 0.5rem;
}
.essentials-category-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.3rem;
}

/* ── Need to Buy group ── */
.essentials-need-group .essentials-category-label {
    color: #4ecdc4;
}

/* ── On Hand group (distinct but readable styling) ── */
.essentials-onhand-group {
    opacity: 0.85;
}
.essentials-onhand-label {
    color: rgba(100, 200, 100, 0.9) !important;
}
.essentials-onhand-group .grocery-table-row {
    background: rgba(100, 200, 100, 0.03);
}
.essentials-onhand-group .pantry-col {
    color: rgba(39, 174, 96, 0.9);
    font-weight: 600;
}

/* ── Suggested essentials ── */
.essentials-suggest-group > .essentials-suggest-label,
.essentials-suggest-group > .essentials-category-label {
    color: rgba(255, 200, 80, 0.75);
}
.essentials-suggest-label {
    font-size: 0.78rem;
    color: rgba(255, 200, 80, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.essentials-suggest-subcat-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.15rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.essentials-suggest-add-btn {
    padding: 0.1rem 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.08);
    color: #4ecdc4;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    line-height: 1.3;
    box-shadow: none;
    height: auto;
    text-transform: none;
    letter-spacing: 0;
}
.essentials-suggest-add-btn:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: rgba(78, 205, 196, 0.5);
}
.essentials-suggest-overdue-row .essentials-suggest-add-btn {
    border-color: rgba(231, 76, 60, 0.3);
    color: rgba(231, 76, 60, 0.8);
    background: rgba(231, 76, 60, 0.06);
}
.essentials-suggest-overdue-row .essentials-suggest-add-btn:hover {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.5);
}

/* Add All Suggestions button */
.essentials-add-all-btn {
    display: inline-block;
    margin: 0.25rem 0 0.4rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.08);
    color: #4ecdc4;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    height: auto;
    line-height: 1.4;
}
.essentials-add-all-btn:hover {
    background: rgba(78, 205, 196, 0.18);
    border-color: rgba(78, 205, 196, 0.5);
}

/* Overdue badge inline */
.essentials-suggest-overdue-badge {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(231, 76, 60, 0.7);
    background: rgba(231, 76, 60, 0.1);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Need count badge in suggestion rows */
.essentials-suggest-need {
    font-size: 0.65em;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 0.15rem;
}
.essentials-reports-link {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    box-shadow: none;
    height: auto;
    line-height: 1.4;
}
.essentials-reports-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
}
/* Suggestions → Reports button */
.suggestions-reports-link {
    display: block;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(100, 180, 255, 0.2);
    background: rgba(100, 180, 255, 0.06);
    color: rgba(100, 180, 255, 0.8);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    box-shadow: none;
    height: auto;
    line-height: 1.4;
    text-align: center;
}
.suggestions-reports-link:hover {
    background: rgba(100, 180, 255, 0.12);
    border-color: rgba(100, 180, 255, 0.4);
    color: #64b4ff;
}
.essentials-search {
    flex: 1;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.85);
    outline: none;
}
.essentials-search:focus {
    border-color: rgba(78, 205, 196, 0.4);
    background: rgba(255,255,255,0.06);
}
.essentials-add-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.1);
    color: #4ecdc4;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.essentials-add-btn:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: rgba(78, 205, 196, 0.5);
}
.essentials-search-results {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
}
.essentials-search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
}
.essentials-search-item:hover {
    background: rgba(78, 205, 196, 0.1);
}
.essentials-search-cat {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
}
.essentials-search-custom {
    color: #4ecdc4;
    font-style: italic;
}

/* ── Serving sizes in planner slots ── */
.slot-servings-badge {
    font-size: 0.68rem;
    padding: 0.05rem 0.35rem;
    border-radius: 8px;
    background: rgba(78, 205, 196, 0.15);
    color: #4ecdc4;
    white-space: nowrap;
    margin-left: 0.3rem;
}
.slot-servings-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}
.slot-servings-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
}
.slot-servings-count {
    font-weight: 600;
    min-width: 1.2em;
    text-align: center;
    color: #4ecdc4;
}
.slot-servings-dec,
.slot-servings-inc {
    font-size: 0.75rem !important;
    padding: 0.05rem 0.35rem !important;
    min-width: auto !important;
    line-height: 1;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}
.slot-servings-dec:hover,
.slot-servings-inc:hover {
    background: rgba(78, 205, 196, 0.15);
    color: #4ecdc4;
}
.slot-leftover-badge {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    white-space: nowrap;
    margin-left: 0.4rem;
}
.slot-batch-badge {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 8px;
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
    white-space: nowrap;
    margin-left: 0.4rem;
}

/* ── Optional sides in planner slots ── */
.slot-sides {
    padding: 0.2rem 0.5rem 0.3rem;
    font-size: 0.75rem;
}
.slot-sides-label {
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    margin-right: 0.3rem;
}
.slot-side-option {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-right: 0.6rem;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.72rem;
}
.slot-side-check {
    accent-color: #4ecdc4;
}

/* ── Optional sides toggle list in meal editor ── */
.dish-sides-wrapper {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.dish-sides-wrapper > label {
    font-weight: 600;
    font-size: 0.85rem;
}
#dish-sides-filter {
    width: 100%;
    background-color: rgba(27, 31, 34, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}
#dish-sides-filter:focus {
    border-color: rgba(255, 255, 255, 0.4);
}
.sides-toggle-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(20,22,30,0.6);
    padding: 0.3rem 0;
}
.sides-group-header {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    padding: 0.4rem 0.6rem 0.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sides-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: background 0.15s;
    font-weight: 400;
    font-size: 0.85rem;
}
.sides-toggle-row:hover {
    background: rgba(255,255,255,0.04);
}
.sides-toggle-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.5rem;
}
/* Hide the real checkbox, show custom slider */
.sides-toggle-check {
    display: none;
}
.sides-toggle-slider {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    transition: background 0.2s;
}
.sides-toggle-slider::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.sides-toggle-check:checked + .sides-toggle-slider {
    background: #2ecc71;
}
.sides-toggle-check:checked + .sides-toggle-slider::after {
    transform: translateX(16px);
}
/* ── Serving size row in meal editor ── */
.dish-servings-wrapper {
    margin-bottom: 0.8rem;
}
.dish-servings-wrapper label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    display: block;
}
.dish-servings-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
#dish-servings {
    width: 3.5rem;
    text-align: center;
    padding: 0.4rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background-color: rgba(27, 31, 34, 0.9);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}
#dish-servings:focus {
    border-color: rgba(255, 255, 255, 0.4);
}
/* ── Add Extra Meal button ── */
.planner-extra-meal {
    text-align: center;
    padding: 0.6rem 0;
}
.planner-add-extra-meal {
    font-size: 0.82rem;
}

/* ── Essentials collapsible sub-sections ── */
.essentials-sub-section {
    margin-top: 0.5rem;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    background: rgba(255,255,255,0.015);
}
.essentials-sub-section > .section-toggle-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}
.essentials-sub-section > .section-toggle-body {
    padding: 0 0.5rem 0.5rem;
}
.essentials-need-highlight > .section-toggle-header {
    background: rgba(231, 76, 60, 0.12);
    border-radius: 6px 6px 0 0;
}
.essentials-need-highlight.collapsed > .section-toggle-header {
    border-radius: 6px;
    animation: essentials-need-pulse 2s ease-in-out infinite;
}
@keyframes essentials-need-pulse {
    0%, 100% { background: rgba(231, 76, 60, 0.12); }
    50% { background: rgba(231, 76, 60, 0.22); }
}
.essentials-empty-msg {
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    font-style: italic;
}

/* ── Leftovers section in planner ── */
.leftovers-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.leftover-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: rgba(241, 196, 15, 0.06);
    border: 1px solid rgba(241, 196, 15, 0.15);
    border-radius: 6px;
}
.leftover-img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
}
.leftover-icon {
    font-size: 1.4rem;
    width: 36px;
    text-align: center;
}
.leftover-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.leftover-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leftover-detail {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
}
.leftover-detail strong {
    color: #f1c40f;
}

/* ── Hidden sub-tab (Menu — accessed from planner only) ── */
.sub-tab-hidden {
    display: none !important;
}

/* ── Default people selector in planner New Plan section ── */
.planner-default-people {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    margin-top: 0.4rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
}
.planner-default-people label {
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
.planner-people-count {
    font-weight: 700;
    color: #4ecdc4;
    min-width: 1.2em;
    text-align: center;
    font-size: 0.95rem;
}
.planner-people-hint {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    margin-left: 0.3rem;
}
.planner-people-dec,
.planner-people-inc {
    font-size: 0.8rem !important;
    padding: 0.1rem 0.45rem !important;
    min-width: auto !important;
    line-height: 1;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}
.planner-people-dec:hover,
.planner-people-inc:hover {
    background: rgba(78, 205, 196, 0.15);
    color: #4ecdc4;
}

/* ── Slot edit details (people row, sides) — hidden until edit mode ── */
.slot-edit-details {
    display: none;
    flex-direction: column;
}
.planner-slot.slot-selected .slot-edit-details {
    display: flex;
}

/* ── Single grocery option label in checkout ── */
.grocery-option-single {
    display: inline-block;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    padding: 0.15rem 0.4rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    margin-top: 0.2rem;
}

/* ── Dynamic text display for store/brand in ingredient edit ── */
.ing-edit-dynamic-text {
    display: block;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    padding: 0.3rem 0.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    min-height: 1.6em;
}
.ing-edit-dynamic-text em {
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ── Tap-to-edit cursor for meal slots ── */
.planner-slot:not(.planner-slot-empty):not(.slot-skipped) {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .planner-slot:not(.planner-slot-empty):not(.slot-skipped):hover {
        background: rgba(255,255,255,0.03);
    }
}

/* ══════════════════════════════════════════
   Recurring Essentials — Pantry section
   ══════════════════════════════════════════ */
.pantry-recurring-section {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.75rem;
}

/* Recurring section reuses pantry-category / pantry-item / pantry-preview
   from the main pantry list — only overrides specific to recurring below */
#recurring-essentials-container .pantry-item {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
#recurring-essentials-container .pantry-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#recurring-essentials-container .pantry-item.recurring-overdue {
    border-color: rgba(255,180,50,0.3);
}
.recurring-overdue-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(255,160,40,0.25);
    color: rgba(255,200,100,0.9);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 0.3rem;
}
.recurring-schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
}
.recurring-next-overdue {
    color: rgba(255,180,50,0.9);
    font-weight: 600;
}
.recurring-qty {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-shrink: 0;
}
.recurring-qty .pantry-whole {
    width: 3rem;
    text-align: center;
}
/* Fraction select in quantity controls */
.pantry-frac {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    padding: 0.15rem 0.1rem;
    cursor: pointer;
    min-width: 2.2rem;
}
.pantry-frac:focus {
    border-color: rgba(78,205,196,0.5);
    outline: none;
}
.recurring-unit {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    margin-left: 0.15rem;
}

/* Inline interval edit form (shared between pantry + reports) */
.recurring-interval-form,
.reports-interval-form {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.recurring-interval-input,
.reports-interval-input {
    width: 3.2rem;
    text-align: center;
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: inherit;
}
.recurring-interval-suffix,
.reports-interval-suffix {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
}
.recurring-interval-save,
.recurring-interval-cancel,
.reports-interval-save,
.reports-interval-cancel {
    padding: 0.1rem 0.4rem !important;
    font-size: 0.72rem !important;
    min-width: unset !important;
    line-height: 1.2 !important;
}
.recurring-interval-display {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
}
.recurring-edit-interval-btn,
.reports-override-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.15rem;
    font-size: 0.72rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.recurring-edit-interval-btn:hover,
.reports-override-btn:hover {
    opacity: 1;
}

/* ── Essentials & Recurring quantity inputs — match pantry dark style ── */
.recurring-qty input[type="number"],
.essentials-qty-wrap input[type="number"] {
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background-color: rgba(27, 31, 34, 0.9);
    color: #fff;
    font-size: 0.9em;
    -moz-appearance: textfield;
}
.recurring-qty input[type="number"]::-webkit-inner-spin-button,
.recurring-qty input[type="number"]::-webkit-outer-spin-button,
.essentials-qty-wrap input[type="number"]::-webkit-inner-spin-button,
.essentials-qty-wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.recurring-qty input[type="number"]:focus,
.essentials-qty-wrap input[type="number"]:focus {
    border-color: rgba(255, 255, 255, 0.4);
    outline: none;
}

/* ── Essentials pantry-style layout ── */
.essentials-list-header {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 0.3rem;
}
.essentials-tabs-wrap {
    margin-bottom: 0.5rem;
}
.essentials-qty-wrap {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-shrink: 0;
}
.essentials-item {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    padding: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    border-left: 3px solid transparent;
}
.essentials-item.essentials-out-of-stock {
    border-left-color: rgba(231,76,60,0.6);
}
.essentials-item.essentials-running-low {
    border-left-color: rgba(241,196,15,0.6);
}
.essentials-item.essentials-in-stock {
    border-left-color: rgba(39,174,96,0.4);
}
.essentials-preview {
    /* Uses pantry-preview base styles */
}
.essentials-preview-actions {
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.essentials-suggest-item .pantry-card-top {
    cursor: default;
}
.essentials-suggest-item .essentials-suggest-add-btn {
    flex-shrink: 0;
}
.essentials-suggest-overdue {
    border-left: 3px solid rgba(255,180,50,0.6);
}
.essentials-suggest-cat .pantry-cat-header {
    cursor: pointer;
}
.essentials-suggest-header-row {
    margin-bottom: 0.5rem;
}

/* ── Ingredient Editor Panel ── */
#ingredient-editor-panel {
    padding: 0 0.5rem;
}
#ingredient-editor-panel .meal-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.ing-editor-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.ing-editor-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.ing-editor-field label {
    font-size: 0.8rem;
    opacity: 0.7;
}
.ing-editor-field select {
    padding: 0.3rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: inherit;
}
.ing-editor-section {
    margin-top: 0.8rem;
}
.ing-editor-toggles {
    margin-top: 0.8rem;
}

/* Grocery drag handle */
.grocery-drag-handle {
    cursor: grab;
    padding: 0 0.3rem;
    opacity: 0.5;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
}
.grocery-drag-handle:hover {
    opacity: 1;
}
.grocery-row-dragging {
    opacity: 0.4;
    background: rgba(78,205,196,0.1);
}
.grocery-row {
    transition: opacity 0.15s;
}

/* ═════════════════════════════════════════
   Shopping Page — Store-Grouped Card List
   ═════════════════════════════════════════ */
#store-mode-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 20000;
    background: #1b1f22;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.store-mode-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(78,205,196,0.15);
    flex-shrink: 0;
}
.store-mode-header .store-mode-close-btn {
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.2rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.store-mode-header .store-mode-close-btn:hover {
    opacity: 1;
}
.store-mode-header-info {
    flex: 1;
}
.store-mode-header-info h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.1rem;
    color: #fff;
}
.store-mode-progress-text {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.3rem;
}
.store-mode-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.store-mode-progress-fill {
    height: 100%;
    background: #4ecdc4;
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
}
/* Card list body — scrollable list of items */
.store-mode-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    -webkit-overflow-scrolling: touch;
}
/* Store group within card list */
.sm-store-group {
    margin-bottom: 1rem;
}
.sm-store-group-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(78,205,196,0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.25rem 0.35rem;
    border-bottom: 1px solid rgba(78,205,196,0.12);
    margin-bottom: 0.35rem;
}
/* Individual item card */
.sm-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 0.4rem;
    transition: background 0.15s, border-color 0.15s;
    overflow: hidden;
}
.sm-card:active {
    background: rgba(255,255,255,0.07);
}
.sm-card.sm-card-expanded {
    border-color: rgba(78,205,196,0.3);
    background: rgba(78,205,196,0.04);
}
.sm-card.sm-card-done .sm-card-summary {
    opacity: 0.5;
}
.sm-card.sm-card-done .sm-card-url-row {
    opacity: 0.5;
}
.sm-card.sm-card-done .sm-card-name {
    text-decoration: line-through;
    color: rgba(255,255,255,0.4);
}
/* Card summary row (always visible) */
.sm-card-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.sm-card-check {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
}
.sm-card-info {
    flex: 1;
    min-width: 0;
}
.sm-card-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-card-detail {
    display: block;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    margin-top: 0.1rem;
}
.sm-card-chevron {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    transition: transform 0.15s;
}
/* Card expanded actions panel */
.sm-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem 0.7rem 2.95rem;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.sm-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}
.sm-btn:active {
    transform: scale(0.96);
}
/* Got It (primary action) */
.sm-btn-got {
    background: #4ecdc4;
    color: #1b1f22;
}
.sm-btn-got:hover {
    background: #60d8d0;
}
/* Skip */
.sm-btn-skip {
    background: rgba(255,255,255,0.08);
    color: #e0e0e0;
    border: 1px solid rgba(255,255,255,0.12);
}
.sm-btn-skip:hover {
    background: rgba(255,255,255,0.15);
}
/* Skipped card state */
.sm-card.sm-card-skipped .sm-card-summary {
    opacity: 0.45;
}
.sm-card.sm-card-skipped .sm-card-url-row {
    opacity: 0.45;
}
.sm-card.sm-card-skipped .sm-card-name {
    color: rgba(255,255,255,0.4);
    font-style: italic;
}
/* Shop (link to store) */
.sm-btn-shop {
    background: rgba(78,205,196,0.12);
    color: #4ecdc4;
    border: 1px solid rgba(78,205,196,0.2);
    display: inline-block;
}
.sm-btn-shop:hover {
    background: rgba(78,205,196,0.2);
}
/* Prev / Next navigation arrows */
.sm-btn-nav {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.5rem 0.65rem;
    font-size: 1rem;
    line-height: 1;
}
.sm-btn-nav:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
/* Undo button */
.sm-btn-undo {
    background: rgba(255,193,7,0.12);
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.25);
}
.sm-btn-undo:hover {
    background: rgba(255,193,7,0.22);
}
/* URL input row below shopping card buttons */
.sm-card-url-row {
    display: flex;
    gap: 0.35rem;
    width: 100%;
    padding: 0 0.85rem 0.7rem 2.95rem;
}
.sm-url-input {
    flex: 1;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #e0e0e0;
    border-radius: 6px;
    font-size: 0.78rem;
}
.sm-url-input::placeholder {
    color: rgba(255,255,255,0.25);
}
.sm-url-input:focus {
    border-color: rgba(78,205,196,0.4);
    outline: none;
}
.sm-btn-save-url {
    background: rgba(78,205,196,0.1);
    color: #4ecdc4;
    border: 1px solid rgba(78,205,196,0.2);
    padding: 0.35rem 0.55rem;
    font-size: 0.85rem;
}
.sm-btn-save-url:hover {
    background: rgba(78,205,196,0.2);
}
/* History Shop button */
.history-btn.shop-btn {
    background: #4ecdc4;
    color: #1b1f22;
    border-color: #4ecdc4;
}
.history-btn.shop-btn:hover {
    background: #60d8d0;
}
/* Mobile adjustments */
@media screen and (max-width: 600px) {
    .store-mode-body {
        padding: 0.5rem 0.6rem;
    }
    .sm-card-summary {
        padding: 0.6rem 0.7rem;
        gap: 0.5rem;
    }
    .sm-card-name { font-size: 0.95rem; }
    .sm-card-detail { font-size: 0.75rem; }
    .sm-card-actions {
        padding: 0.35rem 0.7rem 0.6rem 2.5rem;
        gap: 0.4rem;
    }
    .sm-card-url-row {
        padding: 0 0.7rem 0.6rem 2.5rem;
    }
    .sm-btn { padding: 0.45rem 0.75rem; font-size: 0.8rem; }
    .sm-btn-nav { padding: 0.45rem 0.55rem; font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SUGGESTION FLOW — Toast, BubbleBoy, Banners
   ═══════════════════════════════════════════════════════════════ */

/* ── Toast ── */
.sf-toast {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1rem 0.65rem 1.1rem;
    border-radius: 10px;
    background: #232830;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    color: #e8eaf0;
    font-size: 0.9rem;
    max-width: 88vw;
    transition: bottom 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
    opacity: 0;
}

.sf-toast.sf-toast-visible {
    bottom: 18px;
    opacity: 1;
}

.sf-toast.sf-toast-hiding {
    bottom: -80px;
    opacity: 0;
}

.sf-toast-info  { border-left: 3px solid #4ecdc4; }
.sf-toast-tip   { border-left: 3px solid #f7a94b; }
.sf-toast-success { border-left: 3px solid #5cb85c; }

.sf-toast-msg { flex: 1; line-height: 1.4; }

.sf-toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.2s;
}
.sf-toast-close:hover { color: rgba(255,255,255,0.8); }

/* ── BubbleBoy Floating Mascot ── */

/* Container — pinned bottom-right */
.bb-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9980;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
.bb-container.bb-visible {
    opacity: 1;
    transform: translateY(0);
}
.bb-container.bb-hiding {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Avatar button */
.bb-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 40% 35%, rgba(78,205,196,0.15), transparent 70%);
    border: 2px solid rgba(78,205,196,0.25);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 0 rgba(78,205,196,0);
    transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.bb-avatar:hover {
    transform: scale(1.08);
    border-color: rgba(78,205,196,0.5);
    box-shadow: 0 6px 28px rgba(0,0,0,0.45), 0 0 12px rgba(78,205,196,0.2);
}
.bb-avatar:active {
    transform: scale(0.95);
}

.bb-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Notification badge on avatar */
.bb-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f7a94b;
    color: #14181e;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1b1f22;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bb-badge:empty { display: none; }

/* Pulse glow to draw attention */
.bb-avatar.bb-pulse {
    animation: bbPulse 2s ease-in-out 3;
}
@keyframes bbPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 0 rgba(78,205,196,0); }
    50%      { box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 10px rgba(78,205,196,0.18); }
}

/* Celebration bounce */
.bb-avatar.bb-celebrate {
    animation: bbCelebrate 0.6s ease 3;
}
@keyframes bbCelebrate {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-14px) rotate(-6deg); }
    60%      { transform: translateY(-8px) rotate(4deg); }
}

/* ── Chat Menu ── */
.bb-menu {
    position: relative;
    width: 260px;
    max-width: calc(100vw - 48px);
    background: rgba(27, 31, 34, 0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 8px 36px rgba(0,0,0,0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    /* Hidden by default */
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    pointer-events: none;
    max-height: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.2,0.64,1),
                max-height 0.3s ease;
    box-sizing: border-box;
}
.bb-menu.bb-menu-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    max-height: 500px;
}

/* Speech bubble tail */
.bb-tail {
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: rgba(27, 31, 34, 0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
}

/* Menu header */
.bb-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.bb-menu-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.01em;
}

/* Reset main.css global button defaults inside BubbleBoy */
.bb-container button {
    height: auto;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    font-weight: 600;
    box-shadow: none;
    white-space: normal;
    padding: 0;
    display: inline;
    border: none;
    background: none;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-appearance: none;
    appearance: none;
}

/* Dismiss X */
.bb-dismiss {
    color: rgba(255,255,255,0.3);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.15rem;
    transition: color 0.2s;
    line-height: 1;
}
.bb-dismiss:hover { color: rgba(255,255,255,0.8); }

/* ── Chat Bubbles (step options) ── */
.bb-bubble {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: left;
    box-sizing: border-box;
}
.bb-bubble:last-of-type { border-bottom: none; }

.bb-bubble:hover {
    background: rgba(78,205,196,0.08);
}
.bb-bubble:active {
    background: rgba(78,205,196,0.15);
}

.bb-bubble-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1;
}
.bb-bubble-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    flex: 1;
}
.bb-bubble-arrow {
    font-size: 0.85rem;
    color: #4ecdc4;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.bb-bubble:hover .bb-bubble-arrow {
    transform: translateX(3px);
}

/* Bubble states */
.bb-bubble-active { background: rgba(78,205,196,0.06); }
.bb-bubble-active .bb-bubble-label { color: rgba(255,255,255,0.92); }

.bb-bubble-done {
    opacity: 0.55;
    cursor: default;
}
.bb-bubble-done .bb-bubble-label {
    text-decoration: line-through;
    text-decoration-color: rgba(78,205,196,0.4);
}

.bb-bubble-future {
    opacity: 0.5;
}

/* Menu footer — tour button */
.bb-menu-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.bb-tour-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.4rem 0.6rem;
    border-radius: 7px;
    background: rgba(78,205,196,0.06);
    border: 1px solid rgba(78,205,196,0.25);
    color: #4ecdc4;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.bb-tour-btn:hover {
    background: rgba(78,205,196,0.15);
    border-color: #4ecdc4;
}

/* Menu body scroll container */
.bb-menu-body {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

/* Section divider inside menu */
.bb-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bb-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
}

/* Empty state */
.bb-empty-msg {
    padding: 1rem 0.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}

/* Contextual bubble — slightly lighter */
.bb-bubble-ctx {
    opacity: 0.85;
}
.bb-bubble-ctx:hover { opacity: 1; }

/* Highlight pulse (for focus: actions pointing at elements) */
.bb-highlight {
    outline: 2px solid #4ecdc4 !important;
    outline-offset: 3px;
    animation: bbHighlight 1.5s ease-in-out 2;
}
@keyframes bbHighlight {
    0%, 100% { outline-color: rgba(78,205,196,0.3); }
    50%      { outline-color: rgba(78,205,196,0.9); }
}

/* BubbleBoy settings toggle */
.bb-assist-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
}
.bb-assist-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.bb-assist-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.bb-assist-hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    line-height: 1.4;
}

/* ── Inline Banner ── */
.sf-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(78,205,196,0.08);
    border: 1px solid rgba(78,205,196,0.2);
    margin-bottom: 0.8rem;
    font-size: 0.84rem;
    color: #c8d0dc;
    transition: opacity 0.3s;
}

.sf-banner-content { flex: 1; line-height: 1.5; }

.sf-banner-hiding { opacity: 0; }

.sf-banner-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.2s;
}
.sf-banner-close:hover { color: rgba(255,255,255,0.7); }

/* ── Reports demo-mode banner ── */
.sf-demo-report-notice {
    margin-bottom: 0.9rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(247,169,75,0.1);
    border: 1px solid rgba(247,169,75,0.3);
    color: #f7a94b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── BubbleBoy Roaming Sprite ── */
/* A larger character image that animates across the screen, separate
   from the small corner icon.  Managed by suggestion-flow.js sprite*() fns. */
.bb-sprite {
    position: fixed;
    bottom: 20px;
    right: -140px;             /* off-screen by default */
    width: 120px;
    height: 120px;
    object-fit: contain;
    pointer-events: none;
    z-index: 9970;
    opacity: 0;
    transition: opacity 0.35s ease;
    image-rendering: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* Walk across the bottom of the viewport */
.bb-sprite.bb-sprite-walk {
    opacity: 1;
    animation: bbSpriteWalk 1.8s ease-in-out forwards;
}
@keyframes bbSpriteWalk {
    0%   { right: -140px; bottom: 20px; transform: scaleX(1) translateY(0); }
    10%  { right: 5%;      bottom: 20px; transform: scaleX(1) translateY(-6px); }
    25%  { right: 25%;     bottom: 20px; transform: scaleX(1) translateY(0); }
    40%  { right: 45%;     bottom: 20px; transform: scaleX(1) translateY(-6px); }
    60%  { right: 60%;     bottom: 20px; transform: scaleX(1) translateY(0); }
    75%  { right: 70%;     bottom: 20px; transform: scaleX(1) translateY(-6px); }
    90%  { right: 80%;     bottom: 20px; transform: scaleX(1) translateY(0); }
    100% { right: calc(100% + 140px); bottom: 20px; transform: scaleX(1) translateY(0); }
}

/* Appear near an element and point at it */
.bb-sprite.bb-sprite-point {
    opacity: 1;
    right: auto;    /* position via inline style */
    animation: bbSpriteAppear 0.4s ease-out forwards;
}
@keyframes bbSpriteAppear {
    0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Celebration — bounce in place */
.bb-sprite.bb-sprite-celebrate {
    opacity: 1;
    right: calc(50% - 60px);
    bottom: 30%;
    animation: bbSpriteCelebrate 0.7s ease infinite;
}
@keyframes bbSpriteCelebrate {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-30px) rotate(-8deg); }
    50%      { transform: translateY(-10px) rotate(5deg); }
    75%      { transform: translateY(-25px) rotate(-4deg); }
}

/* Fade out */
.bb-sprite.bb-sprite-fade {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .bb-container {
        bottom: 14px;
        right: 14px;
    }
    .bb-avatar {
        width: 52px;
        height: 52px;
    }
    .bb-menu {
        width: 240px;
    }
    .sf-toast {
        width: calc(100vw - 24px);
    }
    .bb-sprite {
        width: 80px;
        height: 80px;
    }
}

/* Affiliate disclosure in footer */
.affiliate-disclosure {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.25);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ─── Feature Toggle Buttons (in section headers) ─── */
.feature-toggle-btn {
    flex-shrink: 0;
    padding: 0.2rem 0.65rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    min-width: 36px;
    text-align: center;
    margin-right: 0.3rem;
}
.feature-toggle-btn.active {
    background: rgba(78, 205, 196, 0.18) !important;
    border-color: rgba(78, 205, 196, 0.4) !important;
    color: #4ecdc4 !important;
}
.feature-toggle-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* When feature is disabled, hide section body and dim header */
.settings-section.feature-disabled .section-toggle-body {
    display: none !important;
}
.settings-section.feature-disabled .section-toggle-header h4 {
    opacity: 0.4;
}
.settings-section.feature-disabled .section-badges {
    display: none;
}
.settings-section.feature-disabled .section-chevron {
    display: none;
}

/* ─── Feature-Off: Hide features globally ─── */

/* Allergy OFF */
body.feature-off-allergy .dish-allergens-wrapper { display: none !important; }
body.feature-off-allergy #menu-allergen-filters { display: none !important; }
body.feature-off-allergy .menu-filter-group:has(#menu-allergen-filters) { display: none !important; }
body.feature-off-allergy .planner-allergy-bar { display: none !important; }
body.feature-off-allergy .meal-tag-allergen { display: none !important; }
body.feature-off-allergy .slot-allergy-badge { display: none !important; }

/* Goals OFF */
body.feature-off-goals .dish-goals-wrapper { display: none !important; }
body.feature-off-goals #menu-goal-filters { display: none !important; }
body.feature-off-goals .menu-filter-group:has(#menu-goal-filters) { display: none !important; }
body.feature-off-goals .planner-goals-bar { display: none !important; }
body.feature-off-goals .meal-tag-goal { display: none !important; }

/* Meal Slots OFF — hide slot customization, defaults to all 3 */
body.feature-off-mealSlots [data-feature="mealSlots"] .section-toggle-body { display: none !important; }

/* ─── Cuisine Tags ─── */
.dish-cuisine-wrapper {
    margin-top: 0.4rem;
}
.dish-cuisine-wrapper label {
    margin-bottom: 0.3rem;
}
.cuisine-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.cuisine-toggle-btn {
    padding: 0.25rem 0.6rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}
.cuisine-toggle-btn.active {
    background: rgba(255, 165, 0, 0.18) !important;
    border-color: rgba(255, 165, 0, 0.4) !important;
    color: #ffa500 !important;
}
.cuisine-toggle-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
.meal-tag-cuisine {
    background: rgba(255, 165, 0, 0.15) !important;
    color: #ffa500 !important;
    border-color: rgba(255, 165, 0, 0.3) !important;
}
.menu-filter-cuisine {
    border-color: rgba(255, 165, 0, 0.3) !important;
}
.menu-filter-cuisine.active {
    background: rgba(255, 165, 0, 0.18) !important;
    border-color: rgba(255, 165, 0, 0.5) !important;
    color: #ffa500 !important;
}