/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== PROFILE LIBRARY + ACCOUNT COMPLETION ===== */
#page-profile .profile-library-panel {
    gap: 14px;
    padding-top: 0;
    border: 0;
}

#page-profile .profile-library-panel .profile-tabs {
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

#page-profile .profile-tab {
    min-height: 44px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #f0f1f1;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#page-profile .profile-tab:hover {
    color: #000000;
    opacity: .8;
}

#page-profile .profile-tab.active {
    border: 0;
    background: #dad6ff;
    color: #000000;
}

#page-profile .memories-filter-section.is-empty-filter {
    display: none;
}

.auth-dialog.profile-account-dialog {
    width: min(720px, 100%);
    max-height: min(880px, calc(100vh - 40px));
    overflow-y: auto;
}

.profile-form,
.profile-settings-list {
    display: grid;
    gap: 16px;
}

.profile-form-field {
    display: grid;
    gap: 7px;
}

.profile-form-field > span,
.profile-settings-row strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-form-field :is(input, textarea, select),
.profile-username-field {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: rgb(252, 252, 252);
    box-shadow: var(--text-entry-shadow);
    color: var(--text);
    font: inherit;
}

.profile-form-field textarea {
    min-height: 96px !important;
    padding: 14px 16px !important;
    border-radius: 8px;
    resize: vertical;
}

.profile-form-field textarea.account-profile-bio {
    background: var(--text-entry-bg) !important;
    border-radius: 8px !important;
}

.profile-form-field select {
    min-height: 44px;
    padding: 0 40px 0 16px;
}

.account-settings-sections {
    display: grid;
    gap: 0;
}

.account-settings-section {
    display: grid;
    gap: 14px;
    padding: 24px 0;
    border-top: 1px solid #d7d7d7;
}

.account-settings-section:first-child {
    padding-top: 18px;
    border-top: 0;
}

.account-settings-section h4 {
    font-size: 15px;
    font-weight: 700;
}

.account-settings-section-copy {
    margin-top: -8px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.45;
}

.profile-account-dialog .account-email-updates-toggle {
    align-items: flex-start;
    gap: 12px;
    padding: 4px 2px;
}

.profile-account-dialog .account-email-updates-toggle > span {
    display: grid;
    gap: 4px;
}

.profile-account-dialog .account-email-updates-toggle strong {
    font-size: 14px;
    line-height: 1.35;
}

.profile-account-dialog .account-email-updates-toggle small {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.profile-account-dialog .style-profile-field select {
    padding-right: 40px;
    padding-left: 16px;
    border: 0;
    border-radius: 999px;
}

.profile-account-dialog .profile-settings-row {
    border-top: 0;
}

.profile-account-dialog .style-profile-actions {
    position: static;
    margin-right: 0;
    margin-left: 0;
    padding: 0;
    background: transparent;
}

.profile-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding: 14px 0;
    border-top: 1px solid #d7d7d7;
}

.profile-settings-row > div {
    display: grid;
    gap: 4px;
}

.profile-settings-row > div > span {
    color: var(--text-secondary);
    font-size: 14px;
}

@media (max-width: 768px) {
    #page-profile .profile-library-panel .profile-tabs {
        margin-bottom: 10px;
    }

    #page-profile .profile-tab {
        min-height: 42px;
        padding: 0 16px;
    }

    .auth-dialog.profile-account-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 20px;
    }

    .profile-settings-row {
        align-items: flex-start;
    }

    .account-settings-section {
        padding: 20px 0;
    }
}

:root {
    /* Brand palette */
    --primary: #00b252;
    --primary-dark: #00b252;
    --primary-light: #00b252;
    --primary-bg: #f1f1f1;
    --brand-green: #00b252;
    --brand-yellow: #f5cc11;
    --brand-coral: #ff705d;
    --brand-blue: #389bec;
    --memory-theme-yellow: #fff2b8;
    --memory-theme-green: #d8f1e3;
    --memory-theme-charcoal: #e4e2e0;
    --memory-theme-coral: #ffd8d2;
    --memory-theme-blue: #dcecff;
    --beige: #ffffff;
    --beige-dark: #f1f1f1;
    --charcoal: #000000;
    --orange: #ff705d;
    --orange-dark: #e75a47;
    --green: #00b252;
    --cyan: #389bec;
    --pink: #ff705d;
    --text: #000000;
    --text-secondary: #000000;
    --text-muted: #000000;
    --muted: #000000;
    --forest: #000000;
    --link: #6f6f6f;
    --border: transparent;
    --border-light: transparent;
    --category-border: #000000;
    --button-outline: #000000;
    --control-bg: #f0f1f1;
    --text-entry-bg: #f7f7f7;
    --text-entry-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.16);
    --text-entry-shadow-focus: inset 0 1px 7px rgba(0, 0, 0, 0.18);
    --button-height: 40px;
    --button-padding-x: 18px;
    --button-radius: 999px;
    --button-font-size: 13px;
    --button-font-weight: 700;
    --button-letter-spacing: 1px;
    --button-active-bg: #dad6ff;
    --button-new-memory-bg: #00b252;
    --bg: #ffffff;
    --bg-subtle: #f1f1f1;
    --bg-muted: #f1f1f1;
    --card: #ffffff;
    --shadow-sm: 0 1px 2px rgba(44,46,42,0.05);
    --shadow: 0 1px 3px rgba(44,46,42,0.08), 0 1px 2px rgba(44,46,42,0.04);
    --shadow-md: 0 4px 6px -1px rgba(44,46,42,0.08), 0 2px 4px -2px rgba(44,46,42,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(44,46,42,0.1), 0 4px 6px -4px rgba(44,46,42,0.08);
    --shadow-xl: 0 20px 25px -5px rgba(44,46,42,0.12), 0 8px 10px -6px rgba(44,46,42,0.08);
    --radius: 16px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    overflow: visible;
}

.page { display: none; }
.page.active { display: block; }

a { color: var(--link); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #ffffff !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.nav-transparent {
    background: transparent;
    border-bottom: 1px solid transparent;
}

.page-memory-nav {
    transition: transform 0.28s ease, opacity 0.2s ease;
    will-change: transform;
}

.page-memory-nav.is-hidden {
    transform: translateY(-110%);
    opacity: 0;
}

#page-landing > .nav {
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(-100% - 8px));
    transition:
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 320ms ease;
    will-change: transform, opacity;
}

#page-landing > .nav.is-cinema-nav-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#page-landing > .nav .logo-text,
#page-landing > .nav .nav-links a {
    color: var(--link);
}

#page-landing > .nav .logo-text {
    color: var(--charcoal);
}

#page-landing > .nav .btn-ghost {
    color: var(--charcoal);
}

.btn-ghost.auth-login-btn {
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 10px 18px;
    color: var(--charcoal);
    background: transparent;
}

#page-landing > .nav .nav-links a:hover,
#page-landing > .nav .nav-links a.active {
    color: var(--card);
    background: var(--primary);
    font-weight: 600;
}

.nav-transparent .nav-icon-btn {
    color: var(--text-secondary);
}

.nav-inner {
    width: 100%;
    max-width: 2500px;
    margin: 0 auto;
    padding: 0 20px;
    height: 72px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) max-content minmax(240px, 1fr);
    column-gap: 20px;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.nav-app .nav-links {
    display: grid;
    grid-template-columns: 120px 230px 120px;
    justify-self: center;
    justify-content: center;
    align-items: center;
}

.nav-links a {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--link);
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-app .nav-links a {
    width: 100%;
    text-align: center;
    border: 1px solid var(--border);
    background: transparent;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--card);
    background: var(--primary);
    font-weight: 600;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    grid-column: 3;
    justify-content: right;
    flex-wrap: nowrap;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.language-switcher-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-switcher-btn.active {
    background: var(--primary);
    color: var(--card);
}

.language-switcher-btn:hover {
    color: var(--charcoal);
}

.is-guest .nav-app .nav-links a[onclick*="profile"],
.is-guest .nav-app .nav-links a[onclick*="create"],
.is-guest .nav-app .user-avatar,
.is-guest .nav-app .notification-btn {
    display: none;
}

.is-guest button[onclick*="showPage('create')"],
.is-guest a[onclick*="showPage('create')"] {
    display: none !important;
}

.is-guest #page-feed .nav-links {
    display: none;
}

.is-cloud-authenticated #page-feed .auth-login-btn {
    display: none;
}

.nav-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.nav-icon-btn:hover {
    background: var(--bg-muted);
    color: var(--text);
}

.notification-btn {
    position: relative;
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--border);
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--charcoal);
    padding: 8px 14px;
    border-radius: 999px;
    transition: all 0.2s;
    background: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    justify-self: start;
    width: fit-content;
}

.btn-back:hover {
    background: #ffffff;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.mobile-menu-btn span {
    display: block;
    width: var(--edit-grid-size);
    height: 2px;
    background: var(--charcoal);
    border-radius: 2px;
}

/* ===== BUTTONS — flat pill style ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--charcoal);
    color: var(--beige);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.2s, background 0.2s;
    border: none;
}

.btn-primary:hover {
    background: var(--charcoal);
    transform: translateY(-2px);
}

.btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--brand-coral);
    color: white;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.2s, background 0.2s;
}

.btn-orange:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--card);
    color: var(--charcoal);
    border: 2px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: var(--charcoal);
    color: var(--beige);
    transform: translateY(-2px);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: transparent;
    color: var(--charcoal);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.2s;
}

.btn-ghost:hover {
    color: var(--charcoal);
    background: rgba(44,46,42,0.08);
}

.btn-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    background: var(--beige);
    color: var(--charcoal);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.2s, background 0.2s;
}

.btn-white:hover {
    background: white;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 16px 30px;
    font-size: 15px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn-follow {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    transition: all 0.2s;
    flex-shrink: 0;
}

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

/* ===== AVATARS ===== */
.avatar-xs {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: white;
    flex-shrink: 0;
}

.avatar-sm {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding-top: 2px;
    font-size: 14px; font-weight: 700; line-height: 1; color: white;
    flex-shrink: 0;
}

.avatar-md {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: white;
    flex-shrink: 0;
}

.avatar-lg {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; color: white;
    flex-shrink: 0;
}

.avatar-xl {
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: 700; color: white;
    flex-shrink: 0;
    border: 4px solid var(--border);
    box-shadow: var(--shadow-md);
}

.user-avatar {
    cursor: pointer;
}

/* ===== HERO SECTION ===== */
/* ===== FLAT LIGHT HERO ===== */
.hero-flat {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    padding: 96px 32px 56px;
    display: flex;
    align-items: center;
    overflow: visible;
}

.hf-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

/* Left column — text */
.hf-text {
    text-align: left;
    max-width: 760px;
}

.hf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--charcoal);
    color: var(--beige);
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
    opacity: 0;
    animation: hf-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5cc11;
    display: inline-block;
}

.hf-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(3.25rem, 7.5vw, 8.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.055em;
    color: var(--text);
    margin: 0 0 28px;
}

.hf-headline-soft {
    font-size: clamp(2.8rem, 5.2vw, 5.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hf-line {
    display: block;
}

.hf-line > * {
    display: inline-block;
}

.hf-line:nth-child(1) { opacity: 0; animation: hf-line-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
.hf-line:nth-child(2) { opacity: 0; animation: hf-line-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards; }
.hf-line:nth-child(3) { opacity: 0; animation: hf-line-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.44s forwards; }
.hf-line:nth-child(4) { opacity: 0; animation: hf-line-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.56s forwards; }

.hf-line-accent {
    font-style: italic;
    font-weight: 800;
    color: #ff705d;
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.04em;
}

@keyframes hf-line-in {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hf-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hf-sub {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    line-height: 1.45;
    color: #000000;
    max-width: 540px;
    margin: 0 0 40px;
    font-weight: 400;
    letter-spacing: -0.01em;
    opacity: 0;
    animation: hf-fade-up 0.8s ease 0.7s forwards;
}

.hf-sub strong {
    font-weight: 700;
    color: var(--charcoal);
}

.hf-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    animation: hf-fade-up 0.8s ease 0.9s forwards;
}

.hf-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.hf-btn-primary {
    background: var(--charcoal);
    color: var(--beige);
}

.hf-btn-primary:hover {
    background: var(--charcoal);
    transform: translateY(-2px);
}

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

.hf-btn-outline:hover {
    background: var(--charcoal);
    color: var(--beige);
    transform: translateY(-2px);
}

/* Right column — collage */
.hf-collage {
    position: relative;
    min-height: 590px;
    opacity: 0;
    animation: hf-fade-up 1s ease 0.4s forwards;
}

.hf-photo,
.hf-block {
    position: absolute;
    --tilt: 0deg;
    border-radius: 0;
    overflow: hidden;
    transform: rotate(var(--tilt));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hf-photo:hover,
.hf-block:hover {
    transform: translateY(-4px) rotate(var(--tilt));
}

.hf-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hf-block {
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.hf-block-yellow { background: #f5cc11; }
.hf-block-pink { background: #ff705d; }
.hf-block-green { background: #00b252; }
.hf-block-blue { background: #dad6ff; }

.hf-tag {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--charcoal);
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

.hf-block-green .hf-tag,
.hf-block-pink .hf-tag {
    color: #ffffff;
}

.hf-block-blue .hf-tag {
    color: var(--charcoal);
}

/* Layered memory collage */
.hf-block-yellow {
    left: -2%;
    top: 6%;
    width: 28%;
    aspect-ratio: 3 / 2;
    --tilt: -3deg;
}

.hf-photo-1 {
    left: 30%;
    top: 0;
    width: 31%;
    aspect-ratio: 2 / 3;
    --tilt: 2deg;
    z-index: 2;
}

.hf-photo-2 {
    right: -4%;
    top: 11%;
    width: 39%;
    aspect-ratio: 3 / 2;
    --tilt: -1.5deg;
    z-index: 1;
}

.hf-photo-3 {
    left: -3%;
    top: 28%;
    width: 28%;
    aspect-ratio: 2 / 3;
    --tilt: 1.5deg;
    z-index: 3;
}

.hf-block-pink {
    left: 43%;
    top: 42%;
    width: 22%;
    aspect-ratio: 2 / 3;
    --tilt: -2deg;
    z-index: 1;
}

.hf-block-green {
    left: 54%;
    top: 64%;
    width: 20%;
    aspect-ratio: 2 / 3;
    --tilt: 6deg;
    z-index: 5;
}

.hf-photo-4 {
    left: 14%;
    bottom: 0;
    width: 39%;
    aspect-ratio: 3 / 2;
    --tilt: -1deg;
    z-index: 2;
}

.hf-photo-5 {
    right: -3%;
    bottom: 3%;
    width: 31%;
    aspect-ratio: 2 / 3;
    --tilt: 1.5deg;
    z-index: 4;
}

.hf-block-blue {
    left: -9%;
    bottom: 10%;
    width: 22%;
    aspect-ratio: 3 / 2;
    --tilt: 2deg;
    z-index: 1;
}

/* Legacy — flat brand color instead of gradient */
.text-gradient {
    color: var(--primary);
}

/* ===== TRUST BAR ===== */
.trust-bar {
    text-align: center;
    padding: 48px 24px;
    background: var(--beige);
}

.trust-bar p {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 20px;
}

.trust-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-logos span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: -0.5px;
}

/* ===== SECTION HEADERS ===== */
.section-header {
    text-align: center;
    margin-bottom: 72px;
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--charcoal);
    color: var(--beige);
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.section-tag::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-yellow);
}

.section-header h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.25rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--charcoal);
    margin-bottom: 20px;
    text-wrap: balance;
}

.section-header h2 .nowrap {
    white-space: nowrap;
}

.features-section .section-header {
    max-width: 1040px;
}

.section-header > p {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.45;
    color: var(--text-secondary);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.005em;
    font-weight: 400;
}

/* ===== FEATURES SECTION ===== */
.features-section {
    padding: 120px 48px;
    max-width: 1600px;
    margin: 0 auto;
    background: var(--beige);
}

.features-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.feature-block {
    padding: 56px 48px;
    border-radius: var(--radius-lg);
    background: white;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.feature-ai { background: var(--brand-green); color: var(--beige); }
.feature-social { background: #dad6ff; color: var(--charcoal); }

.feature-block:hover {
    transform: translateY(-6px);
}

.feature-ai h3,
.feature-ai > p,
.feature-ai .feature-list li {
    color: var(--beige);
}

.feature-ai .feature-list li svg circle {
    fill: rgba(245,241,228,0.2);
}
.feature-ai .feature-list li svg path {
    stroke: var(--beige);
}

.feature-social .feature-list li svg circle {
    fill: rgba(44,46,42,0.15);
}
.feature-social .feature-list li svg path {
    stroke: var(--charcoal);
}

.feature-icon-lg {
    margin-bottom: 28px;
}

.feature-ai .feature-icon-lg svg circle { fill: rgba(245,241,228,0.18); }
.feature-ai .feature-icon-lg svg path { fill: var(--beige); }
.feature-social .feature-icon-lg .icon-bg { fill: rgba(60,53,45,0.12); }
.feature-social .feature-icon-lg .icon-fill { fill: var(--charcoal); }
.feature-social .feature-icon-lg .icon-fill-soft { opacity: 0.72; }

.feature-label {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    color: var(--beige);
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.label-orange {
    background: transparent;
    color: var(--charcoal);
}

.feature-block h3 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    margin-bottom: 20px;
}

.feature-block > p {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 32px;
    opacity: 0.88;
    letter-spacing: -0.005em;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
    flex: 1;
}

.feature-block > button {
    align-self: flex-end;
    margin-top: auto;
}

.feature-ai > .btn-primary {
    background: var(--brand-yellow);
    color: var(--charcoal);
}

.feature-ai > .btn-primary:hover {
    background: var(--brand-yellow);
}

.feature-social > .btn-orange {
    background: var(--brand-green);
    color: var(--beige);
}

.feature-social > .btn-orange:hover {
    background: var(--brand-green);
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.feature-list li svg {
    flex-shrink: 0;
}

/* ===== HOW IT WORKS ===== */
.how-section {
    padding: 120px 48px;
    background: var(--beige);
    max-width: 1600px;
    margin: 0 auto;
}

.how-section .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 1040px;
}

.steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.step {
    flex: 1;
    max-width: 300px;
    text-align: center;
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--charcoal);
    color: var(--beige);
    font-size: 18px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.step-visual {
    background: white;
    border-radius: 0;
    padding: 32px;
    margin-bottom: 24px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.step-icon-box {
    width: 64px;
    height: 64px;
    background: var(--primary-bg);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-uploads {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.upload-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ai-processing {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.ai-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: blink 1.4s infinite;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

@keyframes blink {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.share-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.share-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    margin-left: -8px;
}

.sa-1 { background: var(--orange); margin-left: 0; }
.sa-2 { background: var(--cyan); }
.sa-3 { background: var(--green); }

.step h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.step > p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.step-connector {
    margin-top: 90px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ===== SHOWCASE ===== */
.showcase-section {
    padding: 120px 48px;
    max-width: 1600px;
    margin: 0 auto;
}

.showcase-section .section-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 1040px;
}

.showcase-wrapper {
    display: flex;
    justify-content: center;
}

.showcase-card {
    max-width: 900px;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: white;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-card:hover {
    transform: translateY(-6px);
}

.showcase-cover {
    height: 320px;
    position: relative;
}

.showcase-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(60,53,45,0.7) 100%);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}

.showcase-date {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.showcase-cover-overlay h3 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.showcase-cover-overlay > p {
    font-size: 15px;
    opacity: 0.8;
    margin-bottom: 16px;
}

.showcase-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.showcase-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.showcase-stats-mini {
    display: flex;
    gap: 12px;
    font-size: 13px;
    opacity: 0.7;
}

.showcase-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 4px;
    background: white;
}

.preview-item {
    aspect-ratio: 1;
}

.preview-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.preview-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.showcase-cta {
    display: block;
    text-align: center;
    padding: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--charcoal);
    background: white;
    border-top: 1px solid var(--border);
}

/* The landing example mirrors a real Remembrand vertical layout: a story
   header and route map followed by varied blocks on one chronological axis. */
.showcase-memory {
    max-width: 1120px;
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(30, 31, 29, 0.09);
}

.showcase-memory:focus-visible {
    outline: 3px solid #574fba;
    outline-offset: 5px;
}

.showcase-memory-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(32px, 5vw, 64px);
    border-bottom: 1px solid var(--border);
    background: #ffffff;
}

.showcase-memory-copy h3 {
    max-width: 680px;
    margin: 12px 0 18px;
    color: var(--charcoal);
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.25rem, 5vw, 4.8rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.showcase-memory-copy > p {
    max-width: 600px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.55;
}

.showcase-memory-eyebrow,
.showcase-ai-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #574fba;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.showcase-memory-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 26px;
}

.showcase-memory-stats > span,
.showcase-capabilities > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: #f0f1f1;
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.showcase-memory-stats .material-symbols-outlined,
.showcase-capabilities .material-symbols-outlined {
    font-size: 17px;
    line-height: 1;
}

.showcase-memory-map {
    position: relative;
    aspect-ratio: 1.35;
    overflow: hidden;
    border-radius: 22px;
    background: #dad6ff;
}

.showcase-memory-map svg {
    display: block;
    width: 100%;
    height: 100%;
}

.showcase-map-land,
.showcase-map-island {
    fill: #f8f8f6;
    stroke: #ffffff;
    stroke-width: 4;
}

.showcase-map-route {
    fill: none;
    stroke: #574fba;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 3 9;
}

.showcase-map-point {
    fill: #00b252;
    stroke: #ffffff;
    stroke-width: 4;
}

.showcase-map-label {
    position: absolute;
    padding: 4px 7px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.showcase-map-label-split { top: 20%; left: 23%; }
.showcase-map-label-vis { top: 16%; left: 58%; }
.showcase-map-label-hvar { top: 43%; left: 68%; }
.showcase-map-label-korcula { right: 10%; bottom: 12%; }

.showcase-memory-timeline {
    position: relative;
    padding: 66px clamp(30px, 5vw, 62px) 20px;
    background: #ffffff;
}

.showcase-memory-timeline::before {
    content: '';
    position: absolute;
    top: 66px;
    bottom: 34px;
    left: calc(clamp(30px, 5vw, 62px) + 3px);
    width: 1px;
    background-image: radial-gradient(circle, #000000 0.8px, transparent 1px);
    background-position: center top;
    background-size: 1px 4px;
    background-repeat: repeat-y;
}

.showcase-memory-day {
    position: relative;
    padding-left: 58px;
    margin-bottom: 76px;
}

.showcase-memory-day-last {
    margin-bottom: 34px;
}

.showcase-memory-dot {
    position: absolute;
    top: 2px;
    left: -7px;
    z-index: 1;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #00b252;
}

.showcase-memory-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.showcase-memory-day-head > div {
    display: grid;
    gap: 4px;
}

.showcase-memory-day-head strong {
    color: #000000;
    font-size: 15px;
    letter-spacing: -0.02em;
}

.showcase-memory-day-head > div > span {
    color: var(--text-secondary);
    font-size: 14px;
}

.showcase-day-contributor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.showcase-day-contributor .avatar-sm {
    display: grid;
    place-items: center;
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    background: #f5cc11;
    color: #000000;
    font-size: 10px;
}

.showcase-day-contributor .showcase-avatar-coral { background: #ff705d; }
.showcase-day-contributor .showcase-avatar-violet { background: #dad6ff; }

.showcase-day-layout {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.showcase-day-layout-feature {
    grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
}

.showcase-photo {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #e7e7e7;
}

.showcase-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-photo-feature {
    height: 390px;
    min-height: 0;
}

.showcase-photo figcaption {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: max-content;
    max-width: calc(100% - 28px);
    padding: 8px 11px;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(30, 31, 29, 0.78);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.showcase-story-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 42px);
    border-radius: 18px;
    background: #f4f3ff;
}

.showcase-ai-label .material-symbols-outlined {
    font-size: 16px;
}

.showcase-story-block h4 {
    margin: 18px 0 14px;
    color: #000000;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.45rem, 2.7vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.showcase-story-block p {
    margin: 0;
    color: var(--charcoal);
    font-size: 14px;
    line-height: 1.62;
}

.showcase-story-source {
    margin-top: 22px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.4;
}

.showcase-day-layout-mosaic {
    grid-template-columns: minmax(0, 1fr) 230px;
}

.showcase-photo-group {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 5px;
    height: 390px;
    min-height: 0;
}

.showcase-photo-group .showcase-photo {
    min-height: 0;
    border-radius: 12px;
}

.showcase-photo-group-main {
    grid-row: 1 / span 2;
}

.showcase-photo-more {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.showcase-ticket {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 30px;
    overflow: hidden;
    border: 1px dashed #9b97c9;
    border-radius: 18px;
    background: #f5cc11;
    color: #000000;
}

.showcase-ticket > .material-symbols-outlined {
    margin-bottom: 36px;
    font-size: 32px;
}

.showcase-ticket small {
    margin-bottom: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.showcase-ticket strong {
    font-size: 21px;
}

.showcase-ticket > span:not(.material-symbols-outlined) {
    margin-top: 6px;
    font-size: 12px;
}

.showcase-ticket .showcase-ticket-code {
    margin-top: auto;
    padding-top: 40px;
    font-family: monospace;
    letter-spacing: 0.08em;
}

.showcase-day-layout-note {
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
}

.showcase-day-layout-note blockquote {
    display: flex;
    align-items: center;
    margin: 0;
    padding: clamp(26px, 4vw, 44px);
    border-radius: 18px;
    background: #00b252;
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.showcase-photo-wide {
    height: 330px;
    min-height: 0;
}

.showcase-memory-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px clamp(30px, 5vw, 62px);
    border-top: 1px solid var(--border);
    background: #ffffff;
}

.showcase-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.showcase-capabilities > span {
    min-height: 32px;
    padding: 0 11px;
    font-size: 10px;
}

.showcase-memory .showcase-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 14px 19px;
    border: 0;
    border-radius: 999px;
    background: #00b252;
    color: #ffffff;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 760px) {
    .showcase-memory {
        border-radius: 20px;
    }

    .showcase-memory-header {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px 24px;
    }

    .showcase-memory-copy h3 {
        font-size: clamp(2.25rem, 12vw, 3.35rem);
    }

    .showcase-memory-copy > p {
        font-size: 14px;
    }

    .showcase-memory-map {
        aspect-ratio: 1.25;
        border-radius: 16px;
    }

    .showcase-memory-timeline {
        padding: 42px 16px 12px;
    }

    .showcase-memory-timeline::before {
        top: 42px;
        bottom: 24px;
        left: 23px;
    }

    .showcase-memory-day {
        padding-left: 34px;
        margin-bottom: 58px;
    }

    .showcase-memory-dot {
        left: -1px;
        width: 18px;
        height: 18px;
    }

    .showcase-memory-day-head {
        display: grid;
        gap: 12px;
        margin-bottom: 20px;
    }

    .showcase-day-contributor {
        white-space: normal;
    }

    .showcase-day-layout-feature,
    .showcase-day-layout-mosaic,
    .showcase-day-layout-note {
        grid-template-columns: 1fr;
    }

    .showcase-photo-feature,
    .showcase-photo-wide {
        height: 300px;
        min-height: 0;
    }

    .showcase-photo-group {
        height: 360px;
        min-height: 0;
    }

    .showcase-ticket {
        min-height: 260px;
    }

    .showcase-story-block,
    .showcase-ticket,
    .showcase-day-layout-note blockquote {
        border-radius: 14px;
    }

    .showcase-memory-footer {
        display: grid;
        padding: 22px 20px;
    }

    .showcase-memory .showcase-cta {
        justify-content: center;
        width: 100%;
    }
}

/* ===== CTA SECTION ===== */
.cta-section {
    padding: 140px 48px;
    background: var(--brand-green);
    text-align: center;
    color: var(--beige);
}

.cta-content {
    max-width: 960px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.045em;
    color: var(--beige);
    margin-bottom: 24px;
}

.cta-content > p {
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    color: rgba(245, 241, 228, 0.75);
    margin-bottom: 40px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
    letter-spacing: -0.005em;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cta-note {
    font-size: 13px;
    color: rgba(245, 241, 228, 0.4);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--beige);
    padding: 80px 48px 32px;
}

.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 56px;
}

.footer-brand {
    max-width: 280px;
}

.footer-brand p {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.footer-links {
    display: flex;
    gap: 60px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.footer-col a {
    font-size: 14px;
    color: var(--link);
    transition: color 0.2s;
}

.footer-col a:hover {
    color: #4f4f4f;
}

.footer-bottom {
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

/* ===== CREATE PAGE ===== */
.create-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 120px 48px 80px;
}

.create-header {
    margin-bottom: 40px;
}

.create-header h1 {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.create-header p {
    font-size: 16px;
    color: var(--text-secondary);
}

.create-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 40px;
}

.cs-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.cs-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.cs-step.active .cs-dot {
    background: var(--primary);
    color: white;
}

.cs-step span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.cs-step.active span {
    color: var(--text);
}

.cs-line {
    width: 60px;
    height: 2px;
    background: var(--border);
}

.cs-line.active {
    background: var(--primary);
}

/* Upload Zone */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    margin-bottom: 32px;
    transition: all 0.3s;
}

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

.upload-zone-inner {
    padding: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-zone-inner h3 {
    font-size: 18px;
    font-weight: 700;
}

.upload-zone-inner > p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 360px;
}

.upload-formats {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Uploaded Files */
.uploaded-files {
    margin-bottom: 40px;
}

.uploaded-files h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.file-card {
    text-align: center;
}

.file-thumb {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    position: relative;
}

.file-type {
    font-size: 11px;
    font-weight: 700;
    color: white;
    padding: 2px 8px;
    background: rgba(60,53,45,0.3);
    border-radius: 4px;
}

.file-type-doc {
    color: var(--text);
    background: rgba(60,53,45,0.08);
}

.file-name {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    transition: all 0.2s;
}

.file-card-add:hover {
    border-color: var(--border);
    color: var(--primary);
}

/* Memory Details Form */
.memory-details-form {
    margin-bottom: 40px;
}

.memory-details-form h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.optional {
    font-weight: 400;
    color: var(--text-muted);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text);
    transition: all 0.2s;
    background: white;
    box-sizing: border-box;
    height: 44px;
}

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.form-input:focus {
    outline: none;
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0,178,82,0.1);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.6;
}

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

.style-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.style-chip {
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.style-chip:hover {
    border-color: var(--border);
    color: var(--primary);
}

.style-chip.active {
    background: var(--primary);
    border-color: var(--border);
    color: white;
}

/* Companion Tags */
.companion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    align-items: center;
}

.companion-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-muted);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.tag-remove {
    font-size: 16px;
    color: var(--text-muted);
    padding: 0 2px;
    line-height: 1;
}

.tag-remove:hover {
    color: var(--text);
}

.companion-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    font-size: 13px;
    padding: 4px 0;
}

/* Form hint */
.form-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Companion search dropdown */
.companion-dropdown {
    position: relative;
    margin-top: -2px;
    background: white;
    border: 1.5px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
}

.companion-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.1s;
}

.companion-dropdown-item:hover,
.companion-dropdown-item.highlighted {
    background: var(--primary-bg);
}

.companion-dropdown-item .cdi-info {
    flex: 1;
    min-width: 0;
}

.companion-dropdown-item .cdi-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
}

.companion-dropdown-item .cdi-handle {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.companion-dropdown-item .cdi-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.cdi-badge-user {
    background: var(--primary-bg);
    color: var(--primary);
}

.cdi-badge-email {
    background: #fef3c7;
    color: #92400e;
}

.cdi-badge-added {
    background: rgba(0, 178, 82, 0.12);
    color: #00b252;
}

.companion-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

.companion-dropdown-label {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Email invite row in dropdown */
.cdi-email-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Invited list */
.invited-list {
    margin-top: 16px;
}

.invited-list h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.invited-count {
    background: var(--primary-bg);
    color: var(--primary);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.invited-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.invited-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.invited-item:hover {
    border-color: var(--border);
}

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

.invited-item-name {
    font-size: 14px;
    font-weight: 600;
    display: block;
}

.invited-item-detail {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
}

.invited-item-role {
    flex-shrink: 0;
}

.invited-item-role select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: white;
    cursor: pointer;
}

.invited-item-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    transition: all 0.15s;
    flex-shrink: 0;
}

.invited-item-remove:hover {
    background: #fef2f2;
    color: #ef4444;
}

.invited-item-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-member {
    background: rgba(0, 178, 82, 0.12);
    color: #00b252;
}

/* Companion tags (search bar) adjustments */
.companion-tags:focus-within {
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0,178,82,0.1);
}

/* Step Panels & Navigation */
.create-step-panel {
    animation: fadeSlideIn 0.35s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.step-nav .btn-primary:disabled,
.step-nav .btn-primary[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* File card with real thumbnails */
.file-card {
    position: relative;
}

.file-card .file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.file-card-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: rgba(60,53,45,0.6);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
    z-index: 2;
}

.file-card:hover .file-card-remove {
    opacity: 1;
}

.file-card-remove:hover {
    background: rgba(239,68,68,0.9);
}

/* Upload summary (step 2) */
.upload-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--primary-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.summary-edit-btn {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.summary-edit-btn:hover {
    text-decoration: underline;
}

.required {
    color: #ef4444;
}

/* AI Generating */
.ai-generating {
    text-align: center;
    padding: 60px 32px;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}

.ai-gen-animation {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-gen-ring {
    position: absolute;
    inset: 0;
    border: 3px solid var(--border);
    border-top-color: var(--border);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ai-generating h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ai-gen-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.ai-gen-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
    text-align: left;
}

.ai-gen-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.ai-gen-step.done {
    color: var(--green);
}

.ai-gen-step.active {
    color: var(--text);
    font-weight: 500;
}

.ai-gen-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--border);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.ai-gen-dot {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-gen-dot::after {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--border);
    border-radius: 50%;
}

/* ===== FEED PAGE ===== */
.feed-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 104px 48px 80px;
}

.feed-layout {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    gap: 40px;
    align-items: start;
}

.is-guest .feed-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.is-guest .feed-sidebar {
    display: none;
}

.is-guest .feed-sidebar-right .sidebar-section:not(:first-child) {
    display: none;
}

/* Feed Sidebar */
.feed-sidebar {
    position: sticky;
    top: 80px;
}

.sidebar-profile {
    text-align: center;
    padding: 24px;
    background: white;
    border: 0;
    border-radius: 0;
    margin-bottom: 16px;
}

.sidebar-profile .avatar-lg {
    margin: 0 auto 12px;
}

.sidebar-profile h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.sidebar-profile > p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.sidebar-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.sidebar-stats strong {
    display: block;
    font-size: 16px;
    color: var(--text);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.sidebar-link:hover {
    background: var(--bg-muted);
    color: var(--text);
}

.sidebar-link.active {
    background: var(--bg-muted);
    color: var(--text);
}

.btn-sidebar-create {
    width: 100%;
    justify-content: center;
}

/* Feed Main */
.feed-main {
    min-width: 0;
}

.feed-mobile-views {
    display: none;
}

.feed-search-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.feed-search-panel[hidden] {
    display: none;
}

.feed-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgb(252, 252, 252);
    color: var(--text-muted);
    box-shadow: inset 0 2px 11px rgba(0, 0, 0, 0.09);
}

.feed-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.feed-search-field input::-webkit-search-cancel-button {
    display: none;
}

.feed-search-close,
.feed-mobile-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 999px;
    background: transparent;
    color: var(--charcoal);
}

.feed-search-close:hover,
.feed-mobile-search:hover {
    background: var(--bg-muted);
}

.feed-mobile-search {
    display: none;
}

.feed-cloud-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 112px;
    margin-bottom: 24px;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}

.feed-cloud-state button {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 700;
}

.feed-cloud-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #dad6ff;
    border-top-color: #111111;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.feed-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.filter-chip {
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all 0.2s;
}

.filter-chip:hover {
    color: var(--primary);
}

.filter-chip.active {
    background: transparent;
    color: var(--charcoal);
    border: 1.5px solid var(--border);
}

/* Feed Card */
.feed-card {
    background: white;
    border: 0;
    border-radius: 0;
    margin-bottom: 56px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

.feed-card:hover {
    box-shadow: var(--shadow-md);
}

.feed-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.feed-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-author strong {
    display: block;
    font-size: 14px;
}

.feed-author span {
    font-size: 12px;
    color: var(--text-muted);
}

.feed-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px 10px 14px;
    border-top: 0;
}

.feed-card-meta-row .feed-author {
    gap: 10px;
}

.feed-card-meta-row .feed-author strong {
    line-height: 1.1;
}

.feed-card-meta-row .feed-author span {
    display: block;
    margin-top: 1px;
    line-height: 1.15;
}

.feed-share-info {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.2;
    text-align: right;
}

.feed-more-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: all 0.2s;
}

.feed-more-btn:hover {
    background: var(--bg-muted);
}

.feed-card-cover {
    min-height: 220px;
    position: relative;
}

.feed-cover-content {
    position: absolute;
    inset: 0;
    background: transparent;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--charcoal);
}

.feed-tag {
    display: inline-block;
    padding: 5px 13px 4px;
    background: transparent;
    border: 1px solid var(--category-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    width: fit-content;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.feed-cover-content h3 {
    font-family: 'Sora', sans-serif;
    font-size: 38px;
    line-height: 1.02;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0;
}

.feed-cover-content p {
    font-size: 13px;
    opacity: 0.85;
}

.feed-card-cover.is-dark .feed-cover-content {
    color: var(--beige);
}

.feed-card-cover.is-dark .feed-tag {
    background: transparent;
    border: 1px solid var(--category-border);
    color: var(--beige);
}

.feed-card-cover.is-light .feed-tag {
    background: transparent;
    border: 1px solid var(--category-border);
    color: var(--charcoal);
}

.feed-cover-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.feed-cover-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 2px;
    border: 0;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    opacity: 0.9;
}

.feed-cover-stats strong {
    font-size: 14px;
    line-height: 1;
}

.feed-cover-stat-icon {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.feed-card-photos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    padding: 3px 0 0;
}

.feed-photo {
    aspect-ratio: 1;
    border-radius: 0;
}

.feed-photo-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    font-size: 14px;
    font-weight: 600;
    color: white;
    border-radius: 0;
}

.published-badge {
    padding: 5px 10px;
    border-radius: 0;
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
}

.feed-companions {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 0;
}

.feed-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 7px 12px 10px;
    border-top: 0;
}

.feed-reactions {
    display: flex;
    gap: 4px;
}

.reaction-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 0;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.reaction-btn:hover {
    background: var(--bg-muted);
}

.reaction-btn.is-saved {
    background: #dad6ff;
    color: var(--charcoal);
}

.reaction-btn.is-saved svg {
    fill: currentColor;
}

.reaction-btn.is-liked,
.reaction-btn[aria-pressed="true"],
.btn-follow[aria-pressed="true"] {
    background: var(--button-active-bg) !important;
    color: var(--charcoal) !important;
}

.feed-like-btn .material-symbols-outlined,
.feed-comments-btn .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.feed-like-btn.is-liked .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.feed-comments-panel {
    padding: 4px 14px 18px;
    cursor: default;
}

.feed-comments-list {
    display: grid;
    gap: 14px;
    padding: 14px 0;
}

.feed-comment {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 10px;
}

.feed-comment .avatar-xs,
.notification-item .avatar-xs {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #00b252;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.feed-comment-copy strong {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
}

.feed-comment-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.feed-comment-copy span,
.feed-comments-empty,
.feed-sidebar-empty {
    color: var(--text-muted);
    font-size: 11px;
}

.feed-comment-delete {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}

.feed-comment-delete .material-symbols-outlined {
    font-size: 17px;
}

.feed-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.feed-comment-input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: rgb(252, 252, 252);
    box-shadow: inset 0 1px 8px rgba(44, 46, 42, 0.09);
    color: var(--charcoal);
    font: inherit;
    font-size: 13px;
}

.feed-comment-form button,
.feed-comment-sign-in,
.btn-follow {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--charcoal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.feed-comment-sign-in {
    width: 100%;
}

.reaction-emoji {
    font-size: 16px;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.share-btn:hover {
    background: var(--bg-muted);
}

/* Feed Right Sidebar */
.feed-sidebar-right {
    position: sticky;
    top: 80px;
}

.feed-notifications-toggle {
    position: relative;
}

.feed-notifications-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: #ef4c43;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.sidebar-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-section-heading h4 {
    margin-bottom: 16px;
}

.feed-notifications-close {
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
}

.sidebar-section {
    background: white;
    border: 0;
    border-radius: 0;
    padding: 20px;
    margin-bottom: 16px;
}

.sidebar-section h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}

.trending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trending-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 6px;
    border-radius: 10px;
    color: inherit;
    text-align: left;
    transition: background 0.2s ease;
}

