:root {
    --page-bg: #f0f2f5;
    --sidebar-bg: #ffffff;
    --content-bg: #F9F9F9;
    --surface-color: #FFFFFF;

    --primary-brand-color: #8ba762;
    --primary-brand-light: #f1f5ed;
    --accent-color: #e76f51;
    --secondary-accent-color: #f4a261;

    --primary-text-color: #264653;
    --secondary-text-color: #6c757d;
    --border-color: #E9ECEF;
    --danger-color: #e76f51;
    --shadow-color: rgba(139, 167, 98, 0.1);

    /* Sizing & Spacing */
    --spacing-s: 8px;
    --spacing-m: 12px;
    --spacing-l: 16px;
    --spacing-xl: 24px;

    /* NEW: Decoupled component padding */
    --header-padding-v: 16px; /* Vertical padding for headers */
    --header-padding-h: 16px; /* Horizontal padding for headers */
    --footer-padding-v: 16px;
    --footer-padding-h: 16px;
    --sheet-padding-v: 16px;
    --sheet-padding-h: 16px;


    /* Borders & Radii */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-round: 50%;
    --border-base: 1px solid var(--border-color);

    /* Font Sizes */
    --font-size-s: 0.85rem;
    --font-size-m: 1rem;
    --font-size-l: 1.25rem;
    --font-size-xl: 1.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--page-bg); color: var(--primary-text-color);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    /* Safe area padding is now handled by components */
}

/* Shared layout patterns */
.splash-content,
#auth-gateway-screen .auth-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes grow-sprout {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes fade-in-text {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    to { opacity: 0; }
}

#splash-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background-color: var(--primary-brand-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    padding-top: env(safe-area-inset-top);
}
.splash-hidden {
    animation: fadeOut 0.5s ease-out forwards;
}

#splash-logo-img {
    height: 80px;
    width: auto;
    transform-origin: bottom;
    animation: grow-sprout 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.1s;
    margin-bottom: var(--spacing-m);
    background: #fff;
}
#splash-logo-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    opacity: 0;
    animation: fade-in-text 0.6s ease-out forwards;
    animation-delay: 0.5s;
    margin: 0;
}
#splash-subtitle {
    position: absolute;
    bottom: calc(40px + env(safe-area-inset-bottom));
    padding: 0 var(--spacing-xl);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1.1rem;
    opacity: 0;
    animation: fade-in-text 0.6s ease-out forwards;
    animation-delay: 0.8s;
    margin-top: 0;
}

#auth-container {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 199;
    background-color: var(--page-bg);
    display: none;
}
.auth-page {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    display: flex;
    flex-direction: column;
}
.auth-page.active {
    opacity: 1;
    visibility: visible;
}

.onboarding-slides-container {
    width: 100%; height: 100%;
    position: relative;
    flex-grow: 1;
    padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
}
.onboarding-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xl);
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-text-color);
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    gap: var(--spacing-xl);
}
.onboarding-slide svg {
    color: var(--primary-brand-color);
}
.onboarding-slide.active {
    opacity: 1;
}

#onboarding-progress-dots {
    position: absolute;
    bottom: calc(40px + env(safe-area-inset-bottom, env(safe-area-inset-bottom)));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-s);
    flex-shrink: 0;
}
#onboarding-progress-dots .dot {
    width: var(--spacing-s);
    height: var(--spacing-s);
    border-radius: var(--radius-round);
    background-color: var(--border-color);
    transition: background-color 0.3s ease;
}
#onboarding-progress-dots .dot.active {
    background-color: var(--primary-brand-color);
}

#auth-gateway-screen .auth-content {
    padding: var(--spacing-xl);
    width: 100%;
    height: 100%;
    padding-top: calc(var(--spacing-xl) + var(--safe-area-inset-top, env(safe-area-inset-top)));
    padding-bottom: calc(var(--spacing-xl) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
}
#auth-gateway-screen .app-logo {
    height: 60px;
    width: auto;
    margin-bottom: var(--spacing-m);
}
#auth-gateway-screen span {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-text-color);
    margin-bottom: 48px;
}
#auth-gateway-screen .button-google,
#auth-gateway-screen .button-outline {
    width: 100%;
    max-width: 350px;
    margin-bottom: var(--spacing-l);
}

.auth-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--header-padding-v) var(--header-padding-h);
    background: var(--surface-color);
    border-bottom: var(--border-base);
    padding-top: calc(var(--header-padding-v) + var(--safe-area-inset-top, env(safe-area-inset-top)));
    padding-left: calc(var(--header-padding-h) + var(--safe-area-inset-left, env(safe-area-inset-left)));
    padding-right: calc(var(--header-padding-h) + var(--safe-area-inset-right, env(safe-area-inset-right)));
}
.auth-header-content {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.auth-header .app-logo {
    height: 32px;
    width: auto;
    margin-right: var(--spacing-s);
}
.auth-header .auth-title {
    font-size: var(--font-size-l);
    font-weight: 500;
    white-space: nowrap;
}
.auth-back-button {
    z-index: 2;
}
.auth-header-spacer {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.auth-form-container {
    padding: var(--spacing-xl);
    flex-grow: 1;
    overflow-y: auto;
}
.auth-form-container .form-group {
    margin-bottom: 1.5rem;
}
.auth-form-container .button-primary {
    margin-top: 1.5rem;
}
.auth-link {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    text-decoration: underline;
    margin-top: var(--spacing-xl);
    display: block;
    text-align: center;
}

.app-layout {
    display: none;
    height: 100%;
    width: 100%;
}
#sidebar { display: none; }
#main-content { width: 100%; height: 100%; }
#app-container { height: 100%; position: relative; overflow: hidden; }

.screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; background-color: var(--content-bg);
    transform: translateX(100%); transition: transform 0.3s ease-in-out; opacity: 0;
}
.screen.active { transform: translateX(0); opacity: 1; z-index: 1; }
#collection-screen.active { transform: translateX(0); }

.screen > main {
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* CORRECTED: Base header uses explicit padding variables */
header {
    flex-shrink: 0; display: flex; align-items: center;
    padding: var(--header-padding-v) var(--header-padding-h);
    background: var(--surface-color);
    color: var(--primary-text-color);
    border-bottom: var(--border-base);
    z-index: 10;
    justify-content: space-between;
}

/* CORRECTED: Safe-area-aware headers now add insets to the base padding */
#collection-screen header,
#details-screen header,
    /* --- NEW: Add wizard header --- */
#add-wizard-screen header,
    /* --- END NEW --- */
#gallery-screen header,
#settings-screen header {
    padding-top: calc(var(--header-padding-v) + var(--safe-area-inset-top, env(safe-area-inset-top)));
    padding-left: calc(var(--header-padding-h) + var(--safe-area-inset-left, env(safe-area-inset-left)));
    padding-right: calc(var(--header-padding-h) + var(--safe-area-inset-right, env(safe-area-inset-right)));
    /* padding-bottom is still var(--header-padding-v) from the base 'header' rule */
}


#details-screen header {
    align-items: center;
    justify-content: space-between;
}
.header-content-stack {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--spacing-l);
    margin-right: var(--spacing-l);
    min-width: 0;
}
#details-screen header h1 {
    font-size: var(--font-size-l);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    padding: 0;
    margin: 0;
}
#details-screen header .edit-icon {
    color: var(--secondary-text-color);
    cursor: pointer;
    flex-shrink: 0;
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

