/* LikeGirl Frontend V2 — shared visual system for every public route. */
:root {
    --front-ink: #222730;
    --front-muted: #68717f;
    --front-canvas: #edf0f4;
    --front-canvas-2: #f6f7f9;
    --front-surface: rgba(255, 255, 255, .82);
    --front-solid: #fbfcfd;
    --front-line: rgba(50, 61, 78, .11);
    --front-accent: #c84662;
    --front-accent-deep: #a9344e;
    --front-accent-soft: #f3dfe4;
    --front-night: #252a34;
    --front-radius: 18px;
    --front-media-radius: 28px;
    --front-shadow: 0 24px 70px rgba(43, 53, 70, .11);
    --front-ease: cubic-bezier(.22, 1, .36, 1);
}

.inner-modern-page,
.album-story-page,
.moment-detail-story-page {
    background:
        radial-gradient(circle at 7% 8%, rgba(255, 255, 255, .82), transparent 24rem),
        radial-gradient(circle at 94% 34%, rgba(200, 70, 98, .055), transparent 30rem),
        var(--front-canvas);
    color: var(--front-ink);
}

.inner-modern-page a,
.album-story-page a { text-decoration: none !important; }

.moment-detail-story-page a { text-decoration: none !important; }

.inner-modern-page :where(button, a, input, textarea, select):focus-visible,
.album-story-page :where(button, a, input, textarea, select):focus-visible {
    outline: 3px solid rgba(200, 70, 98, .3);
    outline-offset: 3px;
}

.moment-detail-story-page :where(button, a, input, textarea):focus-visible { outline: 3px solid rgba(200, 70, 98, .3); outline-offset: 3px; }

/* One quiet glass navigation layer, shared by all routes. */
.inner-modern-page .inner-nav,
.album-story-page .inner-nav {
    background: rgba(247, 248, 250, .74);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(39, 47, 61, .09);
    color: var(--front-ink);
    max-width: 1160px;
}