.trending-item:hover,
.trending-item:focus-visible {
    background: var(--bg-muted);
}

.trending-copy {
    min-width: 0;
}

.trending-rank {
    width: 24px;
    height: 24px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trending-item strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.trending-item span {
    font-size: 11px;
    color: var(--text-muted);
}

.suggested-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.suggested-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.suggested-person div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.suggested-person strong {
    display: block;
    font-size: 13px;
}

.suggested-person span {
    font-size: 11px;
    color: var(--text-muted);
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border-radius: 0;
    color: inherit;
    text-align: left;
}

.notification-item.unread {
    background: var(--primary-bg);
}

.notification-copy {
    display: grid;
    gap: 3px;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.notification-copy time {
    color: var(--text-muted);
    font-size: 10px;
}

.notification-item p strong {
    color: var(--text);
}

.notification-item > span {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ===== MEMORY DETAIL PAGE ===== */
.memory-hero {
    position: relative;
    padding: 56px 48px 40px;
    padding-top: calc(72px + 56px);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

/* ── Hero colour themes ── */
.memory-hero.theme-beige    { background: var(--beige); }
.memory-hero.theme-white    { background: #ffffff; }
.memory-hero.theme-yellow   { background: var(--memory-theme-yellow); }
.memory-hero.theme-green    { background: var(--memory-theme-green); border-bottom-color:var(--border); }
.memory-hero.theme-charcoal { background: var(--memory-theme-charcoal); border-bottom-color:var(--border); }
.memory-hero.theme-coral    { background: var(--memory-theme-coral); border-bottom-color:var(--border); }
.memory-hero.theme-blue     { background: var(--memory-theme-blue); border-bottom-color:var(--border); }

/* Pastel themes keep the same dark typography. */
.memory-hero.theme-green    .memory-hero-content,
.memory-hero.theme-charcoal .memory-hero-content,
.memory-hero.theme-coral    .memory-hero-content,
.memory-hero.theme-blue     .memory-hero-content { color: var(--charcoal); }

.memory-hero.theme-green    .memory-hero-content h1,
.memory-hero.theme-charcoal .memory-hero-content h1,
.memory-hero.theme-coral    .memory-hero-content h1,
.memory-hero.theme-blue     .memory-hero-content h1 { color: var(--charcoal); }

.memory-hero.theme-green    .memory-hero-subtitle,
.memory-hero.theme-charcoal .memory-hero-subtitle,
.memory-hero.theme-coral    .memory-hero-subtitle,
.memory-hero.theme-blue     .memory-hero-subtitle { color: var(--text-secondary); }

.memory-hero.theme-green    .memory-category-tag,
.memory-hero.theme-charcoal .memory-category-tag,
.memory-hero.theme-coral    .memory-category-tag,
.memory-hero.theme-blue     .memory-category-tag {
    background: transparent;
    color: var(--charcoal);
    border-color: var(--category-border);
}

.memory-hero-overlay {
    display: none;
}

.memory-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    color: var(--text);
}

.memory-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 28%);
    gap: 32px;
    align-items: end;
}

.memory-hero-copy {
    min-width: 0;
}

.memory-category-tag {
    display: inline-block;
    padding: 5px 10px 4px;
    background: transparent;
    color: var(--charcoal);
    border: 1px solid var(--category-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.memory-category-select {
    display: none;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-height: 26px;
    margin: 0 0 16px;
    padding: 5px 30px 4px 10px;
    border: 1px solid var(--category-border);
    border-radius: 999px;
    background: var(--control-bg);
    color: #000000;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

#memory-generated.is-editing .memory-category-tag {
    display: none;
}

#memory-generated.is-editing .memory-category-select {
    display: inline-block;
}

.memory-category-select:focus-visible {
    outline: 2px solid var(--button-active-bg);
    outline-offset: 2px;
}

.memory-hero-content h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--charcoal);
    margin-bottom: 16px;
}

.memory-title-editable {
    border: 1px solid transparent;
    border-radius: 0;
    padding: 2px 4px;
    margin-left: -4px;
    overflow-wrap: anywhere;
}

.memory-title-editable.has-placeholder::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}

#memory-generated.is-editing .memory-title-editable {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.78);
    cursor: text;
}

#memory-generated.is-editing .memory-title-editable:focus {
    outline: none;
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0,178,82,0.12);
}

.memory-hero-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.memory-hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.memory-hero-stats {
    display: grid;
    gap: 4px;
    align-self: stretch;
    align-content: end;
    justify-self: end;
    margin-right: -12px;
}

.memory-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.memory-stat.is-hidden-stat,
#memory-generated .memory-stat.is-hidden-stat {
    display: none;
}

.memory-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #000000;
    flex-shrink: 0;
}

.memory-stat-icon .material-symbols-outlined {
    display: block;
    font-size: 22px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22;
}

.memory-stat strong {
    display: block;
    font-size: 20px;
    line-height: 1;
    color: var(--charcoal);
    white-space: nowrap;
}

.memory-stat small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-secondary);
}

.memory-hero.theme-green .memory-stat,
.memory-hero.theme-charcoal .memory-stat,
.memory-hero.theme-coral .memory-stat,
.memory-hero.theme-blue .memory-stat {
    background: transparent;
    border-color:var(--border);
}

.memory-hero.theme-green .memory-stat-icon,
.memory-hero.theme-charcoal .memory-stat-icon,
.memory-hero.theme-coral .memory-stat-icon,
.memory-hero.theme-blue .memory-stat-icon {
    background: transparent;
    color: #000000;
}

.memory-hero.theme-green .memory-stat strong,
.memory-hero.theme-charcoal .memory-stat strong,
.memory-hero.theme-coral .memory-stat strong,
.memory-hero.theme-blue .memory-stat strong,
.memory-hero.theme-green .memory-stat small,
.memory-hero.theme-charcoal .memory-stat small,
.memory-hero.theme-coral .memory-stat small,
.memory-hero.theme-blue .memory-stat small {
    color: var(--charcoal);
}

.memory-hero.theme-green .memory-author-info strong,
.memory-hero.theme-charcoal .memory-author-info strong,
.memory-hero.theme-coral .memory-author-info strong,
.memory-hero.theme-blue .memory-author-info strong,
.memory-hero.theme-green .memory-author-info span,
.memory-hero.theme-charcoal .memory-author-info span,
.memory-hero.theme-coral .memory-author-info span,
.memory-hero.theme-blue .memory-author-info span {
    color: var(--charcoal);
}

.memory-author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.memory-author-info strong {
    display: block;
    font-size: 15px;
    line-height: 1.08;
}

.memory-author-info span {
    display: block;
    font-size: 13px;
    line-height: 1.1;
    margin-top: 1px;
    color: var(--text-muted);
}

.memory-stats {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

/* Memory Content */
/* ===== MEMORY SHELL ===== */
.memory-shell {
    --memory-shell-drawer-width: clamp(300px, 28vw, 520px);
    --memory-shell-theme-bg: #ffffff;
    display: grid;
    grid-template-columns: var(--memory-shell-drawer-width) minmax(0, 1fr);
    min-height: 100vh;
    background: #ffffff;
}

.memory-shell.theme-beige,
.memory-shell.theme-white {
    --memory-shell-theme-bg: #ffffff;
}

.memory-shell.theme-yellow {
    --memory-shell-theme-bg: var(--memory-theme-yellow);
}

.memory-shell.theme-green {
    --memory-shell-theme-bg: var(--memory-theme-green);
}

.memory-shell.theme-charcoal {
    --memory-shell-theme-bg: var(--memory-theme-charcoal);
}

.memory-shell.theme-coral {
    --memory-shell-theme-bg: var(--memory-theme-coral);
}

.memory-shell.theme-blue {
    --memory-shell-theme-bg: var(--memory-theme-blue);
}

.memory-shell-drawer {
    position: sticky;
    top: 0;
    height: 100vh;
    display: block;
    background: var(--memory-shell-theme-bg);
    border-right: 1px solid var(--border);
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.055);
    overflow: hidden;
    isolation: isolate;
}

.memory-shell-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 10px;
    background: #ffffff;
    border-right: 1px solid var(--border);
    z-index: 2;
}

.memory-shell-rail-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(245, 241, 228, 0.96);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.memory-shell-rail-btn:hover {
    transform: translateY(-1px);
    color: var(--brand-green);
    border-color: var(--border);
}

.memory-shell-rail-btn.is-active {
    background: var(--brand-green);
    color: var(--beige);
    border-color: var(--border);
}

.memory-shell-drawer-scroll {
    min-width: 0;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--memory-shell-theme-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.memory-shell-drawer-head {
    position: relative;
    z-index: 2;
    flex: 0 0 38%;
    min-height: 0;
    border-bottom: 0;
}

.memory-shell-drawer-head .memory-hero {
    min-height: 0;
    height: 100%;
    padding: 0;
    border-bottom: 0;
    box-sizing: border-box;
}

.memory-shell-drawer-head .memory-hero-content {
    height: 100%;
    position: relative;
    padding: 88px 28px 24px;
    display: flex;
    align-items: center;
}

.memory-shell-drawer-head .memory-hero-main {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    width: 100%;
}

.memory-shell-drawer-head .memory-hero-copy {
    max-width: none;
}

.memory-shell-drawer-head .memory-category-tag {
    margin-bottom: 6px;
    padding: 5px 10px 4px;
    font-size: 9px;
}

.memory-shell-drawer-head .memory-category-select {
    margin-bottom: 6px;
}

.memory-shell-drawer-head .memory-hero-content h1 {
    font-size: 52px;
    line-height: 0.98;
    margin-bottom: 8px;
}

.memory-shell-drawer-head .memory-hero-subtitle {
    margin-bottom: 16px;
    font-size: 17px;
}

.memory-shell-drawer-head .memory-hero-stats {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: 24px;
    justify-self: start;
    align-items: center;
    margin-right: 0;
}

.memory-shell-drawer-head .memory-stat {
    gap: 7px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.memory-shell-drawer-head .memory-stat-icon {
    width: 30px;
    height: 30px;
}

.memory-shell-drawer-head .memory-stat strong {
    font-size: 20px;
}

.memory-shell-drawer-head .memory-stat small {
    margin-top: 1px;
    font-size: 11px;
}

.memory-shell-drawer-body {
    position: relative;
    flex: 1 1 62%;
    min-height: 0;
    background: var(--memory-shell-theme-bg);
}

.memory-shell.no-map .memory-shell-drawer-body {
    display: none;
}

.memory-shell.no-map .memory-shell-drawer-head {
    flex: 1 1 auto;
    display: flex;
}

.memory-shell.no-map .memory-shell-drawer-head .memory-hero {
    flex: 1 1 auto;
    min-height: 100vh;
}

.memory-map-panel {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 100%;
    padding: 0 28px 28px;
    background: var(--memory-shell-theme-bg);
    z-index: 1;
}

.memory-shell-viewport {
    min-width: 0;
    background: #ffffff;
}

.memory-content {
    margin-left: 0;
    position: relative;
    width: 100%;
}

/* Nav inside story viewport */
.memory-shell-viewport > .nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.story-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #f0f4f8;
    border-radius: 14px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 14px);
    isolation: isolate;
}

@media (max-width: 900px) {
    .memory-hero-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .memory-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .memory-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .collab-grid {
        grid-template-columns: 1fr;
    }

    .collab-invite-row {
        grid-template-columns: 1fr;
    }
}

.auth-local-login {
    display: block;
    margin-top: 12px;
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
}

.auth-dialog > .btn-primary:disabled {
    opacity: 0.55;
    cursor: wait;
}

/* Photo pin markers on the map */
.map-photo-pin-wrapper,
.map-label-pin-wrapper {
    background: none !important;
    border: none !important;
    overflow: visible !important;
}

.map-photo-pin {
    position: relative;
    width: 18px;
    height: 18px;
    overflow: visible;
    cursor: pointer;
}

.map-photo-pin-dot {
    position: absolute;
    inset: 3px;
    z-index: 2;
    display: block;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 50%;
    background: #111111;
    box-shadow: none;
    transition: background-color 160ms ease, transform 160ms ease;
}

.map-photo-pin-preview {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 1;
    display: block;
    width: 72px;
    height: 72px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 7px) scale(0.88);
    transform-origin: 50% 100%;
    transition: opacity 160ms ease, transform 160ms ease;
}

.map-photo-pin.is-timeline-hovered .map-photo-pin-dot {
    border-color: #00b252;
    background: #00b252;
    transform: scale(1.18);
}

.map-photo-pin.is-timeline-hovered .map-photo-pin-preview,
.map-photo-pin-wrapper:hover .map-photo-pin-preview,
.map-photo-pin-wrapper:focus .map-photo-pin-preview {
    z-index: 4;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.map-photo-pin-wrapper:hover .map-photo-pin-dot,
.map-photo-pin-wrapper:focus .map-photo-pin-dot {
    border-color: #00b252;
    background: #00b252;
    transform: scale(1.18);
}

.map-photo-pin-wrapper:hover,
.map-photo-pin-wrapper:focus,
.leaflet-marker-icon.is-timeline-photo-hovered {
    z-index: 1000 !important;
}

.map-label-pin {
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    border: 2px solid var(--border);
}

/* Route polyline popup */
.leaflet-popup-content-wrapper {
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.map-popup {
    text-align: center;
    padding: 4px;
}

.map-popup img {
    width: var(--edit-grid-size);
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

.map-popup .popup-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}

.map-popup .popup-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.memory-body {
    padding: 48px 32px;
}

.memory-chapter {
    margin-bottom: 56px;
}

.chapter-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.chapter-dot {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.chapter-marker span {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.memory-text {
    margin-bottom: 24px;
}

.memory-lead {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 16px;
}

.memory-text p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.memory-text p:last-child {
    margin-bottom: 0;
}

/* Memory Gallery */
.memory-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
    border-radius: 0;
    overflow: hidden;
    cursor: zoom-in;
}

.memory-gallery.full-width {
    grid-template-columns: 1fr;
}

.gallery-main {
    height: 280px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.gallery-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 4px 12px;
    background: rgba(60,53,45,0.5);
    color: white;
    font-size: 12px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.gallery-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-thumb {
    flex: 1;
    border-radius: 0;
    min-height: 0;
}

.gallery-panorama {
    height: 240px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

/* Memory Document */
.memory-document {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 20px;
}

.doc-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.doc-info span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Memory Map */
.memory-map {
    margin: 48px 0;
    text-align: center;
}

.map-container {
    margin-bottom: 12px;
}

.map-placeholder {
    height: 280px;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.map-route {
    position: absolute;
    inset: 0;
}

.map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translate(-50%, -50%);
}

.pin-dot {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    border: 3px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.map-pin span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    background: white;
    padding: 2px 8px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    white-space: nowrap;
}

.map-lines {
    position: absolute;
    inset: 0;
}

.map-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Companions Section */
.memory-companions-section {
    margin: 48px 0;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}

.memory-companions-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.companions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
}

.companion-card {
    text-align: center;
    padding: 20px 12px;
    background: var(--bg-subtle);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.companion-card .avatar-md {
    margin: 0 auto 10px;
}

.companion-card strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px;
}

.companion-card span {
    font-size: 11px;
    color: var(--text-muted);
}

/* Comments */
.memory-comments {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}

.memory-comments h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.captured-moments-section {
    margin-top: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ai-drafts-section {
    margin-top: 36px;
    padding: 26px;
    background: linear-gradient(180deg, #f4f8f3 0%, #fcfaf3 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
}

.ai-drafts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.ai-drafts-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000000;
}

.ai-drafts-header h3 {
    font-size: 24px;
    line-height: 1.05;
    margin: 0;
}

.ai-drafts-count {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.1);
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ai-drafts-intro {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.ai-drafts-list {
    display: grid;
    gap: 14px;
}

.ai-draft-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
}

.ai-draft-recommendation {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.ai-draft-block {
    margin-bottom: 12px;
}

.ai-draft-block strong {
    display: block;
    margin-bottom: 6px;
    color: #000000;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ai-draft-subheading {
    display: none;
}

.ai-draft-timeline {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.pending-memory-story-block {
    margin-bottom: 14px;
}

.ai-draft-timeline-list {
    display: grid;
    gap: 12px;
}

.ai-draft-timeline-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.ai-draft-timeline-media {
    border-radius: 14px;
    overflow: hidden;
    background: #efe8d7;
    min-height: 92px;
}

.ai-draft-timeline-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
}

.ai-draft-timeline-copy {
    min-width: 0;
}

.ai-draft-timeline-label {
    display: inline-block;
    margin-bottom: 6px;
    color: #000000;
    font-size: 13px;
    font-weight: 800;
}

.ai-draft-timeline-copy p {
    margin: 0;
}

.ai-draft-top,
.ai-draft-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ai-draft-top {
    margin-bottom: 10px;
}

.ai-draft-scope {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ai-draft-date,
.ai-draft-meta span {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.ai-draft-card p {
    margin: 0 0 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

.ai-draft-details {
    margin-top: 8px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}

.ai-draft-details summary {
    cursor: pointer;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
}

.ai-draft-details pre {
    margin: 10px 0 0;
    white-space: pre-wrap;
    font: inherit;
    color: var(--text-muted);
    line-height: 1.6;
}

.ai-draft-meta strong {
    color: var(--text);
}

.ai-draft-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.ai-drafts-empty {
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    color: var(--text-muted);
    font-size: 14px;
}

.ai-drafts-loading {
    color: #000000;
}

@media (max-width: 760px) {
    .ai-draft-timeline-card {
        grid-template-columns: 1fr;
    }
}

.context-blocks-section {
    margin-top: 26px;
    padding: 26px;
    background: linear-gradient(180deg, #fff7ea 0%, #fcfaf3 100%);
    border: 1px solid var(--border);
    border-radius: 22px;
}

.context-blocks-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.context-blocks-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000000;
}

.context-blocks-header h3 {
    font-size: 24px;
    line-height: 1.05;
    margin: 0;
}

.context-blocks-count {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.context-blocks-intro {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.context-blocks-list {
    display: grid;
    gap: 14px;
}

.context-blocks-inline {
    margin-top: 0;
}

.gen-day-side .context-blocks-inline {
    width: 100%;
}

.context-block-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    min-height: 260px;
    max-height: none;
    overflow: visible;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 40px 28px 14px;
    box-shadow: 0 10px 24px rgba(45, 38, 28, 0.06);
}

#memory-generated .gen-day-main > .context-block-card {
    width: 100%;
    margin-bottom: 0;
}

#memory-generated .context-block-card[data-layout-sized="true"] {
    height: calc(var(--grid-h, 10) * var(--edit-grid-size));
    min-height: 0;
    max-height: none;
}

#memory-generated.is-editing .gen-day-main > .context-block-card[data-positioning-mode="absolute"] {
    min-height: calc(var(--grid-h, 1) * var(--edit-grid-size));
}

.context-block-card > .gen-block-move-controls {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 6;
}

.context-block-card > .gen-block-move-controls .gen-block-drag-handle {
    min-width: 26px;
    height: 26px;
}

.context-block-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.72;
}

#memory-generated.is-editing .context-block-card:hover .context-block-delete,
#memory-generated.is-editing .context-block-delete:focus-visible {
    display: inline-flex;
    opacity: 1;
}

.context-block-delete:hover {
    border-color: var(--border);
    background: #fff;
    opacity: 1;
}

.context-block-compact {
    display: grid;
    align-content: start;
    gap: 7px;
    flex: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
}

#memory-generated.is-editing .context-block-card .context-block-compact {
    cursor: text;
    user-select: text;
    touch-action: auto;
}

.context-block-label {
    display: inline-flex;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.context-block-card h4 {
    margin: 0;
    color: #000000;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 650;
}

.context-block-preview {
    display: block;
    overflow: visible;
}

.context-block-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 13px;
}

.context-block-details {
    min-height: 0;
    margin-top: auto;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}

.context-block-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
    cursor: pointer;
    color: #000000;
    font-size: 12px;
    font-weight: 750;
    list-style: none;
}

.context-block-details summary::-webkit-details-marker {
    display: none;
}

.context-block-details summary::after {
    content: '+';
    font-size: 16px;
    line-height: 1;
}

.context-block-details[open] summary::after {
    content: '-';
}

.context-block-details-body {
    display: grid;
    gap: 10px;
    max-height: 132px;
    overflow: auto;
    padding: 0 2px 2px 0;
}

.context-block-facts,
.context-block-evidence {
    display: grid;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.context-block-facts ul,
.context-block-evidence ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 16px;
}

.context-block-facts li,
.context-block-evidence li {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.context-block-why,
.context-block-prompt {
    display: grid;
    gap: 4px;
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.context-block-facts strong,
.context-block-evidence strong,
.context-block-why strong,
.context-block-prompt strong {
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.context-block-why span,
.context-block-prompt span {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.context-block-confidence {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .gen-day-layout,
    .pending-memory-card {
        grid-template-columns: 1fr;
    }
}

.captured-moments-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.captured-moments-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.captured-moments-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000000;
}

.captured-moments-header h3 {
    font-size: 24px;
    line-height: 1.05;
    margin: 0;
}

.captured-moments-count {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.captured-moments-generate {
    min-height: 34px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #000000;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.captured-moments-generate:disabled {
    cursor: default;
    opacity: 0.48;
}

.captured-moments-list {
    display: grid;
    gap: 8px;
}

.captured-moments-empty {
    margin: 0;
    padding: 8px 0 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
}

.captured-moment-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 0;
}

.captured-moment-main {
    min-width: 0;
}

.captured-moment-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.captured-moment-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.captured-moment-date {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.captured-moment-card p {
    margin: 0 0 6px;
    color: var(--text-secondary);
    line-height: 1.45;
    font-size: 13px;
}

.captured-moment-media-preview {
    width: 120px;
    margin: 6px 0 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #f7f4ec;
}

.captured-moment-media-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.captured-moment-media-preview img:not([src]) {
    background: linear-gradient(135deg, #f7f4ec, #eee6d6);
}

.captured-moment-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    font-size: 12px;
    flex-wrap: wrap;
}

.captured-moment-meta strong {
    color: var(--text);
    font-weight: 600;
}

.captured-moment-meta a {
    color: var(--link);
    font-weight: 700;
    font-size: 12px;
}

.capture-routing-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    background: transparent;
}

.capture-routing-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.capture-routing-panel-head span,
.capture-routing-grid span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.capture-routing-panel-head strong {
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capture-routing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(86px, 0.6fr) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.capture-routing-grid div {
    min-width: 0;
}

.capture-routing-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.capture-routing-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.capture-routing-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
}

.capture-routing-pill strong {
    color: inherit;
    font-weight: 800;
    white-space: nowrap;
}

.capture-routing-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capture-routing-pill.is-active {
    border-color: var(--border);
    background: rgba(0, 0, 0, 0.07);
    color: #000000;
}

.capture-routing-feedback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 10px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.07);
    color: #000000;
    font-size: 12px;
    line-height: 1.3;
}

.capture-routing-feedback span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.capture-routing-feedback strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capture-routing-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.capture-routing-move {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.capture-routing-move select {
    min-height: 32px;
    max-width: 230px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--charcoal);
    font: inherit;
    font-size: 12px;
}

.capture-routing-action {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.capture-routing-action.is-review {
    border-color: var(--border);
    color: #8d4a36;
}

.capture-routing-action.is-external {
    background: #000000;
    color: #ffffff;
}

.capture-routing-action:disabled {
    cursor: default;
    opacity: 0.5;
}

.capture-new-memory-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 22, 19, 0.34);
}

.capture-new-memory-modal.is-open {
    display: flex;
}

.capture-new-memory-dialog {
    position: relative;
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 22, 19, 0.24);
}

.capture-new-memory-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.capture-new-memory-dialog h3 {
    margin: 0 40px 18px 0;
    color: var(--text);
    font-size: 24px;
    line-height: 1.1;
}

.capture-new-memory-form {
    display: grid;
    gap: 14px;
}

.capture-new-memory-form label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.capture-new-memory-form input,
.capture-new-memory-form select {
    min-height: 42px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--charcoal);
    font: inherit;
    font-size: 14px;
}

.capture-new-memory-form input:focus,
.capture-new-memory-form select:focus {
    outline: none;
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.capture-new-memory-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.capture-new-memory-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.capture-new-memory-cancel,
.capture-new-memory-create {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.capture-new-memory-cancel {
    border: 1px solid var(--border);
    background: #ffffff;
    color: var(--text-secondary);
}

.capture-new-memory-create {
    border: 1px solid var(--border);
    background: #000000;
    color: #ffffff;
}

.capture-new-memory-create:disabled {
    cursor: default;
    opacity: 0.58;
}

.captured-moment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
}

.captured-moment-delete {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: transparent;
    color: #8d4a36;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
}

.captured-moments-processed {
    margin-top: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}

.captured-moments-processed summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.captured-moments-processed-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.captured-moment-card.is-processed {
    opacity: 0.72;
    background: transparent;
}

@media (max-width: 760px) {
    .captured-moment-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .captured-moment-actions {
        justify-content: flex-start;
    }

    .capture-routing-grid {
        grid-template-columns: 1fr;
    }
}

.comment-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.comment {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.comment-body {
    flex: 1;
    background: var(--bg-subtle);
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.comment-header strong {
    font-size: 13px;
}

.comment-header span {
    font-size: 12px;
    color: var(--text-muted);
}

.comment-body p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.comment-actions {
    display: flex;
    gap: 12px;
}

.comment-actions button {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.comment-actions button:hover {
    color: var(--primary);
}

.comment-input {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.comment-input .form-input {
    flex: 1;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 88px 48px 80px;
}

.profile-header {
    margin-bottom: 24px;
    position: relative;
}

.profile-cover {
    display: none;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0;
    flex-wrap: nowrap;
    position: relative;
    margin-top: 0;
}

.profile-info > .avatar-xl {
    position: relative;
    z-index: 2;
    border: 0;
    box-shadow: none;
}

.profile-details {
    flex: 0 1 auto;
    min-width: 200px;
    padding-top: 0;
}

.profile-details h1 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
}

.profile-handle {
    display: none;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.profile-bio {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.profile-stats-row {
    display: flex;
    gap: 24px;
    margin-left: auto;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
}

.profile-stats-row strong {
    font-size: 16px;
    color: var(--text);
    display: block;
}

.profile-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 0;
}

/* Profile Tabs */
.profile-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.profile-tab {
    padding: 8px 18px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.profile-tab:hover {
    color: var(--primary);
}

.profile-tab.active {
    color: var(--primary);
    border-bottom-color: var(--border);
    font-weight: 600;
}

/* ===== MEMORIES FILTER BAR ===== */
.memories-filter-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
    padding: 20px 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 0;
}

.memories-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.memories-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-height: 42px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    transition: border-color 0.2s;
}

.memories-search-wrap:focus-within {
    border-color: var(--border);
    color: var(--text);
}

.memories-search-wrap input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    color: var(--text);
}

.memories-search-wrap input::placeholder {
    color: var(--text-muted);
}

.profile-new-memory-btn {
    position: absolute;
    right: 0;
    bottom: 20px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--charcoal);
    color: var(--beige);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.memories-filter-bar.no-memories .memories-search-row {
    flex-direction: column;
    align-items: stretch;
}

.memories-filter-bar.no-memories .memories-search-wrap {
    padding-right: 16px;
}

.memories-filter-bar.no-memories .profile-new-memory-btn {
    position: static;
    align-self: center;
}

.memories-filter-bar.no-memories .memories-filter-section {
    display: none;
}

.memories-filter-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 7px;
    padding-right: 0;
}

.memories-filter-bar:not(.no-memories) .memories-filter-section {
    padding-right: 0;
}

.memories-filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    min-width: 62px;
}

.memories-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mfc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.mfc-chip:hover {
    border-color: var(--border);
    color: var(--primary);
    background: var(--primary-bg);
}

.mfc-chip.active {
    background: var(--primary);
    border-color: var(--border);
    color: #ffffff;
}

.mfc-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 5px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.mfc-person-chip.no-avatar {
    padding-left: 14px;
}

.mfc-person-chip:hover {
    border-color: var(--border);
    color: var(--primary);
    background: var(--primary-bg);
}

.mfc-person-chip.active {
    background: var(--primary);
    border-color: var(--border);
    color: #ffffff;
}

.mfc-person-chip.active .mfc-avatar {
    outline: 2px solid var(--border);
}

.mfc-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: white;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.form-select:focus {
    outline: none;
    border-color: var(--border);
}

.memories-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.memories-empty p {
    font-size: 15px;
}

/* Profile Memory Grid */
.profile-memories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.profile-grid-divider {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--charcoal);
    font-size: 14px;
    font-weight: 800;
}

.capture-inbox {
    margin-bottom: 24px;
    padding: 20px 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0;
}

.capture-inbox-header {
    margin-bottom: 18px;
}

.capture-inbox-toggle {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.capture-inbox-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.capture-inbox-toggle-meta {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.capture-inbox-toggle-icon {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    margin-top: auto;
    border: 1px solid #000000;
    border-radius: 12px;
    background: transparent;
    color: var(--charcoal);
    font-size: 40px;
    line-height: 1;
    text-align: center;
}

.capture-inbox-toggle:not(:disabled):hover,
.capture-inbox-toggle:focus-visible {
    background: transparent !important;
    opacity: 1 !important;
    outline: none;
}

.capture-inbox-body {
    display: block;
}

.capture-inbox.is-collapsed .capture-inbox-header {
    margin-bottom: 0;
}

.capture-inbox.is-collapsed .capture-inbox-toggle-icon {
    padding-top: 3px;
}

.capture-inbox.is-collapsed .capture-inbox-body {
    display: none;
}

.capture-inbox-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.capture-inbox-title {
    display: block;
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.capture-inbox-description {
    display: block;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.capture-inbox-count {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.capture-inbox-count.has-captures {
    background: transparent;
    color: #000000;
}

.capture-inbox-list {
    display: grid;
    gap: 12px;
}

.capture-inbox-composer {
    margin-bottom: 18px;
    padding: 16px 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0;
}

.capture-inbox-composer textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fffdf8;
    color: var(--text);
    font: inherit;
    line-height: 1.5;
}

.capture-inbox-composer textarea:focus {
    outline: none;
    border-color: var(--border);
    box-shadow: 0 0 0 4px rgba(0,178,82,0.08);
}

.capture-inbox-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}

.capture-inbox-composer-actions p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.capture-inbox-composer-actions .btn-outline {
    flex: 0 0 auto;
    white-space: nowrap;
}

.capture-inbox-card {
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 0;
}

.capture-inbox-top,
.capture-inbox-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.capture-inbox-top {
    margin-bottom: 10px;
}

.capture-inbox-type {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.capture-inbox-date,
.capture-inbox-meta span {
    color: var(--text-muted);
    font-size: 12px;
}

.capture-inbox-media-link {
    color: var(--link);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.capture-inbox-media-link:hover {
    text-decoration: underline;
}

.capture-inbox-card p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.capture-inbox-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 12px 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-dark);
    font-size: 13px;
    line-height: 1.25;
}

.capture-inbox-suggestion span {
    color: var(--text-muted);
}

.capture-inbox-suggestion strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capture-inbox-media-preview {
    width: 100%;
    max-width: 180px;
    margin: 0 0 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #f7f4ec;
}

.capture-inbox-media-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.capture-inbox-media-preview img:not([src]) {
    background: linear-gradient(135deg, #f7f4ec, #eee6d6);
}

.capture-inbox-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.capture-inbox-actions select {
    min-height: 34px;
    max-width: 260px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--charcoal);
    font: inherit;
    font-size: 12px;
}

.capture-inbox-attach,
.capture-inbox-route,
.capture-inbox-delete {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.capture-inbox-attach {
    border-color: var(--border);
    background: #000000;
    color: #ffffff;
}

.capture-inbox-route {
    border-color: var(--border);
    background: #ffffff;
    color: #000000;
}

.capture-inbox-delete {
    border-color: var(--border);
    background: #ffffff;
    color: #8d4a36;
}

.capture-inbox-actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

.capture-inbox-empty {
    margin: 0;
    padding: 16px 0;
    background: #ffffff;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 14px;
}

.profile-memory-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    padding-bottom: 52px;
    background: #ffffff;
}

.profile-memory-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.pmc-received-badge {
    position: absolute;
    z-index: 3;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e2483d;
    border: 0;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.pmc-cover {
    height: 180px;
    position: relative;
}

.pmc-delete-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-height: 32px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--charcoal);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pmc-restore-btn {
    position: absolute;
    left: 12px;
    bottom: 12px;
    min-height: 32px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--button-active-bg, #dad6ff);
    color: var(--charcoal);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pmc-delete-btn:hover {
    background: var(--charcoal);
    color: #ffffff;
}

.pmc-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px 4px;
    background: #ffffff;
    color: var(--charcoal);
    border: 1px solid var(--category-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(8px);
}

.pmc-status-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-width: 0;
    padding: 0;
    justify-content: flex-start;
    background: transparent;
    color: var(--charcoal);
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    text-align: left;
}

.pmc-status-badge.published,
.pmc-status-badge.draft,
.pmc-status-badge.archived {
    background: transparent;
    border: 0;
    color: var(--charcoal);
    font-weight: 400;
}

.pmc-info {
    padding: 16px;
    background: white;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pmc-info-main {
    min-width: 0;
}

.pmc-info h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.pmc-info span {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
}

.pmc-info .pmc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pmc-info .pmc-status-badge .story-status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-bottom: 1px;
}

.pmc-date-line {
    margin-bottom: 3px;
    color: var(--text-secondary) !important;
}

/* ===== MY MEMORIES EMPTY STATE ===== */
.memories-empty {
    text-align: center;
    padding: 60px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.memories-empty h3 {
    font-size: 18px;
    font-weight: 700;
}

.memories-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 300px;
    margin-bottom: 8px;
}

.memories-empty.is-shared-empty > svg {
    display: none;
}

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

.pmc-date-badge {
    display: none;
}

/* ===== GENERATED STORY & TIMELINE ===== */
.gen-hero-dynamic {
    background-size: cover;
    background-position: center;
}

/* Edit toolbar */
.gen-edit-toolbar {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.gen-edit-toolbar-inner {
    max-width: none;
    margin: 0;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.gen-toolbar-spacer {
    flex: 1;
}

.gen-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--charcoal);
    color: var(--beige);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
}

.gen-toolbar-btn:hover {
    background: var(--charcoal);
}

.gen-edit-toolbar-inner > .btn-primary {
    min-height: 40px;
    padding: 0 20px;
    background: var(--brand-green);
    color: var(--beige);
    border-radius: 999px;
}

.gen-edit-toolbar-inner > .btn-primary:hover {
    background: var(--brand-green);
}

.memory-hero-actions {
    position: absolute;
    top: 22px;
    left: 24px;
    right: 24px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#memory-generated .memory-shell-drawer .memory-hero-actions {
    position: fixed;
    top: 0;
    right: auto;
    left: 0;
    z-index: 1200;
    box-sizing: border-box;
    width: var(--memory-shell-drawer-width);
    min-height: 78px;
    padding: 22px 24px 14px;
    background: #ffffff;
}

.memory-hero-actions-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.memory-hero-edit-btn {
    flex: 0 0 auto;
    min-width: 94px;
    justify-content: center;
}

#memory-generated {
    --memory-edit-layer-width: min(350px, calc(100vw - 22px));
}

#memory-generated.is-editing .memory-hero-edit-btn {
    position: fixed;
    top: 22px;
    left: calc(var(--memory-shell-drawer-width, 370px) - 118px);
    z-index: 240;
}

#memory-generated.is-editing .memory-hero-edit-btn.is-done {
    background: var(--brand-green);
    border-color: var(--border);
    color: var(--beige);
}

.memory-edit-layer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.memory-edit-layer-backdrop.is-open {
    opacity: 0;
    pointer-events: none;
}

.memory-edit-layer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 220;
    width: var(--memory-edit-layer-width);
    display: block;
    background: #ffffff;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 6px 0 16px rgba(31, 28, 24, 0.08);
    transform: translateX(-104%);
    transition: transform 0.28s ease;
    pointer-events: none;
}

