:root {
  color-scheme: light;
  --color-ink: #302b34;
  --color-ink-soft: #67616d;
  --color-ink-muted: #817986;
  --color-warm: #eeb49b;
  --color-warm-soft: #f8dccc;
  --color-cool: #9fb7e6;
  --color-cool-soft: #d8e1f6;
  --color-lavender: #c5b6e5;
  --color-accent: #795f9b;
  --color-accent-strong: #624780;
  --color-success: #39705f;
  --color-danger: #a24c55;
  --color-focus: #4f6fb7;
  --surface-canvas: #f4efed;
  --surface-soft: rgba(255, 252, 249, 0.7);
  --surface-raised: rgba(255, 253, 251, 0.9);
  --surface-scrim: rgba(39, 33, 46, 0.28);
  --surface-border: rgba(255, 255, 255, 0.66);
  --glass-fill: rgba(249, 248, 252, 0.46);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.75rem, 7vw, 2.35rem);
  --text-hero: clamp(3.4rem, 17vw, 6.25rem);
  --leading-tight: 1.08;
  --leading-copy: 1.5;
  --weight-regular: 450;
  --weight-medium: 590;
  --weight-semibold: 680;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 38px rgba(66, 52, 76, 0.075);
  --shadow-float: 0 22px 54px rgba(48, 42, 59, 0.2), 0 5px 16px rgba(72, 57, 83, 0.09);
  --motion-fast: 160ms;
  --motion-standard: 260ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-max: 46rem;
  --page-gutter: clamp(1rem, 5vw, 1.5rem);
  --nav-height: 4.6rem;
  --tap-size: 2.75rem;
}

html { min-width: 320px; background: var(--surface-canvas); }
html, body { min-height: 100vh; min-height: 100svh; min-height: 100dvh; color: var(--color-ink); font-family: var(--font-sans); background: var(--surface-canvas); }
body { display: block; padding: 0; overflow-x: hidden; isolation: isolate; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 72%, white); outline-offset: 3px; }

.shared-horizon { position: fixed; inset: 0; z-index: 0; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 92% 68% at -8% 12%, rgba(244, 183, 153, 0.72), transparent 66%), radial-gradient(ellipse 90% 72% at 108% 26%, rgba(150, 180, 235, 0.7), transparent 67%), radial-gradient(ellipse 70% 52% at 50% 44%, rgba(255, 248, 235, 0.7), transparent 72%), linear-gradient(142deg, #f8eee6 0%, #f2edf0 49%, #e7ebf7 100%); }
.shared-horizon::before { content: ""; position: absolute; inset: -16% -28% 36%; background: radial-gradient(ellipse at 46% 52%, rgba(255, 255, 248, 0.76), rgba(237, 211, 207, 0.25) 38%, transparent 70%); filter: blur(30px); opacity: 0.88; }
.shared-horizon::after { content: ""; position: absolute; inset: 28% -24% -18%; background: radial-gradient(ellipse at 53% 44%, rgba(199, 181, 228, 0.42), rgba(219, 226, 245, 0.2) 42%, transparent 72%); filter: blur(34px); }

.v2-app-shell { position: relative; z-index: 1; display: none; width: min(100%, var(--app-max)); min-height: 100vh; min-height: 100svh; min-height: 100dvh; margin-inline: auto; padding: calc(var(--safe-top) + var(--space-6)) max(var(--page-gutter), var(--safe-right)) calc(var(--nav-height) + var(--safe-bottom) + var(--space-8)) max(var(--page-gutter), var(--safe-left)); }
body.app-ready .v2-app-shell { display: block; }

.glass-control { border: 1px solid var(--glass-border); background: linear-gradient(145deg, rgba(255, 255, 255, 0.57), rgba(244, 243, 249, 0.34)); box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-soft); -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%); }
.soft-surface { border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 253, 250, 0.74), rgba(248, 245, 247, 0.6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), var(--shadow-soft); }
.primary-button, .secondary-button, .text-action { min-height: var(--tap-size); border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) ease; }
.primary-button { border: 1px solid rgba(98, 71, 128, 0.17); padding-inline: var(--space-5); color: var(--color-accent-strong); background: linear-gradient(135deg, rgba(250, 241, 241, 0.92), rgba(231, 228, 246, 0.88)); font-weight: var(--weight-semibold); box-shadow: 0 9px 22px rgba(98, 71, 128, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75); }
.secondary-button { border: 1px solid rgba(80, 68, 91, 0.13); padding-inline: var(--space-5); color: var(--color-ink); background: rgba(255, 253, 251, 0.58); font-weight: var(--weight-medium); }
.text-action { border: 0; padding-inline: var(--space-3); color: var(--color-accent-strong); background: transparent; font-weight: var(--weight-medium); }
.primary-button:active, .secondary-button:active, .text-action:active, .v2-tab:active { transform: scale(0.97); }
.status-pill { display: inline-flex; align-items: center; min-height: 1.75rem; width: fit-content; padding: 0.3rem 0.7rem; border: 1px solid rgba(57, 112, 95, 0.18); border-radius: var(--radius-pill); color: var(--color-success); background: rgba(239, 249, 245, 0.82); font-size: var(--text-xs); font-weight: var(--weight-semibold); }

.v2-page-stack, .v2-page, .v2-page > *, .v2-context-rail { min-width: 0; }
.v2-page { animation: v2-page-in var(--motion-standard) var(--ease-out); }
.v2-page:focus { outline: none; }
.v2-page[hidden] { display: none; }
.v2-page-header { display: flex; align-items: center; gap: var(--space-4); min-height: 2.75rem; margin-bottom: clamp(2rem, 8vw, 3.25rem); }
.v2-page-context { display: grid; gap: 0.16rem; min-width: 0; }
.v2-page-context h1 { color: var(--color-ink); font-size: clamp(1.25rem, 5.5vw, 1.55rem); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.035em; }
.v2-page-context p, .v2-date { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.35; }
.v2-date { font-weight: var(--weight-regular); }

