/* Glassmorphism layer. Loaded last: translucent surfaces, soft blur, soft shadows, calm motion. */
:root {
  --g-fill: rgba(255, 255, 255, .52); --g-fill-2: rgba(255, 255, 255, .72); --g-line: rgba(255, 255, 255, .78);
  --g-blur: blur(20px) saturate(1.6); --g-shadow: 0 10px 32px rgba(48, 36, 78, .14), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
.glass, .tray, .sheet, .voice-pill, .topbar .icon-btn, .chip, .title-input, .date-input, .page-frame, .latest, .welcome-copy, .moment-hero-card, .day-card-glass {
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
}
html, body { background: #EFE9F7; }
#app { background: #FBF6EE; }

/* ---- buttons: tinted glass with a soft glow ---- */
.btn-primary { background: linear-gradient(180deg, rgba(255, 112, 184, .95), rgba(255, 64, 160, .88)); color: #fff; border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 12px 28px rgba(255, 64, 160, .38), 0 1px 0 rgba(255, 255, 255, .85) inset, 0 -2px 6px rgba(160, 20, 100, .22) inset; text-shadow: 0 1px 2px rgba(150, 10, 90, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 22px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn-primary:active { transform: scale(.975); box-shadow: 0 6px 14px rgba(255, 64, 160, .3), 0 1px 0 rgba(255, 255, 255, .85) inset; }
.btn-secondary { background: linear-gradient(180deg, rgba(220, 255, 110, .85), rgba(190, 240, 60, .7)); color: var(--ink); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 10px 24px rgba(150, 190, 20, .3), 0 1px 0 rgba(255, 255, 255, .9) inset; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 22px; transition: transform .25s var(--ease); }
.btn-secondary:active { transform: scale(.975); }
.btn-danger { background: linear-gradient(180deg, rgba(255, 130, 100, .95), rgba(255, 90, 60, .88)); color: #fff; border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 10px 24px rgba(255, 90, 60, .35); border-radius: 22px; }
.link { text-decoration-color: rgba(255, 79, 163, .7); }
.icon-btn, .topbar .icon-btn { background: var(--g-fill-2); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); transition: transform .2s var(--ease); }
.icon-btn:active { transform: scale(.92); }

/* ---- surfaces ---- */
.tray { background: var(--g-fill-2); border: 1px solid var(--g-line); border-radius: 26px; box-shadow: var(--g-shadow); }
.tab { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; transition: all .25s var(--ease); }
.tab.on { background: linear-gradient(180deg, rgba(255, 112, 184, .95), rgba(255, 64, 160, .88)); color: #fff; box-shadow: 0 6px 16px rgba(255, 64, 160, .35); transform: none; border-color: rgba(255, 255, 255, .8); }
.tray-item { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); border-radius: 16px; box-shadow: 0 3px 10px rgba(48, 36, 78, .08); transition: transform .25s var(--ease), box-shadow .25s; }
.tray-item:nth-child(n) { background: rgba(255, 255, 255, .55); }
.tray-item:active { transform: scale(.94); }
.sheet { background: var(--g-fill-2); border: 1px solid var(--g-line); border-bottom: 0; border-radius: 30px 30px 0 0; box-shadow: 0 -12px 50px rgba(48, 36, 78, .2); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); animation: sheetUp .5s var(--ease) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-backdrop { background: rgba(48, 36, 78, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.voice-pill { background: var(--g-fill-2); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); }
.vp-play { background: linear-gradient(180deg, #ff70b8, #ff40a0); border: 1px solid rgba(255, 255, 255, .8); color: #fff; box-shadow: 0 4px 12px rgba(255, 64, 160, .4); }
.chip { background: var(--g-fill); border: 1px solid var(--g-line); border-radius: 16px; box-shadow: 0 4px 14px rgba(48, 36, 78, .08); transition: transform .25s var(--ease), box-shadow .25s; }
.chip.lt-morning { background: rgba(160, 215, 255, .55); } .chip.lt-golden { background: rgba(255, 220, 90, .6); } .chip.lt-dark { background: rgba(185, 175, 255, .55); }
.chip.on { box-shadow: 0 8px 20px rgba(48, 36, 78, .18), 0 0 0 2px #fff inset; transform: translateY(-2px); }
.title-input, .date-input { background: var(--g-fill-2); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); }
.thought-input { background: rgba(255, 244, 168, .6); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 12px 30px rgba(180, 150, 20, .2); }
.text-wrap::before { background: rgba(37, 199, 183, .75); }
.mic { background: linear-gradient(180deg, #ff70b8, #ff40a0); color: #fff; border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 30px rgba(255, 64, 160, .45), 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 9px rgba(255, 255, 255, .45); }
.mic.rec { background: linear-gradient(180deg, #ff9a78, #ff6b4a); }
@keyframes breathe { 50% { box-shadow: 0 14px 30px rgba(255, 107, 74, .5), 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 18px rgba(255, 255, 255, .3); } }
.toast { background: rgba(30, 27, 46, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 12px 30px rgba(30, 27, 46, .35); animation: toastIn .5s var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.page-frame { background: rgba(255, 255, 255, .38); border: 1px solid var(--g-line); border-radius: 30px; margin: 4px 0 8px; padding: 14px 12px; box-shadow: var(--g-shadow); }
.page { box-shadow: 0 2px 4px rgba(48, 36, 78, .1), 0 18px 36px rgba(48, 36, 78, .18); border: 1px solid rgba(255, 255, 255, .9); }
.welcome-copy { background: var(--g-fill); border: 1px solid var(--g-line); border-radius: 28px; padding: 22px 18px; box-shadow: var(--g-shadow); margin: 0 2px; }
.bottom .hint { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 4px 12px rgba(48, 36, 78, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: none; }
.stamping-text { background: var(--g-fill-2); border: 1px solid var(--g-line); transform: none; box-shadow: var(--g-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.deco.selected { outline: 1.5px dashed rgba(255, 255, 255, .95); outline-offset: 5px; box-shadow: 0 0 0 4px rgba(255, 79, 163, .25); border-radius: 6px; }
.deco-del, .deco-handle { background: rgba(255, 255, 255, .85); border: 1px solid #fff; color: var(--ink); box-shadow: 0 4px 10px rgba(48, 36, 78, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.day-card::before { opacity: .85; }
.founder .stat { background: var(--g-fill-2); border: 1px solid var(--g-line); }

/* ---- CALENDAR: pure white, like the reference ---- */
#app[data-screen="calendar"] { background: #fff; }
#app[data-screen="calendar"]::before { background: #fff; background-image: none; }
.calendar { padding-top: calc(env(safe-area-inset-top) + 4px); }
.calendar .cal-head { height: 44px; }
.calendar .month-nav { align-items: flex-end; margin: 8px 0 14px; }
.calendar .month-nav h1 { font-size: inherit; font-weight: 400; display: flex; align-items: flex-end; gap: 10px; line-height: 1; }
.calendar .month-nav h1 .big { font-family: var(--serif); font-weight: 400; font-size: 84px; letter-spacing: -.04em; line-height: .86; color: var(--ink); font-variation-settings: "opsz" 144; }
.calendar .month-nav h1 .stack { display: flex; flex-direction: column; gap: 0; padding-bottom: 8px; }
.calendar .month-nav h1 .yr { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; background: none; color: #8d889c; padding: 0; transform: none; }
.calendar .month-nav h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; color: var(--ink); letter-spacing: -.02em; }
.calendar .month-nav .icon-btn { background: none; border: 0; box-shadow: none; color: #b4afc0; width: 36px; height: 36px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.calendar .weekdays span { font-family: var(--sans); font-size: 11px; font-weight: 500; color: #9a95a8; opacity: 1; }
.calendar .grid { gap: 6px 3px; }
.calendar .cell { aspect-ratio: auto; min-height: 62px; align-items: flex-start; padding: 2px 3px; justify-content: flex-start; gap: 2px; }
.calendar .cell::before { display: none !important; }
.calendar .cell .num { font-family: var(--sans); font-size: 12px; font-weight: 500; color: #a09bb0; position: static; background: none !important; width: auto; height: auto; border: 0 !important; box-shadow: none !important; margin: 0 !important; display: block; padding: 0; border-radius: 0; }
.calendar .cell.future .num { color: #d0ccda; }
.calendar .cell.future { opacity: 1; }
.calendar .cell.has .num { color: var(--ink); }
.calendar .cell.today .num { color: #fff !important; background: linear-gradient(180deg, #ff70b8, #ff40a0) !important; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; box-shadow: 0 3px 8px rgba(255, 64, 160, .4) !important; }
.calendar .cell .cover { width: 100%; height: auto; display: grid; place-items: center; margin-top: 1px; }
.calendar .cell.has .cover .stamp-wrap { font-size: 6.6cqw; }
.calendar .cell .dots { margin-top: 2px; padding: 0; justify-content: flex-start; gap: 2px; }
.calendar .cell .dot { width: 4px; height: 4px; border-width: 1px; }
.calendar .cell.today:not(.has), .calendar .cell.today.has { background: none; box-shadow: none; }
.calendar .cell.today:not(.has) .dots { margin-top: 4px; }
.latest { background: linear-gradient(180deg, rgba(255, 240, 248, .8), rgba(240, 252, 220, .8)); border-radius: 26px; margin: 12px 0 0; padding: 10px 0 0; box-shadow: var(--g-shadow); border: 1px solid #fff; }
.latest-title { padding: 4px 18px 0; font-size: 20px; }
.latest-row { padding: 6px 16px 16px; }
.calendar .bottom .hint { background: #fff; border: 1px solid #f0e8f4; }

/* ---- CAMERA: bright live view + 3D stamp cut-out ---- */
.camera { background: #fff; padding: 0; display: block; overflow: hidden; }
.camera::before { display: none; }
.camera > * { position: relative; z-index: 2; }
.cam-bg { position: absolute !important; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(26px) saturate(1.45) brightness(1.18) contrast(.95); z-index: 0 !important; }
.cam-wash { position: absolute !important; inset: 0; z-index: 1 !important; background: radial-gradient(90% 60% at 50% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 70%), linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .5)); }
.camera > .cam-close { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top) + 12px); left: 14px; background: var(--g-fill-2); border: 1px solid var(--g-line); box-shadow: var(--g-shadow); color: var(--ink); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.cam-title { text-align: center; color: var(--ink); font-size: 28px; margin: calc(env(safe-area-inset-top) + 18px) 0 0; text-shadow: 0 1px 12px rgba(255, 255, 255, .8); }
.cam-title em { color: #ff2f93; font-style: italic; }
.plate-wrap { display: grid; place-items: center; margin-top: 14px; perspective: 1100px; --pw: min(80vw, 318px, calc((100dvh - 330px) * .786)); }
.plate { position: relative; width: var(--pw); aspect-ratio: 330 / 420; transform: rotateX(7deg) rotateY(-7deg) rotateZ(-1deg); transform-style: preserve-3d; animation: floatPlate 7s ease-in-out infinite; transition: transform .3s var(--ease); }
@keyframes floatPlate { 0%, 100% { transform: rotateX(7deg) rotateY(-7deg) rotateZ(-1deg) translateY(0); } 50% { transform: rotateX(5deg) rotateY(-3deg) rotateZ(.4deg) translateY(-6px); } }
.plate.punch { animation: none; transform: rotateX(2deg) rotateY(0) scale(.965); }
.plate-view { position: absolute; overflow: hidden; background: #cfd6e4; }
.plate-view .cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-art { position: absolute; inset: 0; pointer-events: none; }
.plate-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cam-hint { text-align: center; color: #4a4560; font-weight: 600; font-size: 14px; margin: 18px 0 0; text-shadow: 0 1px 8px rgba(255, 255, 255, .9); }
.camera > .cam-bar { position: absolute; left: 0; right: 0; bottom: 0; background: none; padding: 0 30px calc(30px + env(safe-area-inset-bottom)); z-index: 5; }
.shutter { background: var(--g-fill); border: 1px solid #fff; box-shadow: 0 14px 34px rgba(48, 36, 78, .28), 0 1px 0 rgba(255, 255, 255, .9) inset; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); transition: transform .25s var(--ease); }
.shutter span { background: linear-gradient(180deg, #ff70b8, #ff40a0); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 6px 16px rgba(255, 64, 160, .5), 0 1px 0 rgba(255, 255, 255, .7) inset; }
.shutter:active { transform: scale(.94); }
.cam-flip { background: var(--g-fill-2); border: 1px solid var(--g-line); color: var(--ink); box-shadow: var(--g-shadow); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.cam-flash { position: absolute !important; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 8 !important; }
.cam-flash.go { animation: shot .5s ease-out; }
@keyframes shot { 0% { opacity: .95; } 100% { opacity: 0; } }
.camera > .cam-msg { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 7; }

/* ---- motion: calm, fluid, never bouncy ---- */
.enter-fwd { animation: enterFwd .5s var(--ease) both; }
.enter-back { animation: enterBack .5s var(--ease) both; }
@keyframes enterFwd { from { opacity: 0; transform: translateX(26px) scale(.985); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes enterBack { from { opacity: 0; transform: translateX(-26px) scale(.985); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.screen > * { animation: riseIn .6s var(--ease) both; }
.screen > *:nth-child(2) { animation-delay: .05s; } .screen > *:nth-child(3) { animation-delay: .1s; } .screen > *:nth-child(4) { animation-delay: .15s; } .screen > *:nth-child(5) { animation-delay: .2s; } .screen > *:nth-child(6) { animation-delay: .25s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.camera.screen > *, .camera > * { animation: none; }
.cell.has .stamp-wrap { animation: stampLand .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes stampLand { from { opacity: 0; transform: translateY(-8px) scale(1.18) rotate(-4deg); } to { opacity: 1; } }
.latest-card { animation: riseIn .6s var(--ease) both; }
.page { animation: pageIn .7s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(18px) scale(.97) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.page-frame .page-stamp { animation: stampDrop .75s var(--ease) .15s both; }
@keyframes stampDrop { from { opacity: 0; transform: translateX(-50%) translateY(-18px) rotate(-6deg) scale(1.12); } to { opacity: 1; transform: translateX(-50%) rotate(-2deg); } }
.tray-item, .btn-primary, .btn-secondary, .chip, .tab { will-change: transform; }
.chip:active, .tab:active { transform: scale(.96); }
.deco.landing { animation: settle .45s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .plate { animation: none; } }

.calendar .month-nav { justify-content: space-between; }
.calendar .month-nav .arrows { display: flex; gap: 2px; padding-bottom: 6px; }
.calendar .cell .num { order: -1; }
.calendar .cell .cover { order: 0; place-items: start; justify-items: start; }
.calendar .cell .dots { order: 1; }
.calendar .cell { align-items: flex-start; }
.camera { display: flex; flex-direction: column; align-items: center; }
.camera > .plate-wrap { margin: auto 0; --pw: min(88vw, 356px, calc((100dvh - 300px) * .786)); }
.camera > .cam-hint { margin: 0 0 128px; }
.page { --pw: min(calc(var(--appw) - 64px), calc((100dvh - var(--chrome)) * .8)); }
.thought-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 79, 163, .45), 0 12px 30px rgba(180, 150, 20, .2); }
.title-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 79, 163, .4), var(--g-shadow); }
.cam-hint { padding: 0 32px; }

/* keyboard + screen reader friendliness */
:focus-visible { outline: 3px solid rgba(255, 79, 163, .75); outline-offset: 3px; border-radius: 10px; }
button:focus:not(:focus-visible) { outline: none; }
#splash { position: absolute; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 14px; background: #FBF6EE; transition: opacity .45s var(--ease), transform .45s var(--ease); }
#splash.gone { opacity: 0; transform: scale(1.03); pointer-events: none; }
.splash-mark { width: 74px; height: 92px; background: linear-gradient(180deg, #ff70b8, #ff40a0); border-radius: 6px; clip-path: url(#lt-stamp); box-shadow: 0 10px 30px rgba(255, 64, 160, .4); animation: floatPlate 3s ease-in-out infinite; }
.splash-name { font: 700 22px var(--serif); color: var(--ink); }
.screen { -webkit-overflow-scrolling: touch; }