.memory-edit-layer.is-open {
    transform: translateX(0);
    pointer-events: auto;
}

.memory-edit-layer-scroll {
    min-height: 100%;
    height: 100%;
    padding: 32px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: #ffffff;
}

.memory-edit-panel,
.memory-edit-layer .collab-panel {
    padding: 0;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.memory-edit-panel-header,
.memory-edit-layer .collab-header {
    margin-bottom: 16px;
}

.memory-edit-panel-header h3 {
    margin: 0;
    color: var(--charcoal);
    font-size: 22px;
}

.memory-edit-layer .gen-edit-toolbar-inner {
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
}

.memory-edit-layer .gen-toolbar-spacer {
    display: none;
}

.memory-edit-layer .gen-toolbar-btn,
.memory-edit-layer .btn-edit-story,
.memory-edit-layer .gen-edit-toolbar-inner > .btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 44px;
}

.memory-edit-layer .memory-add-photos-btn {
    display: none;
}

.memory-edit-layer .btn-edit-story,
.memory-edit-layer .collab-invite-row button,
.memory-edit-layer .collab-form button {
    background: #ffffff;
    color: var(--charcoal);
    border: 1px solid var(--border);
    box-shadow: none;
}

.memory-edit-layer .btn-edit-story:hover,
.memory-edit-layer .collab-invite-row button:hover,
.memory-edit-layer .collab-form button:hover {
    background: #ffffff;
    color: var(--charcoal);
}

.memory-edit-layer .gen-edit-toolbar-inner > .btn-primary {
    display: none;
}

.memory-edit-layer .gen-layout-bar {
    width: 100%;
    display: grid;
    gap: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.memory-edit-layer .gen-color-palette {
    min-height: 0;
    justify-content: flex-start;
    padding: 0;
    gap: 18px;
    border-right: 0;
    border-bottom: 0;
}

.memory-edit-layer .gen-layout-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 18px;
    row-gap: 10px;
    min-width: 0;
}

.memory-edit-layer .gen-layout-toggle {
    justify-content: flex-start;
    min-height: 24px;
    padding: 0;
    border-right: 0;
    border-bottom: 0;
    white-space: nowrap;
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 500;
}

.memory-edit-layer .gen-layout-toggle input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--charcoal);
}

.memory-edit-layer .gen-color-swatch {
    width: 28px;
    height: 28px;
    border-width: 2px;
}

.memory-edit-layer .gen-color-swatch:hover {
    transform: none;
}

.memory-edit-layer .gen-color-swatch.active {
    border-color: var(--border);
    box-shadow: 0 0 0 3px var(--primary);
}

.memory-edit-layer .gen-layout-toggle:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.memory-edit-layer .gen-layout-toggle:nth-child(2n) {
    border-right: 0;
}

.memory-edit-layer .collab-panel {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    display: block !important;
    padding-top: 22px;
}

.memory-edit-layer .collab-header h3 {
    display: none;
}

.memory-edit-layer .collab-grid {
    grid-template-columns: 1fr;
}

.memory-edit-collaboration {
    margin: 0;
}

.memory-edit-section-btn {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--charcoal);
    font-size: 20px;
    font-weight: 800;
    text-align: left;
}

.memory-edit-section-btn svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.memory-edit-section-btn:hover {
    background: transparent;
    color: var(--charcoal);
}

.memory-edit-collapsible {
    display: none;
}

.memory-edit-collapsible.is-open {
    display: block;
}

.memory-edit-layer .collab-invite-row {
    grid-template-columns: 1fr;
}

.memory-edit-layer .collab-invite-row button,
.memory-edit-layer .collab-form button,
.memory-edit-layer .collab-actions button {
    width: 100%;
}

.memory-edit-order-btn {
    width: 100%;
    min-height: 62px;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--charcoal);
    color: var(--beige);
    font-size: 18px;
    font-weight: 800;
    box-shadow: none;
}

.memory-edit-order-btn svg {
    width: 18px;
    height: 18px;
}

.memory-edit-order-btn:hover {
    background: var(--charcoal);
}

#memory-generated.is-editing .memory-shell-drawer-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#memory-generated.is-editing .memory-shell-drawer-head {
    flex: 0 0 38vh;
    height: 38vh;
}

#memory-generated.is-editing .memory-shell-drawer-head .memory-hero {
    height: 100%;
    min-height: 0;
}

#memory-generated.is-editing .memory-shell-drawer-body {
    flex: 0 0 auto;
    display: block;
    min-height: 0;
}

#memory-generated.is-editing .memory-map-panel {
    height: 300px;
    min-height: 300px;
}

@media (min-width: 1025px) {
    #memory-generated .memory-shell-drawer-head {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
    }

    #memory-generated .memory-shell-drawer-head .memory-hero,
    #memory-generated .memory-shell-drawer-head .memory-hero-content {
        height: auto;
        min-height: 0;
    }

    #memory-generated:not(.is-editing) .memory-shell-drawer-body {
        flex: 0 0 auto;
        height: max(300px, 62vh);
        min-height: 300px;
    }

    #memory-generated .memory-shell.no-map .memory-shell-drawer-head {
        flex: 1 1 auto;
        min-height: 100vh;
    }

    #memory-generated .memory-shell.no-map .memory-shell-drawer-head .memory-hero {
        min-height: 100vh;
    }
}

.memory-inline-edit-panel {
    position: static;
    z-index: auto;
    width: 100%;
    padding: 0 28px 36px;
    background: var(--memory-shell-theme-bg);
    border: 0;
    box-shadow: none;
}

.memory-inline-edit-panel-scroll {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.memory-inline-edit-panel .memory-edit-panel,
.memory-inline-edit-panel .memory-edit-collaboration {
    background: transparent;
}

.memory-inline-edit-panel .gen-edit-toolbar-inner {
    display: block;
    padding: 0;
}

.memory-inline-edit-panel .memory-add-photos-btn,
.memory-inline-edit-panel .gen-edit-toolbar-inner > .btn-primary {
    display: none;
}

.memory-inline-edit-panel .gen-layout-bar {
    display: grid;
    gap: 12px;
    width: 100%;
    padding: 24px 0 20px;
    background: transparent;
    border: 0;
}

.memory-inline-edit-label {
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.memory-inline-edit-panel .gen-color-palette {
    align-self: auto;
    gap: 12px;
    min-height: 28px;
    padding: 0;
    border: 0;
}

.memory-inline-edit-panel .gen-color-swatch {
    width: 28px;
    height: 28px;
}

.memory-inline-edit-panel .memory-edit-section-btn {
    min-height: 48px;
    font-size: 14px;
}

.memory-layouts-panel {
    padding: 0 0 18px;
}

.memory-layouts-panel p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.memory-layout-options {
    display: grid;
    gap: 10px;
}

.memory-layout-option {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 84px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: #f0f1f1;
    color: #000000;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    transition: opacity 0.18s ease, background 0.18s ease;
}

.memory-layout-option:hover {
    opacity: 0.8;
}

.memory-layout-option.is-active {
    background: #dad6ff;
    opacity: 1;
}

.memory-layout-option-preview {
    position: relative;
    display: block;
    width: 76px;
    height: 58px;
    overflow: hidden;
    background: #ffffff;
}

.memory-layout-option-preview.is-custom span {
    position: absolute;
    display: block;
    background: #000000;
}

.memory-layout-option-preview.is-custom span:nth-child(1) {
    top: 7px;
    left: 7px;
    width: 36px;
    height: 20px;
}

.memory-layout-option-preview.is-custom span:nth-child(2) {
    top: 31px;
    right: 7px;
    width: 29px;
    height: 18px;
}

.memory-layout-option-preview.is-custom span:nth-child(3) {
    top: 31px;
    left: 7px;
    width: 23px;
    height: 8px;
}

.memory-layout-option-preview.is-central-timeline i {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(to bottom, #000000 0 1px, transparent 1px 3px);
    transform: translateX(-50%);
}

.memory-layout-option-preview.is-central-timeline span {
    position: absolute;
    display: block;
    width: 26px;
    height: 13px;
    background: #000000;
}

.memory-layout-option-preview.is-central-timeline span:nth-of-type(1) {
    top: 7px;
    left: 6px;
}

.memory-layout-option-preview.is-central-timeline span:nth-of-type(2) {
    top: 23px;
    right: 6px;
}

.memory-layout-option-preview.is-central-timeline span:nth-of-type(3) {
    top: 40px;
    left: 6px;
}

.memory-layout-option-preview.is-horizontal-timeline i {
    position: absolute;
    top: 50%;
    right: 5px;
    left: 5px;
    height: 1px;
    background: repeating-linear-gradient(to right, #000000 0 1px, transparent 1px 3px);
    transform: translateY(-50%);
}

.memory-layout-option-preview.is-horizontal-timeline span {
    position: absolute;
    display: block;
    top: 11px;
    width: 18px;
    height: 16px;
    background: #000000;
}

.memory-layout-option-preview.is-horizontal-timeline span:nth-of-type(1) {
    left: 6px;
}

.memory-layout-option-preview.is-horizontal-timeline span:nth-of-type(2) {
    left: 29px;
}

.memory-layout-option-preview.is-horizontal-timeline span:nth-of-type(3) {
    right: 6px;
}

.memory-layout-option-copy {
    min-width: 0;
}

.memory-layout-option-copy strong,
.memory-layout-option-copy small {
    display: block;
}

.memory-layout-option-copy strong {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.memory-layout-option-copy small {
    color: rgba(0, 0, 0, 0.58);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}

.memory-layout-managed-hint {
    margin-top: 12px !important;
}

.memory-layout-visibility {
    margin-top: 40px;
}

.memory-layout-visibility h4 {
    margin: 0 0 20px;
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.memory-layout-visibility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 0;
}

.memory-layout-visibility-item {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 4px 14px 4px 0;
    border-radius: 10px;
    background: transparent;
    color: #000000;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

.memory-layout-visibility-item:hover {
    opacity: 0.8;
}

.memory-layout-visibility-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22;
}

.memory-layout-visibility-label {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.memory-edit-dialog .memory-layout-visibility-item input,
.style-profile-dialog .style-profile-toggle input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    margin: 0;
    padding: 0;
    border: 1px solid #858585;
    border-radius: 0;
    background: #ffffff;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.memory-edit-dialog .memory-layout-visibility-item input:checked,
.style-profile-dialog .style-profile-toggle input:checked {
    border-color: var(--button-active-bg, #dad6ff);
    background: var(--button-active-bg, #dad6ff);
}

.memory-edit-dialog .memory-layout-visibility-item input:checked::after,
.style-profile-dialog .style-profile-toggle input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 9px;
    border-right: 1.5px solid #000000;
    border-bottom: 1.5px solid #000000;
    transform: translate(-50%, -58%) rotate(45deg);
    transform-origin: center;
}

.memory-layout-visibility-item:focus-within {
    background: transparent;
}

.memory-distance-unit-setting {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 32px;
    margin-top: 0;
    min-height: 46px;
    padding: 4px 0;
    border-radius: 10px;
    background: transparent;
    color: #000000;
}

.memory-distance-unit-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.memory-distance-unit-copy .material-symbols-outlined {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22;
}

.memory-distance-unit-setting select {
    width: 100%;
    min-height: 38px;
    padding: 0 34px 0 16px;
    border: 0;
    border-radius: 8px;
    background: #f0f1f1;
    color: #000000;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.memory-distance-unit-setting:focus-within {
    background: transparent;
}

@media (max-width: 640px) {
    .memory-layout-visibility-grid {
        grid-template-columns: 1fr;
    }

    .memory-distance-unit-setting {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.memory-inline-edit-panel .collab-panel {
    margin: 0;
    padding: 20px 0 24px;
    background: transparent;
    border: 0;
}

.memory-inline-edit-panel .collab-grid {
    grid-template-columns: 1fr;
}

.memory-inline-edit-panel .collab-invite-row {
    grid-template-columns: 1fr;
}

.memory-inline-edit-panel .collab-invite-row button,
.memory-inline-edit-panel .collab-form button,
.memory-inline-edit-panel .collab-actions button {
    width: 100%;
}

.memory-print-order {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 72px 0 40px;
}

.memory-print-order .memory-print-order-btn {
    width: min(100%, 360px) !important;
}

#memory-generated.is-editing .memory-hero-edit-btn {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
}

.collab-panel {
    display: none;
    margin: 0;
    padding: 24px 32px;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.is-editing .collab-panel {
    display: block;
}

.collab-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.collab-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.collab-header h3,
.collab-card h4 {
    margin: 0;
    color: var(--charcoal);
}

.collab-header h3 {
    font-size: 22px;
}

.collab-count {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.collab-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.collab-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.collab-card h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.collab-invite-row,
.collab-form {
    display: grid;
    gap: 10px;
}

.collab-form select {
    height: 44px;
}

.collab-form textarea {
    min-height: 104px;
}

.collab-invite-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.collab-invite-row input,
.collab-form select,
.collab-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-size: 14px;
    outline: none;
}

.collab-invite-row input:focus,
.collab-form select:focus,
.collab-form textarea:focus {
    border-color: var(--border);
    box-shadow: 0 0 0 3px rgba(0,178,82,0.1);
}

.collab-invite-row button,
.collab-form button,
.collab-actions button {
    width: 170px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--charcoal);
    color: var(--beige);
    font-size: 13px;
    font-weight: 700;
}

.collab-people {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.collab-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.collab-person strong,
.collab-person small {
    display: block;
}

.collab-person strong {
    font-size: 14px;
    color: var(--charcoal);
}

.collab-person small,
.collab-person em {
    font-size: 12px;
    color: var(--text-muted);
    font-style: normal;
}

.collab-suggestions {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.collab-suggestion {
    padding: 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
}

.collab-suggestion-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 8px;
}

.collab-suggestion-top span {
    color: var(--text-muted);
}

.collab-suggestion p {
    margin: 0 0 12px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.collab-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.collab-actions .collab-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.collab-dev-tools {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.collab-dev-btn {
    width: 190px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    font-size: 13px;
    font-weight: 700;
}

.collab-dev-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.collab-accepted {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
}

.collab-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.collab-loading {
    background: rgba(255,255,255,0.72);
    border-radius: 16px;
    padding: 16px 18px;
}

.btn-edit-story {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    background: #ffffff;
    color: var(--charcoal);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn-edit-story:hover {
    background: #ffffff;
}

#genNav .nav-inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.story-nav-left,
.story-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-nav-right .story-status-control {
    margin-left: 20px;
}

.story-back-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    border-color: var(--border);
}

.story-status-control {
    position: relative;
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 10;
}

.story-status-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 164px;
    min-width: 164px;
    height: 40px;
    min-height: 40px;
    padding: 0 17px 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--control-bg, #f0f1f1);
    color: #000000;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.story-status-trigger-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.story-status-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #000000;
    border-bottom: 1.5px solid #000000;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.story-status-control.is-open .story-status-chevron {
    transform: translateY(2px) rotate(225deg);
}

.story-status-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1300;
    box-sizing: border-box;
    width: 184px;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.story-status-menu[hidden] {
    display: none;
}

.story-status-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #000000;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.story-status-menu button:hover,
.story-status-menu button:focus-visible,
.story-status-menu button[aria-checked="true"] {
    background: #f0f1f1;
    color: #000000;
    opacity: 1 !important;
    outline: none;
}

.story-status-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.story-status-dot-published {
    background: #00b252;
}

.story-status-dot-draft {
    background: #e2483d;
}

.story-status-dot-archived {
    background: #7b6ee7;
}

.story-status-delete > .material-symbols-outlined {
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(44,46,42,0.42);
}

.auth-modal.active {
    display: flex;
}

.auth-dialog {
    position: relative;
    width: min(420px, 100%);
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.18);
}

.auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
}

.auth-eyebrow {
    display: block;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-dialog h3 {
    margin-bottom: 8px;
    font-size: 24px;
    color: var(--charcoal);
}

.auth-dialog p {
    margin-bottom: 18px;
    color: var(--text-secondary);
}

:is(.memory-edit-dialog, .style-profile-dialog) > h3 {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.2;
}

:is(.memory-edit-dialog, .style-profile-dialog) > p {
    font-size: 16px;
    line-height: 1.45;
}

.auth-dialog input {
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

.auth-message {
    min-height: 20px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.style-profile-dialog {
    width: min(560px, 100%);
}

.memory-settings-modal {
    overflow-y: auto;
}

.memory-edit-dialog {
    width: min(660px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.memory-collaboration-dialog {
    width: min(920px, 100%);
}

.memory-collaboration-dialog select {
    background: #f0f1f1;
}

.memory-edit-modal-content {
    min-width: 0;
}

.memory-edit-dialog .memory-layouts-panel {
    padding: 0;
}

.memory-edit-dialog .memory-layout-managed-hint {
    display: none;
}

.memory-collaboration-dialog .collab-panel {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
}

.memory-collaboration-dialog .collab-header {
    justify-content: flex-end;
}

.memory-collaboration-dialog .collab-header > div {
    display: none;
}

.memory-collaboration-dialog .collab-invite-row input {
    margin-bottom: 0;
}

.memory-collaboration-dialog .collab-suggestion p {
    margin: 0 0 12px;
    color: var(--text-secondary);
}

.memory-collaboration-dialog .collab-empty {
    margin: 0;
    color: var(--text-muted);
}

.memory-edit-modal-actions {
    margin-top: 24px;
}

.timeline-day-whatsapp-dialog {
    width: min(520px, 100%);
}

.timeline-day-whatsapp-dialog > p {
    max-width: 440px;
}

.timeline-day-whatsapp-preview {
    margin: 18px 0;
    padding: 14px 16px;
    background: #f0f1f1;
}

.timeline-day-whatsapp-preview > label {
    display: block;
    margin-bottom: 7px;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.timeline-day-whatsapp-preview > textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 132px;
    max-height: 240px;
    margin: 0;
    padding: 10px 12px;
    resize: vertical;
    border: 0;
    outline: 0;
    background: #ffffff;
    color: var(--charcoal);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.06);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.timeline-day-whatsapp-preview > textarea:focus {
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.1);
}

.timeline-day-whatsapp-preview > small {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.timeline-day-whatsapp-copy-text {
    margin-top: 12px;
}

.timeline-day-whatsapp-steps {
    display: grid;
    gap: 12px;
    margin: 4px 0 0;
    padding-left: 24px;
    color: var(--charcoal);
    font-size: 15px;
    line-height: 1.5;
}

.timeline-day-whatsapp-steps li {
    padding-left: 4px;
}

.timeline-day-whatsapp-actions {
    flex-wrap: wrap;
    margin-top: 26px;
}

.timeline-day-whatsapp-actions button:disabled {
    cursor: default;
    opacity: 0.42 !important;
}

.timeline-day-facebook-dialog.is-loading,
.timeline-day-whatsapp-dialog.is-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
}

.timeline-day-facebook-loading,
.timeline-day-whatsapp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.timeline-day-facebook-loading .auth-eyebrow,
.timeline-day-whatsapp-loading .auth-eyebrow {
    margin-top: 22px;
}

.timeline-day-facebook-loading h3,
.timeline-day-facebook-loading p,
.timeline-day-whatsapp-loading h3,
.timeline-day-whatsapp-loading p {
    margin-right: auto;
    margin-left: auto;
}

.timeline-day-share-spinner {
    display: block;
    width: 34px;
    height: 34px;
    border: 3px solid #dad6ff;
    border-top-color: #00b252;
    border-radius: 50%;
    animation: timeline-day-share-spin 0.8s linear infinite;
}

@keyframes timeline-day-share-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .timeline-day-share-spinner {
        animation-duration: 1.6s;
    }
}

.timeline-day-instagram-dialog {
    width: min(520px, 100%);
    text-align: center;
}

.timeline-day-instagram-dialog .auth-eyebrow {
    padding-right: 28px;
}

.timeline-day-instagram-dialog > p {
    max-width: 440px;
    margin-right: auto;
    margin-left: auto;
}

.timeline-day-instagram-qr {
    display: grid;
    place-items: center;
    width: min(300px, 100%);
    margin: 22px auto 16px;
    overflow: hidden;
    background: #ffffff;
}

.timeline-day-instagram-qr img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.timeline-day-instagram-dialog .timeline-day-instagram-wifi {
    margin-bottom: 7px;
    color: #000000;
    font-size: 13px;
    line-height: 1.45;
}

.timeline-day-instagram-dialog .timeline-day-instagram-expiry {
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.4;
}

.timeline-day-instagram-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.timeline-day-instagram-link input {
    min-width: 0;
    margin: 0;
    background: #fcfcfc;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
    font-size: 12px;
}

.timeline-day-instagram-actions {
    justify-content: center;
    margin-top: 18px;
}

body.instagram-transfer-body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f5f5f5;
}

.instagram-transfer-page {
    box-sizing: border-box;
    min-height: 100vh;
    padding: 20px;
}

.instagram-transfer-card {
    box-sizing: border-box;
    width: min(720px, 100%);
    margin: 0 auto;
    padding: clamp(22px, 5vw, 44px);
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.1);
}

.instagram-transfer-header {
    margin-bottom: 24px;
}

.instagram-transfer-brand {
    display: block;
    margin-bottom: 32px;
    color: #000000;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.instagram-transfer-card h1 {
    margin: 0 0 10px;
    color: #000000;
    font-size: clamp(32px, 9vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.instagram-transfer-card p {
    margin: 0;
    color: #666666;
    font-size: 14px;
    line-height: 1.5;
}

.instagram-transfer-card .instagram-transfer-intro {
    max-width: 520px;
    color: #000000;
}

#instagramTransferStatus {
    margin-top: 7px;
    max-width: 560px;
    font-size: 12px;
}

.instagram-transfer-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.instagram-transfer-gallery figure {
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    background: #f0f1f1;
}

.instagram-transfer-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram-transfer-caption {
    margin-top: 24px;
    padding: 16px;
    background: #f0f1f1;
}

.instagram-transfer-caption label {
    display: block;
    margin-bottom: 8px;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.instagram-transfer-caption textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 12px;
    resize: vertical;
    border: 0;
    outline: 0;
    background: #ffffff;
    color: #000000;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.07);
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
}

.instagram-transfer-caption small {
    display: block;
    margin-top: 8px;
    color: #666666;
    font-size: 12px;
    line-height: 1.4;
}

.instagram-transfer-actions {
    display: block;
    margin-top: 16px;
}

.instagram-transfer-actions button {
    width: 100%;
    min-height: 48px;
}

.instagram-transfer-actions button:disabled {
    cursor: wait;
    opacity: 0.42 !important;
}

.instagram-transfer-loading,
.instagram-transfer-error {
    margin-top: min(22vh, 180px);
}

.instagram-transfer-error h1 {
    max-width: 560px;
}

@media (max-width: 560px) {
    .timeline-day-instagram-link {
        grid-template-columns: 1fr;
    }

    .instagram-transfer-page {
        padding: 0;
    }

    .instagram-transfer-card {
        min-height: 100vh;
        padding: 24px 18px 36px;
        box-shadow: none;
    }

    .instagram-transfer-brand {
        margin-bottom: 38px;
    }

}

.style-profile-dialog .style-profile-target {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.style-profile-form {
    display: grid;
    gap: 16px;
}

.style-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.style-profile-field {
    display: grid;
    gap: 7px;
}

.style-profile-field span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--charcoal);
}

.style-profile-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f0f1f1;
    font: inherit;
    color: var(--charcoal);
}

.style-profile-dialog .style-profile-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    padding: 0 2px;
    color: var(--charcoal);
    font-size: 14px;
}

.style-profile-dialog .style-profile-toggle-group {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.style-profile-dialog .style-profile-toggle input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    margin: 0 !important;
    padding: 0;
}

.style-profile-dialog .style-profile-toggle + .style-profile-toggle {
    margin-top: 0;
}

.style-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.style-profile-dialog > .style-profile-actions,
.memory-edit-dialog > .memory-edit-modal-actions {
    margin-top: 24px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .memory-edit-dialog {
        max-height: calc(100vh - 24px);
        padding: 24px 20px;
    }

    .memory-collaboration-dialog .collab-grid,
    .memory-collaboration-dialog .collab-invite-row {
        grid-template-columns: 1fr;
    }

    .memory-collaboration-dialog .collab-invite-row button,
    .memory-collaboration-dialog .collab-form button,
    .memory-collaboration-dialog .collab-actions button {
        width: 100%;
    }

    .style-profile-grid {
        grid-template-columns: 1fr;
    }

    .style-profile-actions {
        flex-direction: column-reverse;
    }

    .style-profile-actions .btn-outline,
    .style-profile-actions .btn-primary {
        width: 100%;
    }
}

.cloud-notice {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10001;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 14px;
    background: var(--charcoal);
    color: white;
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cloud-notice.active {
    opacity: 1;
    transform: translateY(0);
}

.cloud-notice.success {
    background: var(--primary-dark);
}

.cloud-notice.error {
    background: #b42318;
}

/* Timeline */
.gen-body {
    padding-top: 48px;
}

.gen-timeline {
    position: relative;
}

.gen-timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 0;
    width: 1px;
    border: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3' viewBox='0 0 1 3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 1px 3px;
}

.gen-day {
    position: relative;
    padding-left: 36px;
    margin-bottom: 140px;
}

.gen-day:last-child {
    margin-bottom: 140px;
}

.gen-day.is-empty-day {
    display: none !important;
}

.gen-day-pending .chapter-dot {
    background: #ffffff;
    box-shadow: 0 0 0 2px #000000;
}

.gen-day-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    position: relative;
}

#memory-generated:not(.is-editing) .gen-day-layout.has-side-blocks,
.gen-day-layout.has-side-blocks {
    grid-template-columns: minmax(0, 0.7fr) minmax(240px, 0.3fr);
}

#memory-generated:not(.is-editing) .gen-day-layout.has-side-blocks {
    grid-template-columns: minmax(0, 0.62fr) minmax(280px, 0.38fr);
}

#memory-generated:not(.is-editing) .gen-day-layout.has-side-blocks .gen-day-main {
    overflow: hidden;
}

.gen-grid-canvas {
    --edit-grid-size: 28px;
    --edit-grid-dot-color: #000000;
    --insert-rail-dot-color: #000000;
    --edit-frame-line: #dedbd4;
}

.gen-grid-surface {
    position: relative;
    isolation: isolate;
}

#memory-generated.is-editing .gen-grid-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    background-color: var(--edit-grid-dot-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='1' height='1' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='1' height='1' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: var(--edit-grid-size) var(--edit-grid-size);
    mask-size: var(--edit-grid-size) var(--edit-grid-size);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

#memory-generated.is-editing .gen-grid-surface > :not([data-positioning-mode="absolute"]) {
    position: relative;
    z-index: 2;
}

.gen-grid-insert-overlay {
    display: none;
}

.gen-grid-compact-action {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-grid-compact-action {
    /* Temporarily parked while the horizontal grid compaction behaviour is
       being evaluated. Keep the implementation intact for an easy return. */
    display: none !important;
}

#memory-generated.is-editing .gen-grid-insert-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 40;
    cursor: crosshair;
    overflow: visible;
}

#memory-generated.is-editing .gen-grid-surface > .gen-grid-insert-overlay {
    z-index: 40;
}

#memory-generated.is-editing .gen-grid-insert-overlay::before {
    content: '';
    position: absolute;
    left: var(--insert-menu-x, 0px);
    top: var(--insert-menu-y, 0px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: var(--insert-rail-dot-color);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.gen-grid-insert-menu {
    position: absolute;
    left: var(--insert-menu-x, 0px);
    top: var(--insert-menu-y, 0px);
    transform: translate(8px, -50%) scale(0.96);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 26px rgba(60, 53, 45, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
    z-index: 80;
}

#memory-generated.is-editing .gen-grid-insert-overlay.is-active::before,
#memory-generated.is-editing .gen-grid-insert-overlay:focus-within::before {
    opacity: 1;
}

#memory-generated.is-editing .gen-grid-insert-overlay.is-active .gen-grid-insert-menu,
#memory-generated.is-editing .gen-grid-insert-overlay:focus-within .gen-grid-insert-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(8px, -50%) scale(1);
}

#memory-generated.is-editing .gen-grid-insert-overlay.is-blocked::before,
#memory-generated.is-editing .gen-grid-insert-overlay.is-blocked .gen-grid-insert-menu {
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, -50%) scale(0.96);
}

