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

:root {
    --surface-background: #ffffff;
    --surface-alternate-background: #f5f7fb;
    --tile-background: #ffffff;
    --tile-banner-background: #FDFB01;
    --text-primary: #1a1a1a;
    --text-secondary: #5c5c5c;
    --brand-color: #8a72d7;
    --slider-progress-color: #8E743E;
    --dark-charcoal: #333333;
    --chip-active-bg: #e0e0e0;
    --card-radius: 8px;
    --app-padding: 16px;
    --header-icon-bg: #f0f0f0;
    --handle-color: #eef0f3;
    --base-font-size: 1rem;


    --md-sys-color-primary: #1976D2;
    --md-slider-handle-color: var(--tile-banner-background);
    --md-slider-active-track-color: var(--tile-banner-background);
    --md-slider-inactive-track-color: #E3F2FD;


    --md-slider-handle-shape: 0px;
    --md-slider-handle-width: 4px;
    --md-slider-handle-height: 24px;
    --md-slider-track-height: 8px;
    --md-slider-inactive-track-opacity: 0.3;

    --md-sys-color-surface-variant: #E7E0EC; /* From survey.html fallback */
    --md-sys-color-surface-container-lowest: #F3EDF7; /* From survey.html fallback */
    --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.3); /* Common M3 elevation */
    --md-sys-color-on-surface: #1C1B1F; /* From survey.html fallback */
    --md-sys-color-on-surface-variant: #49454F; /* From survey.html fallback */
    --md-sys-color-surface-container-high: #F3EDF7; /* From survey.html fallback */
    --md-sys-color-outline: #79747E; /* From survey.html fallback */
    --md-sys-color-secondary-container: #E8DEF8; /* From survey.html fallback */
    --md-sys-color-on-primary: #FFFFFF; /* From survey.html fallback */
}
body { font-family: "Yakuhanjp", "Hiragino Kaku Gothic Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--surface-background); margin: 0; color: var(--text-primary); font-size: var(--base-font-size); line-height: 1.5; }
body.modal-open-noscroll {
    padding-bottom: 0px;
    overflow: hidden;
}
/* Hide material icons while fonts are loading to prevent FOUT/FOIT */
body.fonts-loading .material-symbols-outlined {
    visibility: hidden;
}
@media (max-width: 480px) {
    body { padding-bottom: 0px; }
}
.main-header { padding: var(--app-padding); padding-bottom: 12px; background-color: var(--surface-background); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.page-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}
.header-actions-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-actions .icon-btn, .header-actions .sort-btn-header { background-color: var(--header-icon-bg); border: none; border-radius: 50%; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; font-size: 1.125rem; color: var(--text-secondary); cursor: pointer; transition: background-color 0.2s; }
.header-actions .sort-btn-header { border-radius: 20px; width: auto; padding: 0 10px; font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.header-actions .icon-btn:hover, .header-actions .sort-btn-header:hover { background-color: #e0e0e0; }
#search-input { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--handle-color); border-radius: 8px; font-size: 1.2rem; }
.quick-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.quick-filters::-webkit-scrollbar { display: none; }
.quick-filter-chip {
    padding: 7px 14px;
    background-color: var(--header-icon-bg);
    border: 1px solid var(--header-icon-bg);
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.quick-filter-chip.active {
    /* background-color: var(--chip-active-bg); */ /* Overridden below */
    /* color: var(--text-primary); */ /* Overridden below */
    /* font-weight: bold; */ /* Overridden below */
    background-color: var(--dark-charcoal);
    color: white;
    border-color: var(--dark-charcoal);
    font-weight: bold; /* Keep bold for active state */
}
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
.modal-overlay.open { opacity: 1; visibility: visible; }
#search-container { display: none; width: 100%; margin-bottom: 12px; }
#search-container.active { display: block; }

/* Search container overlay styles */
#search-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--surface-background);
    z-index: 5; /* Above page-title/header-actions, below modals */
    display: none; /* JS will toggle to flex */
    padding: 10px var(--app-padding); /* Consistent padding */
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
    gap: 8px; /* Space between input and close button */
}
#search-container.active {
    display: flex;
    align-items: center;
}
#search-input {
    flex-grow: 1; /* Input takes available space */
}
#close-search-btn {
    background-color: transparent; /* Match other icon-btns */
    border: none;
    color: var(--text-secondary);
    /* padding: 8px; /* Default icon-btn padding might be too large, adjust if needed */
    /* width, height, display, align-items, justify-content, border-radius are inherited from .icon-btn if class is kept */
}