header .header-title {
    flex-grow: 1;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
    font-size: var(--font-size-l);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-spacer {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.app-logo { display: block; margin-right: var(--spacing-s);}
#mobile-logo {
    display: flex; align-items: center; font-size: var(--font-size-l);
    font-weight: 500; flex-grow: 1; color: var(--primary-text-color);
}
#mobile-logo .app-logo { height: 40px; width: auto; }

#dashboard-header {
    padding: var(--spacing-l);
    background-color: var(--surface-color);
}
#dashboard-header .greeting {
    /* --- MODIFICATION --- */
    font-size: 1.5rem; /* Was 1.75rem */
    font-weight: 700;
    margin-bottom: var(--spacing-s);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* --- END MODIFICATION --- */
}
#dashboard-header .task-summary {
    font-size: var(--font-size-m);
    color: var(--secondary-text-color);
    margin-bottom: var(--spacing-l);
}
#dashboard-header .task-summary:last-child {
    margin-bottom: 0;
}
#dashboard-header .daily-quote {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--secondary-text-color);
    border-left: 3px solid var(--primary-brand-color);
    padding-left: var(--spacing-m);
}
#dashboard-header .task-summary .count-overdue,
#dashboard-header .task-summary .count-today {
    font-weight: 700;
}
#dashboard-header .task-summary .count-overdue {
    color: var(--danger-color);
}
#dashboard-header .task-summary .count-today {
    color: var(--primary-brand-color);
}

#filter-controls {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: var(--spacing-m) var(--spacing-l);
    background-color: var(--surface-color);
    border-top: var(--border-base);
    border-bottom: var(--border-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
}
#search-input {
    flex-grow: 1;
    margin-bottom: 0;
    padding: var(--spacing-m);
    font-size: var(--font-size-m);
    border: var(--border-base);
    background-color: var(--page-bg);
    border-radius: var(--radius-s);
}
#search-input:focus {
    outline: none;
    border-color: var(--primary-brand-color);
    box-shadow: 0 0 0 2px var(--primary-brand-light);
}
#open-filter-button {
    flex-shrink: 0;
    margin-left: 0;
    background-color: var(--page-bg);
    border: var(--border-base);
    border-radius: var(--radius-round);
    width: 44px;
    height: 44px;
    color: var(--secondary-text-color);
}
#open-filter-button:focus {
    outline: none;
    border-color: var(--primary-brand-color);
    box-shadow: 0 0 0 2px var(--primary-brand-light);
}

#active-filters-container {
    padding: var(--spacing-s) var(--spacing-l) var(--spacing-m);
    display: none; /* --- MODIFICATION: Changed from flex to none --- */
    flex-wrap: wrap;
    gap: var(--spacing-s);
    background-color: var(--surface-color);
    border-bottom: var(--border-base);
    /* min-height: 40px; */ /* --- MODIFICATION: Removed min-height --- */
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--spacing-m);
    border-radius: 20px;
    background-color: var(--accent-color);
    color: white;
    font-size: var(--font-size-s);
    font-weight: 500;
    cursor: default;
}
.filter-pill .remove-filter {
    margin-left: 6px;
    width: var(--spacing-l);
    height: var(--spacing-l);
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.filter-pill .remove-filter svg {
    width: var(--spacing-m);
    height: var(--spacing-m);
    stroke-width: 3;
}
#clear-all-filters-button {
    color: var(--secondary-text-color);
    font-size: var(--font-size-s);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px 0;
}

/* --- Base Button Styles --- */
.button-primary, .text-button, .icon-button, .fab, .button-danger, .button-google, .button-outline {
    border: none;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
/* --- MODIFICATION: Added position: relative for nested inputs --- */
.button-primary, .button-google, .button-outline {
    position: relative;
}
/* --- END MODIFICATION --- */


/* Base for full-width buttons */
.button-primary, .button-google, .button-outline, .button-danger {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-m);
    font-size: var(--font-size-m);
    font-weight: 500;
    gap: var(--spacing-s);
}

.button-primary {
    background-color: var(--accent-color);
    color: white;
}
.button-danger {
    background: none;
    color: var(--danger-color);
    text-align: center;
    padding: var(--spacing-m);
    margin-top: var(--spacing-s);
    font-size: 0.9rem;
}
.button-google {
    background-color: #FFFFFF;
    color: #444;
    border: var(--border-base);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    gap: var(--spacing-m);
}
.button-google svg {
    width: 20px;
    height: 20px;
}
.button-outline {
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.text-button {
    font-size: var(--font-size-m);
    font-weight: 500;
    padding: var(--spacing-s);
    color: var(--primary-text-color);
}
.icon-button {
    width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;
    border-radius: var(--radius-round); color: var(--primary-text-color); flex-shrink: 0;
}
.fab {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 56px; height: 56px;
    background-color: var(--accent-color);
    color: white;
    border-radius: var(--radius-round);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 5;
    bottom: calc(var(--spacing-xl) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
    right: calc(var(--spacing-xl) + var(--safe-area-inset-right, env(safe-area-inset-right)));
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 111, 81, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(231, 111, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 111, 81, 0); }
}
.fab.pulse-animate {
    animation: pulse 2s infinite;
}

/* --- NEW: HIGHLIGHT PULSE ANIMATION --- */
@keyframes highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 111, 81, 0.7); }
    70% { box-shadow: 0 0 0 20px rgba(231, 111, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 111, 81, 0); }
}
.highlight-pulse {
    animation: highlight-pulse 1.5s 3; /* Run 3 times */
    z-index: 103; /* Ensure it's on top */
}
/* --- END NEW --- */