#memory-generated.is-editing .gen-day-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--edit-grid-size);
    row-gap: 28px;
    align-items: start;
}

#memory-generated.is-editing .gen-day-main {
    grid-column: 1 / -1;
}

#memory-generated.is-editing .gen-day-layout.has-side-blocks .gen-day-main {
    grid-column: 1 / span 8;
}

#memory-generated.is-editing .gen-day-side {
    grid-column: 9 / -1;
    align-self: start;
}

.pending-memory-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.gen-day-main,
.pending-memory-main {
    min-width: 0;
    position: relative;
    padding-bottom: 0;
}

#memory-generated.is-editing .gen-day-main,
#memory-generated.is-editing .pending-memory-main {
    min-height: var(--timeline-grid-extra, 0px);
    padding-bottom: 0;
}

#memory-generated:not(.is-editing) .gen-day-main:has(> [data-block-id][data-positioning-mode="absolute"][data-layout-sized="true"]) {
    min-height: var(--timeline-grid-extra, 0px);
    padding-bottom: 0;
}

.gen-day-side {
    min-width: 0;
}

.gen-day-side[aria-hidden="true"] {
    display: none;
}

.gen-grid-block {
    position: relative;
}

#memory-generated.is-editing .gen-day-main > [data-block-id] {
    cursor: grab;
    touch-action: none;
}

#memory-generated.is-editing .gen-day-main > [data-block-id][data-positioning-mode="absolute"] {
    position: absolute;
    left: calc(var(--grid-x, 0) * var(--edit-grid-size));
    top: calc(var(--grid-y, 0) * var(--edit-grid-size));
    width: calc(var(--grid-w, 1) * var(--edit-grid-size));
    min-height: calc(var(--grid-h, 1) * var(--edit-grid-size));
    z-index: calc(2 + var(--grid-layer, 0));
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] {
    z-index: calc(7 + var(--grid-layer, 0));
}

#memory-generated:not(.is-editing) .gen-day-main > [data-block-id][data-positioning-mode="absolute"][data-layout-sized="true"] {
    position: absolute;
    left: calc(var(--grid-x, 0) * var(--edit-grid-size));
    top: calc(var(--grid-y, 0) * var(--edit-grid-size));
    width: calc(var(--grid-w, 1) * var(--edit-grid-size));
    min-height: calc(var(--grid-h, 1) * var(--edit-grid-size));
    z-index: calc(2 + var(--grid-layer, 0));
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] {
    position: absolute;
    left: calc(var(--grid-x, 0) * var(--edit-grid-size));
    top: calc(var(--grid-y, 0) * var(--edit-grid-size));
    width: calc(var(--grid-w, 1) * var(--edit-grid-size));
    min-height: calc(var(--grid-h, 1) * var(--edit-grid-size));
    z-index: calc(2 + var(--grid-layer, 0));
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-day-text {
    width: 100%;
    max-width: 100%;
    line-height: 1.55 !important;
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"],
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] {
    height: calc(var(--grid-h, 1) * var(--edit-grid-size));
    min-height: 0;
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"],
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] {
    height: calc(var(--grid-h, 1) * var(--edit-grid-size));
    min-height: 0;
}

#memory-generated.is-editing .gen-day-main > [data-block-id].is-dragging-block {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    cursor: grabbing;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0);
    opacity: 0.92;
    filter: drop-shadow(0 18px 36px rgba(60, 53, 45, 0.18));
}

#memory-generated.is-editing .gen-day-main > [data-block-id].is-group-drag-intent {
    opacity: 0.86;
}

#memory-generated.is-editing .gen-day-main > [data-block-id].is-group-drop-target::after {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: 95;
    border: 2px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

#memory-generated.is-editing .gen-day-main > [data-block-id].is-resizing-block {
    outline: 1px solid var(--border);
    outline-offset: -1px;
}

.gen-block-resize-handle {
    display: none;
}

#memory-generated.is-editing .gen-day-main > [data-block-id] > .gen-block-resize-handle {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: block;
    background: var(--charcoal);
    border: 3px solid var(--border);
    box-shadow: 0 8px 18px rgba(60, 53, 45, 0.2);
    cursor: nwse-resize;
    z-index: 12;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block > .gen-block-resize-handle {
    cursor: ew-resize;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: var(--charcoal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner:hover::after,
#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner.is-active-resize-handle::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner.is-nw {
    top: -9px;
    right: auto;
    bottom: auto;
    left: -9px;
    cursor: nwse-resize;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner.is-ne {
    top: -9px;
    right: -9px;
    bottom: auto;
    left: auto;
    cursor: nesw-resize;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner.is-sw {
    top: auto;
    right: auto;
    bottom: -9px;
    left: -9px;
    cursor: nesw-resize;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item > .gen-photo-resize-corner.is-se {
    top: auto;
    right: -9px;
    bottom: -9px;
    left: auto;
    cursor: nwse-resize;
}

.pending-memory-main .gen-story-block {
    margin-bottom: 0;
}

.pending-memory-media {
    margin-top: 18px;
}

.gen-day-main .gen-entry,
.gen-day-main .gen-entry-with-story,
.gen-day-main .gen-photo-view-stack,
.gen-day-main .gen-photo-group,
.gen-day-main .single-photo,
.pending-memory-media .gen-entry,
.pending-memory-media .gen-entry-with-story,
.pending-memory-media .gen-photo-view-stack,
.pending-memory-media .gen-photo-group,
.pending-memory-media .single-photo {
    width: 100%;
}

.pending-memory-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    grid-column: 1 / -1;
}

.gen-day-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.gen-day-sticky {
    display: contents;
}

.gen-day-header .chapter-dot {
    position: absolute;
    left: -36px;
    top: 6px;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--border);
    box-shadow: 0 0 0 2px var(--primary);
    z-index: 1;
}

.gen-day-tag {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.gen-day-date {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
}

.gen-day-location {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.gen-day-location-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#memory-generated .memory-layout-custom .gen-day:not(.gen-day-pending) .gen-day-header .chapter-dot {
    top: 5px;
    left: -37px;
    width: 11px;
    height: 11px;
    border: 0;
    box-shadow: none;
}

#memory-generated .memory-layout-custom .gen-day-header:not(:has(.gen-day-tag)) .gen-day-header-copy {
    transform: translateY(-4px);
}

#memory-generated .memory-layout-custom .gen-day-header:not(:has(.gen-day-tag)) .gen-day-date {
    line-height: 1.2;
}

/* Preset: central timeline. Custom block coordinates stay stored underneath. */
#memory-generated .memory-layout-central-timeline .memory-body {
    padding-right: clamp(32px, 5vw, 88px);
    padding-left: clamp(32px, 5vw, 88px);
}

#memory-generated .memory-layout-central-timeline .gen-timeline::before {
    left: 50%;
    top: 0;
    bottom: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3' viewBox='0 0 1 3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 1px 3px;
    transform: translateX(-50%);
}

#memory-generated .memory-layout-central-timeline .gen-day {
    padding-left: 0;
    margin-bottom: 104px;
}

#memory-generated .memory-layout-central-timeline .gen-day:last-child {
    margin-bottom: 96px;
}

#memory-generated .memory-layout-central-timeline .gen-day-header {
    z-index: 4;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 48px;
    text-align: center;
}

#memory-generated .memory-layout-central-timeline .gen-day-header-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    background: #ffffff;
    text-align: center;
}

#memory-generated .memory-layout-central-timeline .gen-day-header .chapter-dot {
    position: absolute;
    top: -31px;
    left: 50%;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    padding: 0;
    border: 0;
    background: #00b252;
    box-shadow: none;
    transform: translateX(-50%);
}

#memory-generated .memory-layout-central-timeline .gen-day-tag {
    color: #00b252;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 1px;
}

#memory-generated .memory-layout-central-timeline .gen-day-date {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

#memory-generated .memory-layout-central-timeline .gen-day-location {
    margin-top: 0;
    line-height: 1.1;
}

#memory-generated .memory-layout-central-timeline .gen-day-layout,
#memory-generated .memory-layout-central-timeline .gen-day-layout.has-side-blocks,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-layout,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-layout.has-side-blocks {
    display: block;
}

#memory-generated .memory-layout-central-timeline .gen-day-main,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-layout.has-side-blocks .gen-day-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-rows: auto;
    column-gap: 0;
    row-gap: 100px;
    min-height: 0 !important;
    padding: 0;
    overflow: visible;
}

#memory-generated .memory-layout-central-timeline .gen-day-side:not([aria-hidden="true"]) {
    width: calc(50% - 44px);
    margin-top: 26px;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-block-id][data-central-side],
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-central-photo-drag-placeholder[data-central-side] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(100%, calc(var(--central-grid-w, 18) * var(--edit-grid-size))) !important;
    height: auto !important;
    min-width: 0;
    min-height: 0 !important;
    margin: 0 !important;
    align-self: start;
    transform: none !important;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-side="left"] {
    grid-column: 1;
    grid-row: var(--central-row);
    justify-self: end;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-side="right"] {
    grid-column: 3;
    grid-row: var(--central-row);
    justify-self: start;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-group-start="true"]::after {
    display: none;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-side="left"][data-central-group-start="true"]::after {
    right: -44px;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-side="right"][data-central-group-start="true"]::after {
    left: -44px;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-group-start="true"]::before {
    content: '';
    position: absolute;
    top: 8px;
    z-index: 3;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #000000;
    box-shadow: none;
    pointer-events: none;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-side="left"][data-central-group-start="true"]::before {
    right: -48px;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-side="right"][data-central-group-start="true"]::before {
    left: -48px;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side],
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side],
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-central-photo-drag-placeholder[data-central-side] {
    aspect-ratio: var(--central-aspect, 3 / 2);
    overflow: visible;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-central-photo-drag-placeholder {
    background: #f0f1f1;
    pointer-events: none;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side] .gen-entry,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side] .gen-entry,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side] .gen-photo-view-stack,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side] .gen-photo-view-stack,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side] .gen-photo-group,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side] .gen-photo-group,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side] .single-photo,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side] .single-photo {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side] .gen-photo,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side] .gen-photo {
    height: 100%;
    margin: 0;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-photo-timeline-item[data-central-side] .gen-photo img,
#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-entry-with-story[data-central-side] .gen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-day-story-block[data-central-side] {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding: 8px 0;
    justify-self: stretch;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-day-story-block[data-central-paired-text="true"] {
    align-self: start;
    padding-top: 0;
}

#memory-generated .memory-layout-central-timeline .gen-day-main > .gen-day-story-block[data-central-side] > .gen-day-text {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    line-height: 1.55;
    overflow: visible;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-grid-canvas::before,
#memory-generated.is-editing .memory-layout-central-timeline .gen-grid-insert-overlay {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > [data-block-id]:not(.gen-photo-timeline-item):not(.gen-entry-with-story)
    .gen-block-move-controls {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item
    .gen-photo > .gen-block-move-controls,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item
    .gen-photo-group > .gen-block-move-controls,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story
    .gen-photo > .gen-block-move-controls,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story
    .gen-photo-group > .gen-block-move-controls {
    display: flex !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > [data-block-id]:not(.gen-photo-timeline-item):not(.gen-entry-with-story)
    > .gen-block-resize-handle {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item
    > .gen-photo-resize-corner,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story
    > .gen-photo-resize-corner {
    display: block !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main > [data-block-id] {
    cursor: default;
    touch-action: auto;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item[data-block-id],
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story[data-block-id] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item[data-block-id].is-dragging-block,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story[data-block-id].is-dragging-block {
    cursor: grabbing;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item .gen-photo > .gen-block-move-controls,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-photo-timeline-item .gen-photo-group > .gen-block-move-controls,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story .gen-photo > .gen-block-move-controls,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-entry-with-story .gen-photo-group > .gen-block-move-controls {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-custom .gen-photo-timeline-item
    :is(.gen-photo, .gen-photo-group) > .gen-block-move-controls {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > [data-block-id].is-central-swap-dragging {
    position: fixed !important;
    top: var(--central-drag-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--central-drag-left) !important;
    z-index: 100 !important;
    width: var(--central-drag-width) !important;
    height: var(--central-drag-height) !important;
    aspect-ratio: auto !important;
    justify-self: auto !important;
    opacity: 0.88;
    pointer-events: none;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) !important;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.2));
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > [data-block-id].is-central-swap-dragging::before,
#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > [data-block-id].is-central-swap-dragging::after {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > [data-block-id].is-central-swap-target {
    z-index: 12;
    outline: 2px solid #00b252;
    outline-offset: 6px;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main > .gen-day-story-block .gen-day-text {
    cursor: text;
    line-height: 1.55 !important;
}

#memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
    > .gen-day-story-block[data-positioning-mode="absolute"]
    > .gen-story-toolbar {
    left: 0;
}

@media (max-width: 760px) {
    #memory-generated .memory-layout-central-timeline .memory-body {
        padding-right: 20px;
        padding-left: 20px;
    }

    #memory-generated .memory-layout-central-timeline .gen-timeline::before {
        left: 4px;
        transform: none;
    }

    #memory-generated .memory-layout-central-timeline .gen-day {
        padding-left: 34px;
        margin-bottom: 76px;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-header {
        justify-content: center;
        margin-bottom: 30px;
        text-align: center;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-header-copy {
        align-items: center;
        padding: 0;
        text-align: center;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-header .chapter-dot {
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    #memory-generated .memory-layout-central-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-central-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-central-timeline .gen-day-layout.has-side-blocks .gen-day-main {
        display: block;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-main > [data-block-id][data-central-side],
    #memory-generated .memory-layout-central-timeline .gen-day-main > .gen-central-photo-drag-placeholder[data-central-side] {
        display: block;
        width: 100% !important;
        margin-bottom: 26px !important;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-group-start="true"]::before,
    #memory-generated .memory-layout-central-timeline .gen-day-main > [data-central-group-start="true"]::after {
        display: none;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-side:not([aria-hidden="true"]) {
        width: 100%;
    }
}

/* Preset: horizontal timeline. The stored custom and central coordinates remain untouched. */
#memory-generated .memory-layout-horizontal-timeline {
    --horizontal-render-grid-size: var(--edit-grid-size);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

@media (min-width: 1025px) {
    #memory-generated .memory-layout-horizontal-timeline {
        position: relative;
        display: block;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-shell-drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: var(--memory-shell-drawer-width);
        min-width: 0;
        transform: translateX(0);
        transition: transform 440ms cubic-bezier(0.77, 0, 0.18, 1);
        will-change: transform;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-shell-viewport {
        width: 100%;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-timeline {
        padding-left: var(--memory-shell-drawer-width);
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-timeline::before {
        left: var(--memory-shell-drawer-width);
    }

    #memory-generated .memory-layout-horizontal-timeline.is-horizontal-scrolling .memory-shell-drawer {
        transform: translateX(-100%);
    }

    #memory-generated .memory-layout-horizontal-timeline.is-horizontal-drawer-locked-open .memory-shell-drawer {
        transform: translateX(0);
    }

    #memory-generated .memory-layout-horizontal-timeline.is-horizontal-drawer-locked-closed .memory-shell-drawer {
        transform: translateX(-100%);
    }
}

#memory-generated .memory-layout-horizontal-timeline .memory-shell-viewport {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

#memory-generated .memory-layout-horizontal-timeline .memory-shell-viewport > .nav {
    flex: 0 0 auto;
}

#memory-generated .memory-layout-horizontal-timeline .memory-content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

#memory-generated .memory-layout-horizontal-timeline .memory-body {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 80px;
    width: 100%;
    height: 100%;
    padding: clamp(42px, 6vh, 68px) clamp(32px, 5vw, 72px) 34px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    scroll-snap-type: none;
    scrollbar-color: #c9c9c9 transparent;
    scrollbar-width: thin;
}

#memory-generated .memory-layout-horizontal-timeline .memory-body::-webkit-scrollbar {
    height: 6px;
}

#memory-generated .memory-layout-horizontal-timeline .memory-body::-webkit-scrollbar-track {
    background: transparent;
}

#memory-generated .memory-layout-horizontal-timeline .memory-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c9c9c9;
}

#memory-generated .memory-layout-horizontal-timeline .gen-timeline {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: clamp(72px, 8vw, 124px);
    width: max-content;
    min-width: calc(100% - 2px);
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

#memory-generated .memory-layout-horizontal-timeline .gen-timeline::before {
    top: 80px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='1' viewBox='0 0 3 1'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
    background-position: left top;
    background-repeat: repeat-x;
    background-size: 3px 1px;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 auto;
    grid-template-rows: 112px minmax(0, 1fr);
    width: var(--horizontal-canvas-width, calc(var(--horizontal-grid-columns, 36) * var(--horizontal-render-grid-size, var(--edit-grid-size))));
    min-width: var(--horizontal-canvas-width, calc(var(--horizontal-grid-columns, 36) * var(--horizontal-render-grid-size, var(--edit-grid-size))));
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 clamp(8px, 1vw, 20px) 0 0;
    scroll-snap-align: start;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day:last-child {
    margin: 0;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-header {
    box-sizing: border-box;
    display: block;
    align-self: stretch;
    height: 112px;
    margin: 0;
    padding: 0;
}

@media (min-width: 761px) {
    #memory-generated .memory-layout-horizontal-timeline .gen-day-header > .gen-day-sticky {
        position: sticky;
        left: 0;
        z-index: 14;
        display: block;
        width: max-content;
        max-width: 100%;
    }
}

/* Experimental memory composition: keep the map in the drawer and let the
   memory heading become the first scrollable block of the story. */
#memory-generated .memory-hero-in-story .memory-story-hero {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#memory-generated .memory-hero-in-story .memory-story-hero .memory-hero-content {
    padding: 0 0 64px;
}

#memory-generated .memory-hero-in-story .memory-shell-drawer-scroll {
    overflow-y: hidden;
}

#memory-generated .memory-hero-in-story .memory-shell-drawer-body {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
}

#memory-generated .memory-hero-in-story:not(.no-map) .memory-map-panel {
    height: 100%;
    min-height: 0;
    padding: 92px 28px 28px;
}

#memory-generated.is-editing .memory-hero-in-story .memory-shell-drawer-scroll {
    overflow-y: auto;
}

#memory-generated.is-editing .memory-hero-in-story .memory-shell-drawer-body {
    flex: 0 0 auto;
    min-height: 100%;
}

#memory-generated.is-editing .memory-hero-in-story:not(.no-map) .memory-map-panel {
    height: 100vh;
    min-height: 100vh;
    padding: 92px 28px 28px;
}

@media (min-width: 1025px) {
    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline
        .memory-story-hero {
        flex: 0 0 clamp(620px, 62vw, 980px);
        width: clamp(620px, 62vw, 980px);
        height: 100%;
        margin-left: var(--memory-shell-drawer-width);
        display: flex;
        align-items: center;
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline
        .memory-story-hero .memory-hero-content {
        width: 100%;
        padding: 0 clamp(24px, 4vw, 64px);
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline
        .gen-timeline {
        padding-left: 0;
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline
        .gen-timeline::before {
        left: 0;
    }
}

@media (max-width: 1024px) {
    #memory-generated .memory-hero-in-story .memory-shell-drawer-scroll {
        overflow: visible;
    }

    #memory-generated .memory-hero-in-story:not(.no-map) .memory-map-panel,
    #memory-generated.is-editing .memory-hero-in-story:not(.no-map) .memory-map-panel {
        height: 58vh;
        min-height: 360px;
        padding: 92px 20px 24px;
    }

    #memory-generated .memory-hero-in-story .memory-story-hero {
        margin-bottom: 0;
    }

    #memory-generated .memory-hero-in-story .memory-story-hero .memory-hero-content {
        padding: 0 0 48px;
    }
}

/* Standalone day sharing control. Custom places it at the right edge of the
   day heading; horizontal places it at the end of the complete day. */
#memory-generated .gen-day-share {
    position: absolute;
    z-index: 40;
    box-sizing: border-box;
    display: none;
    width: 32px;
    height: 32px;
    padding: 0;
    overflow: visible;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 5px #ffffff;
}

#memory-generated .gen-day-share-trigger {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f1f1;
    color: #000000;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

#memory-generated .gen-day-share-trigger:hover,
#memory-generated .gen-day-share-trigger:focus-visible {
    opacity: 0.8;
    outline: none;
}

#memory-generated .gen-day-share-trigger .material-symbols-outlined {
    display: block;
    width: 19px;
    height: 19px;
    font-size: 19px;
    line-height: 19px;
    color: #000000;
    text-align: center;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

#memory-generated .gen-day-share.is-native-sharing .gen-day-share-trigger {
    position: relative;
    cursor: wait;
}

#memory-generated .gen-day-share.is-native-sharing .gen-day-share-trigger .material-symbols-outlined {
    opacity: 0;
}

#memory-generated .gen-day-share.is-native-sharing .gen-day-share-trigger::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 1.5px solid rgba(0, 0, 0, 0.22);
    border-top-color: #000000;
    border-radius: 50%;
    animation: gen-day-share-spin 680ms linear infinite;
}

@keyframes gen-day-share-spin {
    to { transform: rotate(360deg); }
}

#memory-generated .gen-day-share-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 70;
    box-sizing: border-box;
    width: max-content;
    padding-top: 10px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition:
        opacity 140ms ease,
        transform 140ms ease,
        visibility 0s linear 140ms;
}

#memory-generated .gen-day-share-menu-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    box-sizing: border-box;
    width: 250px;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

#memory-generated .gen-day-share:hover > .gen-day-share-menu,
#memory-generated .gen-day-share:focus-within > .gen-day-share-menu,
#memory-generated .gen-day-share.is-open > .gen-day-share-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

#memory-generated .gen-day-share-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #000000;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

#memory-generated .gen-day-share-option:hover,
#memory-generated .gen-day-share-option:focus-visible {
    background: #f0f1f1;
    color: #000000;
    opacity: 1;
    outline: none;
}

#memory-generated .gen-day-share-option:disabled {
    background: transparent;
    color: #858585;
    cursor: wait;
    opacity: 0.55;
}

#memory-generated .gen-day-share-feedback {
    display: none;
    grid-column: 1 / -1;
    padding: 5px 8px 3px;
    color: #505050;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

#memory-generated .gen-day-share-feedback.is-visible {
    display: block;
}

/* The button centre shares the same horizontal axis as the green day dot. */
#memory-generated .memory-layout-custom .gen-day:not(.gen-day-pending) > .gen-day-share {
    top: -5.5px;
    right: 0;
    display: block;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day:not(.gen-day-pending) > .gen-day-share {
    top: 80px;
    right: clamp(8px, 1vw, 20px);
    display: block;
    transform: translateY(-50%);
}

@media (max-width: 760px) {
    #memory-generated .gen-day-share-menu {
        display: none !important;
    }

    #memory-generated .gen-day-share-menu-panel {
        width: min(250px, calc(100vw - 40px));
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day:not(.gen-day-pending) > .gen-day-share {
        top: -4.5px;
        right: 0;
        transform: none;
    }
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-header-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-header .chapter-dot {
    top: 80px;
    left: 0;
    width: 11px;
    height: 11px;
    border: 0;
    background: #00b252;
    box-shadow: 0 0 0 5px #ffffff;
    transform: translateY(-50%);
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-tag,
#memory-generated .memory-layout-horizontal-timeline .gen-day-date {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-location {
    margin-top: -3px;
    line-height: 1.2;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-layout,
#memory-generated .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks,
#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout,
#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks {
    display: block;
    width: var(--horizontal-canvas-width, calc(var(--horizontal-grid-columns, 36) * var(--horizontal-render-grid-size, var(--edit-grid-size))));
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: visible;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main,
#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main,
#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks .gen-day-main {
    display: block;
    width: var(--horizontal-canvas-width, calc(var(--horizontal-grid-columns, 36) * var(--horizontal-render-grid-size, var(--edit-grid-size))));
    min-width: var(--horizontal-canvas-width, calc(var(--horizontal-grid-columns, 36) * var(--horizontal-render-grid-size, var(--edit-grid-size))));
    height: 100%;
    min-height: 0 !important;
    max-height: 100%;
    padding: 0;
    overflow: visible;
}

