:root {
  --accent: #a5543c;
  --accent-dark: #7f3e2e;
  --accent-soft: #f2ddd4;
  --ink: #252a26;
  --muted: #6c746e;
  --line: #dedfd9;
  --paper: #fffdf9;
  --canvas: #f5f3ed;
  --sage: #607465;
  --sage-soft: #dfe7df;
  --gold: #a98544;
  --gold-soft: #f2e8cd;
  --blue: #607d91;
  --blue-soft: #dce8ed;
  --rose: #a86670;
  --rose-soft: #f0dfe2;
  --shadow: 0 18px 55px rgba(47, 43, 34, .1);
  --hero-gradient: linear-gradient(125deg, #8f4634 0%, #b96448 50%, #d39a72 100%);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.primary-button, .secondary-button, .outline-button, .light-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 17px; border: 0; border-radius: 11px; font-weight: 750; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button { color: #fff; background: var(--accent); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 24%, transparent); }
.primary-button:hover, .light-button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 30%, transparent); }
.primary-button svg, .light-button svg { width: 17px; }
.secondary-button, .outline-button { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.secondary-button:hover, .outline-button:hover { background: #f8f6f0; border-color: #c5c7c0; }
.outline-button.small { min-height: 36px; padding: 6px 13px; font-size: 13px; }
.light-button { color: var(--accent-dark); background: #fff; }
.link-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 0; border: 0; color: var(--accent); background: none; font-weight: 750; cursor: pointer; }
.link-button svg { width: 15px; }
.icon-button { display: inline-grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button:hover { background: rgba(40, 42, 38, .06); }
.icon-button.subtle { border: 1px solid var(--line); background: #fff; }
.full-width { width: 100%; }

/* Landing */
.auth-view { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; background: #f2eee4; }
.landing-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 14px clamp(22px, 5vw, 76px); border-bottom: 1px solid rgba(91, 86, 70, .12); }
.landing-brand, .app-brand { display: flex; align-items: center; gap: 12px; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.landing-brand em { color: var(--accent); font-weight: 400; }
.brand-mark { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 50% 48% 45% 52%; color: #fff; background: var(--accent); font-family: Georgia, serif; font-size: 22px; font-weight: 500; box-shadow: inset 0 0 0 4px rgba(255,255,255,.16); transform: rotate(-3deg); }
.privacy-note { display: flex; align-items: center; gap: 7px; color: #73776e; font-size: 13px; font-weight: 650; }
.privacy-note svg { width: 15px; }
.landing-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); min-height: 690px; }
.welcome-panel { position: relative; display: flex; align-items: center; overflow: hidden; padding: 70px clamp(30px, 6vw, 100px) 205px; background: radial-gradient(circle at 76% 20%, rgba(255,255,255,.65), transparent 22%), linear-gradient(145deg, #e9e0ce 0%, #f4eee2 55%, #ddd7c5 100%); }
.welcome-content { position: relative; z-index: 2; max-width: 720px; }
.welcome-content h1 { margin: 12px 0 22px; max-width: 690px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(47px, 5.1vw, 78px); font-weight: 400; line-height: 1.04; letter-spacing: -.045em; }
.welcome-content h1 span { color: var(--accent); font-style: italic; }
.welcome-copy { max-width: 560px; margin: 0; color: #60665f; font-family: Georgia, serif; font-size: clamp(18px, 1.8vw, 23px); line-height: 1.6; }
.family-proof { display: flex; align-items: center; gap: 16px; margin-top: 35px; }
.family-proof p { margin: 0; color: #696f67; font-size: 13px; line-height: 1.45; }
.family-proof strong { color: var(--ink); font-size: 14px; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar-stack .avatar { margin-left: -8px; border: 3px solid #ede6d8; }
.avatar { display: inline-grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.avatar-sage { background: #667c6b; }.avatar-gold { background: #b07c3f; }.avatar-blue { background: #607e91; }.avatar-rose { background: #ad6873; }
.botanical { position: absolute; z-index: 1; opacity: .45; transform-origin: bottom; }
.botanical::before { content: ""; position: absolute; width: 2px; height: 220px; background: #82927c; transform: rotate(-24deg); }
.botanical span { position: absolute; width: 52px; height: 22px; border-radius: 100% 0 100% 0; background: #9fac92; }
.botanical span:nth-child(1) { top: 40px; left: -34px; transform: rotate(30deg); }.botanical span:nth-child(2) { top: 100px; left: 15px; transform: rotate(210deg); }.botanical span:nth-child(3) { top: 150px; left: -12px; transform: rotate(18deg); }
.botanical-one { top: 55px; right: 9%; transform: rotate(25deg); }.botanical-two { bottom: 60px; left: 7%; transform: rotate(-160deg) scale(.75); }
.memory-strip { position: absolute; z-index: 3; right: -25px; bottom: -15px; left: 10%; height: 225px; }
.memory-card { position: absolute; width: 190px; padding: 9px 9px 26px; background: #fffdf9; box-shadow: 0 16px 32px rgba(63, 55, 42, .2); transform: rotate(-5deg); }
.memory-card small { display: block; padding: 8px 3px 0; font-family: "Segoe Print", cursive; font-size: 11px; }
.memory-card-one { left: 3%; bottom: 2px; }.memory-card-two { left: 35%; bottom: 22px; transform: rotate(4deg); }.memory-card-three { left: 66%; bottom: 0; transform: rotate(-2deg); }
.memory-art { display: block; height: 132px; background-color: #acb9a4; }
.art-lake { background: radial-gradient(circle at 68% 28%, #fff9c2 0 7%, transparent 8%), linear-gradient(165deg, #88a7b4 0 48%, #526f73 49% 62%, #9ca47f 63%); }
.art-picnic { background: radial-gradient(circle at 45% 65%, #d2a176 0 9%, transparent 10%), linear-gradient(145deg, #8aa279 0 55%, #d0b882 56%); }
.art-sunset { background: radial-gradient(circle at 55% 48%, #ffe3a7 0 11%, transparent 12%), linear-gradient(#d79a83 0 53%, #8e7380 54%); }
.login-panel { position: relative; display: grid; padding: 55px clamp(28px, 5vw, 84px); place-items: center; background: var(--paper); }
.login-panel::before { content: ""; position: absolute; inset: 25px; border: 1px solid #e8e4da; pointer-events: none; }
.login-card { position: relative; z-index: 2; width: min(100%, 440px); }
.login-heading { margin-bottom: 30px; text-align: center; }
.login-flourish { display: grid; width: 57px; height: 57px; margin: 0 auto 18px; place-items: center; border: 1px solid #cfc5b4; border-radius: 50%; color: var(--accent); font-family: Georgia, serif; font-size: 28px; }
.login-heading h2 { margin: 3px 0 8px; font-family: Georgia, serif; font-size: 38px; font-weight: 500; letter-spacing: -.03em; }
.login-heading > p:last-child { margin: 0; color: var(--muted); }
.login-card form { display: grid; }
.login-card label, .settings-form > label { margin: 0 0 7px; font-size: 13px; font-weight: 750; }
.login-card input, .settings-form input, .settings-form textarea, .modal input, .modal textarea, .modal select { width: 100%; margin-bottom: 18px; padding: 13px 14px; border: 1px solid #d8d7d0; border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
.login-card input:focus, .settings-form input:focus, .settings-form textarea:focus, .modal input:focus, .modal textarea:focus, .modal select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.password-field { position: relative; }
.password-field input { padding-right: 66px; }
.text-button { position: absolute; top: 13px; right: 13px; border: 0; color: var(--accent); background: none; font-size: 12px; font-weight: 800; cursor: pointer; }
.form-error { min-height: 20px; margin: -10px 0 7px; color: #a33434; font-size: 12px; }
.login-button { width: 100%; min-height: 50px; }
.demo-divider { display: flex; align-items: center; gap: 12px; margin: 23px 0 15px; color: #96998f; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.demo-divider::before, .demo-divider::after { content: ""; height: 1px; flex: 1; background: #e4e2db; }
.login-card > .secondary-button { width: 100%; }
.security-copy { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 25px auto 0; color: #858980; font-size: 11px; text-align: center; }
.security-copy svg { width: 14px; flex: 0 0 auto; }
.landing-footer { display: flex; justify-content: space-between; min-height: 48px; padding: 15px clamp(22px, 5vw, 76px); color: #83877f; background: #ebe7de; font-family: Georgia, serif; font-size: 12px; font-style: italic; }

/* App shell */
.app-view { min-height: 100vh; }
.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: 260px; flex-direction: column; padding: 22px 17px 18px; border-right: 1px solid #dddcd5; background: #f7f5ef; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 7px 20px; }
.app-brand { gap: 10px; font-size: 16px; }
.app-brand .brand-mark { width: 37px; height: 37px; font-size: 19px; }
.app-brand > span:last-child { display: flex; flex-direction: column; }
.app-brand small { margin-top: 1px; color: var(--muted); font-family: Inter, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.close-sidebar { display: none; }
.main-nav { flex: 1; }
.main-nav p { margin: 20px 12px 8px; color: #96998f; font-size: 9px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.main-nav a { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding: 11px 12px; border-radius: 10px; color: #5c645e; font-size: 13px; font-weight: 650; transition: .2s; }
.main-nav a svg { width: 18px; }
.main-nav a:hover { color: var(--ink); background: #edebe5; }
.main-nav a.active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 800; }
.nav-badge { display: grid; min-width: 20px; height: 20px; margin-left: auto; padding: 0 5px; place-items: center; border-radius: 10px; color: #667069; background: #e3e4df; font-size: 9px; }
.nav-badge.accent { color: #fff; background: var(--accent); }
.sidebar-family { display: flex; align-items: center; gap: 9px; margin: 10px 5px 14px; padding: 12px; border: 1px solid #e0dfd8; border-radius: 12px; background: rgba(255,255,255,.6); }
.tiny-avatars { display: flex; width: 47px; }
.tiny-avatars span { display: grid; width: 25px; height: 25px; margin-right: -10px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--sage); font-size: 7px; font-weight: 800; }
.tiny-avatars span:nth-child(2) { background: var(--gold); }.tiny-avatars span:nth-child(3) { background: var(--blue); }
.sidebar-family > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.sidebar-family strong { font-size: 11px; }.sidebar-family small { color: var(--muted); font-size: 9px; }
.logout-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; color: #7a7e77; background: none; font-size: 12px; font-weight: 650; cursor: pointer; }
.logout-button:hover { color: #9d4237; background: #f1e6e2; }.logout-button svg { width: 17px; }
.sidebar-scrim { display: none; }
.app-shell { min-height: 100vh; margin-left: 260px; display: flex; flex-direction: column; }
.app-header { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 13px clamp(22px, 4vw, 55px); border-bottom: 1px solid var(--line); background: rgba(250,249,245,.92); backdrop-filter: blur(15px); }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-left p { margin: 0; color: var(--muted); font-family: Georgia, serif; font-size: 11px; font-style: italic; }
.header-left h1 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.menu-button { display: none; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.search-box, .compact-search { display: flex; align-items: center; gap: 8px; width: min(24vw, 270px); padding: 9px 12px; border: 1px solid #deded8; border-radius: 10px; color: #8a8f88; background: #fff; }
.search-box svg, .compact-search svg { width: 16px; flex: 0 0 auto; }
.search-box input, .compact-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.notification-button { position: relative; }.notification-button span { position: absolute; top: 9px; right: 8px; width: 7px; height: 7px; border: 2px solid #faf9f5; border-radius: 50%; background: var(--accent); }
.profile-chip { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.profile-chip:hover { background: #eeece6; }
.profile-chip > span:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; }
.profile-chip strong { font-size: 12px; }.profile-chip small { color: var(--muted); font-size: 9px; }.profile-chip > svg { width: 14px; }
.content { width: 100%; max-width: 1650px; flex: 1; margin: 0 auto; padding: 32px clamp(22px, 4vw, 55px) 60px; }
.page { display: none; animation: page-in .3s ease; }.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
.panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 5px 20px rgba(48,47,41,.035); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-heading h3, .panel h3 { margin: 0; font-family: Georgia, serif; font-size: 21px; font-weight: 500; }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin: 5px 0 28px; }
.section-intro h2 { margin: 3px 0 5px; font-family: Georgia, serif; font-size: clamp(31px, 3vw, 42px); font-weight: 500; letter-spacing: -.035em; }
.section-intro > div > p:last-child { margin: 0; color: var(--muted); }

/* Dashboard */
.hero-card { position: relative; display: grid; min-height: 335px; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); overflow: hidden; border-radius: 26px; color: #fff; background: var(--hero-gradient); box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-card::before { content: ""; position: absolute; width: 360px; height: 360px; top: -235px; left: 34%; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.035), 0 0 0 100px rgba(255,255,255,.025); }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 48px clamp(30px, 4vw, 65px); }
.hero-copy .eyebrow { color: rgba(255,255,255,.72); }
.hero-copy h2 { max-width: 630px; margin: 8px 0 13px; font-family: Georgia, serif; font-size: clamp(35px, 3.8vw, 55px); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; }
.hero-copy > p:not(.eyebrow) { max-width: 590px; margin: 0 0 23px; color: rgba(255,255,255,.8); font-family: Georgia, serif; font-size: 16px; }
.hero-collage { position: relative; min-height: 335px; }
.collage-photo { position: absolute; padding: 8px 8px 24px; background: #fff; box-shadow: 0 18px 35px rgba(43,31,27,.27); }
.collage-photo .scene { display: block; height: 100%; min-height: 80px; border-radius: 0; }
.collage-photo small { display: block; padding: 5px 2px 0; color: #4f514c; font-family: "Segoe Print", cursive; font-size: 9px; }
.photo-main { z-index: 2; width: 235px; height: 225px; top: 48px; left: 12%; transform: rotate(-3deg); }.photo-main .scene { height: 177px; }
.photo-small-one { z-index: 1; width: 135px; height: 130px; top: 25px; right: 5%; transform: rotate(7deg); }.photo-small-two { z-index: 3; width: 145px; height: 140px; right: 3%; bottom: 22px; transform: rotate(5deg); }
.hand-note { position: absolute; z-index: 4; right: 16%; bottom: 17px; color: #fff0e7; font-family: "Segoe Print", cursive; font-size: 11px; transform: rotate(-5deg); }
.scene { position: relative; display: block; overflow: hidden; background-color: #91a081; }
.scene::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(160deg, transparent 20%, rgba(53,69,55,.45) 21% 38%, transparent 39%), linear-gradient(20deg, #788168, #a7a173); }
.scene-meadow { background: radial-gradient(circle at 70% 25%, #fff6bc 0 5%, transparent 6%), linear-gradient(#9bb0b8 0 52%, #80936a 53%); }.scene-cake { background: radial-gradient(ellipse at 50% 68%, #e4b88b 0 20%, transparent 21%), linear-gradient(145deg,#d7c2a4,#9f6e60); }.scene-coast { background: linear-gradient(#9eb4bd 0 48%, #6f9296 49% 64%, #c1b593 65%); }.scene-sunset { background: radial-gradient(circle at 68% 49%, #ffd79b 0 8%, transparent 9%), linear-gradient(#d3978e 0 54%, #787187 55%); }.scene-holiday { background: radial-gradient(circle at 48% 39%, #f3d798 0 5%, transparent 6%), linear-gradient(135deg, #526e5c, #8b4c4d); }
.scene-garden { background: radial-gradient(circle at 25% 64%, #ecd68a 0 3%, transparent 4%), radial-gradient(circle at 65% 70%, #d99a83 0 4%, transparent 5%), linear-gradient(#a4b9af 0 42%, #718268 43%); }.scene-lake { background: linear-gradient(#9db4bd 0 45%, #698b91 46% 67%, #64795e 68%); }.scene-kitchen { background: radial-gradient(ellipse at 55% 72%, #ddaa7b 0 17%, transparent 18%), linear-gradient(135deg, #d5c5ab, #8c7968); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.stats-row article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.stat-icon { grid-row: 1 / 3; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; }.stat-icon svg { width: 19px; }.stat-icon.rose { color: var(--rose); background: var(--rose-soft); }.stat-icon.sage { color: var(--sage); background: var(--sage-soft); }.stat-icon.gold { color: var(--gold); background: var(--gold-soft); }.stat-icon.blue { color: var(--blue); background: var(--blue-soft); }
.stats-row strong { display: block; font-family: Georgia, serif; font-size: 24px; font-weight: 500; line-height: 1; }.stats-row small { color: var(--muted); font-size: 10px; }.stats-row em { grid-column: 2; color: #8e928b; font-size: 9px; font-style: normal; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); gap: 18px; }
.recent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.recent-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.recent-card > .scene { height: 145px; }.privacy-tag { position: absolute; z-index: 3; top: 9px; left: 9px; display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 20px; color: #fff; background: rgba(35,38,35,.58); backdrop-filter: blur(4px); font-size: 8px; font-weight: 700; }.privacy-tag svg { width: 9px; height: 9px; }
.recent-card > div:last-child { display: flex; align-items: center; gap: 8px; padding: 11px; }.recent-card .avatar { width: 29px; height: 29px; font-size: 8px; }.recent-card p { display: flex; min-width: 0; flex: 1; flex-direction: column; margin: 0; }.recent-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.recent-card small { color: var(--muted); font-size: 8px; }
.heart-button { display: flex; align-items: center; gap: 3px; padding: 5px; border: 0; color: #8f938c; background: none; font-size: 9px; cursor: pointer; }.heart-button svg { width: 15px; }.heart-button.liked { color: var(--accent); }.heart-button.liked svg { fill: currentColor; }
.event-list { display: grid; gap: 4px; margin-bottom: 17px; }.event-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid #e9e8e2; }.event-item:last-child { border: 0; }.event-date { display: grid; width: 43px; height: 47px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); line-height: 1; }.event-date small { margin-top: 6px; font-size: 8px; font-weight: 800; text-transform: uppercase; }.event-date strong { margin-top: -6px; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }.event-item > div:last-child { display: flex; min-width: 0; flex-direction: column; }.event-item > div:last-child strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.event-item > div:last-child small { color: var(--muted); font-size: 9px; }
.quote-card { position: relative; overflow: hidden; margin-top: 18px; padding: 22px 80px; border: 1px solid #ddd8cb; border-radius: 15px; background: #ebe7dc; text-align: center; }.quote-card blockquote { margin: 0; font-family: Georgia, serif; font-size: 18px; font-style: italic; }.quote-card cite { color: #8a8d85; font-size: 9px; font-style: normal; letter-spacing: .11em; text-transform: uppercase; }.quote-mark { position: absolute; top: -12px; left: 35px; color: rgba(126,119,97,.18); font-family: Georgia, serif; font-size: 100px; }.leaf-line { position: absolute; right: 35px; bottom: -35px; width: 100px; height: 100px; border: 1px solid rgba(89,111,88,.3); border-radius: 100% 0; transform: rotate(25deg); }

/* Feed */
.feed-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .65fr); gap: 20px; align-items: start; }.feed-list { display: grid; gap: 17px; }.feed-post { padding: 0; overflow: hidden; }.post-head { display: flex; align-items: center; gap: 11px; padding: 19px 21px 14px; }.post-head > div { display: flex; flex: 1; flex-direction: column; }.post-head strong { font-size: 13px; }.post-head small { color: var(--muted); font-size: 10px; }.post-privacy { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }.post-privacy svg { width: 11px; }.post-body { padding: 0 21px 17px; }.post-body h3 { margin: 0 0 5px; }.post-body p { margin: 0; color: #5f665f; font-size: 13px; }.post-image { height: 300px; }.post-actions { display: flex; gap: 4px; padding: 10px 15px; border-top: 1px solid var(--line); }.post-actions button { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 0; color: var(--muted); background: none; font-size: 11px; font-weight: 700; cursor: pointer; }.post-actions button svg { width: 17px; }.post-actions button.liked { color: var(--accent); }.post-actions button.liked svg { fill: currentColor; }.feed-aside { display: grid; gap: 16px; position: sticky; top: 100px; }.feed-aside .panel > p { color: var(--muted); font-size: 12px; }.highlight-number { margin-top: 12px; color: var(--accent); font-family: Georgia, serif; font-size: 52px; line-height: 1; }.progress { height: 6px; overflow: hidden; border-radius: 4px; background: #e9e8e2; }.progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }.birthday-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }.birthday-row:last-child { border: 0; }.birthday-row > div { display: flex; flex-direction: column; }.birthday-row strong { font-size: 12px; }.birthday-row small { color: var(--muted); font-size: 10px; }

/* Albums */
.album-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.filter-pills { display: flex; gap: 5px; padding: 4px; border-radius: 12px; background: #eae8e1; }.filter-pills button { padding: 7px 13px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }.filter-pills button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(40,40,35,.08); }.compact-search { width: 210px; }.album-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.album-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); transition: transform .2s, box-shadow .2s; }.album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.album-card > div:last-child { padding: 17px; }.album-card h3 { margin: 0 0 4px; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }.album-card p:not(.eyebrow) { margin: 0 0 8px; color: var(--muted); font-size: 11px; }.album-card small { color: #989b94; font-size: 9px; }.album-cover { position: relative; height: 210px; background: #879c8c; }.album-cover::after { content: ""; position: absolute; inset: 8px 8px -8px; z-index: -1; border-radius: 14px; background: #fff; border: 1px solid var(--line); }.album-cover span { position: absolute; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 12px; color: #fff; background: rgba(36,39,36,.6); font-size: 9px; }.cover-coast { background: radial-gradient(circle at 72% 27%,#ffe4af 0 7%,transparent 8%),linear-gradient(#9eb7bd 0 48%,#668b91 49% 66%,#b4a67c 67%); }.cover-garden { background: radial-gradient(circle at 30% 67%,#e1bb73 0 5%,transparent 6%),radial-gradient(circle at 60% 60%,#bd766b 0 6%,transparent 7%),linear-gradient(#abc0b2 0 42%,#708365 43%); }.cover-party { background: radial-gradient(circle at 35% 32%,#e6aa9e 0 4%,transparent 5%),radial-gradient(circle at 68% 24%,#d9b56e 0 4%,transparent 5%),linear-gradient(145deg,#e8d4bc,#9c7782); }.cover-mountain { background: linear-gradient(145deg,transparent 0 55%,#657366 56%),linear-gradient(215deg,transparent 0 51%,#7a8977 52%),linear-gradient(#a9bdc3 0 63%,#72816e 64%); }.cover-holiday { background: radial-gradient(circle at 51% 40%,#e7d08f 0 7%,transparent 8%),linear-gradient(140deg,#5f7868,#8c4f4d); }.album-featured { grid-column: span 2; display: grid; grid-template-columns: 1.4fr 1fr; }.album-featured .album-cover { height: 290px; }.album-featured > div:last-child { display: flex; flex-direction: column; justify-content: center; padding: 28px; }.album-featured h3 { font-size: 29px; }.empty-state { padding: 75px 20px; color: var(--muted); text-align: center; }.empty-state svg { width: 38px; height: 38px; }.empty-state h3 { color: var(--ink); font-family: Georgia, serif; font-weight: 500; }

/* Calendar */
.calendar-layout { display: grid; grid-template-columns: minmax(550px, 2fr) minmax(260px, .7fr); gap: 20px; align-items: start; }.calendar-panel { padding: 22px; }.calendar-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }.calendar-controls h3 { min-width: 180px; text-align: center; }.calendar-controls .small { margin-left: auto; }.flip { transform: rotate(180deg); }.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }.weekday-row span { padding: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }.calendar-day { position: relative; min-height: 100px; padding: 8px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: #fff; }.calendar-day:nth-child(7n) { border-right: 1px solid var(--line); }.calendar-day:nth-last-child(-n+7) { border-bottom: 1px solid var(--line); }.calendar-day.muted { color: #b5b7b1; background: #f8f7f3; }.calendar-day.today .day-number { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); }.day-number { display: block; font-size: 11px; font-weight: 700; }.calendar-event { display: block; overflow: hidden; margin-top: 5px; padding: 4px 5px; border-left: 3px solid var(--accent); border-radius: 3px; color: var(--accent-dark); background: var(--accent-soft); font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.calendar-event.birthday { border-color: var(--gold); color: #765b28; background: var(--gold-soft); }.calendar-event.visit { border-color: var(--sage); color: #3f5d4d; background: var(--sage-soft); }.agenda-panel { position: sticky; top: 100px; }.agenda-panel h3 { margin-bottom: 18px; }.agenda-list { display: grid; gap: 13px; }.agenda-card { display: grid; grid-template-columns: 45px 1fr; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.agenda-card:last-child { border: 0; }.agenda-card .event-date { width: 43px; }.agenda-card strong { font-size: 11px; }.agenda-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }

/* Workflow */
.workflow-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: -10px 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--paper); font-size: 10px; }.workflow-legend span { display: flex; align-items: center; gap: 6px; }.dot { width: 8px; height: 8px; border-radius: 50%; }.dot.uploaded { background:#8596a0;}.dot.review{background:#b48142}.dot.approved{background:#668068}.dot.featured{background:#a5543c}.dot.locked{background:#6d6475}
.workflow-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 18px; }.workflow-column { min-height: 490px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: #eceae4; }.workflow-column.drag-over { border-color: var(--accent); background: var(--accent-soft); }.workflow-heading { display: flex; align-items: center; gap: 7px; padding: 5px 3px 12px; }.workflow-heading h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }.workflow-heading span:last-child { display: grid; width: 20px; height: 20px; margin-left: auto; place-items: center; border-radius: 50%; color: var(--muted); background: #fff; font-size: 9px; }.workflow-list { display: grid; align-content: start; gap: 9px; min-height: 430px; }.workflow-card { overflow: hidden; border: 1px solid #dbdad4; border-radius: 11px; background: #fff; box-shadow: 0 3px 8px rgba(44,44,39,.05); cursor: grab; }.workflow-card:active { cursor: grabbing; }.workflow-thumb { height: 112px; }.workflow-info { padding: 10px; }.workflow-info h4 { margin: 0; font-family: Georgia, serif; font-size: 13px; font-weight: 500; }.workflow-info p { margin: 3px 0 8px; color: var(--muted); font-size: 8px; }.workflow-meta { display: flex; align-items: center; justify-content: space-between; }.workflow-meta span { color: #92968e; font-size: 8px; }.move-button { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); background: #fff; cursor: pointer; }.move-button:hover { color: #fff; background: var(--accent); }.move-button svg { width: 13px; }.workflow-empty { padding: 40px 10px; color: #999c95; font-size: 9px; text-align: center; }

/* Settings */
.save-indicator { padding: 7px 11px; border-radius: 15px; color: var(--sage); background: var(--sage-soft); font-size: 10px; font-weight: 700; }.settings-layout { display: grid; grid-template-columns: minmax(500px, 1.2fr) minmax(320px, .8fr); gap: 25px; align-items: start; }.settings-form { display: block; }.setting-section { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }.setting-number { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-family: Georgia, serif; font-size: 12px; }.setting-section h3 { margin-bottom: 2px; }.setting-section p { margin: 0; color: var(--muted); font-size: 10px; }.settings-form > label { display: flex; justify-content: space-between; }.settings-form > label span { color: #9a9d96; font-size: 9px; font-weight: 500; }.settings-form textarea { resize: vertical; }.settings-form hr { height: 1px; margin: 10px 0 25px; border: 0; background: var(--line); }.swatch-row { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }.swatch { width: 38px; height: 38px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #d4d3cc; cursor: pointer; }.swatch.active { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }.custom-color { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 1px dashed #b9bbb4; border-radius: 50%; cursor: pointer; }.custom-color input { position: absolute; width: 1px; height: 1px; opacity: 0; }.custom-color svg { width: 16px; }.gradient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.gradient-grid button { padding: 5px; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }.gradient-grid button.active { border-color: var(--accent); }.gradient-grid span { display: block; height: 58px; border-radius: 7px; }.gradient-grid small { display: block; margin-top: 5px; font-size: 9px; }.gradient-sunset { background: linear-gradient(125deg,#8f4634,#d39a72); }.gradient-garden { background: linear-gradient(125deg,#506c5c,#9aaf85); }.gradient-coast { background: linear-gradient(125deg,#507587,#91b5bd); }.gradient-lavender { background: linear-gradient(125deg,#675a78,#b18fa0); }.setting-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }.preview-column { position: sticky; top: 100px; }.theme-preview { position: relative; min-height: 465px; overflow: hidden; padding: 50px 35px 190px; border: 8px solid #fff; border-radius: 23px; color: #fff; background: var(--hero-gradient); box-shadow: var(--shadow); }.theme-preview::before { content: ""; position: absolute; width: 250px; height: 250px; top: -155px; right: -30px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.04); }.preview-label { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }.theme-preview h3 { position: relative; margin: 10px 0; font-family: Georgia, serif; font-size: 35px; font-weight: 400; line-height: 1.1; }.theme-preview > p { position: relative; color: rgba(255,255,255,.8); font-family: Georgia, serif; font-size: 13px; }.theme-preview button { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 8px 11px; border: 0; border-radius: 8px; color: var(--accent-dark); background: #fff; font-size: 9px; font-weight: 700; }.theme-preview button svg { width: 12px; }.preview-photo { position: absolute; right: -10px; bottom: -15px; width: 75%; padding: 8px 8px 25px; background: #fff; transform: rotate(-5deg); box-shadow: 0 12px 30px rgba(28,24,21,.3); }.preview-photo .scene { height: 155px; }.preview-note { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 10px; }.preview-note svg { width: 15px; flex: 0 0 auto; }

/* Modal and feedback */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; padding: 20px; place-items: center; background: rgba(30,31,28,.55); backdrop-filter: blur(5px); }.modal { position: relative; width: min(100%, 520px); max-height: 90vh; overflow-y: auto; padding: 30px; border-radius: 20px; background: var(--paper); box-shadow: 0 30px 80px rgba(20,20,18,.28); animation: modal-in .25s ease; }@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}}.modal-close { position: absolute; top: 14px; right: 14px; }.modal h2 { margin: 3px 0 7px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }.modal .modal-copy { margin: 0 0 22px; color: var(--muted); font-size: 12px; }.modal form { display: grid; }.modal label { margin: 0 0 6px; font-size: 12px; font-weight: 750; }.modal textarea { resize: vertical; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }.drop-zone { display: grid; min-height: 190px; margin-bottom: 20px; padding: 25px; place-items: center; border: 2px dashed #cbc9c0; border-radius: 14px; color: var(--muted); background: #f8f6f0; text-align: center; cursor: pointer; }.drop-zone:hover { border-color: var(--accent); background: var(--accent-soft); }.drop-zone svg { width: 33px; height: 33px; color: var(--accent); }.drop-zone strong { display: block; color: var(--ink); }.drop-zone input { display: none; }.toast { position: fixed; z-index: 150; right: 25px; bottom: 25px; padding: 12px 17px; border-radius: 10px; color: #fff; background: #303630; box-shadow: 0 12px 30px rgba(25,28,25,.25); font-size: 12px; font-weight: 650; opacity: 0; pointer-events: none; transform: translateY(15px); transition: .25s; }.toast.show { opacity: 1; transform: none; }
.app-footer { display: flex; justify-content: space-between; padding: 20px clamp(22px, 4vw, 55px); border-top: 1px solid var(--line); color: #93968f; font-size: 9px; }.app-footer span:last-child { display: flex; align-items: center; gap: 5px; }.app-footer svg { width: 11px; }

@media (max-width: 1180px) {
  .landing-main { grid-template-columns: 1fr 450px; }.welcome-panel { padding-left: 45px; }.welcome-content h1 { font-size: 54px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }.upcoming-panel { order: -1; }.event-list { grid-template-columns: repeat(3, 1fr); }.event-item { border-right: 1px solid var(--line); border-bottom: 0; padding-right: 10px; }.event-item:last-child { border-right: 0; }
  .album-grid { grid-template-columns: repeat(2, 1fr); }.calendar-layout { grid-template-columns: 1fr; }.agenda-panel { position: static; }.settings-layout { grid-template-columns: 1fr; }.preview-column { position: static; }.theme-preview { min-height: 380px; }
}
@media (max-width: 900px) {
  .landing-main { grid-template-columns: 1fr; }.welcome-panel { min-height: 690px; }.login-panel { min-height: 690px; }.landing-footer { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; }.sidebar.open { transform: none; box-shadow: 20px 0 50px rgba(30,30,27,.18); }.close-sidebar, .menu-button { display: grid; }.sidebar-scrim { position: fixed; z-index: 45; inset: 0; background: rgba(30,31,28,.42); }.sidebar-scrim.show { display: block; }.app-shell { margin-left: 0; }.search-box { display: none; }
  .hero-card { grid-template-columns: 1fr; }.hero-collage { min-height: 295px; }.hero-copy { padding-bottom: 20px; }.feed-layout { grid-template-columns: 1fr; }.feed-aside { position: static; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .landing-header { min-height: 67px; padding: 12px 18px; }.landing-brand { font-size: 17px; }.privacy-note { font-size: 0; }.welcome-panel { min-height: 635px; align-items: flex-start; padding: 65px 24px 190px; }.welcome-content h1 { font-size: 42px; }.welcome-copy { font-size: 17px; }.memory-strip { left: 0; transform: scale(.78); transform-origin: left bottom; width: 125%; }.login-panel { min-height: 650px; padding: 55px 24px; }.login-panel::before { inset: 12px; }
  .app-header { padding: 11px 15px; }.header-left h1 { font-size: 18px; }.header-left p { display: none; }.profile-chip > span:nth-child(2), .profile-chip > svg { display: none; }.notification-button { display: none; }.content { padding: 22px 15px 45px; }.section-intro { align-items: flex-start; flex-direction: column; }.section-intro .primary-button { width: 100%; }
  .hero-card { border-radius: 18px; }.hero-copy { padding: 35px 23px 15px; }.hero-copy h2 { font-size: 34px; }.photo-main { left: 7%; }.stats-row { grid-template-columns: 1fr 1fr; }.stats-row article { padding: 12px; }.stat-icon { width: 35px; height: 35px; }.stats-row strong { font-size: 19px; }.stats-row small { font-size: 8px; }.recent-grid { grid-template-columns: 1fr; }.recent-card > .scene { height: 190px; }.panel { padding: 18px; }.event-list { grid-template-columns: 1fr; }.event-item { border-right: 0; border-bottom: 1px solid var(--line); }.quote-card { padding: 22px 35px; }
  .feed-aside { grid-template-columns: 1fr; }.post-image { height: 220px; }.album-toolbar { align-items: stretch; flex-direction: column; }.filter-pills { overflow-x: auto; }.compact-search { width: 100%; }.album-grid { grid-template-columns: 1fr; }.album-featured { grid-column: auto; display: block; }.album-featured .album-cover { height: 220px; }
  .calendar-layout { display: block; }.calendar-panel { overflow-x: auto; }.weekday-row, .calendar-grid { min-width: 620px; }.agenda-panel { margin-top: 16px; }.calendar-day { min-height: 86px; }
  .settings-layout { display: block; }.settings-form { margin-bottom: 20px; }.gradient-grid { grid-template-columns: repeat(2, 1fr); }.setting-actions { flex-direction: column-reverse; }.setting-actions button { width: 100%; }.theme-preview { padding: 35px 24px 170px; }.theme-preview h3 { font-size: 30px; }.modal { padding: 26px 20px; }
  .app-footer { flex-direction: column; gap: 5px; }.toast { right: 15px; bottom: 15px; left: 15px; text-align: center; }
}

/* Holly's family room: personal, photographic, and intentionally not an admin UI. */
.signed-in .family-topbar {
  inset: 0 0 auto;
  width: auto;
  height: 78px;
  flex-direction: row;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding: 11px clamp(18px, 3.3vw, 54px);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(7,9,15,.98), rgba(8,10,17,.9));
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  backdrop-filter: blur(20px);
}
.family-topbar .sidebar-top { flex: 0 0 auto; padding: 0; }
.family-topbar .app-brand { min-width: 205px; }
.family-topbar .app-brand .brand-mark { width: 42px; height: 42px; background: linear-gradient(145deg, color-mix(in srgb,var(--accent) 88%,#fff), var(--accent)); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 8px 22px color-mix(in srgb,var(--accent) 25%,transparent); }
.family-topbar .app-brand strong { font-size: 17px; }.family-topbar .app-brand small { color: #77737c; font-size: 8px; letter-spacing: .12em; }
.family-topbar .main-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2px; }
.family-topbar .main-nav a { position: relative; gap: 7px; margin: 0; padding: 9px 11px; border-radius: 99px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.family-topbar .main-nav a svg { display: none; width: 15px; }
.signed-in .family-topbar .main-nav a.active { color: #fff; background: rgba(255,255,255,.075); box-shadow: none; }
.signed-in .family-topbar .main-nav a.active::after { content:""; position:absolute; right:13px; bottom:3px; left:13px; height:2px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.family-topbar .sidebar-family { margin: 0 5px 0 0; padding: 7px 9px; border: 0; background: transparent; }.family-topbar .sidebar-family strong { color:#d9d7dd; }.family-topbar .sidebar-family small { color:#6f717a; }
.family-topbar .profile-chip { padding: 3px 7px; }.family-topbar .profile-chip .avatar { width:34px; height:34px; }
.family-topbar .logout-button { width: 37px; height: 37px; padding: 0; justify-content:center; border-radius:50%; }.family-topbar .logout-button span { display:none; }
.family-topbar .close-sidebar { display:none; }
.signed-in .app-shell { margin-left: 0; padding-top: 78px; }
.signed-in .app-header { position: relative; top: auto; width: min(100%,1780px); min-height: 65px; margin: 0 auto; padding: 15px clamp(22px,4vw,55px) 4px; border: 0; background: transparent; box-shadow:none; backdrop-filter:none; }
.signed-in .header-left p { color:#716f79; font-family:Inter,sans-serif; font-size:8px; font-style:normal; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.signed-in .header-left h1 { font-family:Georgia,serif; font-size:18px; }
.signed-in .notification-button { background:rgba(255,255,255,.04); }
.signed-in .content { padding-top: 12px; }

/* Family photographs are treated as prints, not illustrations or dashboard tiles. */
.signed-in .scene, .auth-view .memory-art { isolation:isolate; filter:saturate(.82) contrast(1.05); }
.signed-in .scene::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.16),transparent 20%),radial-gradient(circle at 80% 75%,rgba(0,0,0,.3),transparent 40%),repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); mix-blend-mode:soft-light; }
.signed-in .scene::after { z-index:1; }
.feature-tile > .scene, .signed-in .album-cover { border:1px solid rgba(255,245,225,.13); box-shadow:0 18px 40px rgba(0,0,0,.3),inset 0 0 45px rgba(0,0,0,.18); }
.feature-tile:nth-child(2n) { transform:translateY(7px); }.feature-tile:nth-child(2n):hover { transform:translateY(2px) scale(1.01); }
.feature-tile h3 { font-family:Georgia,serif; font-size:15px; font-weight:500; }.feature-tile p { color:#76727b; }
.signed-in .album-card { overflow:visible; border:0; background:transparent; box-shadow:none; }.signed-in .album-card:hover { border:0; background:transparent; box-shadow:none; }.signed-in .album-card > div:last-child { padding:10px 4px 6px; }.signed-in .album-card h3 { font-family:Georgia,serif; font-size:14px; font-weight:500; }.signed-in .album-cover { overflow:hidden; border-radius:13px; }
.signed-in .album-cover > span { z-index:4; display:flex; align-items:center; gap:4px; backdrop-filter:blur(9px); }.signed-in .album-cover > span svg { width:10px; height:10px; }
.vault-rail { position:relative; padding:22px; border:1px solid rgba(255,255,255,.075); border-radius:18px; background:linear-gradient(135deg,rgba(44,38,52,.38),rgba(12,15,23,.3)); }.vault-rail::before { content:"Family only"; position:absolute; top:22px; right:22px; color:#716f79; font-size:8px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }

.cinematic-hero { min-height: 570px; border:0; border-radius:28px; box-shadow:0 35px 90px rgba(0,0,0,.5); }
.cinematic-hero::before { width:55%; background:linear-gradient(90deg,rgba(18,13,20,.92),rgba(24,17,25,.7) 62%,transparent); opacity:1; }
.cinematic-hero .hero-copy { align-self:end; max-width:780px; padding:65px clamp(30px,5vw,78px); }
.cinematic-hero .hero-copy h2 { margin:5px 0 11px; max-width:700px; font-size:clamp(50px,5.5vw,82px); line-height:.98; letter-spacing:-.045em; }
.room-welcome { margin:0 0 13px !important; color:color-mix(in srgb,var(--accent) 65%,#fff) !important; font-family:"Segoe Print",cursive !important; font-size:13px !important; font-style:italic; }
.cinematic-hero .hero-copy > #custom-site-subtitle { max-width:520px; margin-bottom:14px; color:rgba(255,255,255,.75); font-size:15px; }
.hero-portrait { inset:0 0 0 24%; background:radial-gradient(circle at 70% 23%,rgba(255,222,157,.8) 0 4%,transparent 5%),radial-gradient(ellipse at 76% 62%,rgba(34,28,26,.48) 0 8%,transparent 9%),radial-gradient(ellipse at 61% 65%,rgba(43,35,31,.45) 0 9%,transparent 10%),linear-gradient(#8297a1 0 48%,#526348 49%); }
.hero-vignette { background:linear-gradient(90deg,rgba(8,8,13,.87) 0%,rgba(8,8,13,.58) 38%,transparent 70%),linear-gradient(0deg,rgba(5,6,10,.68),transparent 48%),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.28)); }
.hero-reactions { display:flex; align-items:center; gap:8px; margin:0 0 22px; color:#b8b5bc; font-size:9px; }.hero-reactions strong { color:#e3e0e6; font-weight:650; }.hero-reactions .reaction-dots i { border-color:rgba(14,13,18,.8); }

.family-whisper { display:flex; align-items:center; gap:15px; margin:4px 0 26px; padding:12px 4px; color:#8c8992; }.family-whisper .avatar-stack { flex:0 0 auto; }.family-whisper .avatar-stack .avatar { border-color:#0b0d14; }.family-whisper p { flex:1; margin:0; font-family:Georgia,serif; font-size:13px; font-style:italic; }.family-whisper p strong { color:#d8d5db; font-weight:500; }.family-whisper > span { display:flex; align-items:center; gap:6px; color:#696771; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }.family-whisper > span svg { width:11px; }
.signed-in .home-widgets .panel { border:0; background:linear-gradient(145deg,rgba(31,28,38,.72),rgba(14,16,24,.5)); box-shadow:none; backdrop-filter:blur(14px); }
.home-widgets { grid-template-columns:minmax(300px,.8fr) minmax(500px,1.2fr); }
.home-widgets .panel-heading h3 { font-size:24px; }.home-widgets .panel-heading { border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:15px; }
.mini-kanban { grid-template-columns:repeat(3,1fr); }.mini-kanban > div { border:0; background:rgba(255,255,255,.045); }.review-preview-cards .scene { transform:rotate(-1.5deg); border:4px solid rgba(240,234,224,.9); border-bottom-width:12px; box-shadow:0 8px 20px rgba(0,0,0,.25); }.review-preview-cards article:nth-child(2) .scene { transform:rotate(2deg); }

/* The feed reads like a family scrapbook with cinematic images. */
.signed-in .feed-layout { grid-template-columns:minmax(0,1.7fr) minmax(250px,.5fr); max-width:1200px; }
.signed-in .feed-post { overflow:hidden; border:0; border-radius:24px; background:linear-gradient(145deg,rgba(30,28,38,.93),rgba(14,16,24,.96)); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.signed-in .post-image { height:460px; }.signed-in .post-body { padding-bottom:20px; }.signed-in .post-body h3 { font-family:Georgia,serif; font-size:27px; font-weight:500; }.signed-in .post-body p { max-width:720px; color:#aaa7af; }
.post-rank-reason { color:color-mix(in srgb,var(--accent) 62%,#fff); font-family:"Segoe Print",cursive; font-size:8px; letter-spacing:0; text-transform:none; }
.signed-in .post-actions { margin:0 12px 13px; padding:7px; border:0; border-radius:13px; background:rgba(255,255,255,.028); }.signed-in .post-actions button { font-size:9px; }
.signed-in .feed-aside .panel { border:0; background:rgba(255,255,255,.035); box-shadow:none; }.ranking-note { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,#171923),#12141d) !important; }.ranking-note h3 { font-family:Georgia,serif; font-size:24px !important; }.ranking-note > p { font-family:Georgia,serif; font-style:italic; line-height:1.65; }

/* Uploads are photo trays, with three clear family destinations. */
.signed-in .workflow-board { grid-template-columns:repeat(3,minmax(275px,1fr)); gap:18px; overflow:visible; }
.signed-in .photo-tray { min-height:580px; padding:14px; border:1px solid rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(145deg,rgba(30,28,37,.58),rgba(13,15,22,.5)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.signed-in .photo-tray[data-status="uploaded"] { border-style:dashed; }.signed-in .photo-tray[data-status="locked"] { background:linear-gradient(145deg,rgba(39,32,46,.6),rgba(11,13,20,.6)); }
.photo-tray .workflow-heading { padding:5px 5px 16px; }.photo-tray .workflow-heading > div { display:flex; flex-direction:column; }.photo-tray .workflow-heading h3 { font-family:Georgia,serif; font-size:20px; font-weight:500; letter-spacing:0; text-transform:none; }.photo-tray .workflow-heading small { margin-top:2px; color:#74727c; font-size:8px; }.photo-tray .workflow-heading > span:last-child { margin-left:auto; }
.signed-in .photo-tray .workflow-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; min-height:500px; }
.signed-in .photo-tray .workflow-card { align-self:start; overflow:hidden; border:0; border-radius:12px; background:#191b25; box-shadow:0 14px 30px rgba(0,0,0,.23); transform:rotate(-.35deg); }.signed-in .photo-tray .workflow-card:nth-child(2n) { transform:rotate(.55deg); }
.photo-tray .workflow-thumb { height:145px; }.photo-corner { position:absolute; z-index:4; top:8px; right:8px; display:grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#fff; background:rgba(8,9,14,.55); backdrop-filter:blur(7px); font-size:8px; font-weight:800; }.photo-corner svg { width:11px; }
.photo-tray .workflow-info { padding:10px; }.photo-tray .workflow-info h4 { font-size:14px; }.photo-tray .workflow-info p { margin-bottom:9px; }.photo-tray .workflow-meta { align-items:center; }.photo-tray .workflow-meta > span { max-width:80px; }.photo-tray .move-button { width:auto; height:28px; gap:4px; padding:0 8px; border-radius:99px; font-size:8px; }.photo-tray .move-button span { display:inline; }.workflow-empty { display:grid; align-content:center; justify-items:center; gap:7px; min-height:200px; }.workflow-empty svg { width:25px; height:25px; opacity:.45; }
.dot.shared { background:#668068; }

/* Decorating the room should feel tactile, not like configuring software. */
.signed-in .settings-layout { max-width:1100px; margin:0 auto; grid-template-columns:minmax(500px,1.15fr) minmax(300px,.7fr); }
.signed-in .settings-form { border:0; border-radius:28px; background:linear-gradient(145deg,rgba(32,29,39,.78),rgba(15,17,25,.72)); box-shadow:none; }.setting-number { font-family:"Segoe Print",cursive; transform:rotate(-5deg); }.setting-section h3 { font-family:Georgia,serif; font-size:23px; }.signed-in .settings-form > label { color:#b7b4bc; }.signed-in .settings-form > input,.signed-in .settings-form > textarea { border:0; border-bottom:1px solid rgba(255,255,255,.14); border-radius:0; background:transparent; font-family:Georgia,serif; font-size:16px; }.signed-in .settings-form > input:focus,.signed-in .settings-form > textarea:focus { box-shadow:none; border-color:var(--accent); }.signed-in .theme-preview { border-width:5px; transform:rotate(1deg); }

@media (max-width: 1200px) {
  .family-topbar .main-nav a { padding:9px 8px; }.family-topbar .app-brand small,.family-topbar .sidebar-family > div:last-child { display:none; }.family-topbar .app-brand { min-width:150px; }.home-widgets { grid-template-columns:1fr; }
  .signed-in .photo-tray .workflow-list { grid-template-columns:1fr; }.photo-tray .workflow-thumb { height:190px; }
}
@media (max-width: 900px) {
  .signed-in .family-topbar { inset:0 auto 0 0; width:min(330px,88vw); height:100vh; align-items:stretch; flex-direction:column; gap:18px; padding:20px 16px; transform:translateX(-100%); }.signed-in .family-topbar.open { transform:none; }.family-topbar .sidebar-top { width:100%; }.family-topbar .close-sidebar { display:grid; }.family-topbar .app-brand small { display:block; }.family-topbar .main-nav { flex:none; align-items:stretch; flex-direction:column; }.family-topbar .main-nav a { padding:12px; border-radius:10px; }.family-topbar .main-nav a svg { display:block; }.signed-in .family-topbar .main-nav a.active::after { display:none; }.topbar-actions { align-items:stretch; flex-direction:column; margin-top:auto; }.family-topbar .sidebar-family { display:flex; }.family-topbar .profile-chip { display:none; }.family-topbar .logout-button { width:100%; height:40px; justify-content:flex-start; padding:0 12px; border-radius:9px; }.family-topbar .logout-button span { display:inline; }
  .signed-in .app-shell { padding-top:0; }.signed-in .app-header { padding-top:13px; }.cinematic-hero { min-height:560px; }.hero-portrait { inset:0; }.signed-in .workflow-board { grid-template-columns:repeat(3,280px); overflow-x:auto; padding-bottom:16px; }.signed-in .photo-tray .workflow-list { grid-template-columns:1fr; }.signed-in .settings-layout { grid-template-columns:1fr; }
}
@media (max-width: 650px) {
  .signed-in .app-header { min-height:57px; }.family-whisper { align-items:flex-start; flex-wrap:wrap; }.family-whisper p { min-width:70%; }.family-whisper > span { width:100%; padding-left:4px; }.cinematic-hero { min-height:580px; }.cinematic-hero .hero-copy h2 { font-size:46px; }.room-welcome { font-size:11px !important; }.hero-reactions { flex-wrap:wrap; }.feature-tile:nth-child(2n) { transform:none; }.signed-in .post-image { height:290px; }.signed-in .post-body h3 { font-size:23px; }.vault-rail { padding:15px; }.vault-rail::before { display:none; }.home-widgets .panel { padding:18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Premium family cinema */
:root {
  --cinema: #080a11;
  --cinema-raised: #11141e;
  --cinema-card: #171a25;
  --cinema-soft: #222634;
  --cinema-line: rgba(255, 255, 255, .1);
  --cinema-text: #f6f4fb;
  --cinema-muted: #a8a8b5;
}
body { color: var(--cinema-text); background: var(--cinema); }
.signed-in { background: radial-gradient(circle at 72% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 33%), var(--cinema); }
.signed-in .app-view { background: transparent; }
.signed-in .app-shell { background: transparent; }
.signed-in .content { max-width: 1780px; padding-top: 24px; }
.signed-in .eyebrow { color: color-mix(in srgb, var(--accent) 75%, #fff); }
.signed-in .panel { border-color: var(--cinema-line); background: linear-gradient(145deg, rgba(28,31,44,.96), rgba(15,18,27,.96)); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.signed-in .panel h3, .signed-in .section-intro h2 { color: var(--cinema-text); }
.signed-in .section-intro > div > p:last-child, .signed-in .panel p { color: var(--cinema-muted); }
.signed-in .primary-button { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent)); box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 25%, transparent); }
.signed-in .outline-button, .signed-in .secondary-button { color: var(--cinema-text); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.035); }
.signed-in .outline-button:hover, .signed-in .secondary-button:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.signed-in .icon-button.subtle { color: #fff; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
.signed-in .link-button { color: color-mix(in srgb, var(--accent) 68%, #fff); }

.signed-in .sidebar { border-color: var(--cinema-line); background: linear-gradient(180deg, rgba(13,15,23,.98), rgba(8,10,16,.99)); box-shadow: 15px 0 40px rgba(0,0,0,.16); }
.signed-in .app-brand { color: #fff; }.signed-in .app-brand small { color: #777b89; }
.signed-in .main-nav p { color: #646875; }
.signed-in .main-nav a { color: #9b9daa; }
.signed-in .main-nav a:hover { color: #fff; background: rgba(255,255,255,.055); }
.signed-in .main-nav a.active { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); box-shadow: inset 3px 0 var(--accent); }
.signed-in .nav-badge { color: #c5c6ce; background: rgba(255,255,255,.1); }
.signed-in .sidebar-family { border-color: var(--cinema-line); background: rgba(255,255,255,.035); }
.signed-in .sidebar-family small, .signed-in .logout-button { color: #7f828d; }
.signed-in .app-header { border-color: var(--cinema-line); background: rgba(8,10,17,.84); box-shadow: 0 8px 30px rgba(0,0,0,.14); }
.signed-in .header-left p { color: #8d8f9b; }.signed-in .header-left h1 { color: #fff; }
.signed-in .search-box, .signed-in .compact-search { color: #777b87; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.055); }
.signed-in .search-box input, .signed-in .compact-search input { color: #fff; }.signed-in .search-box input::placeholder, .signed-in .compact-search input::placeholder { color: #6f727e; }
.signed-in .profile-chip { color: #fff; }.signed-in .profile-chip:hover { background: rgba(255,255,255,.06); }.signed-in .profile-chip small { color: #7f828e; }

.cinematic-hero { min-height: 510px; grid-template-columns: 1.1fr .9fr; isolation: isolate; border: 1px solid rgba(255,255,255,.1); border-radius: 25px; background: #11141c; box-shadow: 0 30px 80px rgba(0,0,0,.42); }
.cinematic-hero::before { z-index: -1; width: 60%; height: 100%; inset: 0 auto 0 0; border: 0; border-radius: 0; background: var(--hero-gradient); box-shadow: none; opacity: .78; }
.cinematic-hero .hero-copy { z-index: 4; max-width: 760px; padding: 65px clamp(34px,5vw,78px); }
.cinematic-hero .hero-copy h2 { max-width: 700px; font-size: clamp(47px,5vw,76px); text-shadow: 0 5px 25px rgba(0,0,0,.25); }
.cinematic-hero .hero-copy > p:not(.eyebrow) { max-width: 580px; color: rgba(255,255,255,.8); font-size: 17px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hero-badges span { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: rgba(255,255,255,.9); background: rgba(10,12,18,.25); backdrop-filter: blur(8px); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-badges svg { width: 12px; height: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: #fff; background: rgba(255,255,255,.09); font-weight: 750; cursor: pointer; backdrop-filter: blur(8px); }
.hero-secondary:hover { background: rgba(255,255,255,.16); }
.hero-secondary svg { width: 17px; }
.hero-portrait { position: absolute; z-index: -2; inset: 0 0 0 36%; height: auto; background: radial-gradient(circle at 72% 32%, rgba(255,224,164,.75) 0 5%, transparent 6%), linear-gradient(150deg, transparent 0 20%, rgba(0,0,0,.2) 21%), linear-gradient(#76909b 0 48%, #53694f 49%); transform: scale(1.01); }
.hero-portrait::after { height: 58%; background: linear-gradient(155deg, transparent 0 32%, rgba(42,57,43,.85) 33% 60%, transparent 61%), linear-gradient(25deg, #4f5f45, #8b825a); }
.hero-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,11,16,.3) 0%, rgba(10,11,16,.5) 35%, transparent 70%), linear-gradient(0deg, rgba(7,8,13,.45), transparent 35%); }

.featured-section { margin: 34px 0 26px; }
.rail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.rail-heading h2, .rail-heading h3 { margin: 0; color: #fff; font-family: Georgia, serif; font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.rail-heading > span { margin-left: 10px; color: var(--cinema-muted); font-size: 10px; }
.feature-rail, .rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; padding: 4px 2px 16px; scrollbar-width: thin; scrollbar-color: #3d4050 transparent; scroll-snap-type: x proximity; }
.feature-tile { min-width: 0; scroll-snap-align: start; cursor: pointer; transition: transform .25s; }.feature-tile:hover { transform: translateY(-5px) scale(1.01); }
.feature-tile > .scene { height: 150px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.feature-tile h3 { margin: 10px 3px 2px; color: #f4f3f8; font-size: 13px; }.feature-tile p { margin: 0 3px; color: #818490; font-size: 9px; }
.tile-lock { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: rgba(8,10,15,.55); backdrop-filter: blur(8px); }.tile-lock svg { width: 12px; }

.signed-in .cinematic-stats article { border-color: var(--cinema-line); background: linear-gradient(145deg, rgba(29,32,45,.92), rgba(14,17,25,.92)); }
.signed-in .cinematic-stats small { color: #a4a5af; }.signed-in .cinematic-stats em { color: #6f727e; }
.home-widgets { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(500px,1.25fr); gap: 18px; }
.family-calendar-widget .event-list { margin: 5px 0; }.family-calendar-widget .event-item { border-color: var(--cinema-line); }.family-calendar-widget .event-date { color: #fff; background: color-mix(in srgb, var(--accent) 24%, #151822); }.family-calendar-widget .event-item small { color: #858894; }
.calendar-widget-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cinema-line); }.calendar-widget-row > div { display: flex; flex-direction: column; }.calendar-widget-row small { color: #7c7f8b; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.calendar-widget-row strong { margin-top: 2px; font-size: 12px; }.calendar-widget-row p { margin: 1px 0 0; color: #858894; font-size: 9px; }
.widget-icon { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 12px; }.widget-icon svg { width: 17px; }.widget-icon.birthday { color: #eac579; background: rgba(210,164,74,.16); }.widget-icon.memory { color: #a9a2ed; background: rgba(127,111,211,.16); }
.mini-kanban { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-bottom: 16px; }.mini-kanban > div { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 12px; border: 1px solid var(--cinema-line); border-radius: 11px; background: rgba(255,255,255,.035); }.mini-kanban span { overflow: hidden; color: #898c98; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; }.mini-kanban strong { margin-top: 5px; font-family: Georgia,serif; font-size: 22px; font-weight: 500; }.mini-kanban .dot { position: absolute; top: 10px; right: 9px; }
.review-preview-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.review-preview-cards article { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.04); }.review-preview-cards .scene { width: 92px; height: 62px; flex: 0 0 auto; border-radius: 8px; }.review-preview-cards article > div { display: flex; min-width: 0; flex-direction: column; }.review-preview-cards strong { font-size: 11px; }.review-preview-cards small { color: #7d808b; font-size: 8px; }

.signed-in .feed-layout { grid-template-columns: minmax(0,1.55fr) minmax(260px,.55fr); max-width: 1280px; margin: 0 auto; }
.signed-in .feed-post { border-color: rgba(255,255,255,.1); background: linear-gradient(145deg,#181b27,#11141d); box-shadow: 0 16px 45px rgba(0,0,0,.24); }
.signed-in .post-head { padding: 19px 21px 12px; }.post-rank-reason { display: inline-flex; align-items: center; gap: 5px; width: max-content; margin-top: 3px; color: color-mix(in srgb, var(--accent) 65%, #fff); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.post-rank-reason svg { width: 10px; height: 10px; }
.signed-in .post-head strong { color: #f5f3fa; }.signed-in .post-head small, .signed-in .post-privacy { color: #838691; }
.signed-in .post-body h3 { color: #f7f5fb; font-size: 21px; }.signed-in .post-body p { color: #b2b2bc; font-size: 13px; line-height: 1.65; }
.signed-in .post-image { height: 380px; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.reaction-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; color: #878a95; font-size: 9px; }.reaction-summary span:first-child { display: flex; align-items: center; gap: 5px; }.reaction-dots { display: inline-flex; }.reaction-dots i { display: grid; width: 21px; height: 21px; margin-right: -4px; place-items: center; border: 2px solid #141722; border-radius: 50%; color: #fff; background: var(--accent); font-size: 8px; font-style: normal; }
.signed-in .post-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 9px 12px 13px; border-color: var(--cinema-line); }.signed-in .post-actions button { justify-content: center; gap: 6px; padding: 8px 5px; border: 1px solid transparent; border-radius: 8px; color: #92949f; font-size: 9px; }.signed-in .post-actions button:hover { color: #fff; background: rgba(255,255,255,.06); }.signed-in .post-actions button.active { color: #fff; border-color: color-mix(in srgb,var(--accent) 42%,transparent); background: color-mix(in srgb,var(--accent) 18%,transparent); }.signed-in .post-actions button.active svg { fill: currentColor; }.signed-in .post-actions svg { width: 15px; }
.ranking-note > span { display: flex; align-items: center; gap: 6px; margin-top: 16px; color: #8f929d; font-size: 9px; }.ranking-note svg { width: 12px; }.on-this-day .scene { height: 120px; margin: 14px 0; border-radius: 10px; }.on-this-day h3 { font-size: 16px; }

.signed-in .album-toolbar .filter-pills { background: rgba(255,255,255,.055); }.signed-in .filter-pills button { color: #898c97; }.signed-in .filter-pills button.active { color: #fff; background: rgba(255,255,255,.12); box-shadow: none; }
.album-rails { display: grid; gap: 34px; }.memory-rail { min-width: 0; }.memory-rail .rail-heading { align-items: baseline; justify-content: flex-start; margin-bottom: 10px; }.memory-rail .rail-heading h3 { font-size: 22px; }.memory-rail .rail-track { grid-auto-columns: minmax(230px, 1fr); }
.signed-in .album-card { border-color: rgba(255,255,255,.08); border-radius: 13px; background: #151822; box-shadow: 0 10px 24px rgba(0,0,0,.18); }.signed-in .album-card:hover { border-color: rgba(255,255,255,.2); box-shadow: 0 18px 38px rgba(0,0,0,.3); transform: translateY(-5px) scale(1.015); }.signed-in .album-card > div:last-child { padding: 12px 14px 15px; }.signed-in .album-card h3 { color: #eeedf3; font-family: Inter,sans-serif; font-size: 12px; font-weight: 750; }.signed-in .album-card small { color: #797c88; }.signed-in .album-cover { height: 145px; }.signed-in .album-cover::after { display: none; }

.signed-in .calendar-panel, .signed-in .agenda-panel { background: #12151f; }.signed-in .calendar-day { color: #d5d5dc; border-color: var(--cinema-line); background: rgba(255,255,255,.025); }.signed-in .calendar-day.muted { color: #555966; background: rgba(0,0,0,.15); }.signed-in .weekday-row span { color: #747783; }.signed-in .calendar-event { color: #fff; border-color: var(--accent); background: color-mix(in srgb,var(--accent) 23%,#151822); }.signed-in .event-item, .signed-in .agenda-card, .signed-in .birthday-row { border-color: var(--cinema-line); }

.signed-in .workflow-legend { color: #8f929c; border-color: var(--cinema-line); background: #12151e; }.signed-in .workflow-column { border-color: var(--cinema-line); background: #11141d; }.signed-in .workflow-column.drag-over { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 12%,#11141d); }.signed-in .workflow-heading h3 { color: #d6d6de; }.signed-in .workflow-heading span:last-child { color: #b2b3bc; background: #252936; }.signed-in .workflow-card { border-color: rgba(255,255,255,.08); background: #1b1e29; box-shadow: 0 8px 20px rgba(0,0,0,.2); }.signed-in .workflow-info h4 { color: #f1eff4; }.signed-in .workflow-info p, .signed-in .workflow-meta span { color: #7e818d; }.signed-in .move-button { color: #fff; border-color: rgba(255,255,255,.12); background: #292d3a; }

.signed-in .settings-form input, .signed-in .settings-form textarea, .signed-in .modal input, .signed-in .modal textarea, .signed-in .modal select { color: #fff; border-color: rgba(255,255,255,.13); background: #0e1119; }.signed-in .settings-form input:focus, .signed-in .settings-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }.signed-in .settings-form hr { background: var(--cinema-line); }.signed-in .setting-section p { color: #888b96; }.signed-in .gradient-grid button { color: #c4c4cc; }.signed-in .custom-color { border-color: #60636e; }.signed-in .save-indicator { color: #b9e3c7; background: rgba(80,154,102,.16); }
.toggle-setting { display: flex !important; align-items: center; justify-content: space-between !important; gap: 20px; margin: 0 0 25px !important; padding: 14px 16px; border: 1px solid var(--cinema-line); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; }.toggle-setting > span { display: flex; flex-direction: column; }.toggle-setting strong { color: #f0eff4; font-size: 11px; }.toggle-setting small { margin-top: 2px; color: #7f828e; font-size: 9px; font-weight: 500; }.toggle-setting input { position: absolute; width: 1px !important; height: 1px; opacity: 0; }.toggle-setting i { position: relative; width: 44px; height: 24px; flex: 0 0 auto; border-radius: 15px; background: #393d49; transition: .2s; }.toggle-setting i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }.toggle-setting input:checked + i { background: var(--accent); }.toggle-setting input:checked + i::after { transform: translateX(20px); }.signed-in .theme-preview { border-color: #20232e; box-shadow: 0 25px 65px rgba(0,0,0,.38); }

.signed-in .modal { color: #fff; background: #171a24; }.signed-in .modal .modal-copy { color: #999ba5; }.signed-in .drop-zone { color: #8d909b; border-color: #50535e; background: #10131b; }.signed-in .drop-zone strong { color: #f1f0f5; }.signed-in .app-footer { color: #656875; border-color: var(--cinema-line); }

/* Cinematic mode can be softened without leaving the dark family theme. */
.signed-in.cinematic-off { background: #151821; }.signed-in.cinematic-off .cinematic-hero { min-height: 430px; box-shadow: 0 14px 35px rgba(0,0,0,.2); }.signed-in.cinematic-off .hero-portrait { opacity: .72; }.signed-in.cinematic-off .panel, .signed-in.cinematic-off .feed-post { box-shadow: 0 7px 20px rgba(0,0,0,.14); }

/* Dark landing */
.auth-view { color: #f5f3fa; background: #080a10; }.landing-header { border-color: rgba(255,255,255,.1); background: rgba(8,10,16,.85); }.landing-brand { color: #fff; }.privacy-note { color: #8d909a; }
.welcome-panel { background: radial-gradient(circle at 68% 28%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 27%), linear-gradient(140deg,#17141b,#0a0c13 62%,#171019); }.welcome-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 0 60%,rgba(0,0,0,.25)); pointer-events:none; }.welcome-content h1 { color: #fff; text-shadow: 0 5px 30px rgba(0,0,0,.35); }.welcome-copy, .family-proof p { color: #aaa8b1; }.family-proof strong { color: #f6f4f9; }.avatar-stack .avatar { border-color: #15131a; }.botanical { opacity: .16; }.memory-card { background: #ece8df; }.memory-card small { color: #262925; }
.login-panel { background: linear-gradient(155deg,#11141e,#090b12); }.login-panel::before { border-color: rgba(255,255,255,.08); }.login-heading h2 { color:#fff; }.login-heading > p:last-child { color:#8c8f9a; }.login-flourish { border-color:rgba(255,255,255,.18); }.login-card input { color:#fff; border-color:rgba(255,255,255,.14); background:#0b0e16; }.login-card input:focus { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }.login-card label { color:#d8d7de; }.demo-divider::before,.demo-divider::after { background:rgba(255,255,255,.1); }.login-card > .secondary-button { color:#fff; border-color:rgba(255,255,255,.16); }.landing-footer { color:#686b76; background:#090b11; }

@media (max-width: 1180px) {
  .cinematic-hero { min-height: 470px; }.cinematic-hero .hero-copy h2 { font-size: 54px; }.home-widgets { grid-template-columns: 1fr; }.family-calendar-widget .event-list { grid-template-columns: repeat(3,1fr); }.feature-rail { grid-auto-columns: 260px; }
}
@media (max-width: 900px) {
  .cinematic-hero { grid-template-columns: 1fr; min-height: 520px; }.hero-portrait { inset: 0; opacity: .55; }.cinematic-hero::before { width:100%; opacity:.52; }.hero-vignette { background:linear-gradient(90deg,rgba(7,8,13,.7),transparent 85%),linear-gradient(0deg,rgba(7,8,13,.55),transparent 55%); }.signed-in .feed-layout { grid-template-columns: 1fr; }.signed-in .feed-aside { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 650px) {
  .cinematic-hero { min-height: 530px; border-radius:17px; }.cinematic-hero .hero-copy { align-self:end; padding:34px 22px; }.cinematic-hero .hero-copy h2 { font-size:40px; }.hero-badges { margin-bottom:18px; }.hero-actions > button { width:100%; }.feature-rail { grid-auto-columns: 235px; }.rail-heading h2 { font-size:24px; }.rail-heading .link-button { display:none; }.signed-in .cinematic-stats { grid-template-columns:1fr 1fr; }.mini-kanban { grid-template-columns:repeat(5,120px); overflow-x:auto; padding-bottom:8px; }.review-preview-cards { grid-template-columns:1fr; }.family-calendar-widget .event-list { grid-template-columns:1fr; }.signed-in .feed-aside { grid-template-columns:1fr; }.signed-in .post-image { height:245px; }.signed-in .post-actions { grid-template-columns:repeat(2,1fr); }.memory-rail .rail-track { grid-auto-columns:215px; }.signed-in .album-cover { height:135px; }.toggle-setting { align-items:flex-start; }
}

/* Final family-room authority layer. */
.signed-in .family-topbar { inset:0 0 auto; width:auto; height:78px; flex-direction:row; align-items:center; gap:clamp(18px,3vw,48px); padding:11px clamp(18px,3.3vw,54px); border:0; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(7,9,15,.98),rgba(8,10,17,.9)); box-shadow:0 14px 38px rgba(0,0,0,.22); }
.signed-in .family-topbar .sidebar-family { margin:0 5px 0 0; padding:7px 9px; border:0; background:transparent; }
.signed-in .app-header { position:relative; top:auto; width:min(100%,1780px); min-height:65px; margin:0 auto; padding:15px clamp(22px,4vw,55px) 4px; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.signed-in .content { padding-top:12px; }
.cinematic-hero { min-height:570px; border:0; border-radius:28px; box-shadow:0 35px 90px rgba(0,0,0,.5); }
.cinematic-hero::before { width:55%; background:linear-gradient(90deg,rgba(18,13,20,.92),rgba(24,17,25,.7) 62%,transparent); opacity:1; }
.cinematic-hero .hero-copy { align-self:end; max-width:780px; padding:65px clamp(30px,5vw,78px); }
.cinematic-hero .hero-copy h2 { margin:5px 0 11px; max-width:700px; font-size:clamp(50px,5.5vw,82px); line-height:.98; letter-spacing:-.045em; }
.hero-portrait { inset:0 0 0 24%; background:radial-gradient(circle at 70% 23%,rgba(255,222,157,.8) 0 4%,transparent 5%),radial-gradient(ellipse at 76% 62%,rgba(34,28,26,.48) 0 8%,transparent 9%),radial-gradient(ellipse at 61% 65%,rgba(43,35,31,.45) 0 9%,transparent 10%),linear-gradient(#8297a1 0 48%,#526348 49%); }
.hero-vignette { background:linear-gradient(90deg,rgba(8,8,13,.87) 0%,rgba(8,8,13,.58) 38%,transparent 70%),linear-gradient(0deg,rgba(5,6,10,.68),transparent 48%),radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.28)); }
.home-widgets { grid-template-columns:minmax(300px,.8fr) minmax(500px,1.2fr); }
.mini-kanban { grid-template-columns:repeat(3,1fr); }
.signed-in .feed-layout { grid-template-columns:minmax(0,1.7fr) minmax(250px,.5fr); max-width:1200px; }
.signed-in .feed-post { overflow:hidden; border:0; border-radius:24px; background:linear-gradient(145deg,rgba(30,28,38,.93),rgba(14,16,24,.96)); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.signed-in .post-image { height:460px; }.signed-in .post-body h3 { font-family:Georgia,serif; font-size:27px; font-weight:500; }
.signed-in .album-card,.signed-in .album-card:hover { overflow:visible; border:0; background:transparent; box-shadow:none; }.signed-in .album-card > div:last-child { padding:10px 4px 6px; }.signed-in .album-card h3 { font-family:Georgia,serif; font-size:14px; font-weight:500; }.signed-in .album-cover { height:145px; overflow:hidden; border-radius:13px; }
.signed-in .workflow-board { grid-template-columns:repeat(3,minmax(275px,1fr)); gap:18px; overflow:visible; }
.signed-in .photo-tray { min-height:580px; padding:14px; border:1px solid rgba(255,255,255,.075); border-radius:20px; background:linear-gradient(145deg,rgba(30,28,37,.58),rgba(13,15,22,.5)); }
.signed-in .photo-tray .workflow-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; min-height:500px; }.photo-tray .workflow-thumb { height:145px; }
.signed-in .settings-layout { max-width:1100px; margin:0 auto; grid-template-columns:minmax(500px,1.15fr) minmax(300px,.7fr); }
.signed-in .settings-form { border:0; border-radius:28px; background:linear-gradient(145deg,rgba(32,29,39,.78),rgba(15,17,25,.72)); box-shadow:none; }

@media (max-width:1200px) { .home-widgets { grid-template-columns:1fr; }.signed-in .photo-tray .workflow-list { grid-template-columns:1fr; }.photo-tray .workflow-thumb { height:190px; } }
@media (max-width:900px) {
  .signed-in .family-topbar { inset:0 auto 0 0; width:min(330px,88vw); height:100vh; align-items:stretch; flex-direction:column; gap:18px; padding:20px 16px; transform:translateX(-100%); }.signed-in .family-topbar.open { transform:none; }
  .signed-in .app-shell { padding-top:0; }.signed-in .app-header { padding-top:13px; }.cinematic-hero { min-height:560px; }.hero-portrait { inset:0; }.signed-in .feed-layout { grid-template-columns:1fr; }.signed-in .workflow-board { grid-template-columns:repeat(3,280px); overflow-x:auto; }.signed-in .settings-layout { grid-template-columns:1fr; }
}
@media (max-width:650px) {
  .cinematic-hero { min-height:580px; }.cinematic-hero .hero-copy { padding:34px 22px; }.cinematic-hero .hero-copy h2 { font-size:46px; }.mini-kanban { grid-template-columns:repeat(3,120px); }.signed-in .post-image { height:290px; }.signed-in .post-body h3 { font-size:23px; }
}