/* CORRECTED: Footer uses explicit padding variables */
footer {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: var(--footer-padding-v) var(--footer-padding-h);
    background-color: var(--surface-color);
    border-top: var(--border-base);
    z-index: 15;
    padding-bottom: calc(var(--footer-padding-v) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
    padding-left: calc(var(--footer-padding-h) + var(--safe-area-inset-left, env(safe-area-inset-left)));
    padding-right: calc(var(--footer-padding-h) + var(--safe-area-inset-right, env(safe-area-inset-right)));
}
/* --- NEW: Wizard Footer --- */
#add-wizard-screen footer {
    display: flex;
    gap: var(--spacing-m);
}
#wizard-back-button {
    width: 30%;
    max-width: 120px;
}
#wizard-next-button {
    flex-grow: 1;
}
/* --- END NEW --- */

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Form Styling --- */
/* --- REMOVED: .form-section --- */

.form-group { margin-bottom: 1.5rem; }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
    display: block;
    margin-bottom: var(--spacing-s);
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}

/* Base input/select styles */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.task-name-row .task-name-input {
    width: 100%;
    padding: var(--spacing-m);
    font-size: var(--font-size-m);
    border: var(--border-base);
    background-color: var(--page-bg);
    border-radius: var(--radius-s);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group input:focus,
.form-group input:focus-visible,
.form-group select:focus,
.form-group select:focus-visible,
.task-name-row .task-name-input:focus,
.task-name-row .task-name-input:focus-visible {
    outline: none;
    border-color: var(--primary-brand-color);
    box-shadow: 0 0 0 2px var(--primary-brand-light);
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-m) center;
    padding-right: 40px;
}
/* --- MODIFICATION: Replaced old .visually-hidden rule --- */
.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
/* --- END MODIFICATION --- */
.form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    margin-top: 4px;
}

#default-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    margin-bottom: var(--spacing-m);
}
.default-tag-chip {
    padding: 4px var(--spacing-m);
    border-radius: var(--radius-l);
    background: none;
    border: 1px solid var(--primary-brand-color);
    color: var(--primary-brand-color);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}
.default-tag-chip.disabled {
    background-color: var(--border-color);
    border-color: var(--border-color);
    color: var(--secondary-text-color);
    cursor: not-allowed;
}

/* --- REMOVED: #add-item-form, #photo-dropzone, #image-preview --- */
/* --- REMOVED: .task-input-row, .task-name-row, .schedule-options-row, .frequency-container --- */
/* --- REMOVED: .add-task-button --- */


/* --- NEW: WIZARD STYLES (CORRECTED) --- */
#add-wizard-screen main {
    padding: 0;
    overflow-x: hidden; /* --- FIX: Explicitly hide horizontal overflow --- */
    flex-grow: 1; /* Ensure main fills the space */
    position: relative; /* Add for positioning context */
}

#wizard-steps-container {
    display: flex;
    width: 300%; /* 3 steps * 100% width */
    height: 100%;
    transition: transform 0.3s ease-in-out;
    /* --- FIX: Position absolutely within main --- */
    position: absolute;
    top: 0;
    left: 0;
}

.wizard-step {
    /* --- FIX: Width is 1/3 of the 300% container --- */
    width: 33.3333%;
    height: 100%;
    padding: var(--spacing-xl);
    overflow-y: auto; /* Each step scrolls independently */
    flex-shrink: 0;
}

.wizard-step h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* Step 1: Category */
#wizard-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-m);
}

.category-choice-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    /* --- FIX: Removed aspect-ratio, added fixed height --- */
    height: 140px;
    background-color: var(--surface-color);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-m);
    cursor: pointer;
    padding: var(--spacing-m);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.category-choice-button .category-icon {

    height: 80px;
    /* --- NEW: Added object-fit for images --- */
    object-fit: contain;
    /* --- END NEW --- */
}

.category-choice-button span {
    font-size: var(--font-size-m);
    font-weight: 500;
    color: var(--primary-text-color);
}

.category-choice-button:hover {
    background-color: var(--page-bg);
}

.category-choice-button.selected {
    border-color: var(--primary-brand-color);
    background-color: var(--primary-brand-light);
    box-shadow: 0 0 0 2px var(--primary-brand-color);
}

/* Step 2: Photo & Name */
#wizard-photo-dropzone {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 100%; height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-m);
    color: var(--secondary-text-color); cursor: pointer; position: relative; overflow: hidden;
    background-color: var(--page-bg);
    margin-bottom: var(--spacing-xl);
}
#wizard-photo-dropzone.has-image {
    border-style: solid;
    border-color: var(--primary-brand-color);
    background-color: transparent;
}
#wizard-photo-dropzone.has-image span, #wizard-photo-dropzone.has-image svg { display: none; }
#wizard-image-preview {
    position: absolute; width: 100%; height: 100%;
    object-fit: cover;
    /* --- FIX: Removed radius, parent handles it --- */
}
#wizard-image-preview.hidden { display: none; }


/* --- END NEW WIZARD STYLES --- */


.content-padding { padding: var(--spacing-l); }
/* --- NEW: Space for FAB --- */
#details-screen main {
    padding-bottom: 100px;
}
/* --- END NEW --- */

.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-l); }
.section-header h2 { font-size: 1.1rem; }
a { color: var(--primary-brand-color); text-decoration: none; font-weight: 500; }
.text-danger { display: block; text-align: center; margin-top: var(--spacing-xl); color: var(--danger-color); }
.empty-state { text-align: center; color: var(--secondary-text-color); padding: 4rem 1rem; }
.empty-state p {
    font-size: 1.1rem;
    line-height: 1.5;
}
.empty-state p:first-child {
    font-weight: 500;
    color: var(--primary-text-color);
}