@media (min-width: 761px) {
    #memory-generated .memory-layout-horizontal-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks .gen-day-main {
        position: absolute;
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
        margin: 0;
    }
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-side:not([aria-hidden="true"]) {
    display: none;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main > [data-block-id][data-horizontal-group-id] {
    position: absolute;
    top: calc(var(--horizontal-grid-y, 0) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    right: auto;
    bottom: auto;
    left: calc(var(--horizontal-grid-x, 0) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    width: calc(var(--horizontal-grid-w, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    height: calc(var(--horizontal-grid-h, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    min-height: 0;
    max-height: 100%;
    z-index: calc(2 + var(--horizontal-grid-layer, 0));
    min-width: 0;
    margin: 0 !important;
    align-self: start;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > .gen-horizontal-photo-drag-placeholder[data-horizontal-group-id] {
    position: absolute;
    top: calc(var(--horizontal-grid-y, 0) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    left: calc(var(--horizontal-grid-x, 0) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    width: calc(var(--horizontal-grid-w, 18) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    height: calc(var(--horizontal-grid-h, 12) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    background: #f0f1f1;
    pointer-events: none;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-horizontal-group-id] {
    width: calc(var(--horizontal-grid-w, 18) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    height: calc(var(--horizontal-grid-h, 12) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-horizontal-group-id]
    :is(.gen-entry, .gen-photo-view-stack, .gen-photo-group, .single-photo) {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-horizontal-group-id]
    .gen-photo {
    height: 100%;
    margin: 0;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-horizontal-group-id]
    .gen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > .gen-day-story-block[data-horizontal-group-id] {
    box-sizing: border-box;
    width: calc(var(--horizontal-grid-w, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    max-width: none;
    height: calc(var(--horizontal-grid-h, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
    min-height: 0;
    max-height: 100%;
    padding: 0;
    overflow: visible;
    scrollbar-width: thin;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > .gen-day-story-block[data-horizontal-group-id]
    > .gen-day-text {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    line-height: 1.55;
    overflow-y: auto;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

#memory-generated .memory-layout-horizontal-timeline .gen-day-main
    > [data-horizontal-group-start="true"]::before {
    display: none;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-grid-canvas::before {
    display: block !important;
    -webkit-mask-size: var(--horizontal-render-grid-size, var(--edit-grid-size)) var(--horizontal-render-grid-size, var(--edit-grid-size));
    mask-size: var(--horizontal-render-grid-size, var(--edit-grid-size)) var(--horizontal-render-grid-size, var(--edit-grid-size));
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-grid-insert-overlay {
    display: block !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)
    > .gen-photo-resize-corner {
    display: block !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main > [data-block-id] {
    cursor: grab;
    touch-action: none;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-block-id] {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-block-id].is-dragging-block {
    cursor: grabbing;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > [data-block-id].is-dragging-block {
    position: fixed !important;
    z-index: 100 !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > [data-block-id].is-magnetic-snap {
    outline: 1px solid rgba(0, 178, 82, 0.55);
    outline-offset: 2px;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > :is(.gen-photo-timeline-item, .gen-entry-with-story)
    :is(.gen-photo, .gen-photo-group)
    > .gen-block-move-controls {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > [data-block-id].is-central-swap-dragging {
    position: fixed !important;
    top: var(--central-drag-top) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--central-drag-left) !important;
    z-index: 100 !important;
    width: var(--central-drag-width) !important;
    height: var(--central-drag-height) !important;
    max-height: none;
    aspect-ratio: auto !important;
    opacity: 0.88;
    pointer-events: none;
    transform: translate3d(var(--drag-x, 0), var(--drag-y, 0), 0) !important;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.2));
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > [data-block-id].is-central-swap-dragging::before,
#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > [data-block-id].is-central-swap-dragging::after {
    display: none !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > [data-block-id].is-central-swap-target {
    z-index: 12;
    outline: 2px solid #00b252;
    outline-offset: 6px;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main > .gen-day-story-block .gen-day-text {
    cursor: text;
    line-height: 1.55 !important;
}

#memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
    > .gen-day-story-block[data-positioning-mode="absolute"]
    > .gen-story-toolbar {
    left: var(--horizontal-render-grid-size, var(--edit-grid-size));
}

#memory-generated .memory-layout-horizontal-timeline .memory-story-extras {
    box-sizing: border-box;
    flex: 0 0 min(78vw, 460px);
    width: min(78vw, 460px);
    max-height: calc(100vh - 110px);
    padding: 112px 24px 0 0;
    overflow-y: auto;
    scroll-snap-align: start;
}

#memory-generated .memory-layout-horizontal-timeline .memory-print-order {
    flex: 0 0 min(62vw, 380px);
    align-items: center;
    width: min(62vw, 380px);
    height: 100%;
    padding: 112px clamp(32px, 5vw, 72px) 34px 0;
    scroll-snap-align: start;
}

.memory-story-extras:empty {
    display: none;
}

.memory-horizontal-drawer-lock {
    display: none;
}

@media (min-width: 1025px) {
    #memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock {
        position: absolute;
        top: 40px;
        right: 40px;
        left: auto;
        z-index: 1400;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #f0f1f1;
        color: #000000;
        cursor: pointer;
        transition:
            opacity 120ms ease 440ms,
            background-color 180ms ease;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock.is-locked {
        background: #dad6ff;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock .material-symbols-outlined {
        font-size: 20px;
        line-height: 1;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
    }

    #memory-generated .memory-layout-horizontal-timeline:is(
        .is-horizontal-scrolling,
        .is-horizontal-drawer-locked-closed
    ) .memory-horizontal-drawer-lock {
        opacity: 0;
        pointer-events: none;
        transition-delay: 0s;
    }
}

#memory-generated .memory-layout-horizontal-timeline .memory-story-extras
    > :is(.captured-moments-section, .gen-documents-section, .gen-notes-section):first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.memory-horizontal-controls {
    position: absolute;
    right: 28px;
    bottom: 24px;
    z-index: 20;
    display: none;
    align-items: center;
    gap: 8px;
}

#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-controls {
    display: flex;
}

.memory-horizontal-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f0f1f1;
    color: #000000;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

.memory-horizontal-controls button:hover {
    opacity: 0.8;
}

.memory-horizontal-controls button:disabled {
    opacity: 0.28;
    cursor: default;
}

.memory-horizontal-controls .material-symbols-outlined {
    font-size: 20px;
}

@media (max-width: 1024px) {
    #memory-generated .memory-layout-horizontal-timeline {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-shell-viewport {
        height: 100vh;
    }
}

@media (max-width: 760px) {
    #memory-generated .memory-layout-horizontal-timeline {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-shell-viewport,
    #memory-generated .memory-layout-horizontal-timeline .memory-content {
        height: auto;
        overflow: visible;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-body {
        display: block;
        width: 100%;
        height: auto;
        padding: 48px 20px;
        overflow: visible;
        scroll-snap-type: none;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-timeline {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-timeline::before {
        top: 8px;
        right: auto;
        bottom: 0;
        left: 4px;
        width: 1px;
        height: auto;
        background: repeating-linear-gradient(
            to bottom,
            #000000 0 1px,
            transparent 1px 3px
        );
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day {
        display: block;
        width: auto;
        min-width: 0;
        margin: 0 0 76px;
        padding: 0 0 0 34px;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day:last-child {
        margin-bottom: 76px;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-header {
        height: auto;
        margin-bottom: 28px;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-header .chapter-dot {
        top: 6px;
        left: -34px;
        box-shadow: none;
        transform: none;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks .gen-day-main {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-layout,
    #memory-generated .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks {
        width: 100%;
    }

    #memory-generated:not(.is-editing) .memory-layout-horizontal-timeline .gen-day-main > [data-block-id][data-horizontal-group-id] {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: block;
        width: 100% !important;
        max-width: 100%;
        min-height: 0;
        max-height: none;
        margin-bottom: 28px !important;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-main
        > .gen-horizontal-photo-drag-placeholder[data-horizontal-group-id] {
        width: 100%;
        margin-bottom: 28px;
    }

    #memory-generated:not(.is-editing) .memory-layout-horizontal-timeline .gen-day-main
        > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-horizontal-group-id] {
        height: auto;
        aspect-ratio: var(--horizontal-aspect, 3 / 2);
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-main
        > [data-horizontal-group-start="true"]::before {
        display: none;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-story-extras {
        width: 100%;
        max-height: none;
        padding: 0;
        overflow: visible;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-print-order {
        display: flex;
        width: 100%;
        height: auto;
        padding: 48px 0 40px;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-horizontal-controls {
        display: none;
    }
}

/* Photo entries */
.gen-entry {
    margin-bottom: 20px;
}

.gen-photo {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--bg-muted);
}

.gen-photo-remove {
    position: absolute;
    top: 10px;
    left: auto;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    padding-bottom: 2px;
    background: #ffffff;
    color: #000000;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    z-index: 3;
}

.is-editing .gen-photo-remove {
    display: inline-flex;
}

.gen-photo-context-actions {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 56px);
}

.gen-photo-context-btn {
    min-height: 28px;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--primary-dark);
    box-shadow: 0 6px 16px rgba(60, 53, 45, 0.16);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gen-photo-context-btn:hover {
    background: var(--primary);
    color: #ffffff;
}

.gen-photo-context-btn:disabled {
    cursor: default;
    opacity: 0.62;
}

.gen-photo-context-btn.is-external {
    background: rgba(0, 0, 0, 0.92);
    color: #ffffff;
}

.gen-photo-ai-actions {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
}

#memory-generated.is-editing .gen-photo-ai-actions {
    display: block;
}

.gen-photo-ai-trigger {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.gen-photo-ai-trigger svg {
    display: block;
    flex: 0 0 auto;
}

.gen-photo-ai-trigger > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.gen-photo-ai-trigger:disabled {
    cursor: wait;
}

.gen-photo-ai-trigger.is-thinking > .material-symbols-outlined {
    animation: photoAiStarSpin 1.15s linear infinite;
}

.gen-photo-ai-trigger.is-thinking {
    animation: photoAiTriggerPulse 1.15s ease-in-out infinite;
    opacity: 1 !important;
}

@keyframes photoAiStarSpin {
    0% {
        transform: rotate(0deg) scale(0.52);
    }
    50% {
        transform: rotate(180deg) scale(1.42);
    }
    100% {
        transform: rotate(360deg) scale(0.52);
    }
}

@keyframes photoAiTriggerPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 178, 82, 0), 0 6px 16px rgba(0, 0, 0, 0.18);
    }
    50% {
        box-shadow: 0 0 0 11px rgba(0, 178, 82, 0.52), 0 8px 28px rgba(0, 178, 82, 0.48);
    }
}

.story-photo-ai-menu {
    position: fixed;
    z-index: 1600;
    box-sizing: border-box;
    min-width: 196px;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.story-photo-ai-menu[hidden] {
    display: none;
}

.story-photo-ai-menu-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: nowrap;
}

.story-photo-ai-menu-item > .material-symbols-outlined,
.story-photo-ai-google-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.story-photo-ai-menu-item > .material-symbols-outlined {
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.story-photo-ai-google-icon {
    display: block;
}

.story-photo-ai-menu-item:hover,
.story-photo-ai-menu-item:focus-visible {
    background: #f0f1f1;
    outline: none;
    opacity: 1 !important;
}

.story-photo-ai-menu-item:disabled {
    color: rgba(0, 0, 0, 0.34);
    cursor: default;
    opacity: 1;
}

.story-photo-ai-menu-item[hidden] {
    display: none !important;
}

.gen-photo-detach {
    position: absolute;
    top: 46px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.96);
    color: var(--charcoal);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 6px 16px rgba(60, 53, 45, 0.16);
}

.is-editing .gen-photo-group .gen-photo-detach {
    display: inline-flex;
}

.gen-photo-detach:hover {
    background: var(--charcoal);
    color: #ffffff;
}

.gen-photo img {
    width: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
    border-radius: 0;
}

.gen-photo-placeholder {
    padding: 40px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.gen-photo-meta {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 8px;
}

.gen-photo-meta span {
    padding: 4px 10px;
    background: rgba(60,53,45,0.5);
    color: white;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    backdrop-filter: blur(8px);
}

.gen-photo-group {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--group-grid-w, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--group-grid-h, 1), minmax(0, 1fr));
    aspect-ratio: 4 / 3;
    gap: 0;
    margin-bottom: 24px;
    overflow: hidden;
    cursor: zoom-in;
}

.gen-photo-group:focus-visible {
    outline: 2px solid var(--border);
    outline-offset: 6px;
}

.gen-photo-group.single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.gen-photo-view-stack {
    display: grid;
    gap: 18px;
}

.gen-photo-edit-list {
    display: none;
    gap: 22px;
}

.is-editing .gen-photo-edit-list {
    display: grid;
}

.gen-photo-group .gen-photo {
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    margin-bottom: 0;
}

.gen-photo-group-main {
    grid-column: 1 / span var(--group-main-cols, 1);
    grid-row: 1 / span var(--group-grid-h, 1);
    min-width: 0;
}

.gen-photo-group.single .gen-photo {
    min-height: 0;
}

.gen-photo-group:not(.single) .gen-photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.gen-photo-group.single .gen-photo {
    background: transparent;
}

.gen-photo-group.single .gen-photo img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.gen-photo-group-side {
    display: grid;
    grid-template-rows: repeat(var(--group-side-rows, 1), minmax(0, 1fr));
    gap: 0;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.gen-photo-group:not(.single),
.gen-photo-group:not(.single) .gen-photo-group-side {
    gap: 3px;
    background: #ffffff;
}

#memory-generated.is-demo-memory .memory-control-rail .story-status-control,
#memory-generated.is-demo-memory .memory-control-rail-action:not(.memory-control-rail-back) {
    display: none !important;
}

.gen-photo-group-side .gen-photo {
    min-height: 0;
    min-width: 0;
}

.gen-entry .single-photo,
.gen-entry.from-expanded-group .single-photo,
.gen-entry.from-captioned-group .single-photo,
.gen-entry-with-story .single-photo {
    width: 100%;
    min-height: 0;
    margin-bottom: 0;
    display: block;
    cursor: zoom-in;
    background: transparent;
}

.gen-entry .single-photo img,
.gen-entry.from-expanded-group .single-photo img,
.gen-entry.from-captioned-group .single-photo img,
.gen-entry-with-story .single-photo img {
    width: 100%;
    height: auto;
    max-height: none;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.gen-photo-more-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(60,53,45,0.45);
    color: white;
    font-size: 28px;
    font-weight: 800;
}

body.story-gallery-open {
    overflow: hidden;
}

.story-gallery {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
    background: #000000;
}

.story-gallery.is-open {
    display: block;
}

.story-gallery-backdrop {
    position: absolute;
    inset: 0;
    background: #000000;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.story-gallery-dialog {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 18px;
    padding: 72px 36px 44px;
    color: var(--beige);
}

.story-gallery-frame {
    margin: 0;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 14px;
}

.story-gallery-img {
    display: block;
    max-width: min(1120px, 100%);
    max-height: calc(100vh - 170px);
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}

.story-gallery-caption {
    min-height: 20px;
    max-width: min(720px, 100%);
    color: rgba(245,241,228,0.78);
    font-size: 13px;
    text-align: center;
}

.story-gallery-context-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.story-gallery-context-actions.is-group-actions-hidden {
    display: none !important;
}

.story-gallery-context-btn {
    border: 1px solid var(--border);
    background: rgba(245,241,228,0.92);
    color: var(--forest);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}

.story-gallery-context-btn:hover {
    background: #fffaf0;
}

.story-gallery-context-btn.is-external {
    border-color: var(--border);
    background: #000000;
    color: #ffffff;
}

.story-gallery-context-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.story-gallery-photo-action-btn {
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.story-gallery-desktop-action-btn {
    position: absolute;
    right: 29px;
    z-index: 4;
}

.story-gallery-desktop-action-btn[data-gallery-detach] {
    top: 78px;
}

.story-gallery-desktop-action-btn[data-gallery-delete] {
    top: 132px;
}

.story-gallery-photo-action-btn[hidden] {
    display: none !important;
}

.story-gallery-photo-action-btn.is-selected {
    background: #000000;
    color: #ffffff;
    box-shadow: 0 0 0 2px #ffffff, 0 10px 28px rgba(0, 0, 0, 0.35);
}

.story-gallery-close,
.story-gallery-nav {
    border: 1px solid var(--border);
    background: rgba(245,241,228,0.08);
    color: var(--beige);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.story-gallery-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.story-gallery-close .material-symbols-outlined {
    display: block;
    font-size: 24px;
    line-height: 1;
}

.story-gallery-close.is-confirming,
.story-gallery-close.is-confirming:hover,
.story-gallery-close.is-confirming:focus-visible {
    border-color: #00b252;
    background: #00b252 !important;
    color: #ffffff !important;
}

.story-gallery-nav {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.story-gallery-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.story-gallery-count {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    color: rgba(245,241,228,0.72);
    font-size: 13px;
    font-weight: 600;
}

/* Editable captions */
.gen-caption,
.gen-day-text,
.gen-notes-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    min-height: 1.7em;
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.2s;
    outline: none;
    position: relative;
}

.gen-caption {
    font-size: 14px;
}

/* Placeholder for empty editable areas */
.gen-caption.has-placeholder::before,
.gen-day-text.has-placeholder::before,
.gen-notes-text.has-placeholder::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}

/* Hide placeholder text in view mode when empty and not editing */
.gen-caption.has-placeholder:not([contenteditable="true"]),
.gen-day-text.has-placeholder:not([contenteditable="true"]):not(.has-content) {
    display: none;
}

/* Show in edit mode */
.is-editing .gen-caption.has-placeholder,
.is-editing .gen-day-text.has-placeholder {
    display: block;
}

/* Edit mode styles */
.is-editing .gen-caption,
.is-editing .gen-notes-text {
    border: 1px solid var(--border);
    background: #ffffff;
    cursor: text;
}

/* Day text inside story block: match keywords input style */
.is-editing .gen-story-block .gen-day-text {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    cursor: text;
    box-shadow: none;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-day-text {
    position: relative;
    z-index: 1;
    min-height: calc(var(--grid-h, 1) * var(--edit-grid-size));
    border: 0;
    background: #ffffff;
    box-shadow: none;
    line-height: 1.55 !important;
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    overflow: visible;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-day-text::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    bottom: -1px;
    left: 0;
    z-index: 2;
    pointer-events: none;
    border: 1px solid var(--border);
}

.is-editing .gen-story-block .gen-day-text.is-saved {
    border-color:var(--border);
}

.is-editing .gen-caption:focus,
.is-editing .gen-notes-text:focus {
    border-color: var(--border);
    background: white;
    box-shadow: 0 0 0 3px rgba(0,178,82,0.1);
}

.is-editing .gen-story-block .gen-day-text:focus {
    border-color: var(--border);
    background: #ffffff;
    box-shadow: none;
}

/* Show text with content always */
.gen-caption.has-content,
.gen-day-text.has-content,
.gen-notes-text.has-content {
    display: block;
}

.gen-day-text {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.55;
}

.gen-story-block .gen-day-text {
    padding: 0;
    border-radius: 0;
    min-height: 0;
}

.gen-insert-point {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 6px 0;
}

.gen-insert-point-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.78);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.88);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.gen-insert-point-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 8;
}

.gen-insert-point:hover .gen-insert-point-dot,
.gen-insert-point:focus-within .gen-insert-point-dot {
    opacity: 0;
    transform: scale(0.7);
}

.gen-insert-point:hover .gen-insert-point-menu,
.gen-insert-point:focus-within .gen-insert-point-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.gen-insert-point-action {
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.gen-insert-point-action:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
}

/* ===== STORY BLOCK (AI + story text) ===== */
.gen-story-block {
    margin-bottom: 24px;
}

.gen-timeline-item,
.gen-story-block[data-block-id] {
    position: relative;
}

.gen-block-move-controls {
    position: relative;
    display: none;
    gap: 6px;
    z-index: 5;
    justify-content: flex-end;
    margin: 0 0 12px;
    pointer-events: auto;
}

.is-editing .gen-block-move-controls {
    display: flex;
}

.is-editing .gen-story-block.gen-day-story-block > .gen-block-move-controls {
    display: flex !important;
    justify-content: flex-start;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-block-move-controls {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
    z-index: 40;
    margin: 0;
    width: var(--edit-grid-size);
    height: var(--edit-grid-size);
    border: 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: #ffffff;
    box-shadow: none;
    transform: none;
}

.gen-block-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 32px;
    border-radius: 999px;
    color: rgba(60, 53, 45, 0.46);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.08em;
    cursor: grab;
    user-select: none;
    touch-action: none;
    pointer-events: auto;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-block-move-controls .gen-block-drag-handle {
    min-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    color: rgba(60, 53, 45, 0.48);
    background: transparent;
}

.gen-block-drag-handle:hover {
    background: transparent;
    color: rgba(60, 53, 45, 0.48);
}

.gen-insert-point-inline {
    width: 32px;
    min-height: 28px;
    margin: -4px 0 8px 0;
    justify-content: flex-start;
}

.gen-insert-point-inline .gen-insert-point-menu {
    left: 0;
    transform: translate(0, -50%) scale(0.96);
}

.gen-insert-point-inline:hover .gen-insert-point-menu,
.gen-insert-point-inline:focus-within .gen-insert-point-menu {
    transform: translate(0, -50%) scale(1);
}

/* In edit mode: card appearance */
.is-editing .gen-story-block {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.gen-story-formatbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.gen-story-action-btn,
.gen-story-save-btn,
.gen-ai-describe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--charcoal);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.gen-story-action-btn:hover,
.gen-story-save-btn:hover,
.gen-ai-describe-btn:hover {
    border-color: var(--border);
}

.gen-story-action-btn:disabled,
.gen-ai-describe-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.gen-story-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
}

#memory-generated:not(.is-editing) .gen-story-actions,
#memory-generated:not(.is-editing) .gen-block-move-controls {
    display: none;
}

#memory-generated.is-editing .gen-story-actions {
    display: flex;
}

.gen-story-toolbar {
    min-height: 34px;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: var(--edit-grid-size);
    z-index: 17;
    width: max-content;
    max-width: calc(100vw - 120px);
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    transform: none;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-toolbar-start,
#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-toolbar-end {
    gap: 0;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-toolbar-end {
    width: var(--edit-grid-size);
    height: var(--edit-grid-size);
    background-color: #f0f1f1 !important;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-formatbar {
    gap: 0;
}

.gen-story-toolbar-start,
.gen-story-toolbar-end {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.gen-story-secondary-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gen-story-ai-group {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.gen-story-ai-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--charcoal);
    color: var(--beige);
    cursor: pointer;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-ai-icon {
    width: var(--edit-grid-size);
    height: var(--edit-grid-size);
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: #ffffff;
    box-shadow: none;
    color: var(--charcoal);
}

.gen-story-ai-icon.is-thinking {
    animation: storyAiPulse 1.05s ease-in-out infinite;
}

@keyframes storyAiPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(60,53,45,0.22);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(60,53,45,0);
    }
}

.gen-story-action-btn {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font-size: 14px;
    font-weight: 600;
}

.gen-story-action-btn:hover {
    border-color:var(--border);
    opacity: 0.7;
}

.gen-story-save-btn {
    background: var(--brand-green);
    border-color: var(--border);
    color: var(--beige);
}

.gen-story-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: rgba(60, 53, 45, 0.72);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.gen-story-delete-btn:hover {
    border-color: var(--border);
    color: var(--charcoal);
    background: rgba(255, 255, 255, 0.75);
}

.gen-story-toolbar-icon {
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.gen-story-toolbar-icon:hover {
    opacity: 0.8;
}

.gen-story-toolbar-icon.is-delete {
    font-size: 24px;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-toolbar-icon.is-delete {
    width: var(--edit-grid-size);
    height: var(--edit-grid-size);
    border: 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    background-color: #f0f1f1 !important;
    box-shadow: none;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    opacity: 1;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .gen-story-toolbar-icon.is-delete .material-symbols-outlined {
    display: block;
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20;
}

.type-tool-heading {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.type-tool-body {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .type-tool-heading,
#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .type-tool-body {
    width: var(--edit-grid-size);
    height: var(--edit-grid-size);
    border: 0;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    background: var(--control-bg) !important;
    box-shadow: none;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-story-toolbar .type-tool-body {
    font-weight: 500;
}

.gen-story-block .gen-day-text.is-saved {
    color: var(--charcoal);
}

.gen-story-block .gen-day-text h2,
.gen-story-block .gen-day-text h3,
.gen-story-block .gen-day-text h4 {
    margin: 0 0 8px;
    background: transparent !important;
    color: var(--charcoal);
    letter-spacing: 0;
    line-height: 1.15;
}

.gen-story-block .gen-day-text p {
    margin: 0;
    background: transparent !important;
    color: inherit;
    font: inherit;
    font-size: inherit !important;
    font-weight: 400;
    letter-spacing: inherit;
    line-height: inherit;
}

.gen-story-block .gen-day-text h2 {
    font-size: 36px !important;
    font-weight: 700;
}

.gen-story-block .gen-day-text h3 {
    font-size: 26px !important;
    font-weight: 700;
}

.gen-story-block .gen-day-text h4 {
    font-size: 20px !important;
    font-weight: 700;
}

.type-tool {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--charcoal);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.type-tool:hover {
    opacity: 1;
}

.type-tool-xl {
    font-size: 24px;
}

.type-tool-lg {
    font-size: 22px;
}

.type-tool-md {
    font-size: 20px;
}

.type-tool-sm {
    font-size: 18px;
}

.gen-ai-describe-btn {
    margin-top: 8px;
    padding: 0;
    min-height: 34px;
    border: 0;
    background: var(--charcoal);
    color: var(--beige);
    font-size: 0;
}

.gen-ai-describe-btn:hover {
    border-color:var(--border);
}

.gen-entry-story-block {
    margin-bottom: 14px;
}

.gen-photo-timeline-item {
    position: relative;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"],
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] {
    margin-bottom: 0;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-entry,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-entry,
#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-photo-view-stack,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-photo-view-stack,
#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-photo-group,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-photo-group,
#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .single-photo,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .single-photo {
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-photo-view-stack,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-photo-view-stack,
#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-photo-group,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-photo-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-photo,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-photo {
    height: 100%;
    margin-bottom: 0;
}

#memory-generated.is-editing .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"] .gen-photo img,
#memory-generated.is-editing .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"] .gen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"],
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] {
    margin-bottom: 0;
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-entry,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-entry,
#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-view-stack,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-view-stack,
#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-group,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-group,
#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .single-photo,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .single-photo {
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-view-stack,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-view-stack,
#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-group,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo {
    height: 100%;
    margin-bottom: 0;
}

#memory-generated:not(.is-editing) .gen-day-main > .gen-photo-timeline-item[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo img,
#memory-generated:not(.is-editing) .gen-day-main > .gen-entry-with-story[data-positioning-mode="absolute"][data-layout-sized="true"] .gen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gen-photo-timeline-item > .gen-block-move-controls {
    position: absolute;
    top: 10px;
    right: 48px;
    margin: 0;
    padding: 2px 6px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(60, 53, 45, 0.14);
}

.is-editing .gen-day:has(.gen-entry-story-block) > .gen-day-story-block:has(.gen-day-text.has-placeholder:not(.has-content)) {
    display: none;
}

.gen-entry-with-story {
    display: grid;
    gap: 0;
    margin-bottom: 22px;
}

/* Caption block with AI describe */
.gen-caption-block {
    margin-bottom: 4px;
}

.photo-captions-disabled .gen-caption-block {
    display: none !important;
}

/* ===== COLOR PALETTE IN EDIT TOOLBAR ===== */
.gen-layout-bar {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
}

.gen-color-palette {
    display: flex;
    gap: 6px;
    align-items: center;
    align-self: stretch;
    padding: 0 14px;
    border-right: 1px solid var(--border);
}

.gen-layout-controls {
    display: inline-flex;
    align-self: stretch;
    align-items: center;
}

.gen-layout-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border-right: 1px solid var(--border);
    color: var(--charcoal);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.gen-layout-toggle:last-child {
    border-right: 0;
}

.gen-layout-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--charcoal);
}

.gen-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.gen-color-swatch:hover {
    transform: scale(1.2);
}

.gen-color-swatch.active {
    border-color: var(--border);
    box-shadow: 0 0 0 2px var(--primary);
}

/* Companions in hero */
.gen-companions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 13px;
    opacity: 0.85;
}

.gen-companions .avatar-xs {
    margin-left: -4px;
    border: 2px solid var(--border);
}

.gen-companions .avatar-xs:first-child {
    margin-left: 0;
}

.gen-companions span {
    margin-left: 8px;
}

.gen-hero-location {
    opacity: 0.7;
}

/* Documents section */
.gen-documents-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.gen-documents-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Notes section */
.gen-notes-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.gen-notes-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .memory-shell {
        display: block;
        min-height: auto;
    }

    .memory-shell-drawer {
        position: relative;
        top: auto;
        height: auto;
        display: block;
        border-right: 0;
        box-shadow: none;
    }

    .memory-shell-rail {
        display: none;
    }

    .memory-shell-drawer-scroll {
        display: block;
        min-height: 0;
        height: auto;
        overflow: visible;
        overscroll-behavior: auto;
    }

    #memory-generated .memory-shell-drawer .memory-hero-actions {
        width: 100%;
        padding: 20px 18px 14px;
    }

    .memory-shell-drawer-head {
        border-bottom: 0;
    }

    .memory-shell-drawer-head .memory-hero,
    .memory-shell.no-map .memory-shell-drawer-head .memory-hero {
        min-height: auto;
    }

    .memory-shell-drawer-head .memory-hero-content {
        padding: 92px 24px 32px;
    }

    .memory-hero-actions {
        top: 20px;
        left: 18px;
        right: 18px;
    }

    .memory-shell-drawer-head .memory-hero-content h1 {
        font-size: 44px;
    }

    .memory-shell-drawer-body {
        min-height: 280px;
        height: 38vh;
    }

    .memory-shell.no-map .memory-shell-drawer-body {
        display: none;
    }

    .memory-content {
        margin-left: 0;
    }

    .memory-shell-viewport > .nav {
        position: fixed;
    }

    .feed-layout {
        grid-template-columns: 1fr;
    }

    .feed-sidebar,
    .feed-sidebar-right {
        display: none;
    }

    .feed-sidebar-right.notifications-open {
        position: fixed;
        inset: 0;
        z-index: 650;
        display: block;
        padding: 16px;
        background: rgba(0, 0, 0, 0.28);
    }

    .feed-sidebar-right.notifications-open > .sidebar-section:not(.feed-notifications-section) {
        display: none;
    }

    .feed-sidebar-right.notifications-open .feed-notifications-section.is-open {
        display: block;
        width: min(440px, 100%);
        max-height: min(680px, calc(100dvh - 32px));
        margin: 0 0 0 auto;
        overflow-y: auto;
        border-radius: 20px;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
    }

    .feed-notifications-section.is-open .feed-notifications-close {
        display: grid;
    }

    .feed-mobile-views {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .feed-mobile-views::-webkit-scrollbar {
        display: none;
    }

    .feed-mobile-search {
        display: inline-flex;
    }

    .features-split {
        grid-template-columns: 1fr;
    }

    .steps {
        flex-direction: column;
        align-items: center;
    }

    .step-connector {
        display: none;
    }

    .profile-memories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hf-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hf-collage {
        min-height: 520px;
    }

    .hf-text {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Flat hero: tighter layout on mobile */
    .hero-flat {
        padding: 100px 20px 48px;
        min-height: auto;
    }

    .hf-headline {
        font-size: clamp(2.75rem, 14vw, 5rem);
    }

    .hf-headline-soft {
        font-size: clamp(2.4rem, 11vw, 3.7rem);
    }

    .hf-eyebrow {
        font-size: 12px;
        padding: 6px 14px;
        margin-bottom: 24px;
    }

    .hf-sub {
        font-size: 1rem;
        margin-bottom: 32px;
    }

    .hf-collage {
        min-height: 430px;
    }

    .hf-photo,
    .hf-block {
        border-radius: 0;
    }

    .hf-block { padding: 14px; }
    .hf-tag { font-size: 13px; }

    .hf-btn {
        padding: 14px 24px;
        font-size: 14px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .memory-hero-content h1 {
        font-size: 32px;
    }

    .profile-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 0;
    }

    .profile-details {
        padding-top: 8px;
    }

    .profile-stats-row {
        justify-content: center;
        flex-wrap: wrap;
        margin-left: 0;
        text-align: center;
    }

    .profile-memories-grid {
        grid-template-columns: 1fr;
    }

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

    .footer-inner {
        flex-direction: column;
        gap: 32px;
    }

    .footer-links {
        gap: 32px;
        flex-wrap: wrap;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .showcase-cover {
        height: 240px;
    }

    .gen-photo-group {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        aspect-ratio: auto;
    }

    .gen-photo-group .gen-photo,
    .gen-photo-group.single .gen-photo {
        min-height: 0;
    }

    .gen-photo-group-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gen-photo-group-side .gen-photo {
        min-height: 96px;
    }

    .story-gallery-dialog {
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        gap: 8px;
        padding: 70px 14px 48px;
    }

    .story-gallery-nav {
        width: 44px;
        height: 44px;
    }

    .story-gallery-img {
        max-height: calc(100vh - 180px);
    }

    .files-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

/* ================================================
   CINEMA HERO
   ================================================ */
.cinema-wrapper {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg);
}

.cinema-hero {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    isolation: isolate;
    transform: scale(1);
    transform-origin: center;
    will-change: opacity, transform;
}

/* The first content section shares the cinema viewport. It already occupies
   the wrapper's layout height, but remains visually dormant until the intro
   hands the page over to it. */
.cinema-wrapper > .hero-flat {
    z-index: 2;
    min-height: 100vh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.985);
    transform-origin: center;
    transition:
        opacity 760ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 900ms;
    will-change: opacity, transform;
}

.cinema-wrapper.is-content-visible {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

.cinema-wrapper.is-content-visible > .hero-flat {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition-delay: 0s;
}

.cinema-wrapper > .hero-flat :is(.hf-line, .hf-sub, .hf-cta, .hf-collage) {
    animation: none !important;
    opacity: 0;
    transition:
        opacity 680ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cinema-wrapper > .hero-flat .hf-line {
    transform: translate3d(0, 38px, 0);
}

.cinema-wrapper > .hero-flat :is(.hf-sub, .hf-cta) {
    transform: translate3d(0, 24px, 0);
}

.cinema-wrapper > .hero-flat .hf-collage {
    transform: translate3d(0, 28px, 0) scale(0.98);
}

.cinema-wrapper.is-content-visible > .hero-flat :is(.hf-line, .hf-sub, .hf-cta, .hf-collage) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.cinema-wrapper.is-content-visible > .hero-flat .hf-line:nth-child(1) { transition-delay: 80ms; }
.cinema-wrapper.is-content-visible > .hero-flat .hf-line:nth-child(2) { transition-delay: 150ms; }
.cinema-wrapper.is-content-visible > .hero-flat .hf-line:nth-child(3) { transition-delay: 220ms; }
.cinema-wrapper.is-content-visible > .hero-flat .hf-line:nth-child(4) { transition-delay: 290ms; }
.cinema-wrapper.is-content-visible > .hero-flat .hf-sub { transition-delay: 360ms; }
.cinema-wrapper.is-content-visible > .hero-flat .hf-cta { transition-delay: 450ms; }
.cinema-wrapper.is-content-visible > .hero-flat .hf-collage { transition-delay: 170ms; }

.cinema-stage {
    position: absolute;
    inset: 0;
    will-change: opacity;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.cinema-card {
    border-radius: 0;
    overflow: hidden;
    position: absolute;
    will-change: transform, opacity;
    transform-origin: center center;
}

/* ── Individual card positions & sizes (collage layout) ── */
/* Card 0 — yellow/birthdays: tall portrait, bleeds top-left */
.cinema-card[data-ci="0"] {
    left: 6vw; top: 30vh;
    width: 18vw;
    aspect-ratio: 2 / 3;
    z-index: 3;
}
/* Card 1 — family: wide landscape, top-center */
.cinema-card[data-ci="1"] {
    left: 20vw; top: 4vh;
    width: 64vw;
    aspect-ratio: 3 / 2;
    z-index: 2;
}
/* Card 2 — travel: tall portrait, top-right */
.cinema-card[data-ci="2"] {
    right: 14vw; top: 16vh;
    width: 18vw;
    aspect-ratio: 2 / 3;
    z-index: 4;
}
/* Card 3 — pink/first steps: landscape, bottom-left */
.cinema-card[data-ci="3"] {
    left: 8vw; top: 51vh;
    width: 47vw;
    aspect-ratio: 3 / 2;
    z-index: 2;
}
/* Card 4 — memory portrait, no longer dominant */
.cinema-card[data-ci="4"] {
    left: 52vw; top: 29vh;
    width: 21vw;
    aspect-ratio: 3 / 2;
    z-index: 5;
}
/* Card 5 — green/summers: landscape, right-center */
.cinema-card[data-ci="5"] {
    right: 20vw; top: 48vh;
    width: 34vw;
    aspect-ratio: 3 / 2;
    z-index: 3;
}
/* Card 6 — concert: portrait, bottom-center */
.cinema-card[data-ci="6"] {
    left: 28vw; top: 72vh;
    width: 14vw;
    aspect-ratio: 2 / 3;
    z-index: 4;
}
/* Card 7 — mountains: wide landscape, bottom-right */
.cinema-card[data-ci="7"] {
    left: 52vw; top: 53vh;
    width: 44vw;
    aspect-ratio: 3 / 2;
    z-index: 1;
}
/* Card 8 — blue/journeys: portrait, overlapping right */
.cinema-card[data-ci="8"] {
    right: 31vw; top: 23vh;
    width: 9vw;
    aspect-ratio: 2 / 3;
    z-index: 6;
}

.cinema-card[data-ci="8"] .cinema-tag {
    color: var(--charcoal);
    text-shadow: none;
}
/* Card 9 — protest portrait, added as a separate layer */
.cinema-card[data-ci="9"] {
    left: 38vw; top: 10vh;
    width: 15vw;
    aspect-ratio: 2 / 3;
    z-index: 7;
}
/* Card 10 — fisherman portrait, added as a separate layer */
.cinema-card[data-ci="10"] {
    right: 6vw; top: 38vh;
    width: 16vw;
    aspect-ratio: 2 / 3;
    z-index: 4;
}

.cinema-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.cinema-solid {
    width: 100%;
    height: 100%;
    background: var(--cc, #ccc);
}

.cinema-tag {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: white;
    letter-spacing: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
    pointer-events: none;
}

/* Brand lockup */
.cinema-brand {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    text-align: center;
}

.cinema-word {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform, opacity;
}

.cinema-em {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Sora', sans-serif;
    font-size: clamp(4.2rem, 13vw, 12rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.95;
    color: var(--text);
    white-space: nowrap;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(18px) scale(0.94);
}

.cinema-brand-mark,
.cinema-brand-rest {
    display: block;
    flex: 0 0 auto;
}

.cinema-brand-rest {
    margin-left: -0.02em;
    opacity: 0;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 38%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 38%, transparent 100%);
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    will-change: opacity, mask-position;
}

.cinema-closing {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.22em;
    width: min(1440px, calc(100% - 64px));
    color: var(--text);
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.6rem, 5.3vw, 5.6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -74px, 0) scale(1.24);
    transform-origin: center center;
    z-index: 9;
    will-change: transform, opacity;
}

.cinema-closing-phrase {
    display: inline-block;
    flex: 0 0 auto;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transform-origin: center center;
    will-change: transform, opacity;
}

.cinema-word-gap {
    display: inline-block;
    margin-left: 0.26em;
}

/* Scroll cue */
.cinema-cue {
    position: absolute;
    top: auto;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--charcoal);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: none;
    animation: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.cinema-cue.is-ready {
    opacity: 0.82;
    animation: cinemaCueBob 2.4s ease-in-out infinite;
}

.cinema-cue-icon {
    width: 48px;
    height: 48px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-nav .settings-icon-filled {
    display: block;
    width: 25px;
    height: 25px;
    color: #000000;
    fill: currentColor;
}

@keyframes cinemaCueBob {
    0%, 100% { opacity: 0.68; transform: translateX(-50%); }
    50%       { opacity: 0.95; transform: translate(-50%, 7px); }
}

@media (max-width: 900px) {
    .cinema-wrapper {
        height: 100vh;
    }

    .cinema-wrapper.is-content-visible {
        height: auto;
    }

    .cinema-card[data-ci="0"] {
        left: 4vw; top: 31vh;
        width: 32vw;
    }

    .cinema-card[data-ci="1"] {
        left: 10vw; top: 4vh;
        width: 82vw;
    }

    .cinema-card[data-ci="2"] {
        right: 8vw; top: 19vh;
        width: 27vw;
    }

    .cinema-card[data-ci="3"] {
        left: 4vw; top: 50vh;
        width: 70vw;
    }

    .cinema-card[data-ci="4"] {
        left: 48vw; top: 32vh;
        width: 42vw;
    }

    .cinema-card[data-ci="5"] {
        right: 16vw; top: 56vh;
        width: 48vw;
    }

    .cinema-card[data-ci="6"] {
        left: 22vw; top: 74vh;
        width: 24vw;
    }

    .cinema-card[data-ci="7"] {
        left: 48vw; top: 54vh;
        width: 58vw;
    }

    .cinema-card[data-ci="8"] {
        right: 27vw; top: 27vh;
        width: 16vw;
    }

    .cinema-em {
        font-size: clamp(2.7rem, 13vw, 6.8rem);
    }

    .cinema-closing {
        flex-wrap: wrap;
        width: min(520px, calc(100% - 32px));
        font-size: 2.25rem;
        line-height: 1.04;
    }
}

/* ===== UNIFIED BUTTON SYSTEM ===== */
/* Text buttons have one geometry and default to the inactive/light state. */
.btn-primary,
.btn-orange,
.btn-outline,
.btn-white,
.btn-danger,
.btn-ghost,
.btn-follow,
.btn-back,
.hf-btn,
.nav .nav-links a,
.nav .language-switcher-btn,
.btn-new-memory,
.profile-new-memory-btn,
.profile-tab,
.style-chip,
.filter-chip,
.captured-moments-generate,
.capture-routing-action,
.capture-new-memory-cancel,
.capture-new-memory-create,
.captured-moment-delete,
.mfc-chip,
.mfc-person-chip,
.capture-inbox-attach,
.capture-inbox-route,
.capture-inbox-delete,
.pmc-delete-btn,
.pmc-restore-btn,
.gen-toolbar-btn,
.btn-edit-story,
.memory-edit-order-btn,
.collab-invite-row button,
.collab-form button,
.collab-actions button,
.collab-dev-btn,
.gen-photo-context-btn,
.story-gallery-context-btn,
.gen-story-save-btn,
.gen-story-delete-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: var(--button-height) !important;
    min-height: var(--button-height) !important;
    padding: 0 var(--button-padding-x) !important;
    border: 0 !important;
    border-radius: var(--button-radius) !important;
    background: var(--control-bg) !important;
    color: #000000 !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-font-weight) !important;
    line-height: 1 !important;
    letter-spacing: var(--button-letter-spacing) !important;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.2s ease !important;
}

/* Only genuinely selected or toggled buttons use the active state. */
.nav .nav-links a.active,
.nav .language-switcher-btn.active,
.profile-tab.active,
.style-chip.active,
.filter-chip.active,
.mfc-chip.active,
.mfc-person-chip.active,
#memory-generated .memory-hero-edit-btn.is-done {
    background: var(--button-active-bg) !important;
    color: #000000 !important;
}

/* Dedicated action style for every "+ New memory" button. */
.btn-new-memory {
    background: var(--button-new-memory-bg) !important;
    color: #ffffff !important;
}

/* Reusable semantic button surfaces. */
.btn-white {
    background: #ffffff !important;
    color: #000000 !important;
}

.btn-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
}

/* Hover never changes geometry or state colors. */
button:not(:disabled):hover,
.nav .nav-links a:hover {
    opacity: 0.8 !important;
    transform: none !important;
}

.language-switcher {
    min-height: var(--button-height);
    padding: 0;
    border: 0;
    background: transparent;
}

/* Icon-only buttons keep their compact geometry but follow the same colors. */
.nav-icon-btn,
.memory-shell-rail-btn,
.btn-back.story-back-icon {
    width: var(--button-height);
    height: var(--button-height);
    min-height: var(--button-height);
    padding: 0 !important;
    border: 0 !important;
    background: var(--control-bg) !important;
    color: #000000 !important;
}

.memory-shell-rail-btn.is-active {
    background: var(--button-active-bg) !important;
    color: #000000 !important;
}

.memory-hero-actions .story-status-control {
    flex: 0 0 auto;
}

/* Feed sidebar: equal-width controls with the shared selected state. */
#page-feed .feed-sidebar .sidebar-link,
#page-feed .feed-sidebar .btn-sidebar-create {
    width: 100%;
}

#page-feed .feed-sidebar .sidebar-link.active {
    background: var(--button-active-bg);
    color: #000000;
}

/* Secondary people-filter button variant */
.mfc-chip,
.mfc-person-chip {
    font-weight: 500 !important;
}

#page-profile .memories-filter-section-group .mfc-chip {
    font-weight: 700 !important;
}

@media (min-width: 769px) {
    .site-nav .nav-links a {
        font-size: 14px !important;
    }
}

.mfc-person-chip {
    padding: 0 16px 0 11px !important;
    letter-spacing: 0 !important;
    text-transform: none;
}

.mfc-person-chip.no-avatar {
    padding: 0 var(--button-padding-x) !important;
    letter-spacing: var(--button-letter-spacing) !important;
    text-transform: uppercase;
}

.mfc-chip,
.mfc-person-chip.no-avatar {
    padding-top: 1px !important;
    padding-bottom: 0 !important;
}

.mfc-avatar {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    letter-spacing: 0 !important;
    text-align: center;
    text-indent: 0;
}

/* Text-entry surfaces */
.memories-search-wrap,
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])),
textarea,
[contenteditable="true"] {
    background-color: var(--control-bg) !important;
}

#memory-generated.is-editing .gen-story-block .gen-day-text[contenteditable="true"],
#memory-generated.is-editing .gen-story-block .gen-day-text[contenteditable="true"] :is(h2, h3, h4, p, div) {
    background: transparent !important;
}

.memories-search-wrap,
.capture-inbox-composer textarea,
.memories-search-wrap:focus-within,
.capture-inbox-composer textarea:focus {
    background-color: rgb(252, 252, 252) !important;
    box-shadow: inset 0 1px 9px rgba(0, 0, 0, 0.11);
}

.memories-search-wrap input {
    background: transparent !important;
    box-shadow: none;
}

/* Memory title */
#memory-generated .memory-hero-content h1,
.memory-shell-drawer-head .memory-hero-content h1 {
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1px;
}

/* Wordmark only */
.logo-icon {
    display: none;
}

/* Unified controls displayed directly on Memory photos. */
#memory-generated .gen-photo-context-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 14px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.6px !important;
}

#memory-generated .gen-photo-remove,
#memory-generated .gen-photo-detach,
#memory-generated .gen-block-drag-handle {
    box-sizing: border-box;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}

#memory-generated .gen-photo-remove,
#memory-generated .gen-photo-detach {
    background: rgba(255, 255, 255, 0.96);
}

#memory-generated .gen-block-move-controls {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000000;
    box-shadow: none;
}

#memory-generated .gen-photo-timeline-item .gen-photo > .gen-block-move-controls,
#memory-generated .gen-photo-timeline-item .gen-photo-group > .gen-block-move-controls {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 6;
    margin: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 0;
    background: #000000;
    box-shadow: none;
}

#memory-generated .gen-block-move-controls .gen-block-drag-handle,
#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-block-move-controls .gen-block-drag-handle {
    border-radius: 0 !important;
    background: #000000 !important;
    color: #ffffff !important;
    opacity: 1;
}

#memory-generated.is-editing .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"] > .gen-block-move-controls {
    width: 28px;
    height: 28px;
    border: 0;
    background: #000000;
}

#memory-generated .gen-block-drag-dots {
    display: grid;
    grid-template-columns: repeat(2, 2px);
    grid-template-rows: repeat(3, 2px);
    column-gap: 4px;
    row-gap: 2.5px;
    width: 8px;
    height: 11px;
}

#memory-generated .gen-block-drag-dots > span {
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffffff !important;
    box-shadow: none !important;
    filter: none;
    opacity: 1 !important;
}

#page-profile .pmc-tag {
    border: 0;
}

#page-feed .feed-tag,
#page-feed .feed-card-cover.is-dark .feed-tag,
#page-feed .feed-card-cover.is-light .feed-tag {
    padding: 5px 10px 4px;
    background: #ffffff;
    color: var(--charcoal);
    border: 1px solid var(--category-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#memory-generated .gen-photo-remove {
    padding-bottom: 0;
}

#memory-generated .gen-photo-group .gen-photo-detach {
    top: 10px;
}

#memory-generated .gen-photo-group > .gen-photo-remove {
    top: 10px;
}

#memory-generated .gen-photo-remove .material-symbols-outlined,
#memory-generated .gen-photo-detach .material-symbols-outlined {
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 18;
}

/* The whole photo surface is the move handle while editing. */
#memory-generated.is-editing .gen-photo-timeline-item .gen-photo,
#memory-generated.is-editing .gen-photo-timeline-item .gen-photo-group,
#memory-generated.is-editing .gen-photo-timeline-item .gen-photo img {
    cursor: grab;
}

/* A photo group opens on a normal click while editing. Moving the whole
   group is armed only after the long-press delay in app.js. */
#memory-generated.is-editing .gen-photo-timeline-item .gen-photo-group,
#memory-generated.is-editing .gen-photo-timeline-item .gen-photo-group .gen-photo,
#memory-generated.is-editing .gen-photo-timeline-item .gen-photo-group img {
    cursor: default;
}

#memory-generated.is-editing .gen-photo-timeline-item.is-dragging-block .gen-photo,
#memory-generated.is-editing .gen-photo-timeline-item.is-dragging-block .gen-photo-group,
#memory-generated.is-editing .gen-photo-timeline-item.is-dragging-block .gen-photo img {
    cursor: grabbing;
}