.moment-detail-story-page .inner-nav { background: rgba(247,248,250,.76); border: 1px solid rgba(255,255,255,.82); border-radius: 16px; box-shadow: 0 16px 40px rgba(39,47,61,.09); color: var(--front-ink); max-width: 1160px; }
.moment-detail-story-page .inner-nav-links a::after { display: none; }
.moment-detail-story-page .inner-nav-links a { border-radius: 10px; color: #596270; }
.moment-detail-story-page .inner-nav-links a:hover,
.moment-detail-story-page .inner-nav-links a.is-active { background: var(--front-night); color: #fff; }
.moment-detail-story-page .inner-home-link { background: var(--front-accent); border: 0; border-radius: 11px; color: #fff; }

.inner-modern-page .inner-nav.is-compact,
.album-story-page .inner-nav.is-compact {
    background: rgba(247, 248, 250, .88);
    border-radius: 14px;
}

.inner-modern-page .inner-nav-links a,
.album-story-page .inner-nav-links a {
    border-radius: 10px;
    color: #596270;
    min-height: 40px;
}

.inner-modern-page .inner-nav-links a::after,
.album-story-page .inner-nav-links a::after { display: none; }

.inner-modern-page .inner-nav-links a:hover,
.inner-modern-page .inner-nav-links a.is-active,
.album-story-page .inner-nav-links a:hover,
.album-story-page .inner-nav-links a.is-active {
    background: var(--front-night);
    color: #fff;
}

.inner-modern-page .inner-home-link,
.album-story-page .inner-home-link {
    background: var(--front-accent);
    border: 0;
    border-radius: 11px;
    color: #fff;
}

.inner-modern-page .inner-main { max-width: 1240px; padding-inline: 32px; }

.inner-modern-page .inner-section-heading h2,
.album-story-page :where(.album-story-index, .album-story-media) > header h2 {
    color: var(--front-ink);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    font-weight: 760;
    letter-spacing: -.05em;
}

/* Moments: shorter editorial opening and a real archive rhythm. */
.moment-story-page { --moment-accent: var(--front-accent); --moment-paper: var(--front-canvas); }
.moment-story-page .moment-story-feature {
    border-radius: 0 0 var(--front-media-radius) var(--front-media-radius);
    height: min(82dvh, 760px);
    min-height: 620px;
}
.moment-story-page .moment-story-feature__veil {
    background: linear-gradient(90deg, rgba(22, 25, 32, .76), rgba(22, 25, 32, .23) 70%), linear-gradient(0deg, rgba(15, 18, 24, .48), transparent 58%);
}
.moment-story-page .moment-story-feature h1 { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight: 760; }
.moment-story-page .moment-story-read { background: var(--front-accent); border-radius: 12px; box-shadow: 0 14px 30px rgba(200, 70, 98, .25); }
.moment-story-page .moment-story-archive { max-width: 1180px; padding: 104px 32px 150px; }
.moment-story-page .moment-search-panel { background: var(--front-surface); border-color: rgba(255,255,255,.85); border-radius: var(--front-radius); box-shadow: var(--front-shadow); }
.moment-story-page .moment-search-field,
.moment-story-page .moment-story-tags button { background: var(--front-canvas-2); border-color: var(--front-line); border-radius: 11px; }
.moment-story-page .moment-story-tags button.is-active { background: var(--front-night); color: #fff; }
.moment-story-page .moment-story-entry { border-color: var(--front-line); }
.moment-story-page .moment-story-entry__media { background: #dde1e7; border-radius: var(--front-radius); box-shadow: 0 14px 36px rgba(41,50,66,.08); overflow: hidden; }
.moment-story-page .moment-story-entry h3 { color: var(--front-ink); letter-spacing: -.035em; }
.moment-story-page .moment-story-entry footer > a { color: var(--front-accent-deep); }

/* Moment detail: the reading view belongs to the same editorial family. */
.moment-detail-story-page { --moment-detail-accent: var(--front-accent); color: var(--front-ink); }
.moment-detail-story-page .moment-detail-hero { border-radius: 0 0 var(--front-media-radius) var(--front-media-radius); height: min(86dvh, 800px); min-height: 650px; }
.moment-detail-story-page .moment-detail-hero h1 { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight: 760; }
.moment-detail-story-page .moment-detail-paper { background: var(--front-solid); border-color: rgba(255,255,255,.86); border-radius: var(--front-radius); box-shadow: var(--front-shadow); }
.moment-detail-story-page .moment-detail-content { color: var(--front-ink); }
.moment-detail-story-page .moment-detail-media__stack :where(img, video) { border-radius: var(--front-media-radius); }
.moment-detail-story-page .moment-detail-end button { background: var(--front-accent); border-radius: 12px; }

/* Albums: tactile chapters without oversized empty screens. */
.album-story-page { --album-accent: var(--front-accent); --album-accent-strong: var(--front-accent-deep); --album-paper: var(--front-canvas); --album-surface: var(--front-surface); --album-ink: var(--front-ink); --album-muted: var(--front-muted); --album-line: var(--front-line); }
.album-story-page .album-story-cover { height: min(84dvh, 780px); min-height: 640px; }
.album-story-page .album-story-cover-copy h1,
.album-story-page .album-story-library-copy h1 { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight: 780; }
.album-story-page .album-story-primary { background: var(--front-accent); border-radius: 12px; box-shadow: 0 14px 30px rgba(200,70,98,.24); }
.album-story-page .album-story-back { border-radius: 12px; }
.album-story-page .album-story-index,
.album-story-page .album-story-media { padding-block: 104px 150px; }
.album-story-page .album-story-chapters { gap: 88px; margin-top: 58px; }
.album-story-page .album-story-chapter-media { border-radius: var(--front-media-radius); box-shadow: var(--front-shadow); }
.album-story-page .album-story-chapter-copy h3 { color: var(--front-ink); }
.album-story-page .album-story-chapter-copy > a { color: var(--front-accent-deep); }
.album-story-page .album-story-frame button,
.album-story-page .album-story-frame video { border-radius: var(--front-media-radius); }

/* Echo: preserve the cinematic mailbox, shorten the runway. */
.message-page { --echo-rose: var(--front-accent); --echo-paper: var(--front-canvas); --echo-ink: var(--front-ink); --echo-muted: var(--front-muted); }
.message-page .echo-hero { height: min(84dvh, 760px); min-height: 620px; }
.message-page .echo-hero h1 { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight: 760; }
.message-page .echo-compose-trigger { border-radius: 12px; }
.message-page .echo-compose-trigger i { background: var(--front-accent); border-radius: 9px; }
.message-page .echo-main { padding-block: 96px 150px; }
.message-page .modern-message { background: transparent; border-color: var(--front-line); border-radius: 0; box-shadow: none; }
.message-page .message-identity-badge { border-radius: 8px; }
.message-page .message-replies { border-left-color: rgba(200,70,98,.2); }
.message-page .echo-compose { background: var(--front-solid); border-radius: 24px 24px 0 0; }
.message-page .echo-compose__close { border-radius: 12px; }
.message-page .modern-submit { background: var(--front-accent); border-radius: 12px; }

/* Track: a map product, not a second landing page. */
.track-page { --track-rose: var(--front-accent); --track-paper: var(--front-canvas); --track-ink: var(--front-ink); --track-muted: var(--front-muted); --track-line: var(--front-line); }
.track-page .track-story-hero { height: min(82dvh, 740px); min-height: 600px; }
.track-page .track-story-hero h1 { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight: 760; }
.track-page .track-main { padding-block: 96px 150px; }
.track-page .track-map-panel,
.track-page .track-side { background: rgba(251,252,253,.76); border-color: rgba(255,255,255,.88); border-radius: var(--front-radius); box-shadow: var(--front-shadow); }
.track-page .track-map-stage { border-radius: 0 0 var(--front-radius) var(--front-radius); overflow: hidden; }
.track-page .track-view-switch { border-radius: 12px; }
.track-page .track-view-switch button { border-radius: 9px; }
.track-page .track-view-switch button.is-active { background: var(--front-night); color: #fff; }
.track-page .track-story-empty__route { border-color: var(--front-line); }

/* Goals: compact workbench and readable long lists. */
.plan-page { --goal-rose: var(--front-accent); --goal-paper: var(--front-canvas); --goal-ink: var(--front-ink); --goal-muted: var(--front-muted); --goal-line: var(--front-line); }
.plan-page .goal-hero { min-height: min(88dvh, 780px); padding-block: 116px 64px; }
.plan-page .goal-hero h1 { color: var(--front-ink); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; font-weight: 760; }
.plan-page .goal-hero__memory { border-radius: var(--front-media-radius); box-shadow: var(--front-shadow); }
.plan-page .goal-progress-ring { background: rgba(255,255,255,.68); }
.plan-page .goal-main { padding-block: 92px 150px; }
.plan-page .modern-plan-toolbar { background: rgba(251,252,253,.74); border: 1px solid rgba(255,255,255,.88); border-radius: var(--front-radius); box-shadow: 0 16px 42px rgba(43,53,70,.07); padding: 14px; }
.plan-page .modern-plan-search,
.plan-page .modern-plan-filters button,
.plan-page .modern-plan-categories button { border-radius: 10px; }
.plan-page .modern-plan-filters button.is-active,
.plan-page .modern-plan-categories button.is-active { background: var(--front-night); color: #fff; }
.plan-page .modern-plan-grid { background: rgba(251,252,253,.64); border: 1px solid rgba(255,255,255,.84); border-radius: var(--front-radius); padding-inline: 20px; }
.plan-page .modern-plan-item { border-color: var(--front-line); }
.plan-page .modern-plan-state { border-radius: 11px; }
.plan-page .goal-item-expand { border-radius: 10px; }
.plan-page .goal-show-more { background: var(--front-night); border-radius: 12px; color: #fff; }

/* About: keep the replay idea, remove the disconnected pink app look. */
.about-replay-page .inner-main { padding-block: 92px 150px; }
.about-replay-page .about-replay { gap: 22px; }
.about-replay-page .about-replay__scene-card { border-radius: var(--front-media-radius); box-shadow: var(--front-shadow); }
.about-replay-page .about-replay__window { background: rgba(251,252,253,.82); border: 1px solid rgba(255,255,255,.9); border-radius: var(--front-radius); box-shadow: var(--front-shadow); }
.about-replay-page .about-replay__header { border-color: var(--front-line); }
.about-replay-page .about-replay__count { background: var(--front-accent-soft); border-radius: 9px; color: var(--front-accent-deep); }
.about-replay-page .about-replay__row p { border-color: var(--front-line); border-radius: 5px 16px 16px; }
.about-replay-page .about-replay__row.is-boy p { background: var(--front-night); border-color: var(--front-night); border-radius: 16px 5px 16px 16px; }
.about-replay-page .about-replay__controls { background: rgba(245,247,249,.92); border-color: var(--front-line); }
.about-replay-page .about-replay__controls button { border-radius: 10px; }
.about-replay-page .about-replay__controls .about-replay__play { background: var(--front-accent); }

@media (max-width: 800px) {
    .inner-modern-page .inner-main { padding-inline: 20px; }
    .inner-modern-page .inner-mobile-nav,
    .album-story-page .inner-mobile-nav {
        background: rgba(247,248,250,.9);
        border: 1px solid rgba(255,255,255,.92);
        border-radius: 16px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 18px 44px rgba(34,42,56,.16);
        left: 12px;
        right: 12px;
    }
    .moment-detail-story-page .inner-mobile-nav { background: rgba(247,248,250,.9); border: 1px solid rgba(255,255,255,.92); border-radius: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 18px 44px rgba(34,42,56,.16); left: 12px; right: 12px; }
    .moment-detail-story-page .inner-mobile-nav a { border-radius: 10px; min-height: 50px; }
    .moment-detail-story-page .inner-mobile-nav a.is-active { background: var(--front-night); color: #fff; }
    .inner-modern-page .inner-mobile-nav a,
    .album-story-page .inner-mobile-nav a { border-radius: 10px; min-height: 50px; }
    .inner-modern-page .inner-mobile-nav a.is-active,
    .album-story-page .inner-mobile-nav a.is-active { background: var(--front-night); color: #fff; }
    .inner-modern-page .inner-float-home,
    .album-story-page .inner-float-home { background: var(--front-accent); border-radius: 14px; color: #fff; }

    .moment-story-page .moment-story-feature,
    .album-story-page .album-story-cover,
    .message-page .echo-hero,
    .track-page .track-story-hero { height: 72dvh; min-height: 590px; max-height: 680px; }
    .moment-story-page .moment-story-feature,
    .album-story-page .album-story-cover { border-radius: 0 0 22px 22px; }
    .moment-story-page .moment-story-feature h1,
    .album-story-page .album-story-cover-copy h1,
    .message-page .echo-hero h1,
    .track-page .track-story-hero h1 { font-size: clamp(40px, 11.8vw, 54px); letter-spacing: -.055em; }
    .moment-story-page .moment-story-archive,
    .album-story-page .album-story-index,
    .album-story-page .album-story-media { padding: 72px 20px 116px; }
    .moment-story-page .moment-story-heading { gap: 28px; }
    .moment-story-page .moment-story-entry { gap: 14px; padding-block: 22px; }
    .moment-story-page .moment-story-entry__media { border-radius: 14px; }

    .album-story-page .album-story-chapters { gap: 58px; margin-top: 40px; }
    .album-story-page .album-story-chapter-media { border-radius: 20px; height: min(112vw, 520px); min-height: 390px; }
    .album-story-page .album-story-frame button,
    .album-story-page .album-story-frame video { border-radius: 18px; }

    .message-page .echo-main,
    .track-page .track-main,
    .plan-page .goal-main,
    .about-replay-page .inner-main { padding-block: 72px 122px; }
    .message-page .modern-message { padding-inline: 0; }
    .track-page .track-story-empty { min-height: 0; }
    .track-page .track-story-empty__route { max-width: 260px; }

    .plan-page .goal-hero { min-height: 0; padding: 102px 20px 50px; }
    .plan-page .goal-hero h1 { font-size: clamp(40px, 11.5vw, 52px); }
    .plan-page .goal-hero__memory { border-radius: 20px; min-height: 220px; }
    .plan-page .modern-plan-toolbar { border-radius: 14px; padding: 10px; }
    .plan-page .modern-plan-grid { border-radius: 14px; padding-inline: 12px; }

    .about-replay-page .about-replay__scene-card { border-radius: 20px; }
    .about-replay-page .about-replay__window { border-radius: 16px; }
    .moment-detail-story-page .moment-detail-hero { border-radius: 0 0 22px 22px; height: 72dvh; min-height: 590px; }
    .moment-detail-story-page .moment-detail-paper { border-radius: 16px; }
}

@media (max-width: 520px) {
    .moment-story-page .moment-story-feature,
    .album-story-page .album-story-cover,
    .message-page .echo-hero,
    .track-page .track-story-hero { min-height: 560px; }
    .moment-story-page .moment-story-summary { max-width: 31ch; }
    .album-story-page .album-story-cover-copy { left: 22px; right: 22px; }
    .album-story-page .album-story-cover-copy dl { gap: 15px; }
    .message-page .echo-compose-trigger { min-height: 48px; }
    .plan-page .goal-hero__progress { align-items: stretch; }
    .plan-page .goal-progress-ring { flex-basis: 88px; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --front-ink: #f1f3f6;
        --front-muted: #a8afb9;
        --front-canvas: #15181e;
        --front-canvas-2: #20242c;
        --front-surface: rgba(31, 35, 43, .82);
        --front-solid: #1e2229;
        --front-line: rgba(255, 255, 255, .1);
        --front-accent-soft: #3b252d;
        --front-night: #e9ebef;
    }
    .inner-modern-page .inner-nav,
    .album-story-page .inner-nav,
    .inner-modern-page .inner-mobile-nav,
    .album-story-page .inner-mobile-nav { background: rgba(28,32,39,.82); border-color: rgba(255,255,255,.09); }
    .moment-detail-story-page .inner-nav,
    .moment-detail-story-page .inner-mobile-nav { background: rgba(28,32,39,.82); border-color: rgba(255,255,255,.09); }
    .inner-modern-page .inner-nav-links a:hover,
    .inner-modern-page .inner-nav-links a.is-active,
    .album-story-page .inner-nav-links a:hover,
    .album-story-page .inner-nav-links a.is-active,
    .inner-modern-page .inner-mobile-nav a.is-active,
    .album-story-page .inner-mobile-nav a.is-active { background: #f0f1f4; color: #20242b; }
    .plan-page .modern-plan-toolbar,
    .plan-page .modern-plan-grid,
    .about-replay-page .about-replay__window,
    .track-page .track-map-panel,
    .track-page .track-side { background: rgba(31,35,43,.82); border-color: rgba(255,255,255,.08); }
    .about-replay-page .about-replay__row.is-boy p { background: #eceef2; border-color: #eceef2; color: #242830; }
}

@media (prefers-reduced-transparency: reduce) {
    .inner-modern-page .inner-nav,
    .album-story-page .inner-nav,
    .inner-modern-page .inner-mobile-nav,
    .album-story-page .inner-mobile-nav,
    .plan-page .modern-plan-toolbar,
    .plan-page .modern-plan-grid,
    .about-replay-page .about-replay__window { backdrop-filter: none !important; background: var(--front-solid); }
}

@media (prefers-reduced-motion: reduce) {
    .inner-modern-page *, .album-story-page * { scroll-behavior: auto !important; }
}