.header-actions .icon-btn.active {
    background-color: var(--dark-charcoal);
    color: white; /* This will color the icon span inside */
    border-color: var(--dark-charcoal); /* If it had a border */
}

.dashboard-bottom-sheet {
    position: fixed; 
    bottom: 0;
    left: 50%; /* Center the sheet */
    transform: translateX(-50%); /* Center the sheet */
    width: 100%; /* Full width on small screens */
    max-width: 500px; /* Limit width on larger screens */
    background-color: var(--surface-background);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    transform: translateY(100%) translateX(-50%); /* Adjust transform for centering */
    transition: transform 0.3s ease-in-out;    z-index: 1000; display: flex; flex-direction: column;
    max-height: 85vh; /* Adjusted from 90vh to give a bit more breathing room */
}

.dashboard-bottom-sheet .modal-content {
    border-radius: 0;
    margin-top: 0;
    max-width: none;
    max-height: auto;
    animation: none;
    box-shadow: none;
}
.dashboard-bottom-sheet.open {
    transform: translateY(0) translateX(-50%); /* Adjust transform for centering when open */
}.modal-handle { width: 48px; height: 4px; background-color: var(--handle-color); border-radius: 2px; margin: 8px auto; }
.view { display: none; }
.view.active { display: block; }
.topping-list { padding: var(--app-padding); display: grid; max-width: 1200px; margin: 0 auto; }
.topping-list.view-mode-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding-bottom: 60px; /* Added padding for scroll room */ }
.topping-list.view-mode-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; padding-bottom: 60px; /* Added padding for scroll room */ }
.topping-tile { display: flex; height: 120px; border-radius: var(--card-radius); background: var(--tile-background); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15); overflow: hidden; cursor: pointer; transition: box-shadow 0.2s; }
.empty-topping-list-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px var(--app-padding);
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.topping-list.view-mode-list .topping-list-image-item {
    display: block;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
}
.topping-tile:hover { box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.2); }
.tile-left-banner { width: 20%; min-width: 40px; height: 100%; background-color: var(--tile-banner-background); border-top-right-radius: 15px; border-bottom-right-radius: 15px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.tile-main-content { flex-grow: 1; padding: 10px 12px 10px 10px; display: flex; flex-direction: column; justify-content: space-between; color: var(--text-primary); overflow: hidden; }
.tile-main-content .topping-name-new { font-size: 0.8rem; font-weight: bold; white-space: normal; line-height: 1.3; margin-bottom: 4px; max-height: 2.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; }
.tile-main-content .topping-validity-new { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topping-list.view-mode-list .topping-tile .tile-main-content .topping-name-new {
    font-size: 1rem;
}
.tile-main-content .topping-price-new { font-size: 1.125rem; font-weight: bold; color: var(--text-primary); text-align: right; margin-top: auto; }
.tile-main-content .topping-price-new .price-unit { font-size: 0.75rem; font-weight: normal; }
#filter-modal { max-height: 85vh; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--app-padding); }
.modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    position: absolute; /* Center title */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 120px); /* Adjust width to prevent overlap with potential side buttons */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-header .clear-btn { background: none; border: none; color: var(--slider-progress-color); cursor: pointer; font-size: 0.875rem; font-weight: 500; margin-left: auto; /* Push to the right */ z-index: 1; /* Ensure it's above centered title if overlap occurs */ }
.modal-content { flex-grow: 1; overflow-y: auto; padding: 0 var(--app-padding); }
.filter-group { /* border-bottom: 1px solid var(--handle-color); */ padding-top: 25px; /* Added head padding, border removed */ }
.filter-group:first-child { /* padding-top: 20px; Now covered by general .filter-group rule */ border-top:none; }
.filter-group .group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filter-group h3 { font-size: 1rem; margin: 0; color: var(--text-primary); font-weight: bold; }
/*
When accordion is expanded, the .group-header will now use its default margin-bottom: 20px.
The rule below that set it to 0 is removed.
*/
.filter-group.accordion-expanded {
    padding-bottom: 20px; /* Add space at the bottom of the group when accordion is expanded */
}
/* .filter-group .group-header .range-label { margin-left: auto; margin-right: 8px; } Removed as labels are moved */
.accordion-content .range-label {
    display: block; /* To allow text-align to work */
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 8px; /* Add some space above the slider */
}
.filter-group md-slider[disabled] { 
    --md-slider-handle-color: #d9d9d9;
    --md-slider-inactive-track-color: #f5f5f5; 
}
.pill-button-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: var(--app-padding);
    border-top: 1px solid var(--handle-color);
}
.apply-filters-btn { padding: 12px 24px; background-color: var(--dark-charcoal); color: white; border: none; border-radius: 20px; font-size: 1rem; font-weight: bold; cursor: pointer; }