/*
 * Keep view mode and edit mode on the same horizontal coordinates. These
 * desktop rules intentionally come after the generic Custom-grid selectors.
 */
@media (min-width: 761px) {
    #memory-generated .memory-layout-horizontal-timeline .gen-day-main
        > [data-block-id][data-horizontal-group-id][data-positioning-mode="absolute"] {
        position: absolute;
        top: calc(var(--horizontal-grid-y, 0) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
        right: auto;
        bottom: auto;
        left: calc(var(--horizontal-grid-x, 0) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
        width: calc(var(--horizontal-grid-w, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
        height: calc(var(--horizontal-grid-h, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
        min-width: 0;
        min-height: 0;
        max-height: 100%;
        margin: 0 !important;
        z-index: calc(2 + var(--horizontal-grid-layer, 0));
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-main
        > .gen-day-story-block[data-horizontal-group-id][data-positioning-mode="absolute"] {
        width: calc(var(--horizontal-grid-w, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
        height: calc(var(--horizontal-grid-h, 1) * var(--horizontal-render-grid-size, var(--edit-grid-size)));
        min-height: 0;
        max-height: 100%;
    }

    #memory-generated .memory-layout-horizontal-timeline .gen-day-main
        > .gen-day-story-block[data-horizontal-group-id][data-positioning-mode="absolute"]
        > .gen-day-text {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

/* Full-height memory control rail. It stays compact over the map and expands
   without changing the map or story geometry. */
#memory-generated .memory-control-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    width: 56px;
    min-width: 56px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 5px 0 18px rgba(0, 0, 0, 0.055);
    overflow: visible;
    transition:
        width 360ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease;
    will-change: width;
}

#memory-generated .memory-control-rail:hover,
#memory-generated .memory-control-rail:focus-within {
    width: min(244px, calc(var(--memory-shell-drawer-width) - 24px));
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.11);
}

#memory-generated .memory-control-rail.is-forced-collapsed,
#memory-generated .memory-control-rail.is-forced-collapsed:hover,
#memory-generated .memory-control-rail.is-forced-collapsed:focus-within {
    width: 56px;
    box-shadow: 5px 0 18px rgba(0, 0, 0, 0.055);
}

#memory-generated .memory-control-rail-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 16px 6px;
    overflow: visible;
}

#memory-generated .memory-control-brand {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 52px;
    width: 100%;
    height: 52px;
    align-items: center;
    padding: 0 10px 0 14px;
    overflow: hidden;
    color: #000000;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    white-space: nowrap;
    user-select: none;
    transform: translateY(-6px);
}

#memory-generated .memory-control-brand-mark {
    display: block;
    flex: 0 0 auto;
}

#memory-generated .memory-control-brand-rest {
    display: block;
    flex: 0 0 auto;
    margin-left: -0.5px;
    opacity: 0;
    -webkit-mask-image: linear-gradient(
        to right,
        #000000 0%,
        #000000 34%,
        transparent 38%,
        transparent 100%
    );
    -webkit-mask-position: 100% 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 300% 100%;
    mask-image: linear-gradient(
        to right,
        #000000 0%,
        #000000 34%,
        transparent 38%,
        transparent 100%
    );
    mask-position: 100% 0;
    mask-repeat: no-repeat;
    mask-size: 300% 100%;
    transition:
        opacity 180ms ease-out,
        -webkit-mask-position 1150ms cubic-bezier(0.08, 0.76, 0.12, 1),
        mask-position 1150ms cubic-bezier(0.08, 0.76, 0.12, 1);
}

#memory-generated .memory-control-rail:hover .memory-control-brand-rest,
#memory-generated .memory-control-rail:focus-within .memory-control-brand-rest {
    opacity: 1;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

#memory-generated .memory-control-rail.is-forced-collapsed .memory-control-brand-rest,
#memory-generated .memory-control-rail.is-forced-collapsed:hover .memory-control-brand-rest,
#memory-generated .memory-control-rail.is-forced-collapsed:focus-within .memory-control-brand-rest {
    opacity: 0;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
}

#memory-generated .memory-control-rail-action,
#memory-generated .memory-control-rail .story-status-trigger {
    box-sizing: border-box;
    flex: 0 0 44px;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden;
    transition: background-color 180ms ease !important;
}

#memory-generated .memory-control-rail-action:not(.memory-hero-edit-btn):hover,
#memory-generated .memory-control-rail-action:not(.memory-hero-edit-btn):focus-visible,
#memory-generated .memory-control-rail .story-status-trigger:hover,
#memory-generated .memory-control-rail .story-status-trigger:focus-visible,
#memory-generated .memory-control-rail .story-status-control.is-open .story-status-trigger {
    background: #f0f1f1 !important;
    color: #000000 !important;
    opacity: 1 !important;
    outline: none;
}

#memory-generated .memory-control-rail-action > .material-symbols-outlined {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #000000;
    font-size: 21px;
    line-height: 24px;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22;
}

#memory-generated .memory-control-rail .memory-control-label {
    display: block;
    max-width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition:
        max-width 300ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 160ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

#memory-generated .memory-control-rail:hover .memory-control-label,
#memory-generated .memory-control-rail:focus-within .memory-control-label {
    max-width: 170px;
    opacity: 1;
    transform: translateX(0);
}

#memory-generated .memory-control-rail.is-forced-collapsed .memory-control-label,
#memory-generated .memory-control-rail.is-forced-collapsed:hover .memory-control-label,
#memory-generated .memory-control-rail.is-forced-collapsed:focus-within .memory-control-label {
    max-width: 0;
    opacity: 0;
    transform: translateX(-6px);
}

#memory-generated .memory-control-rail .story-status-control {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
}

#memory-generated .memory-control-rail .story-status-trigger-copy {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
    overflow: hidden;
}

#memory-generated .memory-control-rail .story-status-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin: 0 7px;
}

#memory-generated .memory-control-rail .story-status-chevron {
    display: none;
}

#memory-generated .memory-control-rail:hover .story-status-chevron,
#memory-generated .memory-control-rail:focus-within .story-status-chevron {
    display: block;
}

#memory-generated .memory-control-rail.is-forced-collapsed .story-status-chevron {
    display: none;
}

#memory-generated .memory-control-rail .story-status-menu {
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    min-width: 184px;
}

#memory-generated .memory-control-rail .story-status-menu button {
    border-radius: 999px;
}

#memory-generated .memory-control-rail .memory-hero-edit-btn {
    margin-top: auto;
}

#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
}

#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done {
    background: #dad6ff !important;
    color: #000000 !important;
}

/* The old top control bar is replaced by the vertical rail, so the map can
   again use the full height of its panel. */
#memory-generated .memory-hero-in-story:not(.no-map) .memory-map-panel,
#memory-generated.is-editing .memory-hero-in-story:not(.no-map) .memory-map-panel {
    padding-top: 28px;
}

#memory-generated .memory-hero-in-story #genStoryMap .leaflet-left {
    left: 34px;
}

@media (max-width: 1024px) {
    #memory-generated .memory-control-rail:hover,
    #memory-generated .memory-control-rail:focus-within {
        width: min(244px, calc(100vw - 20px));
    }

    #memory-generated .memory-hero-in-story:not(.no-map) .memory-map-panel,
    #memory-generated.is-editing .memory-hero-in-story:not(.no-map) .memory-map-panel {
        padding-top: 20px;
    }
}

/* Layout visibility is managed in the Layouts dashboard. When the map is
   hidden, keep only the control rail so it can always be enabled again. */
#memory-generated .memory-shell.memory-hero-in-story.no-map {
    grid-template-columns: 56px minmax(0, 1fr);
}

#memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-drawer {
    width: 56px;
    min-width: 56px;
    overflow: hidden;
    box-shadow: none;
}

#memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-drawer-scroll {
    overflow: hidden;
}

#memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-drawer-body {
    display: none !important;
}

@media (min-width: 1025px) {
    #memory-generated .memory-shell.memory-hero-in-story.no-map:is(
        .memory-layout-custom,
        .memory-layout-central-timeline
    ) .memory-shell-viewport {
        width: calc(100% - var(--memory-shell-drawer-width) + 56px);
        max-width: calc(100% - var(--memory-shell-drawer-width) + 56px);
        min-width: 0;
        justify-self: center;
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline.no-map
        .memory-shell-drawer {
        width: 56px;
        transform: translateX(0) !important;
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline.no-map
        .memory-story-hero {
        margin-left: 56px;
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline.no-map
        .memory-horizontal-drawer-lock {
        display: none;
    }
}

@media (max-width: 1024px) {
    #memory-generated .memory-shell.memory-hero-in-story.no-map {
        display: block;
    }

    #memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        height: 100vh;
    }

    #memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-viewport {
        padding-left: 56px;
    }
}

/* Memory heading composition. Vertical layouts keep their existing wrapping,
   but share one left icon axis. The horizontal layout uses the full viewport
   height, with identity at the top and statistics at the bottom. */
#memory-generated :is(
    .memory-layout-custom,
    .memory-layout-central-timeline
) .memory-story-hero .memory-hero-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-self: start;
    align-content: start;
    justify-self: start;
    gap: 0;
    margin-top: 43px;
    margin-right: 0;
    border-top: 1px solid #000000;
}

#memory-generated :is(
    .memory-layout-custom,
    .memory-layout-central-timeline
) .memory-story-hero .memory-stat {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 12px;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #000000;
    text-align: left;
}

#memory-generated :is(
    .memory-layout-custom,
    .memory-layout-central-timeline
) .memory-story-hero .memory-stat-icon {
    justify-self: center;
}

#memory-generated :is(
    .memory-layout-custom,
    .memory-layout-central-timeline
) .memory-story-hero .memory-stat > span:last-child {
    justify-self: start;
    text-align: left;
}

@media (min-width: 761px) {
    /* Add one real grid column to the right without moving existing content.
       The central timeline keeps its mathematical axis in the original place. */
    #memory-generated .memory-layout-custom .gen-day-layout.gen-grid-canvas {
        width: calc(100% + var(--edit-grid-size));
    }

    #memory-generated .memory-layout-central-timeline .gen-day-layout.gen-grid-canvas {
        width: calc(100% + var(--edit-grid-size));
    }

    #memory-generated .memory-layout-central-timeline .gen-day-main {
        width: 100%;
    }

    #memory-generated .memory-layout-central-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-central-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-central-timeline .gen-day-layout.has-side-blocks .gen-day-main {
        grid-template-columns:
            calc(50% - 58px)
            88px
            calc(50% - 30px);
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline
    ) .memory-story-hero .memory-hero-main {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 240px);
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline
    ) .memory-story-hero .memory-hero-stats {
        width: 220px;
        justify-self: end;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline
    ) .memory-story-hero .memory-stat {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (min-width: 1025px) {
    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline
        .memory-story-hero {
        flex: 0 0 clamp(520px, 42vw, 880px);
        width: clamp(520px, 42vw, 880px);
        align-items: stretch;
    }

    #memory-generated .memory-hero-in-story.memory-layout-horizontal-timeline
        .memory-story-hero .memory-hero-content {
        box-sizing: border-box;
        height: 100%;
        padding: 0 0 clamp(48px, 6vh, 72px);
    }

    #memory-generated .memory-layout-horizontal-timeline
        .memory-story-hero .memory-hero-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        width: 100%;
        height: 100%;
    }

    #memory-generated .memory-layout-horizontal-timeline
        .memory-story-hero .memory-hero-copy {
        flex: 0 0 auto;
    }

    #memory-generated .memory-layout-horizontal-timeline
        .memory-story-hero .memory-hero-stats {
        display: flex;
        flex: 0 0 auto;
        align-self: flex-start;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(24px, 3vw, 44px);
        margin: auto 0 0;
    }

    #memory-generated .memory-layout-horizontal-timeline
        .memory-story-hero .memory-stat {
        justify-content: flex-start;
        padding: 0;
    }

    #memory-generated .memory-story-hero .memory-hero-content h1 {
        font-size: 96px;
    }
}

/* Unified memory statistics across all three story layouts. */
#memory-generated .memory-story-hero .memory-stat-icon .material-symbols-outlined {
    width: 32px;
    height: 32px;
    font-size: 32px;
    line-height: 32px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 32;
}

#memory-generated .memory-story-hero .memory-stat strong {
    font-size: 30px;
}

/* Keep horizontal day sharing below the map drawer. Mask only the timeline
   segment after the share control, stopping before the next green day dot. */
@media (min-width: 761px) {
    #memory-generated .memory-layout-horizontal-timeline
        .gen-day:not(.gen-day-pending) > .gen-day-share {
        z-index: 20;
    }

    #memory-generated .memory-layout-horizontal-timeline
        .gen-day:not(.gen-day-pending) > .gen-day-share::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: -1;
        width: calc(
            clamp(72px, 8vw, 124px)
            + clamp(8px, 1vw, 20px)
            + 6px
        );
        height: 11px;
        background: #ffffff;
        pointer-events: none;
        transform: translateY(-50%);
    }
}

#memory-generated .memory-hero-in-story.memory-layout-custom
    .memory-story-hero .memory-hero-content {
    padding-bottom: 200px;
}

/* Canonical colors for every standard button surface. Purpose-built photo,
   drag, close and gallery controls keep their dedicated high-contrast styles. */
.auth-local-login,
.summary-edit-btn,
.reaction-btn,
.share-btn,
.comment-actions button,
.memory-edit-section-btn,
.memory-layout-option,
.memory-horizontal-drawer-lock,
#memory-generated .gen-day-share-trigger,
#memory-generated .gen-day-share-option,
.story-photo-ai-menu-item,
.gen-insert-point-action,
.gen-story-action-btn,
.gen-ai-describe-btn,
.gen-story-ai-icon,
.gen-story-toolbar-icon,
.type-tool,
.pending-memory-actions button,
.mobile-menu-btn {
    background: var(--control-bg) !important;
    color: #000000 !important;
}

#page-feed .feed-sidebar .sidebar-link {
    background: transparent !important;
}

#page-feed .feed-sidebar .sidebar-link:is(:hover, :focus-visible) {
    background: var(--control-bg) !important;
    color: #000000;
    opacity: 1 !important;
    outline: none;
}

/* Menus use the same inactive button surface with a small, consistent gap. */
.story-status-menu,
.story-photo-ai-menu {
    display: grid;
    gap: 3px;
}

.story-status-menu[hidden],
.story-photo-ai-menu[hidden] {
    display: none;
}

/* Standard icon buttons stay visually quiet until interaction. Semantic
   primary actions and high-contrast photo/gallery controls keep their own
   dedicated surfaces. */
:root :is(
    button:has(svg),
    button:has(.material-symbols-outlined),
    button.reaction-btn,
    button.mobile-menu-btn,
    button[class*="icon"]
):not(:where(
    .btn-primary,
    .btn-new-memory,
    .btn-orange,
    .btn-white,
    .hf-btn-primary,
    .gen-photo-ai-trigger,
    .gen-photo-remove,
    .gen-photo-detach,
    .gen-photo-more-trigger,
    .gen-block-drag-handle,
    .story-gallery-photo-action-btn,
    .story-gallery-close,
    .story-gallery-nav,
    .memory-control-rail-back,
    .memory-hero-edit-btn,
    .memory-print-order-btn,
    .memory-horizontal-drawer-lock
)):not(.active):not(.is-active):not(.is-locked):not(.is-done):not([aria-pressed="true"]):not([aria-expanded="true"]):not([aria-checked="true"]),
#memory-generated :is(
    button:has(svg),
    button:has(.material-symbols-outlined),
    button.reaction-btn,
    button.mobile-menu-btn,
    button[class*="icon"]
):not(:where(
    .btn-primary,
    .btn-new-memory,
    .btn-orange,
    .btn-white,
    .hf-btn-primary,
    .gen-photo-ai-trigger,
    .gen-photo-remove,
    .gen-photo-detach,
    .gen-photo-more-trigger,
    .gen-block-drag-handle,
    .story-gallery-photo-action-btn,
    .story-gallery-close,
    .story-gallery-nav,
    .memory-control-rail-back,
    .memory-hero-edit-btn,
    .memory-print-order-btn,
    .memory-horizontal-drawer-lock
)):not(.active):not(.is-active):not(.is-locked):not(.is-done):not([aria-pressed="true"]):not([aria-expanded="true"]):not([aria-checked="true"]) {
    background: transparent !important;
}