#item-grid { display: flex; flex-direction: column; gap: var(--spacing-m); padding: var(--spacing-m); }
.list-item {
    display: flex; align-items: center; background-color: var(--surface-color);
    padding: var(--spacing-m); border-radius: var(--radius-m); box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer;
}
/* --- MODIFICATION: Updated .list-item-thumb --- */
.list-item .image-loader-wrapper {
    width: 60px; height: 60px; border-radius: var(--radius-s);
    margin-right: var(--spacing-l); flex-shrink: 0;
}
.list-item-thumb {
    width: 100%; height: 100%; border-radius: var(--radius-s); object-fit: cover;
}
/* --- END MODIFICATION --- */
.list-item-details { flex-grow: 1; min-width: 0; }
.list-item-title {
    font-size: 1.1rem; font-weight: 500; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.list-item-next-task, .list-item-photo-count {
    display: flex; align-items: center; font-size: var(--font-size-s); color: var(--secondary-text-color);
}
.list-item-next-task.overdue { color: var(--danger-color); font-weight: 500; }
.list-item-next-task svg, .list-item-photo-count svg { margin-right: 6px; flex-shrink: 0; }
.list-item-chevron { color: var(--border-color); margin-left: var(--spacing-s); }
.item-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.item-category-text {
    color: var(--primary-brand-color);
    font-size: var(--font-size-s);
    font-weight: 500;
    margin-right: 6px;
}
.item-tag {
    background-color: var(--border-color);
    color: var(--secondary-text-color);
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- MODIFICATION: Updated #main-image-container --- */
#main-image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    position: relative;
    cursor: pointer;
    display: flex;
    /* Center the spinner */
    align-items: center;
    justify-content: center;
    background-color: #000;
    overflow: hidden; /* This is key to clipping the scaled bg */
}
/* --- NEW RULE: Blurred background image --- */
#main-plant-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the container */
    filter: blur(20px);
    transform: scale(1.1); /* Scale up to hide blurred edges */
    z-index: 0;
    /* Opacity is now handled by .image-loader-wrapper img */
}
/* --- UPDATED RULE: Foreground image --- */
#main-plant-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1; /* Sit on top of the blurred background */
    /* Opacity is now handled by .image-loader-wrapper img */
}
/* --- END MODIFICATION --- */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-m);
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    font-weight: 500;
    z-index: 2; /* Sit on top of the main image */
}

#details-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.details-category-text {
    color: var(--primary-brand-color);
    font-size: var(--font-size-s);
    font-weight: 500;
    margin-right: 6px;
}
.details-tag-pill {
    background-color: var(--border-color);
    color: var(--secondary-text-color);
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
}

/* --- STYLES FOR UPCOMING TASKS (re-uses .task-item) --- */
#today-task-list,
#upcoming-task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--surface-color);
    border-radius: var(--radius-m);
    overflow: hidden;
}
/* --- REMOVED .task-date-header --- */
.task-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-l); /* --- MODIFICATION: Use var --- */
    border-bottom: var(--border-base);
    cursor: pointer;
}
.task-item:last-child { border-bottom: none; }
.task-item .task-info { flex-grow: 1; }
.task-item .task-name { font-weight: 500; margin-bottom: 4px; }
.task-item .task-due-date { color: var(--secondary-text-color); font-size: 0.9rem; }
.task-due-date.overdue { color: var(--danger-color); font-weight: 500; }
.log-task-icon {
    width: 40px; height: 40px; border-radius: var(--radius-round); border: var(--border-base); display: flex;
    justify-content: center; align-items: center; color: var(--secondary-text-color);
    transition: transform 0.1s ease, background-color 0.2s ease;
    cursor: pointer;
}
.log-task-icon:active {
    transform: scale(0.9);
    background-color: var(--page-bg);
}
.log-task-icon.logged {
    background-color: var(--primary-brand-color);
    border-color: var(--primary-brand-color);
    color: white;
    cursor: default;
    pointer-events: none;
}
/* --- END UPCOMING TASK STYLES --- */


/* --- STYLES FOR NEW GROWTH LOG PREVIEW --- */
#growth-log-preview {
    background-color: var(--surface-color);
    border-radius: var(--radius-m);
    overflow: hidden;
}
.log-preview-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-l);
    border-bottom: var(--border-base);
    gap: var(--spacing-l);
}
.log-preview-item:last-child {
    border-bottom: none;
}
.log-preview-icon {
    /* --- THIS IS THE FIX --- */
    /* Generic container for icon */
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- MODIFICATION: Add overflow hidden for thumbnail --- */
    overflow: hidden;
    /* --- END MODIFICATION --- */
}
.log-preview-icon.task {
    /* Styles for TASK icon */
    background-color: var(--primary-brand-light);
    color: var(--primary-brand-color);
}
.log-preview-icon.photo {
    /* Styles for PHOTO icon */
    background-color: var(--border-color); /* Use placeholder bg */
    color: var(--primary-brand-color);
}
/* --- NEW: Styles for the thumbnail in the preview --- */
.log-preview-icon .image-loader-wrapper {
    width: 100%;
    height: 100%;
}
.log-preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* --- END NEW --- */
.log-preview-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
/* Removed .log-preview-icon img styles */
/* --- END FIX --- */

.log-preview-details {
    flex-grow: 1;
    min-width: 0;
}
.log-preview-description {
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-preview-timestamp {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}
/* --- END GROWTH LOG STYLES --- */


/* --- STYLES FOR NEW DETAILS FAB & MENU --- */
#details-fab {
    /* --- THIS IS THE FIX --- */
    /* z-index must be higher than the menu container */
    z-index: 102;
    /* REMOVED position: relative; */
    /* --- END FIX --- */
}
#details-fab svg {
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: absolute;
}
.fab-icon-plus {
    transform: rotate(0deg);
    opacity: 1;
}
.fab-icon-close {
    transform: rotate(45deg);
    opacity: 0;
}
#details-fab-menu-container.active ~ #details-fab .fab-icon-plus {
    /* --- MODIFICATION: Use sibling selector --- */
    transform: rotate(45deg);
    opacity: 0;
}
#details-fab-menu-container.active ~ #details-fab .fab-icon-close {
    /* --- MODIFICATION: Use sibling selector --- */
    transform: rotate(0deg);
    opacity: 1;
}

#details-fab-menu-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* --- THIS IS THE FIX --- */
    /* Must be a direct child of #details-screen */
    /* z-index is lower than the FAB itself */
    z-index: 101;
    /* --- END FIX --- */
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
#details-fab-menu-container.active {
    opacity: 1;
    visibility: visible;
}

.fab-menu {
    position: fixed;
    bottom: calc(var(--spacing-xl) + 56px + var(--spacing-m) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom))); /* FAB + gap + safe area */
    right: calc(var(--spacing-xl) + var(--safe-area-inset-right, env(safe-area-inset-right)));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    align-items: flex-end;
}
.fab-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-m);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Staggered animation */
#details-fab-menu-container.active .fab-menu-item {
    opacity: 1;
    transform: translateY(0);
}
#details-fab-menu-container.active #fab-menu-add-photo {
    transition-delay: 0.05s;
}
#details-fab-menu-container.active #fab-menu-add-task {
    transition-delay: 0.1s;
}

