:root {
    --family-bg: #faf8f3;
    --family-surface: #ffffff;
    --family-blue: #2f80ed;
    --family-blue-dark: #1f5faf;
    --family-blue-light: #eaf4ff;
    --family-blue-soft: #dceeff;
    --family-navy: #1e3a5f;
    --family-coral: #ff5c77;
    --family-coral-light: #ffe8ed;
    --family-orange: #f59e42;
    --family-orange-light: #fff0de;
    --family-cream: #f5f0e7;
    --family-text: #2f3542;
    --family-text-muted: #70757d;
    --family-border: #e7e9ee;
    --family-white: #ffffff;
    --family-navy-deep: #142f4f;
    --family-surface-warm: #fffdf9;
    --family-radius-card: 20px;
    --family-radius-small: 12px;
    --family-shadow: 0 8px 28px rgba(30, 58, 95, 0.07), 0 2px 7px rgba(30, 58, 95, 0.03);
    --family-shadow-hover: 0 16px 38px rgba(30, 58, 95, 0.12), 0 4px 12px rgba(30, 58, 95, 0.05);
    --family-shadow-blue: 0 10px 24px rgba(47, 128, 237, 0.16);

    /* Compatibility aliases keep the existing component structure presentation-only. */
    --family-green: var(--family-blue);
    --family-green-dark: var(--family-blue-dark);
    --family-green-light: var(--family-blue-light);
    --family-brown: var(--family-navy);
    --family-beige: var(--family-cream);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--family-bg);
    background-image:
        radial-gradient(circle at 8% 5%, rgba(255, 232, 237, .48), transparent 24rem),
        radial-gradient(circle at 92% 12%, rgba(220, 238, 255, .52), transparent 28rem),
        linear-gradient(180deg, #fffdf9 0, var(--family-bg) 320px);
    color: var(--family-text);
    font-family: Arial, "Segoe UI", Tahoma, sans-serif;
    line-height: 1.65;
}
::selection { background: var(--family-blue-soft); color: var(--family-navy-deep); }
a { color: var(--family-green-dark); text-decoration: none; }
a:hover { color: var(--family-green); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(47, 128, 237, .25); outline-offset: 3px; }