/* The photo AI affordance must remain visible over both light and dark images. */
#memory-generated .gen-photo-ai-trigger,
#memory-generated .gen-photo-ai-trigger:not(:disabled):is(:hover, :focus-visible) {
    background: #ffffff !important;
    color: #000000 !important;
}

:root :is(
    button:has(svg),
    button:has(.material-symbols-outlined),
    button.reaction-btn,
    button.mobile-menu-btn,
    button[class*="icon"]
):not(:where(
    .btn-primary,
    .btn-new-memory,
    .btn-orange,
    .btn-white,
    .hf-btn-primary,
    .gen-photo-ai-trigger,
    .gen-photo-remove,
    .gen-photo-detach,
    .gen-photo-more-trigger,
    .gen-block-drag-handle,
    .story-gallery-photo-action-btn,
    .story-gallery-close,
    .story-gallery-nav
)):not(.active):not(.is-active):not(.is-locked):not(.is-done):not([aria-pressed="true"]):not([aria-expanded="true"]):not([aria-checked="true"]):not(:disabled):is(:hover, :focus-visible),
#memory-generated :is(
    button:has(svg),
    button:has(.material-symbols-outlined),
    button.reaction-btn,
    button.mobile-menu-btn,
    button[class*="icon"]
):not(:where(
    .btn-primary,
    .btn-new-memory,
    .btn-orange,
    .btn-white,
    .hf-btn-primary,
    .gen-photo-ai-trigger,
    .gen-photo-remove,
    .gen-photo-detach,
    .gen-photo-more-trigger,
    .gen-block-drag-handle,
    .story-gallery-photo-action-btn,
    .story-gallery-close,
    .story-gallery-nav
)):not(.active):not(.is-active):not(.is-locked):not(.is-done):not([aria-pressed="true"]):not([aria-expanded="true"]):not([aria-checked="true"]):not(:disabled):is(:hover, :focus-visible) {
    background: var(--control-bg) !important;
    opacity: 1 !important;
}

/* One selected/active color across navigation, filters, layouts and toggles. */
.nav .nav-links a.active,
.nav .language-switcher-btn.active,
#page-feed .feed-sidebar .sidebar-link.active,
.profile-tab.active,
.style-chip.active,
.filter-chip.active,
.mfc-chip.active,
.mfc-person-chip.active,
.memory-shell-rail-btn.is-active,
.memory-layout-option.is-active,
.memory-horizontal-drawer-lock.is-locked,
.memory-edit-section-btn[aria-expanded="true"],
.story-status-trigger[aria-expanded="true"],
.story-status-menu button[aria-checked="true"],
#memory-generated .gen-day-share.is-open > .gen-day-share-trigger,
#memory-generated .memory-control-rail-action[aria-expanded="true"],
.reaction-btn.active,
.share-btn.active,
.type-tool.active,
.type-tool[aria-pressed="true"],
#memory-generated .memory-hero-edit-btn.is-done {
    background: var(--button-active-bg) !important;
    color: #000000 !important;
}

/* “+ New memory” remains the dedicated green creation action. */
.btn-new-memory,
.profile-new-memory-btn.btn-new-memory {
    background: var(--button-new-memory-bg) !important;
    color: #ffffff !important;
}

/* Profile cards use a compact icon-only delete action. */
.profile-memory-card .pmc-delete-btn {
    width: var(--button-height) !important;
    min-width: var(--button-height) !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.profile-memory-card .pmc-delete-btn > .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

/* ===== UNIFIED FORM CONTROLS ===== */
/* Text entry surfaces share the quiet inset treatment established on Profile. */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
    textarea
) {
    border-color: transparent !important;
    background-color: var(--text-entry-bg) !important;
    box-shadow: var(--text-entry-shadow) !important;
    outline: none !important;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]),
    textarea
):focus {
    border-color: transparent !important;
    box-shadow: var(--text-entry-shadow-focus) !important;
}

/* Match the Details notes area to the lighter text-entry surface. */
.form-input.form-textarea {
    background-color: var(--text-entry-bg) !important;
}

.memories-search-wrap,
.capture-inbox-composer textarea,
.memories-search-wrap:focus-within,
.capture-inbox-composer textarea:focus {
    background-color: var(--text-entry-bg) !important;
    box-shadow: var(--text-entry-shadow) !important;
}

.memories-search-wrap:focus-within,
.capture-inbox-composer textarea:focus {
    box-shadow: var(--text-entry-shadow-focus) !important;
}

.memories-search-wrap input,
.memories-search-wrap input:focus {
    background: transparent !important;
    box-shadow: none !important;
}

/* Every native dropdown uses the same pill geometry and an inset CSS chevron. */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 44px !important;
    border-radius: 999px !important;
    background-color: var(--control-bg) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #000000 50%),
        linear-gradient(135deg, #000000 50%, transparent 50%) !important;
    background-position:
        calc(100% - 23px) 50%,
        calc(100% - 18px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

select:focus-visible {
    outline: 2px solid var(--button-active-bg);
    outline-offset: 2px;
}

/* Compact category picker keeps its arrow close to the edge without crowding it. */
.memory-category-select {
    padding-right: 28px !important;
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50% !important;
}

/* The status control in the memory rail is custom rather than a native select. */
#memory-generated .memory-control-rail .story-status-chevron {
    margin-right: 8px;
}

#memory-generated .memory-control-rail .story-status-trigger {
    border-radius: 999px !important;
}

#memory-generated .memory-control-rail .story-status-menu {
    border-radius: 22px;
}

/* Contributors edit story content, while owner-controlled metadata stays fixed. */
#memory-generated.is-editing.is-content-only-editor .memory-category-tag {
    display: inline-block;
}

#memory-generated.is-editing.is-content-only-editor .memory-category-select {
    display: none;
}

#memory-generated.is-editing.is-content-only-editor .memory-title-editable {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* Profile search and Collaboration email use one field surface and typography. */
:where(.memories-search-wrap, .memory-text-field) {
    box-sizing: border-box;
    min-height: 42px;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: var(--text-entry-bg) !important;
    box-shadow: var(--text-entry-shadow) !important;
}

.memory-text-field {
    width: 100%;
    min-height: 42px !important;
    padding: 10px 16px !important;
}

:where(.memories-search-wrap input, .memory-text-field),
.style-profile-field select {
    color: var(--text) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

:where(.memories-search-wrap input, .memory-text-field)::placeholder {
    color: var(--text-muted) !important;
    font: inherit;
    opacity: 1;
}

:where(.memories-search-wrap, .memory-text-field):focus-within,
.memory-text-field:focus {
    box-shadow: var(--text-entry-shadow-focus) !important;
}

.style-profile-field select {
    min-height: 42px;
    padding-left: 16px !important;
}

/* ===== COLLABORATION WORKFLOW ===== */
.memory-collaboration-dialog {
    width: min(760px, 100%);
}

.collab-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.collab-card-hint {
    margin: -4px 0 14px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.collab-invite-row input,
.collab-form textarea {
    border-radius: 999px;
}

.collab-form select {
    min-height: 44px;
}

.collab-direct-edit-card {
    display: grid;
    justify-items: start;
    gap: 12px;
}

.collab-direct-edit-card .collab-card-hint {
    max-width: 600px;
    margin: 0;
}

.collab-person {
    grid-template-columns: auto minmax(0, 1fr) auto 40px;
    gap: 12px;
    min-height: 58px;
    padding: 9px 8px 9px 10px;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
}

.collab-person-copy,
.collab-person-meta {
    min-width: 0;
}

.collab-person-copy strong,
.collab-person-copy small,
.collab-person-meta em,
.collab-person-meta small {
    display: block;
}

.collab-person-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collab-person-meta {
    text-align: right;
}

.collab-person-meta em {
    color: #000000;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

.collab-person-meta small {
    color: var(--text-secondary);
    font-size: 11px;
}

.collab-person-remove {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    color: #000000;
}

.collab-person-remove .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.collab-section-title {
    margin: 0 0 2px;
    color: #000000;
    font-size: 15px;
}

.collab-suggestion {
    border: 0;
    border-radius: 14px;
    background: #ffffff;
}

.collab-awaiting,
.collab-accepted {
    color: #000000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.collab-read-only {
    padding: 14px 0;
}

.story-status-readonly-label {
    cursor: default;
}

@media (max-width: 640px) {
    .collab-invite-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .collab-invite-row button,
    .collab-form button {
        width: 100% !important;
    }

    .collab-person {
        grid-template-columns: auto minmax(0, 1fr) 40px;
    }

    .collab-person-meta {
        grid-column: 2;
        text-align: left;
    }

    .collab-person-remove {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* ===== GLOBAL SITE NAVIGATION =====
   The wordmark is Home. Profile, Create memory and Feed are the only primary
   destinations; language and account controls are utilities. */
.site-nav .logo {
    justify-self: start;
}

.site-nav .mobile-menu-btn {
    justify-self: end;
}

.site-nav .nav-create-label-mobile {
    display: none;
}

.app-icon-symbols {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.memory-hero-edit-icon-mobile-done {
    display: none !important;
}

@media (min-width: 769px) {
    .is-guest .site-nav .nav-inner {
        position: relative;
    }

    .is-guest .site-nav .nav-actions {
        width: 100%;
        justify-self: stretch;
        padding-right: 128px;
    }

    .is-guest .site-nav .nav-actions .auth-login-btn {
        position: absolute;
        top: 0;
        right: 20px;
        bottom: 0;
        z-index: 2;
        margin: auto 0;
        transform: none !important;
    }

    .is-guest .site-nav .nav-actions .auth-login-btn:hover,
    .is-guest .site-nav .nav-actions .auth-login-btn:focus-visible {
        transform: none !important;
    }
}

@media (min-width: 769px) {
    #page-feed .feed-notifications-badge {
        top: -4px;
        right: -4px;
        min-width: 24px;
        height: 24px;
        padding: 0 6px;
        font-size: 11px;
    }

    #page-feed .feed-notifications-badge.is-single-digit {
        width: 24px;
        min-width: 24px;
        padding: 0;
        border-radius: 50%;
    }
}

.is-guest .site-nav .nav-links a[onclick*="profile"],
.is-guest .site-nav .nav-links a[onclick*="create"] {
    display: inline-flex !important;
}

.is-guest #page-feed .site-nav .nav-links {
    display: grid !important;
}

@media (max-width: 768px) {
    .site-nav .nav-inner {
        position: relative;
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-rows: 48px 42px;
        column-gap: 10px;
        row-gap: 6px;
        width: 100%;
        height: 112px;
        padding: 8px 16px;
    }

    .site-nav .logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .site-nav .logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-nav .mobile-menu-btn {
        box-sizing: border-box;
        display: grid !important;
        grid-column: 2;
        grid-row: 1;
        place-items: center;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    #page-landing .feature-block.feature-ai,
    #page-landing .feature-block.feature-social {
        padding: 32px 22px;
    }

    #memory-generated .memory-hero-edit-btn.is-done .memory-hero-edit-icon-default {
        display: none !important;
    }

    #memory-generated .memory-hero-edit-btn.is-done .memory-hero-edit-icon-mobile-done {
        display: grid !important;
    }

    .site-nav .mobile-menu-btn .material-symbols-outlined {
        font-size: 22px;
        line-height: 1;
        letter-spacing: 0;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22;
    }

    .site-nav.mobile-menu-open .mobile-menu-btn {
        background: var(--button-active-bg) !important;
    }

    .site-nav .nav-links,
    .is-guest .site-nav .nav-links,
    .is-guest #page-feed .site-nav .nav-links {
        display: grid !important;
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .site-nav .nav-links a,
    .is-guest .site-nav .nav-links a[onclick*="profile"],
    .is-guest .site-nav .nav-links a[onclick*="create"] {
        display: inline-flex !important;
        width: 100%;
        min-width: 0;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 8px !important;
        overflow: hidden;
        font-size: 12px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-nav .nav-links .nav-create-link {
        font-size: 12px !important;
    }

    .site-nav .nav-create-link .nav-create-label-default {
        display: none;
    }

    .site-nav .nav-create-link .nav-create-label-mobile {
        display: inline;
    }

    .site-nav .nav-actions {
        position: absolute;
        top: calc(100% - 2px);
        right: 16px;
        z-index: 120;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: min(260px, calc(100vw - 32px));
        padding: 12px;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
    }

    .site-nav .nav-actions.mobile-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    .site-nav .nav-actions .language-switcher {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    .site-nav .nav-actions .language-switcher-btn,
    .site-nav .nav-actions .auth-login-btn {
        width: 100% !important;
    }

    .site-nav .nav-actions > .nav-icon-btn {
        display: none !important;
    }

    .site-nav .nav-actions .user-avatar {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .is-guest .site-nav .nav-actions .user-avatar {
        display: none;
    }

    .create-page {
        padding: 144px 16px 64px;
    }

    .feed-page,
    .profile-page {
        padding: 136px 16px 64px;
    }

    .is-guest #page-feed .feed-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Memory actions become a thumb-friendly bottom dock on phones. */
@media (max-width: 768px) {
    #memory-generated {
        --memory-mobile-control-height: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    #memory-generated .memory-control-rail,
    #memory-generated .memory-control-rail:hover,
    #memory-generated .memory-control-rail:focus-within,
    #memory-generated .memory-control-rail.is-forced-collapsed,
    #memory-generated .memory-control-rail.is-forced-collapsed:hover,
    #memory-generated .memory-control-rail.is-forced-collapsed:focus-within {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        min-width: 0;
        height: var(--memory-mobile-control-height);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.09);
        overflow: visible;
        transition: none;
    }

    #memory-generated .memory-control-rail-inner {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-width: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-around;
        gap: 4px;
        padding:
            8px
            max(8px, env(safe-area-inset-right, 0px))
            calc(8px + env(safe-area-inset-bottom, 0px))
            max(8px, env(safe-area-inset-left, 0px));
        overflow: visible;
        scrollbar-width: none;
    }

    #memory-generated .memory-control-brand {
        display: none;
    }

    #memory-generated .memory-control-rail-inner::-webkit-scrollbar {
        display: none;
    }

    #memory-generated .memory-control-rail-action,
    #memory-generated .memory-control-rail .story-status-trigger {
        flex: 1 1 44px;
        width: 44px !important;
        max-width: 54px;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        justify-content: center;
        gap: 0;
        padding: 0 !important;
    }

    #memory-generated .memory-control-rail-action > .material-symbols-outlined {
        width: 24px;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    }

    #memory-generated .memory-control-rail .memory-control-label,
    #memory-generated .memory-control-rail:hover .memory-control-label,
    #memory-generated .memory-control-rail:focus-within .memory-control-label,
    #memory-generated .memory-control-rail.is-forced-collapsed .memory-control-label {
        display: none;
        max-width: 0;
        opacity: 0;
        transform: none;
    }

    #memory-generated .memory-control-rail .story-status-control {
        flex: 1 1 44px;
        width: 44px;
        max-width: 54px;
        min-width: 44px;
    }

    #memory-generated .memory-control-rail .story-status-trigger-copy {
        flex: 0 0 auto;
        justify-content: center;
        gap: 0;
    }

    #memory-generated .memory-control-rail .story-status-dot {
        flex-basis: 11px;
        width: 11px;
        height: 11px;
        margin: 0;
    }

    #memory-generated .memory-control-rail .story-status-chevron,
    #memory-generated .memory-control-rail:hover .story-status-chevron,
    #memory-generated .memory-control-rail:focus-within .story-status-chevron {
        display: none;
    }

    #memory-generated .memory-control-rail .story-status-menu {
        top: auto;
        bottom: calc(100% + 8px);
        left: 0;
        width: min(244px, calc(100vw - 24px));
        min-width: 184px;
    }

    #memory-generated .memory-control-rail .memory-hero-edit-btn {
        margin-top: 0;
    }

    #memory-generated .memory-body,
    #memory-generated .memory-layout-horizontal-timeline .memory-body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-drawer {
        display: none;
    }

    #memory-generated .memory-shell.memory-hero-in-story.no-map .memory-shell-viewport {
        padding-left: 0;
    }
}

/* Phone memory statistics use one stable vertical column in every layout. */
@media (max-width: 768px) {
    #memory-generated .memory-body,
    #memory-generated .memory-layout-central-timeline .memory-body,
    #memory-generated .memory-layout-horizontal-timeline .memory-body {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #memory-generated .memory-story-hero .memory-hero-main {
        gap: 48px;
    }

    #memory-generated .memory-hero-in-story .memory-story-hero .memory-hero-content {
        padding-bottom: 32px;
    }

    #memory-generated .memory-story-hero .memory-hero-stats {
        display: flex !important;
        width: 100% !important;
        margin-right: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        justify-self: start;
        border-top: 1px solid #000000;
    }

    #memory-generated .memory-story-hero .memory-stat {
        box-sizing: border-box;
        width: 100%;
        padding: 15px 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid #000000;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline
    ) .memory-story-hero .memory-hero-stats {
        width: 100% !important;
        align-self: stretch;
        gap: 0;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline
    ) .memory-story-hero .memory-stat {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        width: 100%;
        padding: 15px 0;
        align-items: center;
        justify-content: stretch;
    }
}

/* One canonical mobile story flow. Desktop coordinates remain stored, but
   phone rendering uses a predictable full-width vertical rhythm. */
@media (max-width: 768px) {
    #memory-generated,
    #memory-generated .memory-shell,
    #memory-generated .memory-shell-viewport,
    #memory-generated .memory-content,
    #memory-generated .memory-body {
        max-width: 100%;
        overflow-x: clip;
    }

    #memory-generated .gen-day-main,
    #memory-generated.is-editing .gen-day-main,
    #memory-generated .gen-day-layout.has-side-blocks .gen-day-main,
    #memory-generated.is-editing .gen-day-layout.has-side-blocks .gen-day-main {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 0 !important;
        padding-bottom: 0;
    }

    /* Horizontal memories retain a wide desktop canvas in their saved data.
       Edit must not let that canvas width win over the phone flow. */
    #memory-generated .memory-layout-horizontal-timeline .gen-day-layout,
    #memory-generated .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks,
    #memory-generated .memory-layout-horizontal-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main,
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-layout.has-side-blocks .gen-day-main {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #memory-generated .gen-day-main > [data-block-id][data-positioning-mode="absolute"],
    #memory-generated.is-editing .gen-day-main > [data-block-id][data-positioning-mode="absolute"],
    #memory-generated:not(.is-editing) .gen-day-main > [data-block-id][data-positioning-mode="absolute"][data-layout-sized="true"] {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 0 24px !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }

    #memory-generated .gen-photo-timeline-item,
    #memory-generated .gen-entry-with-story,
    #memory-generated .gen-entry,
    #memory-generated .gen-photo-view-stack {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-width: 0;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }

    #memory-generated .gen-photo-group,
    #memory-generated .gen-photo-group.single,
    #memory-generated .gen-entry .single-photo,
    #memory-generated .gen-entry.from-expanded-group .single-photo,
    #memory-generated .gen-entry.from-captioned-group .single-photo,
    #memory-generated .gen-entry-with-story .single-photo {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-width: 0;
        min-height: 0 !important;
        margin-bottom: 0;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden;
    }

    #memory-generated .gen-photo-group,
    #memory-generated .gen-photo-group.single {
        display: grid;
        grid-template-columns: repeat(var(--group-grid-w, 1), minmax(0, 1fr));
        grid-template-rows: repeat(var(--group-grid-h, 1), minmax(0, 1fr));
    }

    #memory-generated .gen-photo-group-side {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(var(--group-side-rows, 1), minmax(0, 1fr));
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    #memory-generated :is(.gen-photo-group, .single-photo) .gen-photo,
    #memory-generated :is(.gen-photo-group, .single-photo) img,
    #memory-generated .gen-photo-group.single .gen-photo img,
    #memory-generated .gen-entry .single-photo img,
    #memory-generated .gen-entry-with-story .single-photo img {
        width: 100% !important;
        max-width: none;
        height: 100% !important;
        max-height: none;
        min-height: 0;
        object-fit: cover !important;
        object-position: center;
    }

    /* Edit is only a control state on phones; it must not select the desktop
       grid dimensions or trigger Safari text inflation. */
    #memory-generated .memory-layout-custom .gen-day-main,
    #memory-generated.is-editing .memory-layout-custom .gen-day-main,
    #memory-generated .memory-layout-custom .gen-day-main > :is(
        .gen-photo-timeline-item,
        .gen-entry-with-story,
        .gen-day-story-block
    ),
    #memory-generated.is-editing .memory-layout-custom .gen-day-main > :is(
        .gen-photo-timeline-item,
        .gen-entry-with-story,
        .gen-day-story-block
    ) {
        width: 100% !important;
        max-width: 100% !important;
    }

    #memory-generated .memory-layout-custom :is(
        .gen-photo-timeline-item,
        .gen-entry-with-story,
        .gen-photo-view-stack,
        .gen-photo-group,
        .single-photo
    ),
    #memory-generated.is-editing .memory-layout-custom :is(
        .gen-photo-timeline-item,
        .gen-entry-with-story,
        .gen-photo-view-stack,
        .gen-photo-group,
        .single-photo
    ) {
        height: auto !important;
        min-height: 0 !important;
    }

    #memory-generated .gen-story-block .gen-day-text,
    #memory-generated.is-editing .gen-story-block .gen-day-text {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

.story-gallery-mobile-list {
    display: none;
}

/* Phone gallery: full-screen, uncropped images in one vertical stream. */
@media (max-width: 768px) {
    .story-gallery {
        z-index: 3200;
        background: #000000;
    }

    .story-gallery-backdrop {
        background: #000000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .story-gallery-dialog {
        display: block;
        padding: 0;
        overflow: hidden;
        background: #000000;
        color: #ffffff;
    }

    .story-gallery-frame,
    .story-gallery-nav,
    .story-gallery-count,
    .story-gallery-desktop-action-btn {
        display: none !important;
    }

    .story-gallery-mobile-list {
        position: absolute;
        inset: 0;
        display: block;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-snap-type: y proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .story-gallery-mobile-list::-webkit-scrollbar {
        display: none;
    }

    .story-gallery-mobile-item {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        padding: calc(62px + env(safe-area-inset-top, 0px)) 0 calc(18px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
        background: #000000;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .story-gallery-mobile-img {
        display: block;
        flex: 0 1 auto;
        width: auto;
        max-width: 100vw;
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - 160px);
        object-fit: contain;
    }

    .story-gallery-mobile-caption {
        position: absolute;
        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        left: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 12px;
        line-height: 1.3;
        text-align: center;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
        pointer-events: none;
    }

    .story-gallery-mobile-caption span:first-child {
        flex: 0 0 auto;
        font-weight: 700;
    }

    .story-gallery-mobile-actions {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 6px;
    }

    .story-gallery-mobile-detach-btn,
    .story-gallery-mobile-delete-btn {
        position: static;
        z-index: 4;
        margin: 0;
    }

    .story-gallery-mobile-item.has-detach-action .story-gallery-mobile-caption {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .story-gallery-mobile-item.is-gallery-action-selected .story-gallery-mobile-img {
        opacity: 0.78;
    }

    .story-gallery-close {
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        z-index: 4;
        width: 44px;
        height: 44px;
        border: 0;
        background: rgba(0, 0, 0, 0.44) !important;
        color: #ffffff !important;
        box-shadow: none;
    }

    .story-gallery-close.is-confirming {
        background: #00b252 !important;
    }
}

/* The Profile capture disclosure stays visually quiet in both states. */
#page-profile .capture-inbox-toggle,
#page-profile .capture-inbox-toggle:not(:disabled):hover,
#page-profile .capture-inbox-toggle:focus-visible,
#page-profile .capture-inbox-toggle[aria-expanded="true"],
#page-profile .capture-inbox-toggle[aria-expanded="false"] {
    background: transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* The primary creation action is deliberately larger than the standard
   controls on both desktop and phone. */
#page-profile .profile-new-memory-btn.btn-new-memory {
    min-height: 63px !important;
    height: 63px !important;
    padding-right: 28px !important;
    padding-left: 28px !important;
    gap: 10px;
    font-size: 21px !important;
}

#page-profile .profile-new-memory-btn.btn-new-memory svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 769px) {
    #page-profile .capture-inbox-toggle-meta {
        align-self: flex-start;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-right: 6px;
    }

    #page-profile .capture-inbox-toggle-icon {
        margin-top: 0;
    }
}

/* August mobile/UI pass: keep the compact navigation and profile filters
   inside the phone viewport, and align feed copy with its photo strip. */
@media (max-width: 768px) {
    .site-nav .mobile-menu-btn {
        align-self: center;
        justify-self: end;
        margin: 0;
    }

    /* The old hamburger rule also targeted this span, which produced the
       stray horizontal line above the Material Symbol. */
    .site-nav .mobile-menu-btn .material-symbols-outlined {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 0;
        background: transparent;
        font-size: 25px;
        line-height: 28px;
        font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    }

    .site-nav .nav-links a,
    .is-guest .site-nav .nav-links a[onclick*="profile"],
    .is-guest .site-nav .nav-links a[onclick*="create"] {
        font-size: 13px !important;
    }

    .site-nav .nav-links a[onclick*="create"]::after {
        font-size: 13px;
    }

    .site-nav .nav-links a[onclick*="create"] {
        justify-content: center !important;
        gap: 0 !important;
        text-align: center;
    }

    #page-profile {
        max-width: 100%;
        overflow-x: hidden;
    }

    #page-profile .profile-page,
    #page-profile .memories-filter-bar,
    #page-profile .memories-filter-section {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    #page-profile .profile-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin-bottom: 24px;
        padding-bottom: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        border-bottom: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #page-profile .profile-tabs::-webkit-scrollbar,
    #page-profile .memories-filter-chips::-webkit-scrollbar {
        display: none;
    }

    #page-profile .profile-tab {
        flex: 0 0 auto;
        margin-bottom: 0;
        white-space: nowrap;
    }

    #page-profile .memories-filter-section {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding-left: 0;
        overflow: hidden;
    }

    #page-profile .memories-search-row {
        display: contents;
    }

    #page-profile .memories-search-wrap {
        order: 1;
        width: 100%;
    }

    #page-profile .memories-filter-section-group {
        order: 2;
    }

    #page-profile .memories-filter-section-people {
        order: 3;
    }

    #page-profile .profile-new-memory-btn {
        position: static;
        order: 4;
        width: 100%;
        justify-content: center;
    }

    #page-profile .memories-filter-label {
        flex: 0 0 56px;
        min-width: 56px;
    }

    #page-profile .memories-filter-chips {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        padding: 0 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #page-profile :is(.mfc-chip, .mfc-person-chip) {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #page-feed .feed-card-header,
    #page-feed .feed-cover-content,
    #page-feed .feed-card-meta-row,
    #page-feed .feed-companions,
    #page-feed .feed-card-actions {
        padding-right: 0;
        padding-left: 0;
    }

    /* Mobile layout rules use grid/flex display declarations with greater
       specificity than the base hide state. Keep the user choice decisive. */
    #memory-generated .memory-story-hero .memory-stat.is-hidden-stat {
        display: none !important;
    }
}

/* The vertical custom layout ends each day on the timeline itself. The white
   mask removes only the segment leading from Share to the next green dot. */
@media (min-width: 769px) {
    #memory-generated .memory-layout-custom
        .gen-day:not(.gen-day-pending) > .gen-day-share {
        top: auto;
        right: auto;
        bottom: -70px;
        left: -11.5px;
        display: block;
        transform: none;
        isolation: isolate;
    }

    #memory-generated .memory-layout-custom
        .gen-day:not(.gen-day-pending):not(:last-child) > .gen-day-share::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 0;
        width: 9px;
        height: 54px;
        background: #ffffff;
        pointer-events: none;
        transform: translateX(-50%);
    }
}

#memory-generated .gen-day-share-trigger {
    position: relative;
    z-index: 1;
    background: #f0f1f1 !important;
}

/* All phone layouts share one tighter vertical axis and the same end-of-day
   share placement, regardless of the desktop preset kept in storage. */
@media (max-width: 768px) {
    /* A one-pixel SVG dash is stable in Safari and keeps the requested
       1px-dot / 2px-gap rhythm without gradient rounding artefacts. */
    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-timeline::before {
        left: 4px;
        width: 1px;
        border: 0;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='3' viewBox='0 0 1 3'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
        background-repeat: repeat-y;
        background-size: 1px 3px;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day {
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 112px;
        padding-left: 26px;
    }

    /* Mobile Safari does not reliably paint an absolutely positioned child
       that passes through the display:contents day header. Draw the marker on
       the day itself, whose x-origin also owns the timeline axis. */
    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day:not(.gen-day-pending)::before {
        content: '';
        position: absolute;
        top: 3px;
        left: -1px;
        z-index: 3;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #00b252;
        pointer-events: none;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day:last-child {
        margin-bottom: 112px;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day-header {
        /* Keep the marker anchored to .gen-day itself. Safari can otherwise
           choose the contents/sticky wrapper as the absolute-positioning
           reference and move the dot away from the timeline. */
        position: static;
        justify-content: flex-start;
        text-align: left;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day-header-copy {
        align-items: flex-start;
        text-align: left;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day-header .chapter-dot {
        display: none;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day:not(.gen-day-pending) > .gen-day-share {
        top: auto;
        right: auto;
        bottom: -56px;
        left: -11.5px;
        display: block;
        transform: none;
        isolation: isolate;
    }

    #memory-generated :is(
        .memory-layout-custom,
        .memory-layout-central-timeline,
        .memory-layout-horizontal-timeline
    ) .gen-day:not(.gen-day-pending):not(:last-child) > .gen-day-share::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 0;
        width: 9px;
        height: 50px;
        background: #ffffff;
        pointer-events: none;
        transform: translateX(-50%);
    }
}

/* ===== FEED + PROFILE DESKTOP REFINEMENT ===== */
#page-feed .feed-card {
    border-top: 0;
    box-shadow: none !important;
}

#page-feed .feed-card:hover {
    box-shadow: 0 8px 20px rgba(44, 46, 42, 0.12) !important;
}

#page-feed .feed-card-cover {
    min-height: 198px;
}

#page-feed .suggested-person-avatar {
    background: #00b252;
}

#page-feed .suggested-person :is(strong, span) {
    line-height: 1;
}

#page-feed :is(
    .feed-card-header,
    .feed-cover-content,
    .feed-card-meta-row,
    .feed-companions,
    .feed-card-actions,
    .feed-comments-panel
) {
    padding-right: 16px;
    padding-left: 16px;
}

#page-feed .feed-card-photos {
    box-sizing: border-box;
    padding-right: 16px;
    padding-left: 16px;
}

#page-feed :is(.reaction-btn, .share-btn) {
    border-radius: 999px !important;
}

#page-feed .feed-filters .filter-chip {
    min-height: 34px !important;
    height: 34px !important;
    padding-right: 13px !important;
    padding-left: 13px !important;
    font-size: 11px !important;
}

#page-feed .feed-tag,
#page-feed .feed-card-cover.is-dark .feed-tag,
#page-feed .feed-card-cover.is-light .feed-tag {
    padding: 4px 10px 3px;
    font-size: 11px;
}

#page-feed .btn-follow {
    min-height: 34px !important;
    height: 34px !important;
    padding-right: 13px !important;
    padding-left: 13px !important;
    font-size: 11px !important;
}

#page-feed .feed-comment-avatar-letter {
    display: block;
    line-height: 1;
    transform: translateY(1px);
}

/* Composite search controls own the field surface. Their nested input must
   stay transparent so the UI never paints a second field inside the first. */
:where(.feed-search-field, .companion-tags) {
    min-height: 42px;
    border-color: transparent !important;
    background: var(--text-entry-bg) !important;
    box-shadow: var(--text-entry-shadow) !important;
}

:where(.feed-search-field, .companion-tags):focus-within {
    box-shadow: var(--text-entry-shadow-focus) !important;
}