.fab-menu-item span {
    color: white;
    font-size: var(--font-size-m);
    font-weight: 500;
    background-color: var(--primary-text-color);
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: var(--radius-s);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.fab-menu-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-round);
    background-color: var(--surface-color);
    color: var(--primary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* --- END FAB STYLES --- */


/* --- GALLERY SCREEN: MASONRY & DATE STYLES --- */
#gallery-screen main {
    padding: var(--spacing-s);
    background-color: var(--surface-color);
}
#gallery-grid {
    /* --- NEW: Masonry layout using columns --- */
    column-count: 2;
    column-gap: var(--spacing-s);
    /* --- REMOVED: Old grid styles --- */
}
.gallery-item-wrapper {
    /* --- NEW: Prevents an image from splitting across columns --- */
    break-inside: avoid;
    margin-bottom: var(--spacing-s);
    border-radius: var(--radius-m);
    overflow: hidden;
}
#gallery-grid .image-loader-wrapper {
    width: 100%;
    /* --- MODIFICATION: height is now auto --- */
    height: auto;
    border-radius: 0; /* Wrapper has border-radius */
}
.gallery-thumbnail {
    width: 100%;
    /* --- MODIFICATION: height is now auto --- */
    height: auto;
    object-fit: cover;
    border-radius: 0; /* Wrapper has border-radius */
    cursor: pointer;
    display: block; /* Fixes small gap issue */
}
.gallery-date-header {
    /* --- NEW: Date header style --- */
    font-size: var(--font-size-l);
    font-weight: 700;
    padding: var(--spacing-l) var(--spacing-s) var(--spacing-m);
    color: var(--primary-text-color);
    /* --- NEW: Spans all columns --- */
    column-span: all;
}
#gallery-screen .empty-state {
    /* --- MODIFICATION: Spans all columns --- */
    column-span: all;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    padding: 0;
}
/* --- END GALLERY STYLES --- */


/* --- Modals --- */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 100;
    display: flex;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}
.modal.active { opacity: 1; visibility: visible; }

/* Base modal content style */
.modal .modal-content {
    background-color: var(--surface-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    position: relative;
    max-height: 90%;
}

/* Modifier for simple centered modals */
.simple-modal .modal-content {
    width: 90%; max-width: 350px;
    padding: var(--spacing-xl);
    border-radius: var(--radius-l);
}
.modal-close-corner {
    position: absolute;
    top: var(--spacing-s);
    right: var(--spacing-s);
}

/* CORRECTED: Bottom Sheet uses explicit padding variables */
.bottom-sheet .modal-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    padding: var(--sheet-padding-v) var(--sheet-padding-h);
    padding-bottom: calc(var(--sheet-padding-v) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
    padding-left: calc(var(--sheet-padding-h) + var(--safe-area-inset-left, env(safe-area-inset-left)));
    padding-right: calc(var(--sheet-padding-h) + var(--safe-area-inset-right, env(safe-area-inset-right)));
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.bottom-sheet.active .modal-content {
    transform: translateY(0);
}
.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    margin: 0 auto var(--spacing-l);
    flex-shrink: 0;
}

/* --- NEW: Full-screen modal style for History --- */
#history-modal {
    /* Override bottom-sheet behavior */
    align-items: initial;
    justify-content: initial;
}
#history-modal .modal-content {
    /* Behave like a .screen */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 0; /* Let header/main handle padding */
    /* Use the same slide-in as screens */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
#history-modal.active .modal-content {
    transform: translateX(0);
}
#history-modal .bottom-sheet-handle {
    display: none; /* No handle */
}
#history-modal header {
    /* Re-style header to match screens */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: var(--header-padding-v) var(--header-padding-h);
    padding-top: calc(var(--header-padding-v) + var(--safe-area-inset-top, env(safe-area-inset-top)));
    padding-left: calc(var(--header-padding-h) + var(--safe-area-inset-left, env(safe-area-inset-left)));
    padding-right: calc(var(--header-padding-h) + var(--safe-area-inset-right, env(safe-area-inset-right)));
    border-bottom: var(--border-base);
    flex-shrink: 0;
}
#history-modal header h2 {
    /* Center the title */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    flex-grow: 0;
    font-size: var(--font-size-l);
    font-weight: 500;
}
#history-modal .modal-close-corner {
    /* Position the close button correctly */
    position: static;
    transform: none;
    top: auto;
    right: auto;
    z-index: 2; /* Ensure it's clickable */
}
#history-modal main {
    padding: 0; /* Let list items handle padding */
    overflow-y: auto;
    flex-grow: 1;
}
#history-list {
    list-style: none;
    padding: 0;
    /* --- MODIFICATION: Added for journey layout --- */
    padding: 0 var(--spacing-l);
    /* --- END MODIFICATION --- */
    margin: 0;
}
/* --- NEW: History Date Header --- */
.history-date-header {
    /* This class is no longer used, replaced by .journey-date-header */
    display: none;
}
#history-list li.log-preview-item {
    /* Use new log item styles */
    display: flex;
    align-items: center;
    padding: var(--spacing-l);
    border-bottom: var(--border-base);
    gap: var(--spacing-l);
    background-color: var(--surface-color); /* Add white bg */
}
#history-list li:last-child {
    border-bottom: none;
}
/* Re-use log preview icon style */
#history-list .log-preview-icon.task {
    /* --- MODIFICATION: Ensure task icon is styled --- */
    background-color: var(--primary-brand-light);
    color: var(--primary-brand-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- THIS IS THE FIX --- */
#history-list .log-preview-icon.photo {
    background-color: var(--primary-brand-light);
    color: var(--primary-brand-color);
}
/* --- END FIX --- */

/* Re-use log details style */
#history-list .log-preview-details {
    flex-grow: 1;
}
.history-date {
    /* Deprecated, new style below */
    display: none;
}
#history-list .log-preview-timestamp {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}
/* --- END HISTORY MODAL STYLES --- */