.v2-couple-avatar-pair { display: flex; align-items: center; min-height: 4.25rem; }
.v2-person { display: grid; place-items: center; width: 4.15rem; height: 4.15rem; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.84); border-radius: 50%; color: var(--color-ink); font-size: 1.65rem; font-weight: var(--weight-semibold); }
.v2-person-current { z-index: 2; background: linear-gradient(145deg, #fff5ef, var(--color-warm-soft)); box-shadow: 0 0 0 1px rgba(237, 164, 132, 0.22), 0 8px 24px rgba(192, 124, 104, 0.13); }
.v2-person-partner { margin-left: -0.72rem; background: linear-gradient(145deg, #f6f7ff, var(--color-cool-soft)); box-shadow: 0 0 0 1px rgba(126, 157, 216, 0.22), 0 8px 24px rgba(101, 129, 187, 0.13); }
.v2-couple-avatar-pair-compact { flex: 0 0 auto; min-height: 2.5rem; }
.v2-couple-avatar-pair-compact .v2-person { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.v2-couple-avatar-pair-compact .v2-person-partner { margin-left: -0.55rem; }
.v2-couple-avatar-pair-large .v2-person { width: 4.75rem; height: 4.75rem; font-size: 1.85rem; }
.v2-couple-avatar-pair-large .v2-person-partner { margin-left: -0.9rem; }
.v2-person-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.v2-today-hero { position: relative; min-height: clamp(17rem, 48svh, 23rem); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(0.5rem, 2vw, 1rem) 0 clamp(1.2rem, 5vw, 2rem); isolation: isolate; }
.v2-today-hero::before { content: ""; position: absolute; z-index: -1; top: -2rem; left: -4.5rem; width: clamp(15rem, 72vw, 23rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 228, 0.68), rgba(238, 183, 168, 0.18) 46%, transparent 72%); filter: blur(10px); }
.v2-days-together { display: grid; gap: var(--space-2); min-width: 0; min-height: var(--tap-size); padding: var(--space-3) 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.v2-days-together:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 0.35rem; border-radius: var(--radius-sm); }
.v2-days-together > span, .v2-context-item > span, .v2-question-slot > span { color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.035em; }
.v2-days-together > span { color: var(--color-ink-soft); font-size: var(--text-md); letter-spacing: -0.01em; }
.v2-days-together strong { margin-top: -0.1em; font-size: clamp(4.7rem, 22vw, 7.5rem); font-weight: var(--weight-regular); line-height: 0.82; letter-spacing: -0.08em; }
.v2-days-together p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.v2-context-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid rgba(77, 67, 85, 0.12); }
.v2-context-item { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-4) 0; }
.v2-context-item + .v2-context-item { padding-left: var(--space-4); border-left: 1px solid rgba(77, 67, 85, 0.12); }
.v2-context-item strong { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.3; }
.v2-question-slot { display: grid; gap: var(--space-2); padding: var(--space-5); }
.v2-question-slot p { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }

.v2-slot, .empty-state, .loading-state, .error-state { display: grid; gap: var(--space-2); padding: var(--space-6); }
.v2-slot h2, .empty-state h2, .loading-state h2, .error-state h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.v2-slot p, .empty-state p, .loading-state p, .error-state p { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
.v2-intent-shell { position: relative; min-height: clamp(18rem, 52svh, 25rem); display: grid; align-content: space-between; gap: var(--space-8); padding: var(--space-6) 0 var(--space-8); border-top: 1px solid rgba(77, 67, 85, 0.13); overflow: hidden; }
.v2-intent-copy { display: grid; gap: var(--space-2); max-width: 24rem; }
.v2-intent-copy > span { color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.035em; }
.v2-intent-copy h2 { max-width: 14ch; font-size: clamp(1.7rem, 7vw, 2.35rem); font-weight: var(--weight-medium); line-height: 1.06; letter-spacing: -0.045em; }
.v2-intent-copy p { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
.v2-memory-rail { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; width: min(100%, 28rem); }
.v2-memory-rail i { width: 0.78rem; height: 0.78rem; border: 2px solid rgba(104, 88, 117, 0.32); border-radius: 50%; background: rgba(255, 252, 249, 0.72); box-shadow: 0 0 0 0.35rem rgba(255, 255, 255, 0.2); }
.v2-memory-rail span { height: 1px; background: linear-gradient(90deg, rgba(111, 91, 126, 0.24), rgba(119, 143, 191, 0.22)); }
.memories-view { display:grid; gap:var(--space-5); padding-bottom:calc(var(--nav-height) + var(--space-7)); }
.memories-hero { display:grid; gap:var(--space-2); padding:var(--space-5) 0 var(--space-6); border-bottom:1px solid rgba(77,67,85,.12); }
.memories-hero > span,.memory-section-heading span { color:var(--color-ink-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.035em; }
.memories-hero h2 { max-width:13ch; font-size:clamp(1.9rem,8vw,2.7rem); font-weight:var(--weight-medium); line-height:1.04; letter-spacing:-.05em; }
.memories-hero p,.memory-empty p,.memory-story-card p,.memory-answer-row p { margin:0; color:var(--color-ink-soft); font-size:var(--text-sm); line-height:var(--leading-copy); overflow-wrap:anywhere; }
.memory-home-section,.memory-answer-card,.memory-story-card,.memory-empty { display:grid; gap:var(--space-3); padding:var(--space-5); border:1px solid rgba(255,255,255,.52); border-radius:var(--radius-lg); background:linear-gradient(145deg,rgba(255,253,250,.68),rgba(238,235,246,.46)); box-shadow:var(--shadow-soft); }
.memory-section-heading,.memory-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }.memory-section-heading > div { display:grid; gap:.18rem; }.memory-section-heading h2,.memory-detail-heading h2 { font-size:var(--text-md); font-weight:var(--weight-semibold); }
.memory-date,.memory-answer-card time,.memory-story-card time { color:var(--color-ink-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:.02em; }
.memory-answer-card { position:relative; padding-right:calc(var(--space-5) + 2rem); }
.memory-answer-remove { position:absolute; top:.25rem; right:.25rem; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--color-ink); font:inherit; font-size:1.4rem; cursor:pointer; }
.memory-answer-remove:hover,.memory-answer-remove:focus-visible { background:var(--surface-soft); outline:2px solid var(--color-accent); }
.memory-undo { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.5rem; font-size:var(--text-sm); }
.remember-choice { display:flex!important; align-items:center; gap:.5rem; margin-top:.75rem; cursor:pointer; }
.remember-choice input { width:20px; height:20px; }
.remember-help { font-size:.8rem; margin:.25rem 0 .75rem; }
html[data-appearance-pending="true"] { --surface-canvas:#f3f3f3!important; --surface-soft:#eeeeee!important; --surface-raised:#f7f7f7!important; --color-accent:#666!important; }
html[data-appearance-pending="true"] * { transition:none!important; }
.memory-prompt { margin:0; font-size:var(--text-md); font-weight:var(--weight-medium); line-height:1.35; }.memory-story-preview { display:grid; gap:.18rem; margin:0; color:var(--color-ink-soft); font-size:var(--text-sm); }.memory-story-preview time { color:var(--color-ink-muted); font-size:var(--text-xs); }
.memory-detail-heading { position:sticky; top:0; z-index:2; min-height:var(--tap-size); padding-block:var(--space-2); background:color-mix(in srgb,var(--surface-raised) 88%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); }.memory-detail-heading h2 { flex:1; text-align:center; }.memory-year { margin-top:var(--space-3); color:var(--color-ink-muted); font-size:var(--text-sm); font-weight:var(--weight-semibold); }.memory-answer-card { gap:var(--space-4); }.memory-answer-row { display:grid; gap:var(--space-1); padding-top:var(--space-3); border-top:1px solid rgba(77,67,85,.1); }.memory-answer-row strong { font-size:var(--text-xs); font-weight:var(--weight-semibold); }.memory-story-card > div { display:flex; align-items:start; justify-content:space-between; gap:var(--space-3); }.memory-story-card h4 { margin-top:.16rem; font-size:var(--text-md); font-weight:var(--weight-medium); }.memory-empty { min-height:5rem; align-content:center; box-shadow:none; }.memory-empty h2 { font-size:var(--text-sm); font-weight:var(--weight-semibold); }.memory-loading { color:var(--color-ink-soft); font-size:var(--text-sm); }.memories-dialog form { display:grid; gap:var(--space-3); }.memories-dialog label { display:grid; gap:var(--space-1); color:var(--color-ink-soft); font-size:var(--text-sm); }.memories-dialog input,.memories-dialog textarea { width:100%; border:1px solid rgba(85,72,94,.16); border-radius:var(--radius-md); padding:var(--space-3); color:var(--color-ink); background:rgba(255,253,251,.66); font:inherit; }.memories-dialog textarea { resize:vertical; }
.v2-play-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.v2-play-preview span { display: grid; place-items: center; min-height: 5.25rem; border: 1px solid rgba(255, 255, 255, 0.58); border-radius: var(--radius-lg); color: var(--color-ink-soft); background: rgba(255, 252, 249, 0.3); font-size: var(--text-xs); font-weight: var(--weight-medium); }

.v2-legacy-compat { width: 100%; }
.v2-legacy-compat > .user-bar, .v2-legacy-compat > .activity-bar, .v2-legacy-compat > .calendar-card, .v2-legacy-compat > .detail-card, .v2-legacy-compat > .modules-container { max-width: none; }
.v2-legacy-compat > .user-bar { margin-top: 0; }
.v2-us-hero { display: grid; justify-items: center; gap: var(--space-3); padding: clamp(1.5rem, 8vw, 3rem) 0 var(--space-8); text-align: center; }
.v2-us-hero h1 { margin-top: var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.045em; }
.partner-presence-copy { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
.v2-us-actions { display: grid; gap: var(--space-3); width: min(100%, 25rem); margin: var(--space-5) auto 0; }
.v2-avatar-profile { display:grid; gap:var(--space-4); width:min(100%,25rem); margin:var(--space-6) auto 0; padding:var(--space-5); }
.v2-avatar-profile > div:first-child { display:grid; gap:var(--space-1); }.v2-avatar-profile > div:first-child span { color:var(--color-ink-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); }.v2-avatar-profile h2 { font-size:var(--text-md); }
.avatar-profile-row { display:flex; align-items:center; gap:var(--space-4); }.avatar-profile-row > div { display:grid; gap:var(--space-2); }
.avatar-profile-preview { display:grid; place-items:center; width:5rem; height:5rem; overflow:hidden; flex:0 0 auto; border:2px solid var(--surface-raised); border-radius:50%; background:var(--surface-soft); box-shadow:var(--shadow-soft); font-size:1.2rem; font-weight:var(--weight-semibold); }.avatar-profile-preview img { width:100%; height:100%; object-fit:cover; }
#avatarStatus,#avatarCropStatus { min-height:1.25rem; margin:0; color:var(--color-ink-soft); font-size:var(--text-sm); }
#avatarCropDialog canvas { display:block; width:min(100%,288px); height:auto; margin:var(--space-4) auto; border-radius:50%; background:var(--surface-soft); box-shadow:var(--shadow-soft); }
#avatarCropDialog label { display:grid; gap:.25rem; margin-block:var(--space-3); color:var(--color-ink-soft); font-size:var(--text-sm); }
.v2-settings-preview { width: min(100%, 25rem); margin: var(--space-8) auto 0; border-top: 1px solid rgba(77, 67, 85, 0.12); }
.v2-settings-preview > div { display: grid; gap: 0.15rem; padding: var(--space-4) 0; border-bottom: 1px solid rgba(77, 67, 85, 0.1); }
.v2-settings-preview span { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.v2-settings-preview small { color: var(--color-ink-muted); font-size: var(--text-xs); }

.v2-bottom-nav { position: fixed; z-index: 900; right: max(var(--space-3), var(--safe-right)); bottom: max(var(--space-3), var(--safe-bottom)); left: max(var(--space-3), var(--safe-left)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(calc(100% - (var(--space-3) * 2)), 31rem); min-height: var(--nav-height); margin-inline: auto; padding: 0.35rem; overflow: hidden; border-radius: 1.7rem; box-shadow: var(--shadow-float), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, 0.18); }
.v2-bottom-nav::before { content: ""; position: absolute; inset: 0 9% 52%; border-radius: inherit; background: linear-gradient(105deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)); filter: blur(5px); pointer-events: none; }
.v2-tab { position: relative; z-index: 1; display: grid; grid-template-rows: 1.4rem auto; place-items: center; gap: 0.1rem; min-width: 0; min-height: var(--tap-size); padding: 0.25rem 0.08rem; border: 1px solid transparent; border-radius: 1.35rem; color: var(--color-ink-muted); background: transparent; font-size: clamp(0.62rem, 2.7vw, 0.72rem); font-weight: var(--weight-medium); cursor: pointer; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) ease; }
.v2-tab-icon { width: 1.22rem; height: 1.22rem; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.v2-tab[aria-selected="true"] { color: var(--color-ink); border-color: rgba(255, 255, 255, 0.42); background: linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(239, 235, 245, 0.22)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 5px 15px rgba(70, 57, 82, 0.08); }

.v2-bottom-sheet { align-self: flex-end; width: min(100%, 32rem); max-height: calc(100svh - var(--safe-top) - var(--space-8)); overflow-y: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
#accountModal { align-items: flex-end; padding: var(--space-3) var(--space-3) var(--safe-bottom); background: var(--surface-scrim); }
#accountModal .modal-content { width: min(100%, 32rem); max-width: none; border: 1px solid var(--glass-border); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-sm); background: rgba(255, 253, 251, 0.94); box-shadow: var(--shadow-float); }
.auth-gate { padding: calc(var(--safe-top) + var(--space-6)) max(var(--space-5), var(--safe-right)) calc(var(--safe-bottom) + var(--space-6)) max(var(--space-5), var(--safe-left)); background: transparent; }
.auth-card { width: min(100%, 23rem); padding: clamp(1.6rem, 7vw, 2.25rem); border: 1px solid rgba(255, 255, 255, 0.58); border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(255, 253, 250, 0.66), rgba(246, 243, 248, 0.48)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 18px 50px rgba(65, 53, 74, 0.1); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); }
.auth-card h1 { margin-bottom: var(--space-2); color: var(--color-ink); font-size: clamp(1.75rem, 7vw, 2.15rem); font-weight: var(--weight-semibold); letter-spacing: -0.045em; text-align: left; }
.auth-card p { margin-bottom: var(--space-5); color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-copy); }
.auth-card label { margin: var(--space-4) 0 var(--space-2); color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.auth-card .msg-input { min-height: 3rem; border: 1px solid rgba(85, 72, 94, 0.16); border-radius: var(--radius-md); color: var(--color-ink); background: rgba(255, 253, 251, 0.58); box-shadow: inset 0 1px 3px rgba(65, 53, 74, 0.035); font-weight: var(--weight-regular); }
.auth-card .msg-input:focus { border-color: rgba(79, 111, 183, 0.54); background: rgba(255, 255, 255, 0.74); }
.auth-card .auth-actions { gap: var(--space-2); margin-top: var(--space-5); }
.auth-card .modal-btn.btn-primary, .auth-card .auth-secondary { min-height: 3rem; border-radius: var(--radius-pill); font-weight: var(--weight-semibold); box-shadow: none; }
.auth-card .modal-btn.btn-primary { border: 1px solid rgba(98, 71, 128, 0.18); color: var(--color-accent-strong); background: linear-gradient(135deg, rgba(250, 241, 241, 0.92), rgba(231, 228, 246, 0.88)); }
.auth-card .auth-secondary { border: 1px solid rgba(80, 68, 91, 0.12); color: var(--color-ink-soft); background: rgba(255, 253, 251, 0.44); }
.auth-card .auth-message { color: var(--color-ink-soft); font-weight: var(--weight-medium); }
.auth-card .auth-message.error { color: var(--color-danger); }
.auth-card .auth-uid { background: rgba(255, 253, 251, 0.5); }

.v2-legacy-compat .user-bar, .v2-legacy-compat .calendar-card, .v2-legacy-compat .detail-card, .v2-legacy-compat .module-card { border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255, 253, 250, 0.72), rgba(248, 245, 247, 0.58)); box-shadow: var(--shadow-soft); }
.v2-legacy-compat .user-bar { padding: var(--space-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.v2-legacy-compat .user-profile { opacity: 0.68; filter: saturate(0.78); }
.v2-legacy-compat .user-profile.active { border: 1px solid rgba(121, 95, 155, 0.16); background: rgba(255, 255, 255, 0.48); box-shadow: 0 7px 18px rgba(74, 59, 86, 0.08); }
.v2-legacy-compat .me-badge { border: 1px solid rgba(255, 255, 255, 0.72); color: var(--color-accent-strong); background: rgba(242, 232, 241, 0.92); }
.v2-legacy-compat .user-name, .v2-legacy-compat .love-title, .v2-legacy-compat .meet-title, .v2-legacy-compat .month-title, .v2-legacy-compat .detail-header, .v2-legacy-compat .mod-header { color: var(--color-ink); }
.v2-legacy-compat .love-duration, .v2-legacy-compat .meet-duration, .v2-legacy-compat .help-btn { border-color: rgba(88, 74, 99, 0.1); color: var(--color-ink-soft); background: rgba(255, 253, 251, 0.55); }
.v2-legacy-compat .activity-bar { gap: var(--space-2); padding-inline: 0; }
.v2-legacy-compat .act-tab { border: 1px solid rgba(91, 76, 101, 0.12); color: var(--color-ink-soft); background: rgba(255, 253, 251, 0.48); box-shadow: none; font-weight: var(--weight-medium); }
.v2-legacy-compat .act-tab.active { border-color: rgba(121, 95, 155, 0.14); color: var(--color-accent-strong); background: linear-gradient(135deg, rgba(249, 235, 233, 0.82), rgba(226, 229, 246, 0.76)); box-shadow: 0 6px 16px rgba(82, 67, 94, 0.08); transform: none; }
.v2-legacy-compat .act-tab-add, .v2-legacy-compat .add-module-btn { border-color: rgba(95, 78, 108, 0.2); color: var(--color-ink-soft); background: transparent; }
.v2-legacy-compat .calendar-card, .v2-legacy-compat .detail-card { padding: var(--space-4); }
.v2-legacy-compat .nav-btn { color: var(--color-ink-soft); background: rgba(239, 235, 242, 0.72); }
.v2-legacy-compat .weekdays { color: var(--color-ink-muted); }
.v2-legacy-compat .day-cell { color: var(--color-ink-soft); background: rgba(255, 253, 251, 0.44); }
.v2-legacy-compat .day-cell.today, .v2-legacy-compat .day-cell.selected { border-color: rgba(121, 95, 155, 0.28); color: var(--color-accent-strong); background: rgba(241, 235, 244, 0.68); }
.v2-legacy-compat .log-item { border-color: rgba(91, 76, 101, 0.09); background: rgba(255, 253, 251, 0.46); }
.v2-legacy-compat .log-meta, .v2-legacy-compat .reaction-badge, .v2-legacy-compat .action-badge { color: var(--color-accent-strong); }
.v2-legacy-compat .log-msg, .v2-legacy-compat .reply-item, .v2-legacy-compat .input-container { color: var(--color-ink); background: rgba(255, 253, 251, 0.5); }
.v2-legacy-compat .msg-input { border-color: rgba(85, 72, 94, 0.14); color: var(--color-ink); background: rgba(255, 253, 251, 0.55); font-weight: var(--weight-regular); }
.v2-legacy-compat .btn-send, .v2-legacy-compat .bereal-btn { border: 1px solid rgba(98, 71, 128, 0.15); color: var(--color-accent-strong); background: linear-gradient(135deg, rgba(250, 241, 241, 0.9), rgba(231, 228, 246, 0.86)); box-shadow: none; }
.v2-legacy-compat .modules-container { gap: var(--space-4); }
.v2-legacy-compat .module-card { padding: var(--space-4); }

@keyframes v2-page-in { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 42rem) { .v2-app-shell { padding-top: calc(var(--safe-top) + var(--space-8)); } .v2-us-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v2-bottom-nav { bottom: max(var(--space-5), var(--safe-bottom)); } }
@media (max-width: 22rem) { :root { --page-gutter: 0.75rem; } .v2-page-header { gap: var(--space-3); } .v2-page-context p { font-size: 0.8rem; } .v2-context-item { padding-right: var(--space-2); } .v2-context-item + .v2-context-item { padding-left: var(--space-3); } .v2-bottom-nav { right: max(0.5rem, var(--safe-right)); left: max(0.5rem, var(--safe-left)); width: min(calc(100% - 1rem), 31rem); } .v2-legacy-compat .user-bar { padding-inline: var(--space-2); } .v2-legacy-compat .user-profile { min-width: 0; padding-inline: var(--space-2); } .v2-legacy-compat .center-content, .v2-legacy-compat .input-area, .v2-legacy-compat .msg-input { min-width: 0; } .v2-legacy-compat .btn-send { flex: 0 0 auto; padding-inline: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* P3F-D release controls, location search, and stable viewport surfaces. */
.todo-section-heading { flex-wrap:wrap; }
.todo-create-action { margin-inline-start:auto; min-width:4.5rem; min-height:var(--tap-size); }
.todo-section-heading .todo-filters { flex-basis:100%; }
.todo-empty-action { width:100%; margin-top:var(--space-3); }
.todo-empty-action[hidden] { display:none; }
.location-field { position:relative; display:grid; gap:var(--space-2); }
#usProfileDialog { inset:auto 0 var(--app-visual-viewport-bottom,0px); height:min(80svh,calc(var(--app-visual-viewport-height,80svh) - 1rem)); padding:0; overflow:hidden; }
#usProfileForm { display:flex; flex-direction:column; height:100%; min-height:0; }
.us-profile-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; padding:var(--space-5); }
.us-profile-footer { flex:none; margin:0; padding:var(--space-3) var(--space-5) max(var(--space-3),env(safe-area-inset-bottom)); border-top:1px solid var(--surface-border); background:var(--surface-raised); }
.location-input-wrap { position:relative; }
#usProfileDialog .location-input-wrap > input { width:100%; min-height:50px; padding-inline-end:3.15rem; }
.location-input-wrap > input::-webkit-search-cancel-button { display:none; }
.location-clear { position:absolute; inset-block:0; right:0; display:grid; place-items:center; width:50px; min-width:50px; border:0; border-radius:var(--radius-md); background:transparent; color:var(--color-accent-strong); font-size:1.5rem; cursor:pointer; touch-action:manipulation; }
.location-clear[hidden] { display:none; }
.location-clear:focus-visible { outline:2px solid var(--color-accent-strong); outline-offset:-3px; }
.location-use-button { justify-self:start; }
.location-field small, .location-field p { margin:0; color:var(--color-ink-soft); font-size:var(--text-xs); }
.search-options { position:static; max-width:100%; max-height:min(16rem,35dvh); margin:.15rem 0 0; padding:var(--space-2); overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scroll-padding-block:var(--space-2); list-style:none; border:1px solid var(--surface-border); border-radius:var(--radius-md); background:var(--surface-raised); box-shadow:var(--shadow-soft); }
.search-options[hidden] { display:none; }
.search-options [role="option"] { display:grid; gap:.15rem; width:100%; min-height:var(--tap-size); padding:var(--space-2) var(--space-3); border:0; border-radius:var(--radius-sm); color:var(--color-ink); background:transparent; text-align:left; cursor:pointer; }
.search-options [role="option"] small { color:var(--color-ink-muted); }
.search-options [role="option"][aria-selected="true"] { background:var(--surface-soft); color:var(--color-accent-strong); }
.v2-bottom-nav { width:min(calc(var(--app-viewport-width, 100vw) - (var(--space-3) * 2)),31rem); transform:translateZ(0); backface-visibility:hidden; contain:layout paint; }
@media (max-width:22rem) { .v2-bottom-nav { width:min(calc(var(--app-viewport-width, 100vw) - 1rem),31rem); } }
/* P3E-2A: viewer-local Today, read-only. */
@property --today-left { syntax: '<color>'; inherits: true; initial-value: #eacbb8; }
@property --today-right { syntax: '<color>'; inherits: true; initial-value: #c7d5ea; }
:root { transition: --today-left 3s ease, --today-right 3s ease; }
.shared-horizon { background: radial-gradient(ellipse 100% 85% at -10% 12%, var(--today-left), transparent 72%), radial-gradient(ellipse 100% 85% at 110% 28%, var(--today-right), transparent 72%), linear-gradient(142deg, #f8eee6, #f2edf0 49%, #e7ebf7); }
#todayOverview { min-height: 0; max-height: none; height: auto; gap: var(--space-6); }
.today-clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); width: 100%; }
.today-clock { display: grid; justify-items: center; gap: var(--space-1); min-width: 0; text-align: center; overflow-wrap: anywhere; }
.today-clock strong { font-size: clamp(1.8rem, 8vw, 2.5rem); font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); letter-spacing: -.04em; }
.today-clock small { color: var(--color-ink-soft); font-size: var(--text-xs); }
.today-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden; background: var(--surface-soft); border: 1px solid var(--surface-border); }
.today-avatar img { width: 100%; height: 100%; object-fit: cover; }
.today-context { display: grid; gap: var(--space-2); width: 100%; }
.today-context button { display: grid; gap: var(--space-1); padding: var(--space-3); white-space: normal; text-align: center; }
.today-context button span { font-size: var(--text-xs); color: var(--color-ink-soft); }
.today-context button strong { font-size: var(--text-md); font-weight: var(--weight-medium); }
#todayDataStatus { font-size: var(--text-sm); color: var(--color-ink-soft); }
#todayDataStatus:empty { display: none; }
.today-sheet { position: fixed; inset: auto 0 0; margin: auto; width: min(100%, 34rem); max-height: 80svh; box-sizing: border-box; overflow: auto; border: 1px solid var(--surface-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); background: var(--surface-raised); color: var(--color-ink); }
.today-sheet::backdrop { background: var(--surface-scrim); }
.today-sheet p { margin-block: var(--space-4); line-height: var(--leading-copy); overflow-wrap: anywhere; }
.today-sheet button { padding-inline: var(--space-5); }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

.v2-person img { width: 100%; height: 100%; object-fit: cover; }

/* P3E-2B1: daily question and mood. */
.v2-question-card { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-5); }
.today-interaction-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); }
.today-interaction-heading > div:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.today-interaction-heading span, .today-mood-pair > div > span { color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.today-interaction-heading h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.today-answer-presence { display: flex; flex: 0 0 auto; gap: var(--space-2); color: var(--color-ink-soft); font-size: var(--text-xs); }
.today-answer-presence span { padding: 0.32rem 0.55rem; border: 1px solid rgba(83, 69, 94, 0.1); border-radius: var(--radius-pill); background: rgba(255, 253, 251, 0.42); }
.today-question-text { max-width: 29ch; font-size: clamp(1.35rem, 6vw, 1.8rem); font-weight: var(--weight-medium); line-height: 1.18; letter-spacing: -0.035em; }
.today-interaction-hint, #questionAnswerStatus, #moodStatus { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
#questionAnswerForm { display: grid; gap: var(--space-3); }
#questionAnswerForm[hidden] { display: none; }
#questionAnswerForm label { color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
#questionAnswerInput { width: 100%; min-height: 6.5rem; resize: vertical; border: 1px solid rgba(85, 72, 94, 0.16); border-radius: var(--radius-md); padding: var(--space-3); color: var(--color-ink); background: rgba(255, 253, 251, 0.62); line-height: var(--leading-copy); }
.today-interaction-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.v2-mood-card { display: grid; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid rgba(77, 67, 85, 0.12); }
.today-mood-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.today-mood-pair > div { display: grid; gap: var(--space-2); min-width: 0; }
.today-mood-pair button, .today-mood-pair p { display: flex; align-items: center; min-height: var(--tap-size); margin: 0; padding: var(--space-2) var(--space-3); overflow-wrap: anywhere; border-radius: var(--radius-md); font-size: var(--text-sm); }
.today-mood-pair p { border: 1px solid rgba(80, 68, 91, 0.09); color: var(--color-ink-soft); background: rgba(255, 253, 251, 0.34); }
.mood-options { display: grid; gap: var(--space-2); margin-block: var(--space-5); }
.mood-options button { min-height: var(--tap-size); border: 1px solid rgba(80, 68, 91, 0.12); border-radius: var(--radius-md); color: var(--color-ink); background: rgba(255, 253, 251, 0.55); text-align: left; padding-inline: var(--space-4); }
.mood-options button[aria-pressed="true"] { border-color: rgba(121, 95, 155, 0.34); color: var(--color-accent-strong); background: linear-gradient(135deg, rgba(250, 241, 241, 0.88), rgba(231, 228, 246, 0.82)); font-weight: var(--weight-semibold); }
.question-reveal-body { display: grid; gap: var(--space-4); margin-block: var(--space-5); }
.question-reveal-body section { display: grid; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(77, 67, 85, 0.1); }
.question-reveal-body h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.question-reveal-body p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.v2-secondary-interactions { display: grid; border-bottom: 1px solid rgba(77, 67, 85, 0.12); }
.v2-thinking-card { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6) 0; }
.thinking-signal-button { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-size); border: 0; color: var(--color-ink); background: transparent; font-weight: var(--weight-semibold); text-align: left; }
.thinking-orb { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.94), rgba(238,205,194,.78) 42%, rgba(158,166,213,.7)); box-shadow: 0 5px 16px rgba(84,74,104,.16), inset 0 1px 5px rgba(255,255,255,.72); }
.thinking-orb.is-sent { animation: thinking-orb-pulse .8s var(--ease-out); }
#todayThinkingStatus { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
@keyframes thinking-orb-pulse { 50% { transform: scale(1.13); filter: saturate(1.16) brightness(1.05); } }
.v2-our-day { padding-block: var(--space-5); }
.our-day-open { display: grid; width: 100%; min-height: var(--tap-size); gap: var(--space-2); border: 0; padding: 0; color: var(--color-ink); background: transparent; text-align: left; }
.our-day-open > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.our-day-open small { color: var(--color-ink-muted); font-size: var(--text-xs); }
.our-day-open strong { font-size: var(--text-md); }
.our-day-open > span:last-child { color: var(--color-ink-soft); font-size: var(--text-sm); }
.our-day-body { display: grid; gap: var(--space-3); margin-block: var(--space-5); }
.our-day-body p { margin: 0; padding-bottom: var(--space-3); border-bottom: 1px solid rgba(77, 67, 85, 0.1); line-height: var(--leading-copy); }
.same-moment-shortcut { width: 100%; min-height: var(--tap-size); border: 1px solid rgba(80, 68, 91, 0.1); border-radius: var(--radius-md); color: var(--color-ink); background: rgba(255, 253, 251, 0.38); }
@media (max-width: 22rem) { .today-interaction-heading { display: grid; } .today-answer-presence { justify-self: start; } }

/* P3E-3B: future-facing Together and Shared To-do. */
.together-main { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.together-modules-host { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; align-items:start; gap:var(--space-4); }
.together-module[data-module-width="full"] { grid-column:1 / -1; }
.together-module[data-module-width="half"] { aspect-ratio:1 / 1; min-height:0; }
.together-customize { margin-left: auto; white-space: nowrap; }
.together-module[hidden] { display: none !important; }
.together-module[data-module-size="compact"] { --module-space: var(--space-3); }
.together-module[data-module-size="standard"] { --module-space: var(--space-5); }
.together-module[data-module-size="featured"] { --module-space: var(--space-6); }
.together-section { display: grid; gap: var(--space-4); min-width: 0; }
.together-up-next { padding-bottom: var(--space-5); border-bottom: 1px solid rgba(77, 67, 85, 0.12); }
.together-todos { gap:var(--space-2); padding:var(--space-3); }
.together-todos .together-section-heading { align-items:center; gap:.5rem; }
.together-todos .todo-filters { align-self:center; }
.together-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.together-section-heading > div:first-child { display: grid; gap: var(--space-1); min-width: 0; }
.together-section-heading span, .earlier-together-toolbar span { color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.035em; }
.together-section-heading h2, .earlier-together-entry h2, .earlier-together-toolbar h2, .together-future-slot h2 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.together-add-button { flex: 0 0 auto; }
.together-todo-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
#togetherTodoList { max-height: 8.7rem; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.together-todos .todo-filters { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.todo-filters { max-width:100%; overflow-x:auto; }
.todo-filters button { display:grid; grid-template-columns:auto auto; place-items:center; gap:.18rem; min-width:var(--tap-size); min-height:var(--tap-size); padding:.12rem .35rem; overflow:hidden; border:1px solid rgba(85,72,94,.14); border-radius:var(--radius-pill); color:var(--color-ink); background:var(--surface-soft); }
.todo-filters button small { font-size: .58rem; line-height: 1; }
.todo-filters button[aria-pressed="true"] { border-color: var(--color-accent-strong); background: var(--surface-raised); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.todo-filters img, .todo-assignee-icon img { width: 100%; height: 100%; object-fit: cover; }
.together-todos .todo-filters button { display:flex; height:44px; flex:0 0 auto; white-space:nowrap; }
.together-todos .todo-filters button > span { display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px; border-radius:50%; overflow:hidden; }
.together-todos .todo-filters button > .todo-filter-pair { display:flex; width:32px; flex-basis:32px; border-radius:0; overflow:visible; }
.todo-filter-pair { display: flex; justify-content: center; }
.todo-filter-pair > span { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; overflow: hidden; border: 1px solid white; border-radius: 50%; background: var(--surface-raised); font-size: .65rem; }
.todo-filter-pair > span + span { margin-left: -.38rem; }
.together-todo-row { display: grid; grid-template-columns: var(--tap-size) minmax(0, 1fr); align-items: center; min-width: 0; border-bottom: 1px solid rgba(77, 67, 85, 0.09); }
.together-todo-row:last-child { border-bottom: 0; }
.together-todo-row.is-compact { background: rgba(255, 253, 251, 0.24); }
.todo-complete-control { display: grid; place-items: center; width: var(--tap-size); min-height: var(--tap-size); border: 0; border-radius: 50%; color: var(--color-accent-strong); background: transparent; font-size: 1.35rem; cursor: pointer; }
.todo-row-main { display: grid; gap: 0.1rem; min-width: 0; min-height: var(--tap-size); padding: .35rem var(--space-2); border: 0; color: var(--color-ink); background: transparent; text-align: left; cursor: pointer; }
.todo-row-main strong { overflow-wrap: anywhere; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.35; }
.todo-row-main small { color: var(--color-ink-muted); font-size: var(--text-xs); }
.todo-row-meta { display: flex; align-items: center; gap: var(--space-2); min-height: 1.5rem; }
.todo-assignee-icon { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; overflow: hidden; border: 1px solid var(--surface-border); border-radius: 50%; background: var(--surface-raised); font-size: .7rem; }
.todo-assignee-icon.is-pair { display: inline-flex; width: 2rem; overflow: visible; border: 0; background: transparent; }
.todo-assignee-icon.is-pair > span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; overflow: hidden; border: 1px solid white; border-radius: 50%; background: var(--surface-raised); }
.todo-assignee-icon.is-pair > span + span { margin-left: -.45rem; }
.together-todo-row.is-done .todo-row-main strong { color: var(--color-ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.together-empty-copy, .together-status { margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
.together-status:empty { display: none; }
.together-retry { justify-self: start; }
.error-state-inline { color: var(--color-danger); }
.together-future-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.together-future-slot { display: grid; align-content: start; gap: var(--space-2); min-height: 7rem; padding: var(--space-4); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-lg); background: rgba(255, 252, 249, 0.28); }
.together-future-slot p, .earlier-together-entry p { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: var(--leading-copy); }
.earlier-together-entry { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-block: var(--space-5); border-top: 1px solid rgba(77, 67, 85, 0.12); }
.earlier-together-entry > div { display: grid; gap: var(--space-1); min-width: 0; }
.earlier-together-panel { display: grid; gap: var(--space-5); margin-top: var(--space-4); scroll-margin-top: calc(var(--safe-top) + var(--space-4)); }
.earlier-together-panel[hidden] { display: none; }
.earlier-together-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(77, 67, 85, 0.12); }
.earlier-together-toolbar > div { display: grid; gap: var(--space-1); }
.together-sheet h2 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.together-add-options { display: grid; gap: var(--space-2); margin-block: var(--space-5); }
.together-add-options button { justify-content: flex-start; text-align: left; }
.together-add-options button:disabled { cursor: default; opacity: 0.48; }
.todo-editor-form { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.todo-editor-form label { color: var(--color-ink-soft); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.todo-editor-form input, .todo-editor-form select { width: 100%; min-height: 3rem; border: 1px solid rgba(85, 72, 94, 0.16); border-radius: var(--radius-md); padding-inline: var(--space-3); color: var(--color-ink); background: rgba(255, 253, 251, 0.62); }
#todoEditorStatus { min-height: 1.25rem; margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); }
.todo-editor-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.todo-delete { justify-self: start; margin-top: var(--space-3); color: var(--color-danger); }
.together-module-edit-list { display:grid; gap:.45rem; margin:var(--space-4) 0; padding:0; list-style:none; }
.together-module-edit-row { display:grid; grid-template-columns:24px minmax(5.5rem,1fr) minmax(6.6rem,auto) 44px 44px auto; align-items:center; gap:.35rem; padding:.45rem; border:1px solid var(--surface-border); border-radius:var(--radius-md); background:var(--surface-soft); }
.together-module-edit-row.is-dragging { opacity:.45; }
.module-drag-handle { cursor:grab; color:var(--color-ink-muted); font-size:1.25rem; touch-action:none; }
.together-module-edit-row select,.together-module-edit-row button { min-height:44px; border:1px solid var(--surface-border); border-radius:var(--radius-sm); color:inherit; background:var(--surface-raised); }
.together-module-edit-row .module-remove { padding-inline:.5rem; color:var(--color-danger); }
#togetherModuleStatus { min-height:1.2rem; color:var(--color-danger); }
#customizeTogether[hidden] { display:none!important; }
.together-module { --module-radius:var(--radius-lg); --module-edit-radius:var(--module-radius); position:relative; min-width:0; border-radius:var(--module-radius); }
.together-module-controls { position:absolute; top:.45rem; right:.45rem; z-index:8; display:flex; gap:.3rem; }
.together-module-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid color-mix(in srgb,var(--color-ink) 18%,transparent); border-radius:50%; color:var(--color-ink); background:var(--surface-raised); box-shadow:var(--shadow-soft); font-size:1.15rem; }
.together-module-remove { color:var(--color-danger)!important; }
.together-modules-host.is-editing .together-module { animation:together-jiggle .18s ease-in-out infinite alternate; }
.together-modules-host.is-editing .together-module::after { content:''; position:absolute; inset:-5px; pointer-events:none; border:2px dashed color-mix(in srgb,var(--color-accent) 42%,transparent); border-radius:calc(var(--module-edit-radius) + 5px); }
.together-modules-host.is-editing .together-module:nth-child(even) { animation-direction:alternate-reverse; }
.together-modules-host.is-editing .together-module > :not(.together-module-controls) { pointer-events:none; user-select:none; }
.together-modules-host.is-editing .together-module.is-dragging { z-index:9; opacity:.94; animation:none; will-change:transform; filter:drop-shadow(0 14px 18px rgba(63,48,70,.18)); }
.together-add-module { grid-column:1 / -1; width:100%; min-height:56px; border:2px dashed color-mix(in srgb,var(--color-accent-strong) 48%,transparent); border-radius:var(--radius-lg); color:var(--color-accent-strong); background:color-mix(in srgb,var(--surface-raised) 60%,transparent); font:inherit; font-weight:var(--weight-semibold); }
@keyframes together-jiggle { from { rotate:-.22deg; } to { rotate:.22deg; } }

/* Bucket List: a compact stack of future moments, not another task board. */
.bucket-widget { grid-template-rows:auto minmax(0,1fr) auto; align-content:stretch; gap:.35rem; min-width:0; min-height:0; padding:.75rem; overflow:hidden; background:linear-gradient(150deg,color-mix(in srgb,var(--color-warm-soft) 58%,var(--surface-raised)),var(--surface-raised)); }
.bucket-widget-heading,.bucket-widget footer,.bucket-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.bucket-widget h2 { font-size:clamp(.92rem,4vw,1.08rem); line-height:1.1; }
.bucket-widget-heading .text-action { flex:0 0 44px; width:44px; min-height:44px; padding:0; font-size:1.35rem; }
.bucket-widget-items { display:flex; align-items:stretch; min-width:0; min-height:0; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.bucket-widget-items::-webkit-scrollbar { display:none; }
.bucket-widget-card { flex:0 0 100%; min-width:0; min-height:0; display:grid; align-content:center; gap:.18rem; padding:.45rem .55rem; scroll-snap-align:start; border:1px solid color-mix(in srgb,var(--bucket-accent,var(--color-accent)) 24%,transparent); border-radius:var(--radius-md); color:var(--color-ink); background:color-mix(in srgb,var(--bucket-accent,var(--color-accent)) 9%,var(--surface-raised)); text-align:left; }
.bucket-widget-card strong { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:.84rem; line-height:1.25; }
.bucket-widget-card small,.bucket-widget footer { color:var(--color-ink-muted); font-size:.68rem; }
.bucket-widget footer { justify-content:center; min-width:0; }
.bucket-widget footer .text-action { min-height:44px; padding:0 .25rem; font-size:.75rem; }
.bucket-widget-empty { align-self:center; margin-inline:auto; color:var(--color-ink-soft); font-size:.78rem; line-height:1.35; text-align:center; }
.bucket-dialog { width:min(92vw,31rem); max-height:min(82dvh,46rem); padding:clamp(1rem,4vw,1.4rem); overflow:auto; }
.bucket-dialog-heading { align-items:flex-start; }
.bucket-dialog-heading h2,.bucket-dialog-heading p { margin:0; }
.bucket-dialog-heading p { margin-top:.18rem; color:var(--color-ink-soft); font-size:var(--text-sm); }
.bucket-view-tabs { display:grid; grid-template-columns:1fr 1fr; gap:.25rem; margin-top:1rem; padding:.2rem; border-radius:var(--radius-pill); background:var(--surface-soft); }
.bucket-view-tabs button,.bucket-filters button { min-height:44px; border:0; border-radius:var(--radius-pill); color:var(--color-ink-soft); background:transparent; font:inherit; font-weight:var(--weight-semibold); }
.bucket-view-tabs button[aria-selected="true"],.bucket-filters button[aria-pressed="true"] { color:var(--color-accent-strong); background:var(--surface-raised); box-shadow:0 3px 12px rgba(63,48,70,.09); }
.bucket-filters { display:flex; gap:.35rem; margin:.65rem -.15rem; overflow-x:auto; scrollbar-width:none; }
.bucket-filters::-webkit-scrollbar { display:none; }
.bucket-filters button { flex:0 0 auto; padding:0 .8rem; font-size:.78rem; }
.bucket-item-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(7.5rem,.7fr) auto; gap:.45rem; align-items:center; margin:.75rem 0; }
.bucket-item-form input,.bucket-item-form select,.bucket-category-manager input { width:100%; min-width:0; min-height:44px; border:1px solid var(--surface-border); border-radius:var(--radius-md); padding:0 .7rem; color:var(--color-ink); background:var(--surface-raised); font:inherit; font-size:1rem; }
.bucket-item-form button { min-height:44px; }
.bucket-item-form p { grid-column:1 / -1; min-height:1rem; margin:0; color:var(--color-danger); font-size:.78rem; }
.bucket-items { display:grid; gap:.45rem; max-height:min(42dvh,24rem); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.bucket-item { --bucket-accent:var(--color-accent); position:relative; box-sizing:border-box; display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; min-height:3.5rem; overflow:hidden; border:1px solid color-mix(in srgb,var(--bucket-accent) 18%,var(--surface-border)); border-radius:var(--radius-md); background:linear-gradient(90deg,color-mix(in srgb,var(--bucket-accent) 18%,var(--surface-raised)) 0 5px,var(--surface-raised) 5px); }
.bucket-item > button { min-height:44px; border:0; color:inherit; background:transparent; }
.bucket-item-toggle { font-size:1.1rem; }
.bucket-item-copy { min-width:0; padding:.55rem .15rem; text-align:left; }
.bucket-item-copy strong,.bucket-item-copy small { display:block; }
.bucket-item-copy strong { overflow-wrap:anywhere; font-size:.9rem; line-height:1.25; }
.bucket-item-copy small { margin-top:.14rem; color:var(--color-ink-muted); font-size:.7rem; }
.bucket-item[data-reorderable="true"] { cursor:grab; }
.bucket-items.is-reordering { user-select:none; }
.bucket-item.is-dragging { z-index:2; opacity:.94; scale:1.012; cursor:grabbing; box-shadow:0 14px 26px color-mix(in srgb,var(--color-ink) 18%,transparent); will-change:transform; }
.bucket-item.is-done { opacity:.78; }.bucket-item.is-done .bucket-item-copy strong { text-decoration:line-through; }
.bucket-empty { margin:1rem 0; color:var(--color-ink-soft); text-align:center; }
.bucket-category-manager { margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--surface-border); }
.bucket-category-manager summary { min-height:44px; display:flex; align-items:center; color:var(--color-accent-strong); cursor:pointer; font-weight:var(--weight-semibold); }
#bucketCategoryForm,.bucket-category-row { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; gap:.35rem; align-items:center; margin:.35rem 0; }
#bucketCategoryForm { grid-template-columns:minmax(0,1fr) auto; }
.bucket-category-row button,#bucketCategoryForm button { min-height:44px; }
.bucket-category-row input:disabled { opacity:1; border-color:transparent; background:transparent; }
#bucketCategoryStatus { min-height:1rem; margin:.4rem 0 0; color:var(--color-danger); font-size:.78rem; }
[data-bucket-accent="travel"] { --bucket-accent:#6c8fb8; }[data-bucket-accent="food"] { --bucket-accent:#d18b65; }[data-bucket-accent="experiences"] { --bucket-accent:#9a78b6; }[data-bucket-accent="places"] { --bucket-accent:#5f9b82; }[data-bucket-accent="littleThings"] { --bucket-accent:#d19aa9; }[data-bucket-accent="custom"] { --bucket-accent:var(--color-accent); }
@media(max-width:22rem){.together-modules-host{gap:.65rem}.bucket-widget{padding:.6rem}.bucket-widget-card{padding:.35rem .45rem}.bucket-widget-card small{display:none}.bucket-item-form{grid-template-columns:minmax(0,1fr) auto}.bucket-item-form select{grid-column:1 / -1;grid-row:2}.bucket-item-form p{grid-row:3}.bucket-dialog{width:calc(100vw - 1rem);padding:.8rem}.bucket-dialog-heading{align-items:center}.bucket-dialog-heading p{display:none}}
@media(prefers-reduced-motion:reduce){.bucket-item,.bucket-widget-card{scroll-behavior:auto}.bucket-item.is-dragging{scale:1}}

.shared-sky-module { min-height:0; padding:var(--space-3); overflow:hidden; border:1px solid color-mix(in srgb,var(--sky-accent) 16%,transparent); border-radius:var(--radius-lg); background:linear-gradient(90deg,color-mix(in srgb,var(--sky-partnerAAtmosphere) 32%,var(--surface-raised)),var(--surface-raised) 50%,color-mix(in srgb,var(--sky-partnerBAtmosphere) 32%,var(--surface-raised))); box-shadow:var(--shadow-soft); isolation:isolate; }
.shared-sky-module > header { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.shared-sky-module > header span { color:color-mix(in srgb,var(--color-ink) 72%,transparent); font-size:.68rem; }
.shared-sky-module > header h2 { font-size:var(--text-md); }
.shared-sky-scene { position:relative; height:clamp(12rem,29vw,15rem); margin:.5rem 0; overflow:hidden; border-radius:var(--radius-md); background:linear-gradient(90deg,var(--sky-partnerAAtmosphere),var(--sky-partnerBAtmosphere)); }
.shared-sky-webgl { position:absolute; inset:0; z-index:4; display:block; width:100%; height:100%; }
.shared-sky-scene.is-webgl > .shared-sky-side,.shared-sky-scene.is-webgl > .sky-center-blend { visibility:hidden; }
.shared-sky-side { position:absolute; inset-block:0; left:0; width:62.5%; overflow:hidden; background:linear-gradient(160deg,color-mix(in srgb,var(--sky-partnerAAtmosphere) 75%,#fff),color-mix(in srgb,var(--sky-skyDay) 82%,#fff)); transition:background .8s ease; }
.shared-sky-side.is-partner { left:auto; right:0; background:linear-gradient(200deg,color-mix(in srgb,var(--sky-partnerBAtmosphere) 75%,#fff),color-mix(in srgb,var(--sky-skyDay) 82%,#fff)); }
.shared-sky-side:is([data-phase="Night"],[data-phase="Dusk"]) { background:linear-gradient(160deg,var(--sky-skyNight),color-mix(in srgb,var(--sky-partnerAAtmosphere) 45%,#18233d)); }
.shared-sky-side.is-partner:is([data-phase="Night"],[data-phase="Dusk"]) { background:linear-gradient(200deg,var(--sky-skyNight),color-mix(in srgb,var(--sky-partnerBAtmosphere) 45%,#18233d)); }
.shared-sky-side[data-phase="Dawn"] { background:linear-gradient(160deg,var(--sky-skyWarm),var(--sky-skyCool)); }
.shared-sky-orb { position:absolute; left:var(--sky-x,47%); top:calc(58% - var(--sky-lift,12px)); z-index:2; width:1.55rem; height:1.55rem; border-radius:50%; background:#fff2a8; box-shadow:0 0 20px #fff1a8cc; transform:translate(-50%,-50%); transition:left 60s linear,top 60s linear; animation:sky-orb-breathe 8s ease-in-out infinite alternate; }
.shared-sky-orb[data-night="true"] { background:#f0efff; box-shadow:inset -6px 1px 0 #c7c9df,0 0 18px #dfe4ff99; }
.shared-sky-orb[hidden] { display:none; }
.shared-sky-scene:not(.is-webgl)::after { content:""; position:absolute; z-index:4; inset:63.5% 0 0; border-radius:40% 35% 0 0 / 3% 2% 0 0; background:repeating-linear-gradient(0deg,transparent 0 5px,#dcecf512 6px 7px),linear-gradient(#8faab855,#42597566); pointer-events:none; }
/* Fallback is intentionally static; hidden CSS effects never compete with WebGL or dragging. */
.shared-sky-scene .sky-cloud,.shared-sky-scene .sky-rain,.shared-sky-scene .sky-snow,.shared-sky-scene .sky-fog,.shared-sky-scene .shared-sky-orb { animation-play-state:paused!important; }
.sky-cloud { display:none; position:absolute; z-index:3; width:3.6rem; height:.8rem; border-radius:50%; background:#ffffffa8; filter:blur(.4px); animation:sky-drift 18s linear infinite; }
.sky-cloud::after { content:""; position:absolute; width:1.45rem; height:1.45rem; left:.9rem; bottom:.05rem; border-radius:50%; background:inherit; }
.shared-sky-side:is([data-condition="partly-cloudy"],[data-condition="cloudy"],[data-condition="rain"],[data-condition="snow"],[data-condition="storm"]) .sky-cloud { display:block; }
.shared-sky-side:is([data-condition="overcast"],[data-condition="drizzle"],[data-condition="showers"],[data-condition="blowing-snow"],[data-condition="blizzard"],[data-condition="sleet"],[data-condition="freezing-precipitation"],[data-condition="ice-pellets"]) .sky-cloud { display:block; }
.sky-cloud.is-near { top:2.5rem; left:-1rem; animation-delay:-4s; }.sky-cloud.is-far { top:1.25rem; left:42%; opacity:.55; animation-delay:-13s; animation-duration:25s; }
.sky-rain,.sky-snow,.sky-fog { display:none; position:absolute; inset:0; z-index:4; pointer-events:none; }
.shared-sky-side:is([data-condition="rain"],[data-condition="storm"]) .sky-rain { display:block; opacity:.3; background:repeating-linear-gradient(105deg,transparent 0 9px,#d8e8ff 10px 11px,transparent 12px 19px); animation:sky-rain .75s linear infinite; }
.shared-sky-side:is([data-condition="drizzle"],[data-condition="showers"],[data-condition="sleet"],[data-condition="freezing-precipitation"],[data-condition="ice-pellets"]) .sky-rain { display:block; opacity:.22; background:repeating-linear-gradient(105deg,transparent 0 9px,#d8e8ff 10px 11px,transparent 12px 19px); animation:sky-rain 1.2s linear infinite; }
.shared-sky-side[data-condition="snow"] .sky-snow { display:block; opacity:.62; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px); background-size:13px 13px; animation:sky-snow 7s linear infinite; }
.shared-sky-side:is([data-condition="blowing-snow"],[data-condition="blizzard"]) .sky-snow { display:block; opacity:.7; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px); background-size:11px 11px; animation:sky-snow 5s linear infinite; }
.shared-sky-side[data-condition="fog"] .sky-fog { display:block; background:linear-gradient(transparent,#fff8,transparent); filter:blur(6px); animation:sky-fog 8s ease-in-out infinite alternate; }
.shared-sky-side:is([data-condition="mist"],[data-condition="haze"],[data-condition="dust"],[data-condition="unknown"]) .sky-fog { display:block; background:linear-gradient(transparent,#fff6,transparent); filter:blur(6px); animation:sky-fog 8s ease-in-out infinite alternate; }
.shared-sky-side[data-condition="storm"] { filter:saturate(.75) brightness(.82); }
.shared-sky-side .sky-rain,.shared-sky-side .sky-snow { inset:30% 12% 36.5%; mask-image:linear-gradient(transparent,#0008 30%,#0008 80%,transparent); }
.shared-sky-side[data-scene="thunder"] .sky-rain,.shared-sky-side[data-scene="thunder-snow"] .sky-rain { display:none; }
.shared-sky-side[data-scene="thunder-snow"] .sky-snow { display:block; opacity:.6; background:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0 / 15px 17px; }
.sky-center-blend { position:absolute; inset-block:0; left:37.5%; width:25%; z-index:6; background:linear-gradient(90deg,var(--sky-partnerAAtmosphere),color-mix(in srgb,var(--sky-partnerAAtmosphere) 50%,var(--sky-partnerBAtmosphere)),var(--sky-partnerBAtmosphere)); pointer-events:none; opacity:.42; }
@supports ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))) { .shared-sky-side { -webkit-mask-image:linear-gradient(90deg,#000 0 72%,transparent 100%); mask-image:linear-gradient(90deg,#000 0 72%,transparent 100%); }.shared-sky-side.is-partner { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28% 100%); mask-image:linear-gradient(90deg,transparent 0,#000 28% 100%); }.sky-center-blend { display:none; } }
.shared-sky-people { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.shared-sky-weather { position:absolute; z-index:5; top:63.5%; bottom:0; inset-inline:0; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--space-3); padding:0 .85rem; pointer-events:none; }
.shared-sky-weather-side { display:grid; align-content:center; justify-items:start; gap:.15rem; min-width:0; color:color-mix(in srgb,var(--color-accent) 42%,#142238); text-shadow:0 1px 2px rgb(255 255 255 / .3); }
.shared-sky-weather-side.is-partner { justify-items:end; color:color-mix(in srgb,var(--color-accent-strong) 52%,#17233b); text-align:right; font-weight:var(--weight-semibold); }
.shared-sky-weather-side[data-tone="dark"] { color:color-mix(in srgb,var(--color-accent) 22%,#fff); text-shadow:0 1px 2px rgb(15 19 32 / .7); }
.shared-sky-weather-side.is-partner[data-tone="dark"] { color:color-mix(in srgb,var(--color-accent-strong) 28%,#fff); }
.shared-sky-weather-side strong { font-size:clamp(1.45rem,6vw,1.85rem); line-height:1; font-variant-numeric:tabular-nums; }
.shared-sky-weather-side span { max-width:100%; font-size:clamp(.72rem,3vw,.88rem); line-height:1.25; text-wrap:balance; }
.shared-sky-person { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:.18rem; min-width:0; color:var(--color-accent); }
.shared-sky-person.is-partner { color:var(--color-accent-strong); }
.shared-sky-person.is-partner { text-align:right; grid-template-columns:minmax(0,1fr); }.shared-sky-person.is-partner .sky-person-avatar { grid-column:1; }.shared-sky-person.is-partner strong,.shared-sky-person.is-partner span { grid-column:1; }
.sky-person-avatar { grid-row:1/4; display:grid; place-items:center; width:2rem; height:2rem; overflow:hidden; border:2px solid #fff9; border-radius:50%; background:var(--surface-raised); }.sky-person-avatar img { width:100%; height:100%; object-fit:cover; }
.shared-sky-person span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-xs); color:color-mix(in srgb,currentColor 85%,#263041); }
.shared-sky-person > .sky-person-location { white-space:normal; overflow-wrap:anywhere; }
.shared-sky-person strong { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:350px) { .shared-sky-people { gap:.35rem; } .shared-sky-person { font-size:.82rem; } .shared-sky-person span { font-size:.68rem; } }
@keyframes sky-drift { to { transform:translateX(15rem); } } @keyframes sky-rain { to { background-position:0 24px; } } @keyframes sky-snow { to { background-position:8px 30px; } } @keyframes sky-fog { to { transform:translateX(9%); opacity:.45; } } @keyframes sky-orb-breathe { to { margin-top:-1px; filter:brightness(1.05); } } @keyframes sky-blend { to { opacity:.58; transform:translateX(3px); } }

.together-notes,.together-realme { padding:var(--module-space,var(--space-4)); }
.together-notes-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.8rem; max-height:18rem; margin:0; padding:.55rem .4rem; overflow-y:auto; list-style:none; }
.together-note { position:relative; display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:start; gap:.55rem; min-height:7.5rem; padding:1rem .85rem .75rem; border:1px solid rgb(78 62 45 / .08); border-radius:.25rem; background-color:color-mix(in srgb,var(--color-accent-soft) 58%,#fff7c9); background-image:linear-gradient(105deg,transparent 55%,rgb(255 255 255 / .24)),repeating-linear-gradient(0deg,rgb(80 60 30 / .025) 0 1px,transparent 1px 4px); box-shadow:0 .55rem 1.2rem rgb(70 45 30 / .16); transform:rotate(var(--note-tilt)); transform-origin:50% 8%; }.together-note.is-own { cursor:pointer; }.together-note::before { content:""; position:absolute; top:.35rem; left:50%; width:.55rem; height:.55rem; border-radius:50%; background:color-mix(in srgb,var(--color-accent-strong) 75%,#fff); box-shadow:0 1px 2px rgb(0 0 0 / .25); }.together-note[data-note-tint="sky"] { background-color:color-mix(in srgb,#d9f1ff 72%,var(--surface-raised)); }.together-note[data-note-tint="rose"] { background-color:color-mix(in srgb,#ffe0e8 72%,var(--surface-raised)); }.together-note[data-note-tint="lilac"] { background-color:color-mix(in srgb,#eadfff 72%,var(--surface-raised)); }.together-note p { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }.together-note small { color:var(--color-ink-muted); }.note-avatar { display:grid; place-items:center; width:2rem; height:2rem; overflow:hidden; border-radius:50%; background:var(--surface-raised); }.note-avatar img { width:100%; height:100%; object-fit:cover; }.note-delete { grid-column:2; justify-self:end; padding:.25rem .5rem; font-size:var(--text-xs); }
.note-actions { display:flex; gap:.25rem; }.note-actions button { min-height:44px; border:0; color:var(--color-accent-strong); background:transparent; }
.together-note-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem; }.together-note-form textarea { min-height:3rem; max-height:7rem; padding:.65rem; resize:vertical; border:1px solid var(--surface-border); border-radius:var(--radius-md); color:inherit; background:var(--surface-raised); }.together-note-form p { grid-column:1/-1; margin:0; }
.realme-moments { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }.realme-person { display:grid; align-content:start; gap:.45rem; min-width:0; padding:.65rem; border:1px dashed var(--surface-border); border-radius:var(--radius-md); text-align:center; }.realme-person-head { display:flex; align-items:center; justify-content:center; gap:.4rem; }.realme-slots { display:grid; gap:.4rem; }.realme-slot { position:relative; min-height:4.5rem; padding:0; overflow:hidden; border:1px solid var(--surface-border); border-radius:var(--radius-sm); color:var(--color-ink-soft); background:var(--surface-raised); touch-action:manipulation; user-select:none; }.realme-slot img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }.realme-slot small { position:absolute; right:.25rem; bottom:.2rem; padding:.12rem .28rem; border-radius:999px; color:#fff; background:rgb(20 18 25 / .72); }.realme-slot.is-empty { border-style:dashed; }.realme-slot.is-pressing { transform:scale(.98); }.realme-person span,.realme-person small,#realMeStatus { color:var(--color-ink-soft); font-size:var(--text-xs); }#realMeViewerImage { display:block; width:100%; max-height:65vh; object-fit:contain; border-radius:var(--radius-md); }
.page-hidden .sky-cloud,.page-hidden .sky-rain,.page-hidden .sky-snow,.page-hidden .sky-fog,.page-hidden .shared-sky-orb,.page-hidden .sky-center-blend,.together-modules-host.is-dragging .sky-cloud,.together-modules-host.is-dragging .sky-rain,.together-modules-host.is-dragging .sky-snow,.together-modules-host.is-dragging .sky-fog,.together-modules-host.is-dragging .shared-sky-orb { animation-play-state:paused!important; }
.v2-app-appearance { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5); }
.v2-app-appearance > div:first-child { display: grid; gap: var(--space-1); }
.v2-app-appearance > div:first-child > span { color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .035em; }
.v2-app-appearance h2 { font-size: var(--text-md); }
.v2-app-appearance p { color: var(--color-ink-soft); font-size: var(--text-sm); }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

@media (max-width: 22rem) {
  .together-section-heading, .earlier-together-entry, .earlier-together-toolbar { align-items: stretch; }
  .together-future-row { grid-template-columns: 1fr; }
  .earlier-together-entry, .earlier-together-toolbar { display: grid; }
  .together-module-edit-row { grid-template-columns:24px minmax(4.5rem,1fr) 44px 44px; }.together-module-edit-row select,.together-module-edit-row .module-remove { grid-column:2/-1; }
}
@media (prefers-reduced-motion: reduce) { .sky-cloud,.sky-rain,.sky-snow,.sky-fog,.shared-sky-orb,.sky-center-blend,.together-modules-host.is-editing .together-module { animation:none!important; }.shared-sky-orb,.shared-sky-side { transition:none; } }

/* Calendar-first read-only Rhythm. Keep seven 44px targets even at 320px. */
.rhythm-section { padding: 0; min-width: 0; overflow: hidden; }
.rhythm-section > h2, .rhythm-month-nav, .rhythm-selector, .rhythm-section > p, .rhythm-day-preview { margin: 12px 8px; }
.rhythm-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.rhythm-month-nav h3 { font-size: 1rem; margin: 0; }
.rhythm-month-nav button { min-width: 44px; min-height: 44px; }
.rhythm-selector { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 2px; }
.rhythm-filter { flex: 0 0 auto; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--border-subtle, #d8d5d0); border-radius: var(--radius-pill, 99px); padding: 8px 12px; min-height: 44px; background: transparent; color: inherit; font: inherit; }
.rhythm-filter[aria-pressed="true"] { background: rgba(120, 133, 158, .17); border-color: currentColor; }
.rhythm-grid, .rhythm-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.rhythm-weekdays { text-align: center; font-size: .75rem; }
.rhythm-day { position: relative; min-width: 44px; min-height: 58px; padding: 5px 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: inherit; font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rhythm-day[aria-pressed="true"] { border-color: currentColor; background: rgba(130, 140, 165, .10); }
.rhythm-markers { display: flex; gap: 4px; font-size: .72rem; font-weight: 600; }
.rhythm-markers > span { min-width: 12px; }
.rhythm-current { color: #765240; } .rhythm-partner { color: #435e7d; }
.rhythm-unattributed { position: absolute; top: 1px; right: 3px; font-size: .65rem; }
.rhythm-note { font-size: .78rem; line-height: 1.5; }
.rhythm-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-block: 12px; }
.rhythm-table th, .rhythm-table td { padding: 8px 3px; text-align: center; overflow-wrap: anywhere; }
.rhythm-table th:first-child { width: 46%; text-align: left; }
.rhythm-day-preview details { display: none; }
#rhythmDetail summary { min-height: 44px; padding-block: 12px; cursor: pointer; overflow-wrap: anywhere; }
.rhythm-section button:focus-visible, #rhythmDetail summary:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
@media (max-width: 350px) { .rhythm-section { margin-inline: calc((100% - 310px) / 2); width: 310px; max-width: none; } }
#appUpdateNotice{position:fixed;z-index:10000;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px;background:#2d1e27;color:#fff;box-shadow:0 8px 24px #0004;font:14px/1.4 system-ui,sans-serif}
#appUpdateNotice button{min-height:44px;padding:8px 12px;border:0;border-radius:8px;background:#fff;color:#2d1e27;font:inherit;cursor:pointer}
#appUpdateNotice button:focus-visible{outline:3px solid #ff9fbc;outline-offset:2px}
@media(max-width:460px){#appUpdateNotice{align-items:stretch;flex-direction:column}}