.feed-search-field input,
.companion-tags .companion-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (min-width: 769px) {
    #page-profile .profile-library-panel > :is(
        .profile-tabs,
        .memories-search-row,
        .memories-filter-section
    ) {
        box-sizing: border-box;
        width: calc(66.6667% - 6.6667px);
        max-width: calc(66.6667% - 6.6667px);
    }

    #page-profile .profile-library-panel .memories-filter-chips {
        flex: 1 1 auto;
        flex-wrap: wrap;
        min-width: 0;
    }

    /* With no Group/People rows, keep the create action on the same line as
       search instead of letting the empty-state column pull it inward. */
    #page-profile .profile-library-panel.no-memories .memories-search-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        max-width: none;
    }

    #page-profile .profile-library-panel.no-memories .memories-search-wrap {
        flex: 0 1 calc(66.6667% - 6.6667px);
        width: calc(66.6667% - 6.6667px);
        max-width: calc(66.6667% - 6.6667px);
    }

    #page-profile .profile-library-panel.no-memories .profile-new-memory-btn {
        position: static;
        align-self: center;
        margin-left: auto;
    }
}

/* Feed/profile finishing pass */
#page-feed .suggested-person > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#page-feed .suggested-person > div:nth-child(2) > :is(strong, span) {
    margin: 0;
    line-height: 1;
}

#page-profile .capture-inbox-toggle-icon {
    border: 0 !important;
    background: #f0f1f1 !important;
}

#page-profile .capture-inbox-toggle[aria-expanded="true"] .capture-inbox-toggle-icon {
    background: #dad6ff !important;
}

@media (min-width: 769px) {
    #page-feed .feed-tag,
    #page-feed .feed-card-cover.is-dark .feed-tag,
    #page-feed .feed-card-cover.is-light .feed-tag {
        padding: 5px 10px 4px;
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    #page-feed .feed-card-cover {
        display: flex;
        min-height: 0;
    }

    #page-feed .feed-cover-content {
        position: relative;
        inset: auto;
        box-sizing: border-box;
        width: 100%;
        min-height: 198px;
    }
}

/* ===== LANDING MOTION + RESPONSIVE POLISH ===== */
.feed-card-photos-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    #page-landing :is(
        .features-section,
        .how-section,
        .showcase-section,
        .cta-section,
        .footer
    ) {
        padding-right: 20px;
        padding-left: 20px;
    }

    #page-landing .section-header {
        width: 100%;
        max-width: none;
    }

    #page-feed .feed-card-photos-desktop {
        display: none !important;
    }

    #page-feed .feed-card-photos-mobile {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Static demo cards use the original strip markup. */
    #page-feed .feed-card-photos:not(.feed-card-photos-desktop):not(.feed-card-photos-mobile) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #page-feed .feed-card-photos:not(.feed-card-photos-desktop):not(.feed-card-photos-mobile) > .feed-photo:nth-child(n + 4) {
        display: none;
    }
}

/* Navigation utilities match the compact category-label typography while
   language choices remain exact circles at every breakpoint. */
.site-nav .nav-actions .auth-login-btn,
.site-nav .nav-actions .language-switcher .language-switcher-btn {
    font-size: 11px !important;
}

.site-nav .nav-actions .language-switcher .language-switcher-btn {
    justify-self: center;
    width: var(--button-height) !important;
    min-width: var(--button-height) !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

@media (min-width: 769px) {
    /* Feed utilities form one evenly spaced row of equal circles. */
    #page-feed .site-nav .nav-actions,
    #page-feed .site-nav .nav-actions .language-switcher {
        gap: 8px;
    }

    #page-feed .site-nav .nav-actions > .nav-icon-btn,
    #page-feed .site-nav .nav-actions .user-avatar,
    #page-feed .site-nav .nav-actions .user-avatar .avatar-sm {
        width: var(--button-height) !important;
        min-width: var(--button-height) !important;
        height: var(--button-height) !important;
        min-height: var(--button-height) !important;
        border-radius: 50% !important;
    }

    #page-feed .site-nav .nav-actions .user-avatar {
        display: grid;
        place-items: center;
        flex: 0 0 var(--button-height);
    }

    #page-feed .site-nav .nav-actions > .nav-icon-btn {
        background: transparent !important;
        opacity: 1 !important;
    }

    #page-feed .site-nav .nav-actions > .nav-icon-btn:not(:disabled):is(:hover, :focus-visible) {
        background: var(--control-bg) !important;
        opacity: 1 !important;
    }
}

/* Custom memories use one identical photo frame in mobile view and Edit.
   Keeping the ratio CSS-owned avoids Mobile Safari falling back to a
   portrait image's intrinsic height while the Edit controls are opening. */
@media (max-width: 768px) {
    #memory-generated .memory-layout-custom .gen-photo-group,
    #memory-generated.is-editing .memory-layout-custom .gen-photo-group,
    #memory-generated .memory-layout-custom .gen-photo-group.single,
    #memory-generated.is-editing .memory-layout-custom .gen-photo-group.single,
    #memory-generated .memory-layout-custom .gen-entry .single-photo,
    #memory-generated.is-editing .memory-layout-custom .gen-entry .single-photo,
    #memory-generated .memory-layout-custom .gen-entry-with-story .single-photo,
    #memory-generated.is-editing .memory-layout-custom .gen-entry-with-story .single-photo {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 3 !important;
        overflow: hidden !important;
    }

    #memory-generated .memory-layout-custom .gen-photo-group,
    #memory-generated.is-editing .memory-layout-custom .gen-photo-group {
        display: grid !important;
        grid-template-columns: repeat(var(--group-grid-w, 1), minmax(0, 1fr)) !important;
        grid-template-rows: repeat(var(--group-grid-h, 1), minmax(0, 1fr)) !important;
    }

    #memory-generated .memory-layout-custom .gen-photo-group .gen-photo,
    #memory-generated.is-editing .memory-layout-custom .gen-photo-group .gen-photo,
    #memory-generated .memory-layout-custom .gen-photo-group .gen-photo-group-side,
    #memory-generated.is-editing .memory-layout-custom .gen-photo-group .gen-photo-group-side,
    #memory-generated .memory-layout-custom .gen-photo-group .gen-photo img,
    #memory-generated.is-editing .memory-layout-custom .gen-photo-group .gen-photo img,
    #memory-generated .memory-layout-custom .gen-entry .single-photo img,
    #memory-generated.is-editing .memory-layout-custom .gen-entry .single-photo img,
    #memory-generated .memory-layout-custom .gen-entry-with-story .single-photo img,
    #memory-generated.is-editing .memory-layout-custom .gen-entry-with-story .single-photo img {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }
}

/* ===== MEMORY CARD + MOBILE CONTROL POLISH ===== */
.feed-cover-stat[data-feed-stat="person"] .feed-cover-stat-icon {
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

#page-feed .feed-cover-stat-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    transform: translateY(1px);
}

#page-feed :is(.feed-save-btn, .share-btn) > .material-symbols-outlined {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

#page-feed .feed-save-btn.is-saved > .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

#page-feed .trending-rank {
    box-sizing: border-box;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
}

#page-feed .trending-rank-number {
    transform: translateY(1px);
}

#page-feed .feed-photo-more {
    font-size: 20px;
    line-height: 1;
}

.mobile-account-btn {
    display: none;
}

#memory-generated .memory-mobile-add-photo-btn {
    display: none !important;
}

.mobile-photo-placement-dialog {
    width: min(520px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}

.mobile-photo-placement-list {
    display: grid;
    gap: 10px;
}

.mobile-photo-placement-item {
    display: grid;
    gap: 5px;
    padding: 15px 16px;
    border: 1px solid #d7d7d7;
    border-radius: 12px;
    background: #f7f7f7;
}

.mobile-photo-placement-item > strong {
    font-size: 14px;
    line-height: 1.3;
}

.mobile-photo-placement-item > span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.3;
}

.mobile-photo-placement-files {
    display: grid;
    gap: 3px;
    margin-top: 3px;
}

.mobile-photo-placement-files span {
    overflow: hidden;
    color: var(--charcoal);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-photo-placement-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width: 768px) {
    /* The header utilities are now language + direct Account access. */
    .site-nav .nav-inner {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
    }

    .site-nav .mobile-menu-btn {
        grid-column: 2;
    }

    .site-nav .mobile-account-btn,
    .is-guest .site-nav .mobile-account-btn {
        box-sizing: border-box;
        display: grid !important;
        grid-column: 3;
        grid-row: 1;
        place-items: center;
        justify-self: end;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50% !important;
        background: transparent;
        cursor: pointer;
    }

    .site-nav .mobile-account-btn .avatar-sm {
        display: grid;
        place-items: center;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
    }

    .site-nav .nav-actions {
        right: 66px;
        align-items: center;
        width: 72px;
        padding: 12px;
    }

    .site-nav .nav-actions > :not(.language-switcher) {
        display: none !important;
    }

    .site-nav .nav-actions .language-switcher {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        gap: 8px;
    }

    /* All five bottom actions keep the same true circular frame. */
    #memory-generated .memory-control-rail-action,
    #memory-generated .memory-control-rail .story-status-trigger,
    #memory-generated .memory-control-rail .story-status-control {
        box-sizing: border-box;
        flex: 0 0 44px;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        border-radius: 50% !important;
    }

    /* These settings already have dedicated actions in the bottom dock. */
    #memory-generated .memory-inline-edit-panel .memory-edit-section-btn {
        display: none !important;
    }

    /* Mobile Edit changes content only; desktop geometry controls stay off. */
    #memory-generated .memory-inline-edit-panel,
    #memory-generated.is-editing .gen-block-move-controls,
    #memory-generated.is-editing .gen-block-resize-handle,
    #memory-generated.is-editing .gen-grid-insert-overlay,
    #memory-generated.is-editing .gen-insert-point {
        display: none !important;
    }

    /* The desktop offset reserves one grid cell for the move handle. Since
       mobile editing hides that handle, let the text palette start at the
       actual left edge of the text block. */
    #memory-generated.is-editing
    .gen-day-main > .gen-day-story-block[data-positioning-mode="absolute"]
    > .gen-story-toolbar {
        left: 0 !important;
    }

    #memory-generated.is-editing .memory-control-rail-inner {
        display: grid;
        grid-template-columns: repeat(3, 44px);
        justify-content: space-between;
        gap: 0;
    }

    #memory-generated.is-editing .memory-control-rail-inner > .memory-control-rail-action:not(.memory-hero-edit-btn):not(.memory-mobile-add-photo-btn),
    #memory-generated.is-editing .memory-control-rail-inner > .story-status-control {
        display: none !important;
    }

    #memory-generated.is-editing .memory-control-rail-inner > .memory-mobile-add-photo-btn {
        display: flex !important;
        grid-column: 2;
        justify-self: center;
        background: #f0f1f1 !important;
        color: #000000 !important;
    }

    #memory-generated.is-editing .memory-control-rail-inner > .memory-hero-edit-btn {
        grid-column: 3;
        justify-self: end;
    }

    /* 116 px is the midpoint between the former 32 px and 200 px gaps. */
    #memory-generated .memory-hero-in-story .memory-story-hero .memory-hero-content {
        padding-bottom: 116px !important;
    }

    #page-feed .feed-photo-more {
        font-size: 22px;
    }

    /* AI settings follows the same scrollable mobile-dialog pattern. */
    #styleProfileModal {
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #styleProfileModal .style-profile-dialog {
        box-sizing: border-box;
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #styleProfileModal .style-profile-toggle-group {
        gap: 10px;
    }

    #styleProfileModal .style-profile-toggle {
        align-items: flex-start;
        line-height: 1.25;
    }

    #styleProfileModal .style-profile-toggle input {
        margin-top: 0 !important;
    }

    #mobilePhotoPlacementModal {
        align-items: center;
        padding: 12px;
    }

    #mobilePhotoPlacementModal .mobile-photo-placement-dialog {
        box-sizing: border-box;
        width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 26px 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-photo-placement-actions {
        flex-direction: column-reverse;
    }

    .mobile-photo-placement-actions > button {
        width: 100% !important;
    }
}

/* Primary memory navigation actions keep their meaning in both the desktop
   rail and the mobile dock. */
#memory-generated .memory-control-rail .memory-hero-edit-btn,
#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn,
#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done,
#memory-generated .memory-control-rail .memory-hero-edit-btn:hover,
#memory-generated .memory-control-rail .memory-hero-edit-btn:focus-visible {
    -webkit-appearance: none;
    appearance: none;
    background: #00b252 !important;
    background-image: none !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

#memory-generated .memory-control-rail .memory-hero-edit-btn > .material-symbols-outlined,
#memory-generated .memory-control-rail .memory-hero-edit-btn .memory-control-label {
    color: #ffffff !important;
}

/* Once Edit is active, confirm the editing state in green. */
#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done,
#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done:hover,
#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done:focus-visible {
    background: #00b252 !important;
    background-image: none !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done > .material-symbols-outlined,
#memory-generated.is-editing .memory-control-rail .memory-hero-edit-btn.is-done .memory-control-label {
    color: #ffffff !important;
}

/* Use the same confirmation glyph on desktop and mobile. */
#memory-generated .memory-hero-edit-btn.is-done .memory-hero-edit-icon-default {
    display: none !important;
}

#memory-generated .memory-hero-edit-btn.is-done .memory-hero-edit-icon-mobile-done {
    display: grid !important;
}

#memory-generated .memory-control-rail .memory-control-rail-back,
#memory-generated .memory-control-rail .memory-control-rail-back:hover,
#memory-generated .memory-control-rail .memory-control-rail-back:focus-visible {
    -webkit-appearance: none;
    appearance: none;
    background-color: #f0f1f1 !important;
    background-image: none !important;
    color: #000000 !important;
}

#memory-generated .memory-control-rail .memory-control-rail-back > .material-symbols-outlined,
#memory-generated .memory-control-rail .memory-control-rail-back .memory-control-label {
    color: #000000 !important;
}

/* Printed Remembrand is a prominent final story action. Its desktop height
   matches Profile's New memory button. */
#memory-generated .memory-print-order .memory-print-order-btn,
#memory-generated .memory-print-order .memory-print-order-btn:hover,
#memory-generated .memory-print-order .memory-print-order-btn:focus-visible {
    -webkit-appearance: none;
    appearance: none;
    width: min(100%, 440px) !important;
    height: 63px !important;
    min-height: 63px !important;
    padding: 0 30px !important;
    gap: 12px;
    background-color: #574fba !important;
    background-image: none !important;
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

#memory-generated .memory-print-order .memory-print-order-btn svg {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: #ffffff;
}

/* Horizontal stories end in a dedicated viewport panel. Reserve enough real
   inner space for the same 440 × 63 px print action used by vertical and
   custom stories instead of allowing that panel's padding to squeeze it. */
@media (min-width: 769px) {
    #memory-generated .memory-layout-horizontal-timeline .memory-print-order {
        box-sizing: border-box;
        flex: 0 0 520px;
        width: 520px;
        max-width: 520px;
        padding-right: 40px;
        padding-left: 40px;
    }

    #memory-generated .memory-layout-horizontal-timeline .memory-print-order .memory-print-order-btn {
        flex: 0 0 440px;
        width: 440px !important;
        min-width: 440px !important;
        max-width: 440px !important;
    }
}

/* Map drawer lock: black while unlocked, inverse treatment while locked. */
#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock,
#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock:hover,
#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock:focus-visible {
    -webkit-appearance: none;
    appearance: none;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock > .material-symbols-outlined {
    color: #ffffff !important;
}

#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock.is-locked,
#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock.is-locked:hover,
#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock.is-locked:focus-visible {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
}

#memory-generated .memory-layout-horizontal-timeline .memory-horizontal-drawer-lock.is-locked > .material-symbols-outlined {
    color: #000000 !important;
}

/* The first Create step has one forward action, so it belongs on the visual
   centre line on both desktop and mobile. */
#page-create #stepPanel1 .step-nav {
    justify-content: center;
}

#page-create #stepPanel1 .step-nav > div:empty {
    display: none;
}

/* A lighter desktop action rail: smaller pills, icons and corrected rhythm.
   The phone dock intentionally keeps its existing 44 px touch targets. */
@media (min-width: 769px) {
    #memory-generated .memory-control-rail-inner {
        gap: 4px;
        /* Preserve the original rail/brand origin so leaving a memory never
           makes the wordmark jump relative to the rest of the application. */
        padding: 16px 6px;
    }

    #memory-generated .memory-control-rail-action,
    #memory-generated .memory-control-rail .story-status-trigger {
        flex-basis: 38px;
        height: 38px !important;
        min-height: 38px !important;
        gap: 10px;
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-size: 12px !important;
    }

    #memory-generated .memory-control-rail-action > .material-symbols-outlined {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 21px;
        line-height: 24px;
    }

    #memory-generated .memory-control-rail .story-status-trigger-copy {
        gap: 10px;
    }

    #memory-generated .memory-control-rail .story-status-dot {
        flex-basis: 9px;
        width: 9px;
        height: 9px;
        margin-right: 6px;
        margin-left: 6px;
    }

    /* Closed rail actions are true circles; opening the rail turns them back
       into compact horizontal pills without moving their icons. */
    #memory-generated .memory-control-rail .memory-control-rail-action,
    #memory-generated .memory-control-rail .story-status-trigger {
        align-self: center;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        justify-content: center;
        gap: 0;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-radius: 50% !important;
    }

    #memory-generated .memory-control-rail .story-status-control {
        align-self: center;
        width: 38px;
    }

    #memory-generated .memory-control-rail .story-status-trigger-copy {
        flex: 0 0 auto;
        justify-content: center;
        gap: 0;
    }

    #memory-generated .memory-control-rail .story-status-dot {
        margin-right: 0;
        margin-left: 0;
    }

    #memory-generated .memory-control-rail:not(.is-forced-collapsed):hover .memory-control-rail-action,
    #memory-generated .memory-control-rail:not(.is-forced-collapsed):focus-within .memory-control-rail-action,
    #memory-generated .memory-control-rail:not(.is-forced-collapsed):hover .story-status-trigger,
    #memory-generated .memory-control-rail:not(.is-forced-collapsed):focus-within .story-status-trigger {
        align-self: stretch;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: flex-start;
        gap: 10px;
        padding-right: 10px !important;
        padding-left: 10px !important;
        border-radius: 999px !important;
    }

    #memory-generated .memory-control-rail:not(.is-forced-collapsed):hover .story-status-control,
    #memory-generated .memory-control-rail:not(.is-forced-collapsed):focus-within .story-status-control {
        align-self: stretch;
        width: 100%;
    }

    #memory-generated .memory-control-rail:not(.is-forced-collapsed):hover .story-status-trigger-copy,
    #memory-generated .memory-control-rail:not(.is-forced-collapsed):focus-within .story-status-trigger-copy {
        flex: 1 1 auto;
        justify-content: flex-start;
        gap: 10px;
    }

    #memory-generated .memory-control-rail:not(.is-forced-collapsed):hover .story-status-dot,
    #memory-generated .memory-control-rail:not(.is-forced-collapsed):focus-within .story-status-dot {
        margin-right: 6px;
        margin-left: 6px;
    }
}

@media (max-width: 768px) {
    #memory-generated .memory-hero-in-story:not(.no-map) .memory-map-panel,
    #memory-generated.is-editing .memory-hero-in-story:not(.no-map) .memory-map-panel {
        padding-right: 12px;
        padding-left: 12px;
    }

    #memory-generated .memory-print-order {
        box-sizing: border-box;
        padding-right: 16px;
        padding-left: 16px;
    }

    #memory-generated .memory-print-order .memory-print-order-btn,
    #memory-generated .memory-print-order .memory-print-order-btn:hover,
    #memory-generated .memory-print-order .memory-print-order-btn:focus-visible {
        width: 100% !important;
        max-width: none !important;
        padding-right: 22px !important;
        padding-left: 22px !important;
        align-items: center;
        justify-content: center;
        font-size: clamp(12px, 3.5vw, 15px) !important;
        line-height: 1.15 !important;
    }

    #memory-generated .memory-print-order .memory-print-order-btn svg {
        flex-basis: 25px;
        width: 25px;
        height: 25px;
    }

    /* Once the cinema intro hands the viewport to the landing content, start
       the second scene below the fixed mobile header. Keeping the flex item at
       the top also prevents a tall scene from being cropped while it fades in. */
    .cinema-wrapper.is-content-visible > .hero-flat {
        box-sizing: border-box;
        min-height: 100svh;
        padding-top: calc(124px + env(safe-area-inset-top));
        align-items: flex-start;
        overflow: visible;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-inner {
        gap: 28px;
    }

    /* Mobile keeps the same layered rhythm as desktop, but in a denser frame
       so the collage reads as one composition directly below the copy. */
    .cinema-wrapper.is-content-visible > .hero-flat .hf-collage {
        width: min(100%, 360px);
        height: 350px;
        min-height: 350px;
        margin: 0 auto;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-block-yellow {
        left: 0;
        top: 5%;
        width: 29%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-photo-1 {
        left: 30%;
        top: 0;
        width: 30%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-photo-2 {
        right: 0;
        top: 9%;
        width: 36%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-photo-3 {
        left: 1%;
        top: 27%;
        width: 27%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-block-pink {
        left: 43%;
        top: 40%;
        width: 21%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-block-green {
        left: 56%;
        top: 62%;
        width: 19%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-photo-4 {
        left: 15%;
        bottom: 1%;
        width: 38%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-photo-5 {
        right: 1%;
        bottom: 2%;
        width: 29%;
    }

    .cinema-wrapper.is-content-visible > .hero-flat .hf-block-blue {
        left: 0;
        bottom: 10%;
        width: 20%;
    }
}

/* Give the four main landing statements a little more breathing room while
   preserving their current sizes and line breaks. */
#page-landing .hf-headline {
    line-height: 0.98;
}

#page-landing :is(.features-section, .how-section) .section-header h2,
#page-landing .cta-content h2 {
    line-height: 1.02;
}

/* Edit remains the same green action in every pointer state. This final,
   explicit guard also neutralizes older generic button hover rules. */
#memory-generated .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn,
#memory-generated .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn:is(:hover, :focus-visible, :active),
#memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn.is-done,
#memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn.is-done:is(:hover, :focus-visible, :active) {
    background: #00b252 !important;
    background-color: #00b252 !important;
    background-image: none !important;
    border-color: #00b252 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Photo controls stay legible over every image without changing on hover. */
#memory-generated :is(
    .gen-photo-ai-trigger,
    .gen-photo-remove,
    .gen-photo-detach,
    .gen-photo-more-trigger
),
#memory-generated :is(
    .gen-photo-ai-trigger,
    .gen-photo-remove,
    .gen-photo-detach,
    .gen-photo-more-trigger
):is(:hover, :focus-visible, :active) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* A clearly visible in-progress state for AI-generated photo text. */
#memory-generated .gen-photo-ai-trigger.is-thinking,
#memory-generated .gen-photo-ai-trigger.is-thinking:is(:hover, :focus-visible, :active) {
    animation: photoAiTriggerPulse 1.05s ease-in-out infinite !important;
    background: #ffffff !important;
    color: #000000 !important;
    opacity: 1 !important;
}

#memory-generated .gen-photo-ai-trigger.is-thinking > .material-symbols-outlined {
    animation: photoAiStarSpin 1.05s linear infinite !important;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

#memory-generated :is(.gen-photo, .gen-photo-group).is-ai-generating-text {
    isolation: isolate;
}

#memory-generated :is(.gen-photo, .gen-photo-group).is-ai-generating-text::after {
    content: '';
    position: absolute;
    inset: -35% 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 34%,
        rgba(0, 178, 82, 0.08) 43%,
        rgba(0, 255, 119, 0.62) 50%,
        rgba(0, 178, 82, 0.08) 57%,
        transparent 66%
    );
    mix-blend-mode: screen;
    animation: photoAiScan 1.45s linear infinite;
}

@keyframes photoAiScan {
    from { transform: translateY(-42%); }
    to { transform: translateY(42%); }
}

#memory-generated :is(.gen-photo, .gen-photo-group) > .gen-block-move-controls,
#memory-generated :is(.gen-photo, .gen-photo-group) > .gen-block-move-controls:is(:hover, :focus-within, :active),
#memory-generated :is(.gen-photo, .gen-photo-group) > .gen-block-move-controls .gen-block-drag-handle,
#memory-generated :is(.gen-photo, .gen-photo-group) > .gen-block-move-controls .gen-block-drag-handle:is(:hover, :focus-visible, :active) {
    background: #ffffff !important;
    color: #000000 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

#memory-generated :is(.gen-photo, .gen-photo-group)
    > .gen-block-move-controls .gen-block-drag-dots > span {
    background: #000000 !important;
}

/* Bring the icons in the photo text palette closer to its left edge. */
.story-photo-ai-menu {
    padding-left: 3px;
}

.story-photo-ai-menu-item {
    padding-left: 7px;
}

.gen-photo-more-trigger {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: none;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.gen-photo-more-trigger > .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 19px;
    line-height: 18px;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.story-photo-more-menu {
    position: fixed;
    z-index: 1600;
    display: grid;
    box-sizing: border-box;
    min-width: 190px;
    gap: 3px;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}

.story-photo-more-menu[hidden] {
    display: none;
}

.story-photo-more-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: #ffffff;
    color: #000000;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

.story-photo-more-menu-item:is(:hover, :focus-visible) {
    background: #f0f1f1;
    outline: none;
}

.story-photo-more-menu-item.is-danger {
    color: #d92d20;
}

.story-photo-more-menu-item > .material-symbols-outlined {
    display: grid;
    flex: 0 0 18px;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* The Edit action remains green in every browser interaction state. */
#memory-generated #editStoryBtn,
#memory-generated #editStoryBtn:is(:hover, :focus-visible, :active),
#memory-generated.is-editing #editStoryBtn.is-done,
#memory-generated.is-editing #editStoryBtn.is-done:is(:hover, :focus-visible, :active) {
    background: #00b252 !important;
    background-color: #00b252 !important;
    background-image: none !important;
    border-color: #00b252 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

#memory-generated #editStoryBtn :is(.material-symbols-outlined, .memory-control-label) {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    #memory-generated .memory-control-rail-inner {
        position: relative;
        padding-right: max(60px, calc(52px + env(safe-area-inset-right, 0px)));
    }

    #memory-generated .memory-control-rail #editStoryBtn,
    #memory-generated.is-editing .memory-control-rail #editStoryBtn.is-done {
        position: absolute;
        top: 8px;
        right: max(8px, env(safe-area-inset-right, 0px));
        margin: 0;
    }

    #memory-generated.is-editing .memory-control-rail-inner {
        display: flex;
        justify-content: stretch;
        gap: 0;
    }

    #memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.memory-mobile-add-photo-btn,
    #memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.memory-mobile-add-photo-btn:hover,
    #memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.memory-mobile-add-photo-btn:focus-visible,
    #memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.memory-mobile-add-photo-btn:active {
        appearance: none;
        display: flex !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        padding: 0 16px !important;
        margin: 0;
        border: 0 !important;
        border-radius: 22px !important;
        background: var(--control-bg) !important;
        background-color: var(--control-bg) !important;
        background-image: none !important;
        color: #000000 !important;
        box-shadow: inset 0 0 0 999px var(--control-bg) !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        isolation: isolate;
    }

    #memory-generated.is-editing .memory-mobile-add-photo-content {
        display: inline-flex;
        width: max-content;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
        padding: 0;
        line-height: 1;
        pointer-events: none;
    }

    #memory-generated.is-editing .memory-mobile-add-photo-content > .material-symbols-outlined {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #000000 !important;
        font-size: 24px !important;
        line-height: 24px !important;
        transform: none !important;
    }

    #memory-generated.is-editing .memory-mobile-add-photo-label {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #000000 !important;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        line-height: 1;
        white-space: nowrap;
        transform: none !important;
    }

    #memory-generated.is-editing .gen-photo-more-trigger {
        display: none !important;
    }

    #memory-generated.is-editing :is(.gen-photo, .gen-photo-group) > .gen-photo-remove {
        display: inline-flex !important;
    }
}

/* Gallery selection is a high-contrast action layered over a dark shadowbox.
   Keep its surface opaque despite the generic icon-button reset above. */
.story-gallery .story-gallery-photo-action-btn,
.story-gallery .story-gallery-photo-action-btn:is(:hover, :focus-visible, :active) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.story-gallery .story-gallery-photo-action-btn.is-selected,
.story-gallery .story-gallery-photo-action-btn.is-selected:is(:hover, :focus-visible, :active) {
    border: 0 !important;
    background: var(--button-active-bg, #dad6ff) !important;
    background-color: var(--button-active-bg, #dad6ff) !important;
    color: #000000 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

.story-gallery .story-gallery-close:not(.is-confirming),
.story-gallery .story-gallery-close:not(.is-confirming):is(:hover, :focus-visible, :active) {
    border-color: #000000 !important;
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Visibility settings must win over every layout-specific grid/flex rule. */
#memory-generated .memory-story-hero .memory-stat.is-hidden-stat {
    display: none !important;
}

#memory-generated .memory-story-hero .memory-hero-stats:not(:has(.memory-stat:not(.is-hidden-stat))) {
    display: none !important;
    margin: 0 !important;
    border: 0 !important;
}

/* The asynchronously initialized map must never become the browser's scroll
   anchor and pull a phone away from the moment currently being viewed. */
#memory-generated .memory-shell-drawer,
#memory-generated #genStoryMap {
    overflow-anchor: none;
}

/* Mobile memories use one flowing layout. A drag that starts on a photo or
   text block must therefore remain a native vertical page scroll in Edit. */
@media (max-width: 768px) {
    #memory-generated.is-editing .gen-day-main > [data-block-id],
    #memory-generated.is-editing .memory-layout-central-timeline .gen-day-main
        > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-block-id],
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
        > [data-block-id],
    #memory-generated.is-editing .memory-layout-horizontal-timeline .gen-day-main
        > :is(.gen-photo-timeline-item, .gen-entry-with-story)[data-block-id] {
        cursor: default;
        touch-action: pan-y pinch-zoom !important;
    }
}

/* Settings actions communicate whether there is anything new to save. */
.auth-dialog .btn-primary.is-settings-pristine,
.auth-dialog .btn-primary.is-settings-pristine:is(:hover, :focus-visible, :active) {
    background: var(--control-bg, #f0f1f1) !important;
    background-color: var(--control-bg, #f0f1f1) !important;
    color: #000000 !important;
    opacity: 0.45 !important;
    box-shadow: none !important;
    transform: none !important;
}

.auth-dialog .btn-primary.is-settings-pristine:disabled {
    cursor: not-allowed !important;
}

.auth-dialog .btn-primary.is-settings-dirty,
.auth-dialog .btn-primary.is-settings-dirty:is(:hover, :focus-visible, :active) {
    background: #00b252 !important;
    background-color: #00b252 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

.profile-account-dialog .account-email-updates-toggle {
    align-items: flex-start !important;
}

.profile-account-dialog .account-email-updates-toggle > input {
    flex: 0 0 auto;
    margin-top: 2px !important;
}

.photo-grouping-hint-dialog {
    max-width: 560px;
}

.photo-grouping-hint-toggle {
    align-items: flex-start;
    margin-top: 10px;
}

/* Edit is black at rest; the confirmed editing state remains green. */
#memory-generated .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn,
#memory-generated .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn:is(:hover, :focus-visible, :active) {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
}

#memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn.is-done,
#memory-generated.is-editing .memory-control-rail button.memory-control-rail-action.btn-edit-story.memory-hero-edit-btn.is-done:is(:hover, :focus-visible, :active) {
    background: #00b252 !important;
    background-color: #00b252 !important;
    border-color: #00b252 !important;
    color: #ffffff !important;
}

/* On phones the status control expands in place to reveal its current label;
   the remaining dock actions naturally make room beside it. */
@media (max-width: 768px) {
    #memory-generated .memory-control-rail .story-status-control {
        transition: width 180ms ease-out, flex-basis 180ms ease-out;
    }

    #memory-generated .memory-control-rail .story-status-control.is-open {
        flex: 0 1 124px !important;
        width: 124px !important;
        min-width: 104px !important;
        max-width: 136px !important;
    }

    #memory-generated .memory-control-rail .story-status-control.is-open .story-status-trigger {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        padding: 0 13px !important;
        border-radius: 999px !important;
    }

    #memory-generated .memory-control-rail .story-status-control.is-open .story-status-trigger-copy {
        min-width: 0;
        justify-content: center;
        gap: 8px;
    }

    #memory-generated .memory-control-rail .story-status-control.is-open .memory-control-label,
    #memory-generated .memory-control-rail:hover .story-status-control.is-open .memory-control-label,
    #memory-generated .memory-control-rail:focus-within .story-status-control.is-open .memory-control-label {
        display: inline-block !important;
        max-width: 82px !important;
        opacity: 1 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}