/* --- NEW: "Growth Journey" Timeline Styles --- */
#history-list {
    padding: 0 var(--spacing-l);
}
.journey-date-header {
    /* --- MODIFICATION: Renamed from .history-date-header --- */
    /* --- THIS IS THE FIX: Use --surface-color to match modal bg --- */
    background-color: var(--surface-color); /* Match modal bg */
    /* --- END FIX --- */
    padding: var(--spacing-l) 0 var(--spacing-m);
    color: var(--primary-text-color);
    font-size: 1.1rem;
    font-weight: 700;
    /* --- MODIFICATION: Keep sticky for scrolling --- */
    position: sticky;
    top: 0;
    z-index: 2;
    /* --- END MODIFICATION --- */
}
.journey-item {
    display: flex;
    position: relative;
    padding-bottom: var(--spacing-l);
}
/* The timeline connecting line */
.journey-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px; /* Aligns with center of 40px icon */
    bottom: 0;
    width: 2px;
    background-color: var(--border-color);
    z-index: 0;
}
/* Hide line on the last item in a group (CSS magic) */
.journey-item:last-child::before,
.journey-item:has(+ .journey-date-header)::before {
    display: none;
}

.journey-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Sits on top of the timeline */
    margin-right: var(--spacing-l);
    background-color: var(--surface-color); /* To cover the line */
}
.journey-icon.task {
    background-color: var(--primary-brand-light);
    color: var(--primary-brand-color);
}
.journey-icon.photo {
    background-color: var(--border-color);
    overflow: hidden;
}
.journey-icon .image-loader-wrapper {
    width: 100%;
    height: 100%;
}
.journey-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.journey-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.journey-content {
    flex-grow: 1;
    padding-bottom: var(--spacing-l);
    border-bottom: var(--border-base);
}
.journey-item:last-child .journey-content,
.journey-item:has(+ .journey-date-header) .journey-content {
    border-bottom: none;
    padding-bottom: var(--spacing-xl); /* Extra space at end of day */
}
.journey-item:last-child .journey-content {
    padding-bottom: var(--spacing-l); /* Reset for very last item */
}


.journey-content.task-content {
    padding-top: 8px; /* Align text with icon center */
}
.journey-description {
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 4px;
}
.journey-timestamp {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
}
.journey-content.photo-content .journey-timestamp {
    margin-top: var(--spacing-s);
}

.journey-content.photo-content .image-loader-wrapper {
    width: 100%;
    height: auto;
    border-radius: var(--radius-m);
    margin-bottom: var(--spacing-m);
}
.journey-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-m);
}
.journey-note {
    font-size: 1rem;
    font-style: italic;
    color: var(--primary-text-color);
    line-height: 1.4;
}
/* --- END "Growth Journey" Timeline Styles --- */


.modal-actions {
    margin-top: var(--spacing-l);
    flex-shrink: 0;
}

/* --- NEW: Style for generic modal actions --- */
#generic-modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}
/* --- END NEW --- */

/* --- NEW: Style for photo source modal actions --- */
#photo-source-actions {
    display: flex;
    flex-direction: column;
    gap: 12px; /* This adds the spacing */
}
/* --- END NEW --- */


/* --- LIGHTBOX FULLSCREEN STYLES --- */
.lightbox {
    /* --- MODIFICATION: Full black, edge-to-edge --- */
    background-color: #000;
    padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
    padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
}
.lightbox .close-modal-button {
    position: absolute;
    /* --- MODIFICATION: Use var for safe area --- */
    top: calc(var(--spacing-l) + var(--safe-area-inset-top, env(safe-area-inset-top)));
    right: var(--spacing-l);
    color: white;
    z-index: 102;
    background-color: rgba(30,30,30,0.5); /* Darker, subtle bg */
}
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: white; background-color: rgba(30,30,30,0.5); z-index: 101;
}
#lightbox-prev { left: var(--spacing-l); }
#lightbox-next { right: var(--spacing-l); }
.lightbox-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0; /* --- MODIFICATION: No padding --- */
    position: relative;
    width: 100%; /* --- MODIFICATION: Full width/height --- */
    height: 100%;
}
#lightbox-img {
    /* --- MODIFICATION: Full width/height --- */
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    border-radius: 0; /* --- MODIFICATION: No radius --- */
    transition: transform 0.2s ease-out, opacity 0.3s ease-in-out;
    opacity: 0; /* --- MODIFICATION: Start hidden for fade-in --- */
}
.lightbox-info {
    /* --- NEW: Positioned at bottom --- */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-l) calc(var(--spacing-l) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
    z-index: 101;
}
#lightbox-note {
    font-weight: 500;
    margin-bottom: 4px;
}
#lightbox-timestamp {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}
/* --- END LIGHTBOX STYLES --- */


#add-task-modal .schedule-options-row {
    margin-top: 0;
    margin-bottom: 1.5rem;
}
#add-task-modal .frequency-container {
    background-color: transparent;
    border: none;
    padding: 0;
}
#add-task-modal .frequency-container .task-frequency-input {
    width: 100%;
    padding: var(--spacing-m);
    font-size: var(--font-size-m);
    border: var(--border-base);
    background-color: var(--page-bg);
    border-radius: var(--radius-s);
    text-align: left;
}
#add-task-modal .frequency-container.disabled {
    background-color: transparent;
}
#add-task-modal .frequency-container.disabled .task-frequency-input {
    background-color: var(--border-color);
    opacity: 0.5;
    pointer-events: none;
}

#filter-bottom-sheet h3 {
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.filter-sheet-content {
    overflow-y: auto;
    flex-grow: 1;
    padding-bottom: 1rem;
}
.filter-group {
    margin-bottom: 1.5rem;
}
.filter-group h4 {
    margin-bottom: 0.75rem;
    color: var(--secondary-text-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filter-option {
    margin-bottom: 0;
}
.filter-option label {
    display: flex;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 500;
}
.filter-option input[type="radio"],
.filter-option input[type="checkbox"] {
    margin-right: var(--spacing-m);
    accent-color: var(--primary-brand-color);
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
}
#filter-tags-list {
    max-height: 25vh;
    overflow-y: auto;
    border: var(--border-base);
    border-radius: var(--radius-s);
    padding: 4px var(--spacing-m);
}
#filter-tags-list .filter-option:not(:last-child) label {
    border-bottom: var(--border-base);
}
#filter-tags-list .filter-option:last-child label {
    padding-bottom: 10px;
}
.filter-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#reset-filters-link {
    margin-top: var(--spacing-m);
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    text-decoration: underline;
}

#edit-details-bottom-sheet h3 {
    text-align: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}
#edit-details-form {
    flex-grow: 1;
}

#upgrade-modal h3 {
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.upgrade-message {
    text-align: center;
    font-size: var(--font-size-m);
    color: var(--secondary-text-color);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}
.upgrade-benefits-list {
    list-style-type: '✓  ';
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
}
.upgrade-benefits-list li {
    padding-left: 0.5rem;
    margin-bottom: 0.75rem;
}