.accordion-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 4px; /* Give a little space */
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}
.accordion-toggle-btn .material-symbols-outlined {
    font-size: 1.5rem;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding-top 0.3s ease-out;
    padding-top: 0; 
}
.accordion-content.open {
    padding-top: 10px; /* Add padding when open, this will also animate */
    /* max-height will be set by JavaScript */
}
#sort-modal .modal-content, #display-modal .modal-content { padding: 8px 0; }
.sort-option { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--app-padding); cursor: pointer; font-size: 1rem; }
.sort-option:hover { background-color: #f9f9f9; }
.sort-option .check { font-size: 1.25rem; color: var(--brand-color); font-weight: bold; }
.material-symbols-outlined { vertical-align: middle; } 

.topping-category-title {
    /* grid-column: 1 / -1; is set via JS inline style */
    /* Default spacing for category titles */
    margin-top: 24px;    /* Space above the title */
    margin-bottom: 0px; /* Space between the title and its items */
    margin-left: 0;
    margin-right: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-primary);
}
.topping-category-title.first-category-title {
    margin-top: 0; /* No extra top margin for the very first category title */
}
.tile-tags-container {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 4px;
}
.tag-chip {
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}
.tag-chip.limited { background-color: #ff4d4f; color: white; font-weight: bold; }
.tag-chip.category { background-color: var(--header-icon-bg); color: var(--text-secondary); }

.tile-info-line {
    margin: 4px 0;
}


.topping-list.view-mode-list .tile-info-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topping-list.view-mode-list .tile-info-line .topping-validity-new {
    min-width: 0;
    flex-shrink: 1;
    margin-right: 8px;
}
.topping-list.view-mode-list .tile-info-line .tile-tags-container {
    flex-shrink: 0;
}


.topping-list.view-mode-grid .tile-info-line .topping-validity-new {
    margin-bottom: 4px;
    margin-right: 0;
}


#validity-slider-container,
#data-slider-container,
#price-slider-container {
    position: relative;
    margin-top: 8px;
    height: auto;
}

#validity-range-slider,
#data-range-slider,
#price-range-slider {
    width: 100%;
}

#apply-filters-btn {
    /* padding: 12px 100px; /* Original wide padding */
    padding: 12px 50px; /* Internal padding for the button */
    grid-column: 2 / 3; /* Place in the center column */
    justify-self: center; /* Center the button within its column */
}

.modal-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left spacer (for result count) | Button | Right spacer */
    align-items: center;
    padding: var(--app-padding); /* Overall padding (top, right, bottom, left) */
    border-top: 1px solid var(--handle-color);
    gap: 8px; /* Gap between grid columns */
}

.footer-result-count {
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--text-primary);
    grid-column: 1 / 2; /* Occupy the first column (left spacer part) */
    justify-self: start; /* Align to the start of this column */
}

.empty-topping-list-message {
    white-space: normal;
}

.empty-topping-list-message a {
    color: var(--brand-color);
    text-decoration: underline;
}

#for-you-reset-container {
    text-align: center;
    padding: 10px 16px;
}

#for-you-reset-link {
    color: var(--brand-color);
    text-decoration: underline;
    font-size: 0.9em;
}

/* Basic button styling (for survey.html and general dashboard use) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px; /* survey-submit-btn has more specific padding */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    border-radius: 20px; /* Full pill shape, matches survey.html answer-choice-btn */
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    gap: 8px;
    line-height: 1.25rem; /* 20px */
    letter-spacing: 0.007rem; /* 0.1px */
    min-height: 40px; /* M3 spec */
    box-sizing: border-box;
}

/* Primary button styling */
.btn-primary {
    background-color: var(--md-sys-color-primary); /* Uses #1976D2 from existing dashboardstyle.css */
    color: var(--md-sys-color-on-primary); /* Uses #FFFFFF, added above */
    border-color: var(--md-sys-color-primary);
}

.btn-primary:hover {
    /* M3 state layer: Primary + 8% OnPrimary */
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);
}

.btn-primary:focus {
    /* M3 state layer: Primary + 12% OnPrimary */
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary) 12%);
}

.btn-primary:active {
    /* M3 state layer: Primary + 12% OnPrimary */
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 88%, var(--md-sys-color-on-primary) 12%);
}

.btn-primary:disabled {
    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
    border-color: transparent;
    cursor: not-allowed;
}
.official-site-button {
    display: block;
    width: calc(100% - 32px); /* Adjust width considering padding */
    margin: 16px auto; /* Centered with top/bottom margin */
    padding: 12px 20px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
}