.family-navbar {
    background:
        linear-gradient(110deg, rgba(255,255,255,.98), rgba(248,252,255,.97) 58%, rgba(255,247,249,.96));
    border-bottom: 1px solid rgba(47, 128, 237, .12);
    backdrop-filter: blur(12px);
    box-shadow: 0 7px 24px rgba(30, 58, 95, .08);
    min-height: 84px;
    padding: .24rem 0;
}
.navbar-brand { color: var(--family-navy-deep); font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; padding: .48rem .35rem .48rem 0; }
.navbar-brand:hover { color: var(--family-brown); }
.navbar-brand > span { align-items: center; display: flex; gap: .38rem; }
.navbar-brand > span > span { align-items: center; background: linear-gradient(145deg, var(--family-coral-light), #fff7f8); border: 1px solid rgba(255,92,119,.16); border-radius: 50%; box-shadow: 0 4px 10px rgba(255,92,119,.12); display: inline-flex; font-size: .72em; height: 1.7em; justify-content: center; width: 1.7em; }
.brand-heart { animation: brand-heart-pulse 7s ease-in-out infinite; display: inline-block; transform-origin: center; }
.family-footer > span { color: var(--family-coral); }
.navbar-brand small { color: var(--family-text-muted); display: block; font-family: inherit; font-size: .63rem; font-style: italic; font-weight: 400; letter-spacing: .045em; margin-top: 5px; }
.navbar-nav { align-items: center; gap: .16rem; }
.navbar-nav .nav-link { border: 1px solid transparent; border-radius: 999px; color: var(--family-text-muted); font-size: .84rem; font-weight: 650; margin: 0 .02rem; padding: .52rem .62rem; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease; }
.navbar-nav .nav-link:hover { background: rgba(234,244,255,.72); border-color: rgba(47,128,237,.08); color: var(--family-blue-dark); transform: translateY(-1px); }
.navbar-nav .nav-link.active { background: linear-gradient(135deg, var(--family-blue-light), #f1f8ff); border-color: var(--family-blue-soft); box-shadow: 0 3px 10px rgba(47,128,237,.1); color: var(--family-blue-dark); }
.nav-account { align-items: center; display: flex; gap: .7rem; }
.nav-account form { display: flex; margin: 0; }
.nav-login, .nav-account .nav-login { border-radius: 9px; color: var(--family-brown); font-size: .86rem; font-weight: 650; padding: .38rem .48rem; text-decoration: none; }
.nav-login:hover { color: var(--family-green); }
.nav-register { background: var(--family-blue-light); border: 1px solid var(--family-blue-soft); border-radius: 9px; color: var(--family-blue-dark); font-size: .82rem; font-weight: 700; padding: .38rem .65rem; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.nav-register:hover { background: var(--family-blue-soft); border-color: rgba(47,128,237,.2); color: var(--family-blue-dark); transform: translateY(-1px); }
.admin-link { align-items: center; background: var(--family-green-light); border: 1px solid var(--family-blue-soft); border-radius: 50%; display: flex; height: 36px; justify-content: center; transition: background-color .16s ease, transform .16s ease; width: 36px; }
.admin-link:hover { background: var(--family-blue-soft); transform: translateY(-1px); }
.user-chip { align-items: center; background: rgba(255,255,255,.82); border: 1px solid var(--family-border); border-radius: 999px; box-shadow: 0 3px 10px rgba(30,58,95,.05); display: flex; font-size: .84rem; font-weight: 700; gap: .42rem; padding: .22rem .52rem .22rem .25rem; }
.navbar-toggler { border-color: var(--family-border); }

.page-shell { min-height: calc(100vh - 160px); padding-bottom: 4.5rem; padding-top: 2.4rem; }
.home-mini-hero { align-items: center; background: linear-gradient(125deg, #fffdf9, var(--family-blue-light) 68%, #fff1f4); border: 1px solid var(--family-blue-soft); border-radius: 22px; box-shadow: 0 8px 24px rgba(30,58,95,.07); display: flex; gap: .95rem; margin-bottom: 1.35rem; min-height: 104px; overflow: hidden; padding: 1rem 1.35rem; position: relative; }
.home-mini-hero::after { background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); content: ""; height: 190px; pointer-events: none; position: absolute; right: -45px; top: -90px; width: 190px; }
.home-mini-hero > * { position: relative; z-index: 1; }
.home-mini-hero-icon { align-items: center; background: var(--family-white); border: 1px solid rgba(255,92,119,.18); border-radius: 50%; box-shadow: 0 5px 14px rgba(30,58,95,.09); color: var(--family-coral); display: inline-flex; flex: 0 0 auto; font-size: 1.25rem; height: 50px; justify-content: center; width: 50px; }
.home-mini-hero .eyebrow { margin-bottom: .08rem; }
.home-mini-hero h1 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.22rem; font-weight: 750; letter-spacing: normal; margin: 0; }
.home-mini-hero p { color: var(--family-text-muted); font-size: .86rem; margin: .12rem 0 0; }
.hero-motion-decor { bottom: 0; left: 0; pointer-events: none; position: absolute !important; right: 0; top: 0; z-index: 0 !important; }
.hero-motion-decor span { animation: hero-gentle-float 8s ease-in-out infinite; opacity: .26; position: absolute; }
.hero-motion-heart { font-size: .9rem; right: 9%; top: 23%; }
.hero-motion-decor .hero-motion-sparkle { animation-delay: -2.5s; font-size: .8rem; right: 17%; top: 58%; }
.hero-motion-decor .hero-motion-leaf { animation-delay: -5s; bottom: 12%; font-size: 1rem; right: 4%; }
.family-card { background: var(--family-surface); border: 1px solid rgba(30, 58, 95, .09); border-radius: var(--family-radius-card); box-shadow: var(--family-shadow); }
.sidebar-stack, .feed-stack { display: flex; flex-direction: column; gap: 1.35rem; }
.sidebar-card { padding: 1.35rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.sidebar-card h2 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: normal; line-height: 1.3; margin: .9rem 0 .5rem; }
.sidebar-card p { color: var(--family-text-muted); font-size: .87rem; line-height: 1.65; margin-bottom: 1.05rem; }

.sidebar-stack > .sidebar-card.text-center { background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(255,253,249,.96)); overflow: hidden; position: relative; }
.sidebar-stack > .sidebar-card.text-center::before { background: radial-gradient(circle, rgba(220,238,255,.8), rgba(220,238,255,0) 70%); content: ""; height: 150px; left: -45px; pointer-events: none; position: absolute; top: -60px; width: 150px; }
.sidebar-stack > .sidebar-card.text-center::after { background: radial-gradient(circle, rgba(255,232,237,.65), rgba(255,232,237,0) 70%); bottom: -55px; content: ""; height: 130px; pointer-events: none; position: absolute; right: -45px; width: 130px; }
.sidebar-stack > .sidebar-card.text-center > * { position: relative; z-index: 1; }
.profile-placeholder { align-items: center; background: linear-gradient(145deg, var(--family-blue-light), #fff4f6); border: 5px solid var(--family-white); border-radius: 50%; box-shadow: 0 0 0 2px var(--family-blue-soft), 0 9px 22px rgba(30,58,95,.14); color: var(--family-blue); display: flex; height: 104px; justify-content: center; overflow: hidden; width: 104px; }
.profile-placeholder i { font-size: 1.8rem; }
.sidebar-card:first-child .profile-placeholder i { color: var(--family-coral); }
.profile-placeholder img { height: 100%; object-fit: cover; width: 100%; }
.category-list { display: flex; flex-direction: column; gap: .32rem; }
.category-list a { align-items: center; border-radius: 11px; color: var(--family-text); display: flex; font-size: .88rem; font-weight: 600; gap: .65rem; padding: .56rem .6rem; transition: background-color .16s ease, color .16s ease, transform .16s ease; }
.category-list a:hover { background: linear-gradient(90deg, var(--family-green-light), rgba(234,244,255,.35)); color: var(--family-green-dark); transform: translateX(2px); }
.category-list i { align-items: center; background: #f1f7fe; border-radius: 8px; color: var(--family-green); display: inline-flex; flex: 0 0 auto; font-size: .95rem; height: 28px; justify-content: center; width: 28px; }

.btn-family { background: var(--family-blue); border-color: var(--family-blue); border-radius: 11px; box-shadow: 0 4px 10px rgba(47,128,237,.18); color: var(--family-white); font-weight: 650; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn-family:hover, .btn-family:focus { background: var(--family-green-dark); border-color: var(--family-green-dark); box-shadow: 0 6px 14px rgba(31,95,175,.22); color: var(--family-white); transform: translateY(-1px); }
.btn-family-outline { background: var(--family-blue); border: 1px solid var(--family-blue); border-radius: 11px; box-shadow: 0 4px 10px rgba(47,128,237,.16); color: var(--family-white); font-size: .83rem; font-weight: 650; padding: .47rem .85rem; transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn-family-outline:hover { background: var(--family-blue-dark); border-color: var(--family-blue-dark); box-shadow: 0 6px 14px rgba(31,95,175,.2); color: var(--family-white); transform: translateY(-1px); }

.composer-card { align-items: center; display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.35rem; padding: 1.05rem 1.15rem; }
.composer-prompt { background: #f7faff; border: 1px solid #e8eff7; border-radius: 30px; color: var(--family-text-muted); flex: 1; min-width: 190px; padding: .68rem 1.05rem; transition: background-color .16s ease, border-color .16s ease; }
.composer-prompt:hover { background: var(--family-blue-light); border-color: var(--family-blue-soft); color: var(--family-blue-dark); }
.composer-actions { align-items: center; display: flex; gap: .8rem; width: 100%; }
.composer-actions > a:first-child { border-top: 1px solid var(--family-border); color: var(--family-green-dark); flex: 1; font-size: .9rem; padding-top: .7rem; }
.composer-actions .btn { border-top: 0; padding: .45rem .85rem; }

.post-create-card { margin: 1rem auto; max-width: 760px; padding: 1.7rem; }
.post-create-header { align-items: center; border-bottom: 1px solid var(--family-border); display: flex; gap: .85rem; margin-bottom: 1.4rem; padding-bottom: 1rem; }
.post-create-header .eyebrow { margin-bottom: .1rem; }
.post-create-header h1 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.55rem; letter-spacing: normal; margin: 0; }
.post-create-header p { color: var(--family-text-muted); font-size: .82rem; margin: .1rem 0 0; }
.post-create-actions { align-items: center; display: flex; gap: .7rem; justify-content: flex-end; }
.form-select { background-color: #fbfdff; border-color: var(--family-border); border-radius: 12px; }
.form-select:focus { border-color: var(--family-blue); box-shadow: 0 0 0 .2rem rgba(47,128,237,.14); }
.current-images-section { border-top: 1px solid var(--family-border); margin: 1.35rem 0; padding-top: 1.2rem; }
.current-images-heading { align-items: baseline; display: flex; gap: .7rem; justify-content: space-between; margin-bottom: .75rem; }
.current-images-heading h2 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1rem; font-weight: 750; letter-spacing: normal; margin: 0; }
.current-images-heading span { color: var(--family-text-muted); font-size: .72rem; }
.current-images-grid { display: grid; gap: .7rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.current-image-card { background: #f8fbff; border: 1px solid var(--family-border); border-radius: 12px; cursor: pointer; overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease; }
.current-image-card:has(input:checked) { border-color: #d46b76; box-shadow: 0 0 0 2px rgba(212,107,118,.12); }
.current-image-card img { aspect-ratio: 1; display: block; object-fit: cover; width: 100%; }
.current-image-delete { align-items: center; color: #93444d; display: flex; font-size: .72rem; font-weight: 700; gap: .3rem; justify-content: center; padding: .48rem .3rem; }
.current-image-delete input { accent-color: #b84754; height: 15px; width: 15px; }
.current-images-empty { grid-column: 1 / -1; padding: .7rem 0; }

.avatar { align-items: center; background: linear-gradient(145deg, #eef7ff, #fef0f3); border: 2px solid var(--family-white); border-radius: 50%; box-shadow: 0 0 0 1px var(--family-blue-soft), 0 4px 10px rgba(30,58,95,.1); color: var(--family-blue-dark); display: inline-flex; flex: 0 0 auto; height: 44px; justify-content: center; object-fit: cover; width: 44px; }
.avatar-small { font-size: .78rem; height: 31px; width: 31px; }
.post-card { overflow: hidden; position: relative; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.post-card-preview.motion-reveal { opacity: 0; transform: translateY(14px); transition: border-color .2s ease, box-shadow .2s ease, opacity .48s ease, transform .48s ease; }
.post-card-preview.motion-reveal.is-revealed { opacity: 1; transform: translateY(0); }
.post-card::before { background: linear-gradient(90deg, var(--family-blue), #79b8ff, var(--family-coral)); content: ""; height: 3px; left: 0; opacity: .78; position: absolute; right: 0; top: 0; z-index: 2; }
.post-card.category-quote::before { background: linear-gradient(90deg, var(--family-navy), var(--family-blue-soft)); }
.post-card.category-funny::before { background: linear-gradient(90deg, var(--family-orange), #ffd6a6); }
.post-card.category-world::before { background: linear-gradient(90deg, var(--family-blue-dark), #8ec5ff); }
.post-card:hover { border-color: rgba(47,128,237,.18); box-shadow: var(--family-shadow-hover); }
.post-header { align-items: center; background: linear-gradient(180deg, rgba(248,251,255,.7), rgba(255,255,255,0)); display: flex; gap: .8rem; padding: 1.3rem 1.3rem .75rem; }
.post-author { flex: 1; line-height: 1.35; min-width: 0; }
.post-author strong { color: var(--family-brown); display: block; font-size: .93rem; font-weight: 750; }
.post-author div { color: var(--family-text-muted); font-size: .75rem; margin-top: .08rem; }
.post-manage-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .32rem !important; }
.post-manage-actions a { align-items: center; color: var(--family-blue-dark); display: inline-flex; font-size: .7rem; font-weight: 700; gap: .22rem; transition: color .16s ease, transform .16s ease; }
.post-manage-actions a:hover { color: var(--family-blue); transform: translateY(-1px); }
.post-manage-actions .post-delete-link { color: #a64b55; }
.post-manage-actions .post-delete-link:hover { color: #cf3f51; }
.post-badges { align-items: flex-end; display: flex; flex-direction: column; gap: .3rem; }
.category-badge { background: var(--family-green-light); border: 1px solid rgba(47,128,237,.08); border-radius: 20px; color: var(--family-green-dark); font-size: .67rem; font-weight: 700; padding: .28rem .58rem; transition: border-color .16s ease, transform .16s ease; }
.post-card:hover .category-badge { border-color: rgba(47,128,237,.2); transform: translateY(-1px); }
.category-quote .category-badge { background: #f8f5ee; color: var(--family-blue-dark); }
.category-funny .category-badge { background: var(--family-orange-light); color: #9a5d1e; }
.category-world .category-badge { background: var(--family-blue-soft); color: var(--family-navy); }
.privacy-label { align-items: center; background: #f5f7fa; border: 1px solid #edf0f4; border-radius: 20px; color: #687789; display: inline-flex; font-size: .69rem; padding: .16rem .45rem; }
.privacy-label i { margin-right: .2rem; }
.post-body { padding: .35rem 1.3rem 1.18rem; }
.post-body h2 { font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.42rem; letter-spacing: normal; line-height: 1.34; margin-bottom: .68rem; word-spacing: normal; }
.post-body h2 a { color: var(--family-brown); }
.post-body h2 a:hover { color: var(--family-blue-dark); }
.post-copy { color: #454c58; font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: .96rem; font-kerning: normal; letter-spacing: normal; line-height: 1.72; overflow-wrap: anywhere; word-spacing: normal; }

.photo-grid { display: grid; gap: 7px; min-width: 0; padding: 0 9px; }
.gallery-item { background: var(--family-blue-light); border: 0; cursor: zoom-in; display: block; min-height: 0; min-width: 0; overflow: hidden; padding: 0; position: relative; width: 100%; }
.gallery-item::after { background: linear-gradient(180deg, transparent 72%, rgba(20,47,79,.08)); bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; }
.gallery-item img { display: block; height: 100%; object-fit: cover; transition: filter .2s ease, transform .22s ease; width: 100%; }
.gallery-item:focus-visible { outline-offset: -4px; }
.photos-1 { grid-template-columns: 1fr; }
.gallery-detail.photos-1 .gallery-item { align-items: center; display: flex; height: auto; justify-content: center; max-height: 78vh; }
.photos-1 .gallery-item { border-radius: 15px; }
.gallery-detail.photos-1 .gallery-item img { height: auto; max-height: 78vh; object-fit: contain; width: 100%; }
.photos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-detail.photos-2 .gallery-item { height: 340px; }
.photos-2 .gallery-item:first-child { border-radius: 15px 0 0 15px; }
.photos-2 .gallery-item:last-child { border-radius: 0 15px 15px 0; }
.photos-3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, 185px); }
.photos-3 .gallery-item:first-child { border-radius: 15px 0 0 15px; grid-row: 1 / 3; }
.photos-3 .gallery-item:nth-child(2) { border-radius: 0 13px 0 0; }
.photos-3 .gallery-item:nth-child(3) { border-radius: 0 0 13px 0; }
.photos-4, .photos-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-detail.photos-4 .gallery-item, .gallery-detail.photos-many .gallery-item { height: 225px; }
.photos-4 .gallery-item:first-child, .photos-many .gallery-item:first-child { border-radius: 15px 0 0 0; }
.photos-4 .gallery-item:nth-child(2), .photos-many .gallery-item:nth-child(2) { border-radius: 0 15px 0 0; }
.photos-4 .gallery-item:nth-child(3), .photos-many .gallery-item:nth-child(3) { border-radius: 0 0 0 15px; }
.photos-4 .gallery-item:nth-child(4), .photos-many .gallery-item:nth-child(4) { border-radius: 0 0 15px 0; }
.gallery-compact.photos-1 .gallery-item { align-items: center; display: flex; height: auto; justify-content: center; max-height: 460px; }
.gallery-compact.photos-1 .gallery-item img { height: auto; max-height: 460px; object-fit: contain; width: 100%; }
.gallery-compact.photos-2 .gallery-item { height: 220px; }
.gallery-compact.photos-3 { grid-template-rows: repeat(2, 112px); }
.gallery-compact.photos-4 .gallery-item, .gallery-compact.photos-many .gallery-item { height: 135px; }
.gallery-more-overlay { align-items: center; background: rgba(20,47,79,.62); bottom: 0; color: var(--family-white); display: flex; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 2; }
.post-copy-preview { display: -webkit-box; line-clamp: 4; max-height: calc(1.72em * 4); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.post-copy-preview.is-expanded { display: block; line-clamp: unset; max-height: none; overflow: visible; -webkit-box-orient: initial; -webkit-line-clamp: unset; }
.post-copy-toggle, .post-detail-fallback { background: transparent; border: 0; color: var(--family-blue-dark); display: inline-block; font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: .9rem; font-style: normal; font-weight: 700; letter-spacing: normal; line-height: 1.45; margin-top: .12rem; padding: 0; text-decoration: none; transition: color .16s ease, transform .16s ease; word-spacing: normal; }
.post-copy-toggle:hover, .post-copy-toggle:focus-visible, .post-detail-fallback:hover { color: var(--family-brown); text-decoration: underline; }
.post-copy-toggle:hover, .post-detail-fallback:hover { transform: translateY(-1px); }
.post-copy-toggle[hidden] { display: none; }
.post-card-preview .post-body { padding-bottom: .8rem; }
.post-card-preview .post-footer { margin-top: .75rem; }

.post-footer { align-items: center; background: linear-gradient(180deg, #fcfdff, #f8fbff); border-top: 1px solid #eaf0f7; display: flex; font-size: .79rem; gap: .75rem; justify-content: space-between; margin: 1rem 0 0; padding: .78rem 1.2rem; }
.post-footer a { color: var(--family-text-muted); }
.post-footer a:hover { color: var(--family-green-dark); }
.post-engagement { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; }
.like-form { display: inline-flex; margin: 0; }
.like-button, .post-engagement > a, .share-button, .post-footer > a:last-child { align-items: center; border-radius: 9px; display: inline-flex; gap: .3rem; min-height: 30px; padding: .3rem .5rem; transition: background-color .16s ease, color .16s ease, transform .16s ease; }
.like-button { background: transparent; border: 0; color: var(--family-text-muted); font: inherit; transition: background-color .16s ease, color .16s ease, transform .16s ease; }
.like-button:hover, .like-button:focus-visible { background: var(--family-blue-light); color: var(--family-blue-dark); }
.like-button:hover { transform: translateY(-1px); }
.like-button.is-liked { background: var(--family-coral-light); color: var(--family-blue-dark); font-weight: 700; }
.like-button.is-liked i { color: var(--family-coral); }
.like-button i.like-heart-pop { animation: like-heart-pop .36s ease-out; }
.like-button:disabled { cursor: wait; opacity: .65; }
.like-summary { color: var(--family-text-muted); padding: .3rem .48rem; }
.like-summary i { color: var(--family-coral); }
.share-button { background: transparent; border: 0; color: var(--family-text-muted); font: inherit; transition: background-color .16s ease, color .16s ease, transform .16s ease; }
.share-button:hover, .share-button:focus-visible { background: var(--family-blue-light); color: var(--family-blue-dark); }
.share-button:hover { transform: translateY(-1px); }
.post-engagement > a:hover, .post-footer > a:last-child:hover { background: var(--family-blue-light); }
.like-button:active, .share-button:active, .post-engagement > a:active, .post-footer > a:last-child:active, .post-copy-toggle:active, .post-manage-actions a:active, .btn-family:active, .btn-family-outline:active { transform: translateY(0) scale(.98); }
.post-footer > a:last-child { background: rgba(255,255,255,.9); border: 1px solid var(--family-blue-soft); color: var(--family-blue-dark); font-weight: 700; min-height: 36px; padding-left: .65rem; padding-right: .65rem; }
.comment-preview { background: rgba(248,251,255,.78); border-top: 1px solid #eaf0f7; display: flex; flex-direction: column; gap: .65rem; margin: 0; padding: .95rem 1.2rem 1.18rem; }
.comment-row { align-items: flex-start; display: flex; gap: .55rem; }
.comment-row.reply { margin-left: 2.3rem; }
.comment-bubble { background: linear-gradient(145deg, #f7faff, #f2f7fc); border: 1px solid #e6edf5; border-radius: 5px 15px 15px 15px; display: flex; flex-direction: column; font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: .84rem; font-style: normal; letter-spacing: normal; max-width: 100%; padding: .55rem .82rem; overflow-wrap: anywhere; word-spacing: normal; }
.comment-bubble strong { color: var(--family-brown); font-size: .78rem; }
.comment-row small { color: var(--family-text-muted); display: block; font-size: .68rem; margin: .18rem 0 0 .55rem; }

.eyebrow { color: var(--family-green); display: block; font-size: .7rem; font-weight: 800; letter-spacing: normal; margin-bottom: .65rem; text-transform: uppercase; }
.mini-quote { background: linear-gradient(145deg, #fffefa, #f5faff); border-top: 3px solid var(--family-blue); overflow: hidden; position: relative; }
.mini-quote::after { color: rgba(47,128,237,.1); content: "“"; font-family: Georgia, serif; font-size: 7rem; line-height: 1; pointer-events: none; position: absolute; right: .35rem; top: .2rem; }
.mini-quote > * { position: relative; z-index: 1; }
.mini-quote blockquote { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-feature-settings: normal; font-size: 1rem; font-style: normal; font-synthesis: none; font-variation-settings: normal; letter-spacing: normal; line-height: 1.6; word-spacing: normal; }
.mini-quote a, .mini-funny a { align-items: center; display: inline-flex; font-size: .77rem; font-weight: 750; gap: .25rem; }
.mini-funny { background: linear-gradient(145deg, #fffdfa, var(--family-orange-light)); border-top: 3px solid var(--family-orange); overflow: hidden; position: relative; }
.mini-funny::after { color: rgba(245,158,66,.12); content: "☺"; font-size: 4.8rem; pointer-events: none; position: absolute; right: .55rem; top: -.35rem; transform: rotate(8deg); }
.mini-funny > * { position: relative; z-index: 1; }
.mini-funny .eyebrow { color: var(--family-orange); }
.mini-funny + .sidebar-card { border-top: 3px solid var(--family-coral-light); }
.album-grid { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.album-grid a { border: 1px solid var(--family-blue-soft); border-radius: 9px; overflow: hidden; }
.album-grid img { aspect-ratio: 1; display: block; object-fit: cover; transition: transform .25s ease; width: 100%; }
.album-grid:has(a:nth-child(4)) a:first-child { grid-column: span 2; grid-row: span 2; }
.album-empty { align-items: center; background: var(--family-blue-light); border-radius: 12px; color: var(--family-text-muted); display: flex; flex-direction: column; font-size: .75rem; gap: .3rem; justify-content: center; min-height: 105px; text-align: center; }
.album-empty i { color: var(--family-green); font-size: 1.6rem; }
.stats-card { background: linear-gradient(145deg, #fbfdff, #f1f7fe); display: flex; padding: 1.05rem; }
.stats-card div { align-items: center; display: flex; flex: 1; flex-direction: column; }
.stats-card div + div { border-left: 1px solid var(--family-border); }
.stats-card strong { color: var(--family-blue); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.3rem; line-height: 1.2; }
.stats-card span { color: var(--family-text-muted); font-size: .7rem; }
.empty-note { color: var(--family-text-muted); font-size: .85rem; margin: 0; }
.empty-state { color: var(--family-text-muted); padding: 3rem 1.5rem; text-align: center; }
.empty-state i { color: var(--family-green); display: block; font-size: 2.2rem; margin-bottom: .8rem; }
.empty-state h1, .empty-state h2 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.35rem; letter-spacing: normal; }

.section-hero { align-items: center; background: linear-gradient(135deg, #f8fbff, var(--family-blue-light)); border: 1px solid var(--family-blue-soft); border-radius: 22px; box-shadow: var(--family-shadow); display: flex; gap: 1rem; margin-bottom: 1.7rem; overflow: hidden; padding: 1.5rem 1.7rem; position: relative; }
.section-hero::after { background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%); content: ""; height: 180px; pointer-events: none; position: absolute; right: -55px; top: -85px; width: 180px; }
.section-hero > * { position: relative; z-index: 1; }
.section-hero.quote-page { background: #fffefa; border-color: var(--family-blue-soft); }
.section-hero.funny-page { background: var(--family-orange-light); border-color: #f8d9b8; }
.section-hero.world-page { background: var(--family-blue-light); border-color: var(--family-blue-soft); }
.section-icon { align-items: center; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 4px 12px rgba(30,58,95,.08); color: var(--family-green-dark); display: flex; flex: 0 0 auto; font-size: 1.4rem; height: 52px; justify-content: center; width: 52px; }
.funny-page .section-icon { color: #a56625; }
.world-page .section-icon { color: var(--family-green-dark); }
.section-hero.quote-page h1 { color: var(--family-blue-dark); }
.section-hero.funny-page h1 { color: #a56625; }
.section-hero h1 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.65rem; letter-spacing: normal; margin: 0 0 .1rem; }
.section-hero p { color: var(--family-text-muted); margin: 0; }
.quote-page .post-card { background: linear-gradient(145deg, #ffffff, #fffefa); border-left: 4px solid var(--family-blue); position: relative; }
.quote-page .post-body { padding-left: 2.6rem; position: relative; }
.quote-page .post-body::before { color: var(--family-blue-soft); content: "“"; font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-size: 4rem; left: .7rem; line-height: 1; position: absolute; top: -.2rem; }
.quote-page .post-copy { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-feature-settings: normal; font-size: 1.08rem; font-style: normal; font-synthesis: none; font-variation-settings: normal; letter-spacing: normal; word-spacing: normal; }
.category-quote .post-copy { font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-feature-settings: normal; font-style: normal; font-synthesis: none; font-variation-settings: normal; letter-spacing: normal; word-spacing: normal; }
.funny-page .post-card { border-top: 3px solid var(--family-orange); }

.timeline-shell { margin: 0 auto; max-width: 1040px; }
.timeline-hero { align-items: center; background: linear-gradient(135deg, #fffdf9, var(--family-blue-light)); border: 1px solid var(--family-blue-soft); border-radius: 24px; box-shadow: var(--family-shadow); display: flex; gap: 1rem; margin-bottom: 2.2rem; overflow: hidden; padding: 1.65rem 1.8rem; position: relative; }
.timeline-hero::before { background: radial-gradient(circle, rgba(255,232,237,.85), rgba(255,232,237,0) 70%); content: ""; height: 190px; left: -70px; pointer-events: none; position: absolute; top: -105px; width: 190px; }
.timeline-hero::after { background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); bottom: -95px; content: ""; height: 200px; pointer-events: none; position: absolute; right: -60px; width: 200px; }
.timeline-hero > * { position: relative; z-index: 1; }
.timeline-hero-icon { align-items: center; background: var(--family-white); border: 1px solid var(--family-blue-soft); border-radius: 50%; box-shadow: 0 5px 14px rgba(30,58,95,.09); color: var(--family-coral); display: flex; flex: 0 0 auto; font-size: 1.45rem; height: 56px; justify-content: center; width: 56px; }
.timeline-hero .eyebrow { margin-bottom: .25rem; }
.timeline-hero h1 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.85rem; letter-spacing: normal; margin: 0; }
.timeline-hero p { color: var(--family-text-muted); margin: .18rem 0 0; }
.timeline-year + .timeline-year { margin-top: 2.4rem; }
.timeline-year-heading { align-items: center; color: var(--family-navy); display: flex; font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.55rem; gap: .8rem; letter-spacing: normal; margin: 0 0 1rem; }
.timeline-year-heading::after { background: linear-gradient(90deg, var(--family-blue-soft), transparent); content: ""; height: 1px; width: min(360px, 45vw); }
.timeline-year-heading span { background: var(--family-white); border: 1px solid var(--family-blue-soft); border-radius: 20px; box-shadow: 0 3px 10px rgba(30,58,95,.05); padding: .28rem .8rem; }
.timeline-month + .timeline-month { margin-top: 1.7rem; }
.timeline-month-heading { background: var(--family-blue-light); border: 1px solid rgba(47,128,237,.08); border-radius: 20px; color: var(--family-blue-dark); display: table; font-size: .7rem; font-weight: 800; letter-spacing: normal; margin: 0 0 .85rem 96px; padding: .24rem .65rem; text-transform: uppercase; }
.timeline-list { padding-left: 96px; position: relative; }
.timeline-list::before { background: linear-gradient(180deg, var(--family-blue), var(--family-blue-soft) 18%, rgba(220,238,255,.18)); bottom: .35rem; content: ""; left: 68px; position: absolute; top: .4rem; width: 2px; }
.timeline-item { position: relative; }
.timeline-item + .timeline-item { margin-top: 1.05rem; }
.timeline-date { color: var(--family-text-muted); font-size: .75rem; font-weight: 750; position: absolute; right: calc(100% + 48px); text-align: right; top: 1.3rem; width: 48px; }
.timeline-dot { background: var(--family-blue); border: 4px solid var(--family-blue-light); border-radius: 50%; box-shadow: 0 0 0 2px var(--family-white); height: 14px; left: -35px; position: absolute; top: 1.42rem; width: 14px; z-index: 1; }
.timeline-item:nth-child(even) .timeline-dot { background: var(--family-coral); }
.timeline-item:first-child .timeline-dot { align-items: center; background: var(--family-white); border: 1px solid var(--family-coral-light); color: var(--family-coral); display: flex; font-size: .72rem; height: 22px; justify-content: center; left: -39px; top: 1.16rem; width: 22px; }
.timeline-item:first-child .timeline-dot::before { content: "♥"; }
.timeline-card { border-left: 3px solid rgba(47,128,237,.55); display: flex; min-width: 0; overflow: hidden; position: relative; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.timeline-card:hover { border-color: rgba(47,128,237,.18); box-shadow: var(--family-shadow-hover); }
.timeline-card-content { flex: 1 1 auto; min-width: 0; padding: 1.2rem 1.3rem; }
.timeline-meta { align-items: center; color: var(--family-text-muted); display: flex; flex-wrap: wrap; font-size: .7rem; gap: .42rem .65rem; margin-bottom: .55rem; }
.timeline-meta > span:first-child { margin-right: auto; }
.timeline-meta .category-badge, .timeline-meta .privacy-label { font-size: .64rem; }
.timeline-card h4 { font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.18rem; letter-spacing: normal; line-height: 1.35; margin: 0 0 .48rem; }
.timeline-card h4 a { color: var(--family-navy); }
.timeline-card h4 a:hover { color: var(--family-blue-dark); }
.timeline-excerpt { color: #4c5563; font-size: .89rem; line-height: 1.68; margin: 0; }
.timeline-card-footer { align-items: center; border-top: 1px solid #edf1f6; color: var(--family-text-muted); display: flex; flex-wrap: wrap; font-size: .71rem; gap: .45rem 1rem; margin-top: .9rem; padding-top: .72rem; }
.timeline-card-footer i { color: var(--family-coral); }
.timeline-card-footer span:nth-child(2) i { color: var(--family-blue); }
.timeline-card-footer a { font-weight: 750; margin-left: auto; }
.timeline-image { background: var(--family-blue-light); flex: 0 0 200px; min-height: 164px; overflow: hidden; position: relative; }
.timeline-image::after { background: linear-gradient(90deg, rgba(20,47,79,.08), transparent 35%); bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; }
.timeline-image img { height: 100%; object-fit: cover; transition: transform .2s ease; width: 100%; }
.timeline-image:hover img { transform: scale(1.015); }
.timeline-empty { background: linear-gradient(145deg, var(--family-white), var(--family-surface-warm)); color: var(--family-text-muted); padding: 3.8rem 1.5rem; text-align: center; }
.timeline-empty > i { color: var(--family-blue); display: block; font-size: 2.5rem; margin-bottom: .8rem; }
.timeline-empty h2 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.35rem; letter-spacing: normal; margin: 0; }

.site-about-card { margin: 1rem auto; max-width: 780px; padding: 2.5rem; text-align: center; }
.site-about-icon { align-items: center; background: var(--family-green-light); border-radius: 50%; color: var(--family-green-dark); display: flex; font-size: 2rem; height: 76px; justify-content: center; margin: 0 auto 1.1rem; width: 76px; }
.site-about-icon img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.site-about-card h1 { color: var(--family-green-dark); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 2rem; letter-spacing: normal; margin-bottom: 1.5rem; }
.site-about-copy { color: #504d47; margin: 0 auto 1.8rem; max-width: 640px; text-align: left; }
.site-about-copy p { margin-bottom: 1rem; }

.about-card { display: grid; gap: 3rem; grid-template-columns: minmax(280px, .8fr) 1.4fr; margin: 1rem auto; max-width: 1000px; overflow: hidden; padding: 2rem; }
.about-photo img, .about-placeholder { border-radius: 18px; height: 100%; min-height: 440px; object-fit: cover; width: 100%; }
.about-placeholder { align-items: center; background: var(--family-blue-light); color: var(--family-blue-dark); display: flex; flex-direction: column; gap: .8rem; justify-content: center; }
.about-placeholder i { font-size: 3rem; }
.about-content { align-self: center; }
.about-content h1 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 2.25rem; letter-spacing: normal; margin-bottom: 1rem; }
.about-lead { color: #4c5563; font-size: 1.03rem; }
.about-sections { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin: 1.5rem 0; }
.about-sections > div { background: #f7faff; border: 1px solid #edf3fa; border-radius: 14px; padding: 1rem; }
.about-sections i { color: var(--family-green); }
.about-sections h2 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1rem; letter-spacing: normal; margin: .4rem 0; }
.about-sections p { color: var(--family-text-muted); font-size: .84rem; margin: 0; }
.favorite-quote { border-left: 3px solid var(--family-coral); color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-style: italic; letter-spacing: normal; margin: 1.4rem 0; padding-left: 1rem; }

.detail-column { margin: 0 auto; max-width: 780px; }
.back-link { display: inline-block; font-size: .85rem; margin-bottom: 1rem; }
.comments-section { margin-top: 1.35rem; padding: 1.45rem; }
.comments-section > h2 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.25rem; letter-spacing: normal; margin-bottom: 1.2rem; }
.main-comment-form { align-items: flex-start; display: flex; gap: .65rem; }
.comment-input, .form-control { background-color: #fbfdff; border-color: var(--family-border); border-radius: 12px; padding: .7rem .85rem; }
.comment-input:focus, .form-control:focus { border-color: var(--family-blue); box-shadow: 0 0 0 .2rem rgba(47,128,237,.14); }
.form-error { color: #a33b35; font-size: .8rem; margin-top: .3rem; }
.login-to-comment { align-items: center; background: var(--family-green-light); border-radius: 12px; color: var(--family-text-muted); display: flex; font-size: .88rem; gap: .7rem; padding: .85rem 1rem; }
.comments-list { border-top: 1px solid var(--family-border); display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.1rem; padding-top: 1.1rem; }
.comment-thread > .reply { margin-top: .65rem; }
.reply-control { margin: .3rem 0 0 2.3rem; }
.reply-control summary { color: var(--family-green-dark); cursor: pointer; font-size: .72rem; font-weight: 700; }
.reply-control form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.reply-control .btn { align-self: flex-end; }

.auth-card { margin: 2.5rem auto; max-width: 440px; padding: 2rem; text-align: center; }
.auth-icon { align-items: center; background: var(--family-green-light); border-radius: 50%; color: var(--family-green-dark); display: flex; font-size: 1.6rem; height: 60px; justify-content: center; margin: 0 auto 1rem; width: 60px; }
.auth-card h1 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.8rem; letter-spacing: normal; }
.auth-card > p, .auth-card > small { color: var(--family-text-muted); }
.auth-card form { margin: 1.5rem 0; text-align: left; }
.form-label { color: var(--family-brown); font-size: .82rem; font-weight: 700; }
.form-alert { background: #f9e7e3; border-radius: 10px; color: #8e3c34; font-size: .84rem; padding: .75rem; }
.family-message-stack { margin: 0 auto 1.25rem; max-width: 780px; }
.family-message { align-items: center; background: #eef8f2; border: 1px solid #cfe9d9; border-radius: 12px; box-shadow: 0 5px 16px rgba(30,58,95,.06); color: #286044; display: flex; font-size: .86rem; font-weight: 650; gap: .5rem; padding: .7rem .9rem; }
.family-message i { color: #3a9b69; }
.share-dialog { background: transparent; border: 0; max-width: min(420px, calc(100vw - 2rem)); padding: 0; width: 100%; }
.share-dialog::backdrop { background: rgba(20, 47, 79, .42); backdrop-filter: blur(2px); }
.share-dialog-card { background: var(--family-white); border: 1px solid var(--family-border); border-radius: 18px; box-shadow: 0 24px 70px rgba(20,47,79,.2); padding: 1.25rem; }
.share-dialog-header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.share-dialog-header .eyebrow { margin-bottom: .15rem; }
.share-dialog-header h2 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.25rem; letter-spacing: normal; margin: 0; }
.share-dialog-close { align-items: center; background: #f5f7fa; border: 0; border-radius: 50%; color: var(--family-text-muted); display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }
.share-dialog-close:hover { background: var(--family-blue-light); color: var(--family-blue-dark); }
.share-dialog-options { display: grid; gap: .55rem; margin-top: 1rem; }
.share-dialog-options button { align-items: center; background: #f8fbff; border: 1px solid #e5edf6; border-radius: 12px; color: var(--family-navy); display: flex; font-weight: 650; gap: .7rem; padding: .72rem .8rem; text-align: left; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; width: 100%; }
.share-dialog-options button:hover { background: var(--family-blue-light); border-color: var(--family-blue-soft); transform: translateY(-1px); }
.share-dialog-options button i { color: var(--family-blue); font-size: 1.05rem; width: 1.2rem; }
.share-dialog-options button:first-child i { color: #1877f2; }
.share-feedback { color: #286044; font-size: .82rem; font-weight: 650; min-height: 1.4rem; margin: .7rem 0 .15rem; text-align: center; }
.share-cancel { width: 100%; }
.image-lightbox { background: transparent; border: 0; height: 100vh; max-height: 100vh; max-width: 100vw; padding: 0; width: 100vw; }
.image-lightbox::backdrop { background: rgba(7,16,28,.92); }
.image-lightbox-shell { align-items: center; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; height: 100%; padding: 1.25rem; position: relative; width: 100%; }
.image-lightbox-figure { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; margin: 0; min-height: 0; min-width: 0; }
.image-lightbox-figure img { display: block; max-height: calc(100vh - 5.5rem); max-width: 100%; object-fit: contain; }
.image-lightbox-figure figcaption { color: rgba(255,255,255,.82); font-size: .82rem; min-height: 1.25rem; padding-top: .55rem; text-align: center; }
.image-lightbox-close, .image-lightbox-nav { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: var(--family-white); display: inline-flex; height: 46px; justify-content: center; transition: background-color .16s ease, transform .16s ease; width: 46px; z-index: 2; }
.image-lightbox-close:hover, .image-lightbox-nav:hover { background: rgba(255,255,255,.23); color: var(--family-white); transform: scale(1.03); }
.image-lightbox-close { position: absolute; right: 1.25rem; top: 1.25rem; }
.image-lightbox-nav { justify-self: center; }
.image-lightbox-nav[hidden] { display: none !important; }
.image-lightbox-previous { grid-column: 1; }
.image-lightbox-next { grid-column: 3; }
.image-lightbox-figure { grid-column: 2; grid-row: 1; }
.delete-confirm-card { margin: 2.5rem auto; max-width: 600px; padding: 2.4rem 2rem; text-align: center; }
.delete-confirm-icon { align-items: center; background: #fff0f1; border-radius: 50%; color: #b84754; display: flex; font-size: 1.5rem; height: 62px; justify-content: center; margin: 0 auto 1rem; width: 62px; }
.delete-confirm-card h1 { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.65rem; letter-spacing: normal; margin-bottom: .8rem; }
.delete-confirm-card > p { color: var(--family-text-muted); }
.delete-confirm-card .delete-post-title { color: var(--family-navy); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: normal; }
.delete-confirm-card form { display: flex; gap: .7rem; justify-content: center; margin-top: 1.5rem; }
.btn-danger-family { background: #b84754; border: 1px solid #b84754; border-radius: 11px; color: var(--family-white); font-weight: 700; padding: .48rem .85rem; }
.btn-danger-family:hover, .btn-danger-family:focus { background: #963b46; border-color: #963b46; color: var(--family-white); }
.registration-card { max-width: 700px; padding: 2.15rem; }
.registration-icon { background: linear-gradient(145deg, var(--family-blue-light), var(--family-coral-light)); color: var(--family-coral); }
.registration-fields { display: grid; gap: 1rem 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.registration-field { min-width: 0; }
.registration-field-wide { grid-column: 1 / -1; }
.registration-field .form-label span { color: var(--family-coral); }
.registration-field .form-control { min-height: 44px; }
.form-help { color: var(--family-text-muted); font-size: .72rem; line-height: 1.45; margin-top: .35rem; }
.form-help ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.registration-success-card { max-width: 560px; padding: 2.7rem 2rem; }
.registration-success-icon { background: var(--family-coral-light); color: var(--family-coral); }
.registration-success-card h1 span { font-size: .72em; }
.registration-note { align-items: center; background: var(--family-blue-light); border: 1px solid var(--family-blue-soft); border-radius: 12px; display: flex; font-size: .86rem; gap: .55rem; justify-content: center; margin: 1.25rem 0 1.5rem; padding: .8rem 1rem; }
.registration-note i { color: var(--family-blue-dark); font-size: 1rem; }

.error-card { margin: 4rem auto; max-width: 600px; padding: 3rem 2rem; text-align: center; }
.error-code { color: var(--family-green); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 4rem; font-weight: 700; line-height: 1; }
.error-card h1 { color: var(--family-brown); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: 1.65rem; letter-spacing: normal; margin: 1rem 0 .6rem; }
.error-card p { color: var(--family-text-muted); }
.family-footer { background: rgba(255,255,255,.55); border-top: 1px solid var(--family-border); color: var(--family-text-muted); font-family: Arial, "Segoe UI", Tahoma, sans-serif; font-size: .86rem; padding: 1.6rem; text-align: center; }

@keyframes brand-heart-pulse {
    0%, 86%, 100% { transform: scale(1); }
    91% { transform: scale(1.08); }
    96% { transform: scale(1); }
}

@keyframes hero-gentle-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, -7px, 0) rotate(3deg); }
}

@keyframes like-heart-pop {
    0%, 100% { transform: scale(1); }
    48% { transform: scale(1.25); }
}

@media (hover: hover) and (pointer: fine) {
    .post-card:hover { transform: translateY(-3px); }
    .sidebar-card:hover { border-color: rgba(47,128,237,.16); box-shadow: var(--family-shadow-hover); transform: translateY(-2px); }
    .timeline-card:hover { transform: translateX(3px); }
    .gallery-item:hover img { filter: saturate(1.04) contrast(1.01); transform: scale(1.015); }
    .album-grid a:hover img { transform: scale(1.025); }
    .post-engagement > a:hover, .post-footer > a:last-child:hover { transform: translateY(-1px); }
    .navbar-nav .nav-link.active:hover { transform: none; }
}

@media (min-width: 992px) {
    .navbar-nav { flex-wrap: nowrap; gap: .08rem; }
    .navbar-nav .nav-item,
    .navbar-nav .nav-link,
    .nav-account,
    .user-chip { white-space: nowrap; }
    .navbar-nav .nav-link { padding-left: .5rem; padding-right: .5rem; }
    .nav-account { flex-wrap: nowrap; gap: .5rem; }
    .user-chip { padding-left: .2rem; padding-right: .42rem; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand { font-size: 1.12rem; }
    .navbar-brand small { font-size: .58rem; }
    .navbar-nav .nav-link { font-size: .72rem; padding: .46rem .38rem; }
    .nav-account { gap: .4rem; }
    .user-chip { font-size: .78rem; gap: .3rem; }
}

@media (max-width: 991.98px) {
    .family-navbar { min-height: 70px; }
    .navbar-collapse { background: rgba(255,255,255,.94); border: 1px solid rgba(47,128,237,.1); border-radius: 16px; box-shadow: 0 12px 28px rgba(30,58,95,.1); margin: .35rem 0 .25rem; padding: .7rem; }
    .navbar-nav { align-items: stretch; gap: .18rem; }
    .navbar-nav .nav-link { padding: .55rem .75rem; }
    .nav-account { border-top: 1px solid var(--family-border); margin-top: .6rem; padding: .7rem 0; }
    .about-card { gap: 2rem; grid-template-columns: .8fr 1.2fr; }
}

@media (max-width: 767.98px) {
    .page-shell { padding-left: .75rem; padding-right: .75rem; padding-top: 1rem; }
    .home-mini-hero { border-radius: 16px; margin-bottom: 1rem; min-height: 0; padding: .85rem 1rem; }
    .home-mini-hero-icon { font-size: 1rem; height: 42px; width: 42px; }
    .home-mini-hero h1 { font-size: 1.06rem; }
    .home-mini-hero p { font-size: .8rem; }
    .family-card { border-radius: 15px; }
    .post-header { align-items: flex-start; padding: 1rem .9rem .6rem; }
    .post-badges { max-width: 105px; }
    .post-body { padding: .2rem .9rem .9rem; }
    .post-body h2 { font-size: 1.22rem; }
    .photo-grid { padding: 0 3px; }
    .gallery-detail.photos-1 .gallery-item, .gallery-detail.photos-1 .gallery-item img { max-height: 78vh; }
    .gallery-detail.photos-2 .gallery-item, .gallery-detail.photos-4 .gallery-item, .gallery-detail.photos-many .gallery-item { height: 48vw; max-height: 260px; }
    .gallery-detail.photos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .gallery-detail.photos-3 .gallery-item:first-child { border-radius: 12px 12px 0 0; grid-column: 1 / 3; grid-row: auto; height: min(65vw, 380px); }
    .gallery-detail.photos-3 .gallery-item:nth-child(2) { border-radius: 0 0 0 12px; height: min(44vw, 240px); }
    .gallery-detail.photos-3 .gallery-item:nth-child(3) { border-radius: 0 0 12px 0; height: min(44vw, 240px); }
    .gallery-compact.photos-1 .gallery-item, .gallery-compact.photos-1 .gallery-item img { max-height: min(70vh, 420px); }
    .gallery-compact.photos-2 .gallery-item { height: min(42vw, 220px); }
    .gallery-compact.photos-3 { grid-template-rows: repeat(2, min(27vw, 132px)); }
    .gallery-compact.photos-4 .gallery-item, .gallery-compact.photos-many .gallery-item { height: min(34vw, 165px); }
    .current-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .current-images-heading { align-items: flex-start; flex-direction: column; gap: .15rem; }
    .image-lightbox-shell { grid-template-columns: 48px minmax(0, 1fr) 48px; padding: .65rem; }
    .image-lightbox-close, .image-lightbox-nav { height: 42px; width: 42px; }
    .image-lightbox-close { right: .75rem; top: .75rem; }
    .image-lightbox-figure img { max-height: calc(100vh - 4.5rem); }
    .post-footer, .comment-preview { margin-left: 0; margin-right: 0; padding-left: .9rem; padding-right: .9rem; }
    .section-hero { align-items: flex-start; border-radius: 15px; padding: 1.1rem; }
    .section-hero h1 { font-size: 1.4rem; }
    .section-icon { height: 42px; width: 42px; }
    .about-card { display: block; padding: 1rem; }
    .about-photo img, .about-placeholder { height: 340px; min-height: 0; }
    .about-content { padding: 1.4rem .35rem .4rem; }
    .about-content h1 { font-size: 1.8rem; }
    .about-sections { grid-template-columns: 1fr; }
    .site-about-card { padding: 1.6rem 1.2rem; }
    .site-about-card h1 { font-size: 1.65rem; }
    .comments-section { padding: 1rem .85rem; }
    .main-comment-form .avatar { display: none; }
    .timeline-hero { align-items: flex-start; border-radius: 16px; margin-bottom: 1.4rem; padding: 1.15rem; }
    .timeline-hero-icon { font-size: 1.2rem; height: 44px; width: 44px; }
    .timeline-hero h1 { font-size: 1.5rem; }
    .timeline-hero p { font-size: .88rem; }
    .timeline-year-heading { font-size: 1.35rem; }
    .timeline-month-heading { margin-left: 0; }
    .timeline-list { padding-left: 0; }
    .timeline-list::before, .timeline-dot { display: none; }
    .timeline-date { display: inline-block; margin: 0 0 .4rem .35rem; position: static; text-align: left; width: auto; }
    .timeline-card { flex-direction: column; }
    .timeline-card-content { padding: 1.05rem; }
    .timeline-image { flex-basis: auto; height: min(54vw, 250px); min-height: 0; order: -1; width: 100%; }
}

@media (max-width: 575.98px) {
    .navbar-brand { font-size: 1.28rem; }
    .navbar-brand small { font-size: .58rem; }
    .page-shell { padding-left: .65rem; padding-right: .65rem; }
    .post-header { gap: .65rem; }
    .post-body h2 { font-size: 1.18rem; }
    .post-copy { font-size: .93rem; }
    .timeline-meta > span:first-child { flex-basis: 100%; }
    .timeline-card-footer { gap: .4rem .7rem; }
    .timeline-card-footer a { flex-basis: 100%; margin-left: 0; margin-top: .15rem; }
    .registration-card { padding: 1.5rem 1.05rem; }
    .registration-fields { display: block; }
    .registration-field { margin-bottom: 1rem; }
    .registration-success-card { padding: 2.2rem 1.15rem; }
    .delete-confirm-card { margin-top: 1rem; padding: 2rem 1rem; }
    .hero-motion-decor { display: none; }
}

@media (max-width: 420px) {
    .post-header { flex-wrap: wrap; }
    .post-badges { align-items: center; flex-direction: row; margin-left: 48px; margin-top: -.35rem; max-width: none; width: 100%; }
    .post-footer { align-items: flex-start; flex-direction: column; gap: .45rem; }
    .post-engagement { gap: .35rem .6rem; width: 100%; }
    .post-footer > a:last-child { align-self: flex-end; min-height: 40px; }
    .post-footer a { font-size: .74rem; }
    .comment-row.reply { margin-left: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    .brand-heart, .hero-motion-decor span, .like-button i.like-heart-pop { animation: none !important; }
    .post-card-preview.motion-reveal, .post-card-preview.motion-reveal.is-revealed { opacity: 1 !important; transform: none !important; }
}

.post-copy,
.mini-quote blockquote,
.mini-funny p,
.comment-bubble > span,
.timeline-excerpt {
    font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
    font-style: normal !important;
    font-weight: 400;
    font-kerning: auto;
    font-variant: normal !important;
    font-feature-settings: normal !important;
    font-variation-settings: normal !important;
    font-synthesis: none;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-rendering: auto;
    text-transform: none;
}

button,
input,
select,
textarea,
.btn,
.form-control,
.form-select {
    font-family: Arial, "Segoe UI", Tahoma, sans-serif !important;
    letter-spacing: normal !important;
}