#settings-screen header {
    flex-shrink: 0;
}
#settings-screen main {
    padding: var(--spacing-l);
}
#user-account-info {
    background-color: var(--surface-color);
    border-radius: var(--radius-m);
    padding: var(--spacing-l) var(--spacing-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#user-account-info p {
    font-size: 0.9rem;
    color: var(--secondary-text-color);
    margin-bottom: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#user-account-email {
    font-size: var(--font-size-m);
    font-weight: 500;
    color: var(--primary-text-color);
    word-break: break-all;
}

#pro-status-container {
    background-color: var(--surface-color);
    border-radius: var(--radius-m);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-top: var(--spacing-l); /* Added spacing */
}
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
    background-color: var(--primary-brand-light);
    color: var(--primary-brand-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: var(--font-size-m);
    margin-bottom: var(--spacing-s);
}
.pro-badge svg {
    stroke-width: 2.5;
}
#pro-status-container .pro-text {
    font-size: var(--font-size-m);
    color: var(--secondary-text-color);
    line-height: 1.4;
}
#pro-status-container .pro-text a {
    text-decoration: underline;
    cursor: pointer;
}


/* --- DESKTOP / WEBSITE MODE --- */
@media (min-width: 768px) {
    body { overflow: auto; }

    .auth-header {
        padding: var(--header-padding-v) var(--header-padding-h);
    }
    #auth-gateway-screen .auth-content {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    #auth-gateway-screen .auth-content {
        max-width: 450px;
        margin: 0 auto;
    }
    .auth-form-container {
        max-width: 450px;
        margin: 0 auto;
    }

    .app-layout {
        max-width: 1400px; margin: 2rem auto; height: calc(100vh - 4rem);
        background-color: var(--surface-color); border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); overflow: hidden;
    }
    #sidebar {
        display: flex; flex-direction: column; width: 300px; flex-shrink: 0;
        background-color: var(--sidebar-bg); border-right: var(--border-base);
    }
    .sidebar-header { padding: var(--spacing-xl); flex-shrink: 0; border-bottom: var(--border-base); }
    #desktop-logo { display: flex; align-items: center; font-size: var(--font-size-xl); font-weight: 700; color: var(--primary-text-color); }
    #desktop-logo .app-logo { height: 40px; width: auto; }

    .sidebar-content { padding: var(--spacing-xl); flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; }
    .sidebar-content h2 {
        font-size: var(--font-size-m);
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--secondary-text-color);
        margin-bottom: 1rem;
    }
    #add-item-sidebar-button { margin-top: auto; padding-top: 1rem; }
    #sidebar-item-list .sidebar-item {
        display: flex;
        align-items: center;
        padding: var(--spacing-m);
        border-radius: 10px;
        margin-bottom: var(--spacing-s);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    #sidebar-item-list .sidebar-item.active {
        background-color: var(--primary-brand-light);
        color: var(--primary-brand-color);
        font-weight: 700;
    }
    #sidebar-item-list .sidebar-item:hover {
        background-color: var(--page-bg);
    }
    /* --- MODIFICATION: Updated .sidebar-item-thumb --- */
    #sidebar-item-list .image-loader-wrapper {
        width: 40px; height: 40px; border-radius: var(--radius-s);
        margin-right: var(--spacing-m); flex-shrink: 0;
    }
    .sidebar-item-thumb {
        width: 100%; height: 100%; border-radius: var(--radius-s); object-fit: cover;
    }
    /* --- END MODIFICATION --- */
    #main-content { flex-grow: 1; position: relative; }
    .screen { transform: none; visibility: hidden; position: absolute; }
    .screen.active { opacity: 1; visibility: visible; }

    /* Reset safe area padding on desktop */
    header,
    #collection-screen header,
    #details-screen header,
        /* --- NEW: Wizard header padding --- */
    #add-wizard-screen header,
        /* --- END NEW --- */
    #gallery-screen header,
    #settings-screen header {
        padding: var(--header-padding-v) var(--header-padding-h);
    }
    .fab {
        bottom: var(--spacing-xl);
        right: var(--spacing-xl);
    }
    /* --- NEW: FAB Menu on Desktop --- */
    .fab-menu {
        bottom: calc(var(--spacing-xl) + 56px + var(--spacing-m));
        right: var(--spacing-xl);
    }
    /* --- END NEW --- */
    footer {
        padding: var(--footer-padding-v) var(--footer-padding-h);
    }

    /* --- MODIFICATION: Hide old #add-screen related buttons --- */
    #collection-screen, #add-item-button, #details-screen #back-to-collection-button,
    #open-settings-button, #settings-screen, #back-from-settings-button { display: none; }
    /* --- MODIFICATION: Show new wizard screen --- */
    #details-screen.active, #add-wizard-screen.active, #gallery-screen.active { display: flex; }

    #collection-screen.active {
        display: flex !important;
    }
    #filter-controls {
        flex-shrink: 0;
    }
    #dashboard-header {
        flex-shrink: 0;
    }

    #details-screen header {
        align-items: center;
    }
    .header-content-stack {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-l);
        margin-left: var(--spacing-l);
    }
    #details-metadata {
        margin-top: 0;
        align-items: center;
    }
    header .header-title {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- MODIFICATION: Update wizard for desktop --- */
    #add-wizard-screen > main {
        padding: 0;
        display: flex;
        justify-content: center; /* Center the steps container */
    }
    #wizard-steps-container {
        width: 1500px; /* 3 steps * 500px */
        max-width: 100%;
        position: relative;
    }
    .wizard-step {
        width: 500px; /* Fixed width for steps */
        max-width: 100%;
        position: absolute; /* Allow them to overlap */
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        transform: translateX(30px); /* Add slide-in effect */
    }
    .wizard-step.active {
        opacity: 1;
        visibility: visible;
        position: relative; /* Take up space */
        transform: translateX(0);
    }
    #wizard-step-category {
        padding-top: var(--spacing-xl);
    }
    /* --- END MODIFICATION --- */


    /* Reset bottom sheet to centered modal */
    .bottom-sheet .modal-content {
        position: relative;
        transform: none;
        width: 90%;
        max-width: 450px;
        padding: var(--spacing-xl);
        border-radius: var(--radius-l);
        bottom: auto;
        left: auto;
        right: auto;
        padding-bottom: var(--spacing-xl);
        max-height: 70vh;
    }
    .bottom-sheet-handle {
        display: none;
    }

    /* --- MODIFICATION: Full-screen history modal on desktop --- */
    #history-modal .modal-content {
        transform: none;
        max-width: 600px;
        max-height: 80vh;
        border-radius: var(--radius-l);
        /* Re-center it */
        position: relative;
        bottom: auto; left: auto; right: auto;
        padding-bottom: 0; /* Let main content scroll */
    }
    #history-modal header {
        padding: var(--header-padding-v) var(--header-padding-h);
    }
    #history-modal .modal-close-corner {
        position: absolute; /* Put close button in corner */
        top: var(--spacing-s);
        right: var(--spacing-s);
    }
    /* --- END MODIFICATION --- */


    #add-task-modal .frequency-container {
        background-color: var(--page-bg);
        border: var(--border-base);
        padding: 0 var(--spacing-m);
    }
    #add-task-modal .frequency-container .task-frequency-input {
        background: none;
        border: none;
        padding: var(--spacing-m) 0;
        text-align: right;
        width: 60px;
    }
    #add-task-modal .frequency-container.disabled {
        background-color: var(--border-color);
    }
    #add-task-modal .frequency-container.disabled .task-frequency-input {
        background: none;
    }

    #filter-bottom-sheet .modal-content {
        max-width: 450px;
    }
    #edit-details-bottom-sheet .modal-content {
        max-width: 450px;
    }
    #upgrade-modal.bottom-sheet .modal-content {
        max-width: 450px;
    }

    /* --- NEW: Desktop gallery columns --- */
    #gallery-grid {
        column-count: 3;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