/* Styles for Topping Detail Modal Header */
#topping-detail-modal .modal-title-wrapper { /* Styles for the new wrapper around icon and title */
    display: flex;
    align-items: baseline; /* Align icon with the baseline of the first line of the title */
    /* gap: 10px; removed as icon will have margin-right */
    flex-grow: 1;        /* Allow this wrapper to take up available space before the close button */
    min-width: 0;        /* Important for flex children that might overflow (e.g. long text) */
    margin-right: 8px; /* Add some space between the title wrapper and the close button */
    overflow: hidden; /* Prevent content from overflowing if text is extremely long and doesn't wrap */
    margin-bottom: 8px; /* Add space below the title/icon wrapper */
}
/* In dashboardstyle.css */
#topping-detail-modal .modal-content {
    position: relative; /* Needed for absolute positioning of arrows */
}

#topping-detail-image-container {
    position: relative; /* This was already inline, but good to ensure */
    /* Add some padding if arrows are too close to the edge of this container */
    /* padding-left: 40px; /* Example: space for left arrow */
    /* padding-right: 40px; /* Example: space for right arrow */
}

.swipe-arrow {
    position: absolute;
    top: 50%; /* Vertically center relative to the image container */
    transform: translateY(-50%);
    background-color: transparent; 
    color: rgba(0, 0, 0, 0.45); /* Lighter grey for the icon */
    border: none;
    border-radius: 50%;
    width: 40px;  /* Increased tap target slightly */
    height: 40px; /* Increased tap target slightly */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7; /* Default opacity */
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    display: none; /* Hidden by default, shown by JS */
}

.swipe-arrow:hover {
    color: rgba(0, 0, 0, 0.7); /* Slightly darker on hover */
    opacity: 1;
}

.swipe-arrow.prev {
    left: -28px; /* Pushes arrow further left, so it's beside the image */
}

.swipe-arrow.next {
    right: -28px; /* Pushes arrow further right, so it's beside the image */
}

.swipe-arrow .material-symbols-outlined {
    font-size: 20px; 
}

/* Ensure modal content doesn't get hidden by header if arrows are very wide */
#topping-detail-modal .modal-content {
    position: relative;
    /* overflow: visible; /* If arrows were to go outside modal bounds, but they are inside image container now */
}

#topping-detail-modal-icon {
    font-size: 1.6em;    /* Adjust to look good with 1.2em title */
    color: var(--text-primary);
    flex-shrink: 0;      /* Prevent icon from shrinking */
    display: flex;       /* To help center the icon glyph itself */
    align-items: center;
    margin-right: 8px; /* Space between icon and title text */
}

#topping-detail-modal-title { /* Specific styles for the detail modal title */
    font-size: 1em;    /* As previously set inline */
    font-weight: bold;
    margin: 0;           /* Remove default h2 margin */
    line-height: 1.3;    /* For better readability if title wraps */
    white-space: normal; /* Allow title text to wrap to multiple lines */
    word-break: break-word; /* Break long words to prevent overflow */
    min-width: 0; /* Helps flex items to wrap correctly when content is long */
}

#topping-detail-modal #close-topping-detail-modal-btn { /* Ensure close button doesn't shrink */
    flex-shrink: 0;
}

/* Styles for Favorite Button in Topping Detail Modal */
#favorite-topping-btn {
    position: absolute;
    bottom: -50px; /* Positions the button's bottom edge 50px below its relative parent's (the image wrapper) bottom edge */
    right: 16px;  /* Adjust as needed */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #000; /* Default color for outlined heart */
    font-size: 28px; /* Adjust icon size */
}

/* Skeleton Loader Styles */
.skeleton-topping-tile {
    display: flex;
    height: 120px; /* Matches .topping-tile height */
    border-radius: var(--card-radius, 8px);
    background-color: #f0f0f0; /* Lighter base for skeleton */
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08); /* Softer shadow */
    overflow: hidden;
    /* Margin is handled by grid gap, similar to .topping-tile */
}

.skeleton-left-banner {
    width: 20%; /* Matches .tile-left-banner */
    min-width: 40px; /* Matches .tile-left-banner */
    /* background-color: #e0e0e0; Slightly darker than tile base for contrast */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 5px; /* Give icon some breathing room if banner is very narrow */
}