.loader-overlay.active {
    opacity: 1;
    visibility: visible;
}
.loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #fff;
    border-top-color: var(--primary-brand-color);
    border-radius: var(--radius-round);
    animation: spin 1s linear infinite;
}
#loader-text {
    color: white;
    font-weight: 500;
    margin-top: var(--spacing-l);
}

/* --- MODIFICATION: New Image Loader Styles --- */
.image-loader-wrapper {
    position: relative;
    background-color: var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures border-radius is respected */
}
.image-loader-wrapper img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.image-loader-wrapper.loaded img {
    opacity: 1;
}
.image-loader-wrapper .image-spinner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0,0,0,0.2);
    border-top-color: var(--primary-brand-color);
    border-radius: var(--radius-round);
    animation: spin 1s linear infinite;
    transition: opacity 0.3s ease-out;
    z-index: 3; /* --- Ensure spinner is on top --- */
}
.image-loader-wrapper.loaded .image-spinner {
    opacity: 0;
    visibility: hidden;
}
/* --- END MODIFICATION --- */


/* --- MODIFIED: Task Suggestion Chip Styles --- */
#task-suggestions-container {
    margin-bottom: 1.5rem;
}
/* --- REMOVED #task-suggestions-container-add --- */

.task-chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    margin-top: var(--spacing-s);
}
.task-suggestion-chip {
    padding: 6px 14px;
    border-radius: 20px;
    background: none;
    border: 1px solid var(--primary-brand-color);
    color: var(--primary-brand-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.task-suggestion-chip:hover {
    background-color: var(--primary-brand-light);
}
/* --- END MODIFICATION --- */

/* --- NEW: Toast/Snackbar Styles --- */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

#toast-container {
    position: fixed;
    bottom: calc(var(--spacing-l) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
    left: var(--spacing-l);
    right: var(--spacing-l);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.toast-message {
    padding: var(--spacing-m) var(--spacing-l);
    background-color: var(--primary-text-color);
    color: white;
    border-radius: var(--radius-s);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 0.9rem;
    font-weight: 500;
    animation: toast-in 0.3s ease forwards;
    opacity: 0;
}
.toast-message.success {
    background-color: var(--primary-brand-color);
}
.toast-message.error {
    background-color: var(--danger-color);
}
.toast-message.hiding {
    animation: toast-out 0.3s ease forwards;
}
/* --- END NEW --- */

/* --- NEW: Style for photo source modal actions --- */
#photo-source-actions {
    display: flex;
    flex-direction: column;
    gap: 12px; /* This adds the spacing */
}
/* --- END NEW --- */

/* --- NEW: Style for nested file inputs --- */
.photo-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* --- END NEW --- */

/* =========================================
   DESKTOP WEB AUTHENTICATION STYLES
   Append this to the end of style.css
   ========================================= */

@media (min-width: 768px) {

    /* 1. The Background Container
       Gives the page a "dashboard" feel with a subtle dot pattern. */
    #auth-container {
        background-color: #f4f6f8;
        background-image: radial-gradient(#dfe3e8 1px, transparent 1px);
        background-size: 24px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Ensure it sits above everything else except splash */
        z-index: 199;
    }

    /* 2. The Auth Card
       Resets the absolute positioning used for mobile slide animations
       and creates a centered white card. */
    .auth-page {
        position: relative; /* Stop taking up full screen */
        top: auto; left: auto;
        width: 100%;
        max-width: 420px; /* Standard login card width */
        height: auto;
        max-height: 90vh;

        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);

        /* Center vertically and horizontally in the container */
        margin: auto;

        /* Hide by default, show when active */
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;

        overflow: hidden; /* contain child elements */
    }

    /* 3. Active State for the Card */
    .auth-page.active {
        display: flex; /* Use flex to stack header/content */
        opacity: 1;
        visibility: visible;
        transform: none; /* Reset any mobile slide transforms */
    }

    /* 4. Header Tweaks for Card Look */
    .auth-header {
        padding: 20px 24px;
        background-color: #ffffff;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Hide the spacer that balances the mobile header,
       allowing true centering of the logo/title */
    .auth-header-spacer {
        display: none;
    }

    /* 5. Content Padding */
    .auth-form-container,
    #auth-gateway-screen .auth-content {
        padding: 32px 40px; /* More breathing room on desktop */
        max-width: 100%; /* Fill the card width */
    }

    /* 6. Onboarding Slideshow Specifics
       The slideshow needs to fit inside the card without breaking layout. */
    #onboarding-screen {
        max-width: 420px;
        aspect-ratio: 9/16; /* Mimic phone ratio nicely */
        max-height: 800px;
    }
    .onboarding-slide {
        position: absolute; /* Keep absolute for slides */
    }

    /* 7. Password Recovery Modal Tweaks
       Ensure the modal sits nicely over the card background if triggered. */
    #password-recovery-modal {
        backdrop-filter: blur(4px); /* Nice glass effect */
    }
    #password-recovery-modal .modal-content {
        width: 400px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255,255,255,0.5);
    }
}