.skeleton-icon {
    width: 30px; /* Approximate icon size */
    height: 30px;
    background-color: #dcdcdc; /* Placeholder color for icon */
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.skeleton-main-content {
    flex-grow: 1;
    padding: 10px 12px 10px 10px; /* Matches .tile-main-content padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes price to bottom */
}

.skeleton-text {
    background-color: #dcdcdc; /* Placeholder color for text lines */
    border-radius: 4px;
    height: 0.9em; /* Approximate text line height */
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}
.skeleton-text.long { width: 90%; }
.skeleton-text.short { width: 60%; }

.skeleton-price {
    background-color: #dcdcdc; /* Placeholder color for price */
    border-radius: 4px;
    height: 1.1em; /* Approximate price text height */
    width: 40%;
    margin-top: auto; /* Ensures it's at the bottom if content above is short */
    position: relative;
    overflow: hidden;
}

/* Shimmer Animation for skeleton placeholders */
@keyframes shimmer-animation {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton-icon::after,
.skeleton-text::after,
.skeleton-price::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 80%);
    animation: shimmer-animation 1.5s infinite linear;
}

/* Staggered Animation for Topping Cards */
.topping-tile,
.topping-list-image-item {
    opacity: 0;
    transform: translateY(20px);
    /* REMOVE transition from base style */
}

.topping-tile.visible,
.topping-list-image-item.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out; /* ADD transition here for initial stagger */
}

/* Sliding Animation for Sorting */
.topping-tile.sorting,
.topping-list-image-item.sorting {
    transition: transform 0.25s ease-in-out; /* Adjust duration as needed */
}


@media (prefers-color-scheme: dark) {
  :root {
    --surface-background: #181818;
    --surface-alternate-background: #232323;
    --tile-background: #232323;
    --tile-banner-background: #FEFA02;
    --text-primary: #f3f3f3;
    --text-secondary: #b0b0b0;
    --brand-color: #b39ddb;
    --slider-progress-color: #bfa76a;
    --dark-charcoal: #cccccc;
    --chip-active-bg: #333344;
    --header-icon-bg: #232323;
    --handle-color: #333333;

    --md-sys-color-primary: #90caf9;
    --md-slider-handle-color: var(--tile-banner-background);
    --md-slider-active-track-color: var(--tile-banner-background);
    --md-slider-inactive-track-color: #333c4d;

    --md-sys-color-surface-variant: #23223a;
    --md-sys-color-surface-container-lowest: #23223a;
    --md-sys-elevation-level1: 0px 1px 3px 1px rgba(0,0,0,0.9), 0px 1px 2px 0px rgba(0,0,0,1);
    --md-sys-color-on-surface: #f3f3f3;
    --md-sys-color-on-surface-variant: #b0b0b0;
    --md-sys-color-surface-container-high: #23223a;
    --md-sys-color-outline: #888888;
    --md-sys-color-secondary-container: #3c3479;
    --md-sys-color-on-primary: #231f27;
  }

  /* Make specific icons black in dark mode if they are on a light background */
  /* Add the class "js-dark-mode-force-black" to the relevant <span> tags in your HTML */
  /* e.g., <span class="material-symbols-outlined js-dark-mode-force-black" style="...">database</span> */
  .js-dark-mode-force-black {
    color: #1a1a1a !important; /* Overrides inline style, uses original light-mode text primary */
  }

  /* Ensure apply-filters-btn text is black in dark mode for visibility on its light grey background */
  #apply-filters-btn {
    color: #1a1a1a; /* Original light-mode text primary */
  }

  /* Ensure topping detail modal icons are white in dark mode */
  #topping-detail-modal #close-topping-detail-modal-btn,
  #favorite-topping-btn {
    color: var(--text-primary); /* --text-primary is light in dark mode */
  }

  /* Make swipe arrows in topping detail modal white for visibility */
  #topping-detail-modal .swipe-arrow .material-symbols-outlined {
    /* --text-primary is #f3f3f3 (light/white) in dark mode.
       The default .swipe-arrow color for the icon (inherited) is dark (rgba(0,0,0,0.45)). */
    color: var(--text-primary);
  }

  /* Make text on active quick filter chips black for visibility in dark mode */
  .quick-filter-chip.active {
    /* The general .quick-filter-chip.active rule sets 'color: white'.
       In dark mode, its background (var(--dark-charcoal)) becomes light grey (#cccccc).
       This rule overrides the text color to black for better contrast. */
    color: #1C1B1F; /* Black text */
  }

  /* Ensure active header action button icons are black for visibility on their light grey background */
  .header-actions .icon-btn.active {
    color: #1C1B1F; /* Black text, same as active quick filter chip */
  }

  /* Ensure sort option text in sort modal is visible on hover in dark mode */
  #sort-modal .sort-option:hover {
    /* --brand-color is #b39ddb in dark mode. Default text is light, hover bg is light. */
    color: var(--brand-color);
  }
}