/* Pop Scrapbook: the redesign. Loaded after styles.css, so it overrides the earlier look. */
:root {
  --ink: #1E1B2E; --bg: #FBF5EA; --pink: #FF4FA3; --lime: #C6F135; --coral: #FF6B4A; --yellow: #FFD93D; --turq: #25C7B7; --blue: #3B5BFF;
  --cream: #FBF5EA; --paper: #FFFDF8; --plum: #1E1B2E; --plum-soft: #5E5873; --red: #FF4FA3; --kraft: #7D7396; --apricot: #FFA94D;
  --line: rgba(30, 27, 46, .16); --stamp-paper: #FFFDF8; --page-bg: #FFFDF8; --page-ink: #1E1B2E; --postmark-blend: multiply; --grain: none;
}
html, body { background: #F1E8D8; }
#app { background: var(--bg); }
#app::before { content: ""; position: fixed; z-index: 0; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--appw); background: var(--bg-pink) center / cover no-repeat; pointer-events: none; transition: opacity .3s; }
#app[data-screen="moment"]::before, #app[data-screen="thought"]::before { background-image: var(--bg-lime); }
#app[data-screen="frame"]::before, #app[data-screen="decorate"]::before, #app[data-screen="ready"]::before { background-image: var(--bg-turq); }
#app[data-screen="tale"]::before, #app[data-screen="day"]::before { background-image: var(--bg-yellow); }
.screen { position: relative; z-index: 1; }
h1, h2 { font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
h1 em, h2 em, .latest-title em { font-style: italic; font-weight: 500; }

/* highlighter-pen words */
.hl { display: inline-block; padding: 0 .16em; margin: 0 -.04em; border-radius: .18em; background: var(--lime); transform: rotate(-1.4deg); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-lime { background: var(--lime); } .hl-blue { background: #9ED5FF; } .hl-pink { background: #FFB3D8; } .hl-yellow { background: var(--yellow); }

/* buttons: ink outline + hard shadow, like a die-cut sticker */
.btn-primary { background: var(--pink); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; height: 60px; font-weight: 800; font-size: 18px; letter-spacing: -.005em; box-shadow: 0 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn-primary.big { height: 68px; font-size: 20px; }
.btn-secondary { background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; height: 56px; font-weight: 800; box-shadow: 0 4px 0 var(--ink); }
.btn-secondary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn-danger { background: var(--coral); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); border-radius: 18px; font-weight: 800; }
.link { color: var(--ink); font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--pink); text-underline-offset: 4px; }
.icon-btn { background: #fff; border: 2px solid var(--ink); width: 42px; height: 42px; box-shadow: 0 2px 0 var(--ink); }
.topbar { margin: 0; }
.topbar .icon-btn { margin-left: 0; }
.topbar-title { font-family: var(--serif); font-weight: 700; font-size: 18px; }

/* ---------- the cut-out stamp ---------- */
.stamp-wrap { width: 10em; }
.stamp { width: 10em; height: 12.6em; padding: 1.05em 1.05em 0; background-color: var(--stamp-paper); background-image: none; clip-path: url(#lt-stamp); -webkit-mask: none; mask: none; }
.stamp::before { content: ""; position: absolute; inset: .52em; border: .05em solid rgba(30, 27, 46, .2); pointer-events: none; z-index: 2; }
.stamp-photo { aspect-ratio: auto; height: 10.05em; border-radius: .12em; outline: none; box-shadow: none; }
.stamp-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 .06em rgba(30, 27, 46, .45), inset 0 0 .6em rgba(0, 0, 0, .18); pointer-events: none; }
.stamp-foot { height: 1.6em; font-size: .52em; color: var(--ink); opacity: .75; letter-spacing: .1em; padding: 0 .2em; }
.stamp-shadow { filter: drop-shadow(0 .06em 0 rgba(30, 27, 46, .5)) drop-shadow(0 .4em .55em rgba(30, 27, 46, .3)); }
.stamp-wrap.mini .stamp { padding: 1em 1em 0; }
.stamp-wrap.mini .stamp::before { display: none; }
.stamp-wrap.mini .stamp-foot { display: flex; visibility: hidden; }
.stamp-wrap.mini .stamp-shadow { filter: drop-shadow(0 .05em 0 rgba(30, 27, 46, .55)) drop-shadow(0 .25em .3em rgba(30, 27, 46, .3)); }
.postmark { width: 10.4em; right: -3.4em; bottom: -1.2em; opacity: .9; }
.photo-empty { background: repeating-linear-gradient(135deg, #FFD6EA 0 .55em, #FFF1F7 .55em 1.1em); }
.photo-empty span { color: var(--pink); font-family: var(--sans); font-weight: 800; }

/* ---------- scrapbook page ---------- */
.page { background-image: none; background-color: #FFFDF8; border-radius: 6px; box-shadow: 0 1px 0 rgba(30, 27, 46, .12), 0 6px 14px rgba(30, 27, 46, .12), 0 22px 40px rgba(30, 27, 46, .18); }
.page::before { display: none; }
.page-block { position: absolute; z-index: 0; left: 13%; top: 7%; width: 74%; height: 66%; transform: rotate(-4.5deg); border-radius: 3px; opacity: .92; clip-path: polygon(0 0, 100% 1.2%, 99% 97%, 92% 99%, 85% 97%, 76% 99.5%, 66% 97%, 55% 99%, 44% 97%, 33% 99.4%, 22% 97%, 11% 99%, 1% 97%); }
.page-stamp { z-index: 1; top: 8.4%; }
.page-text { z-index: 1; top: 78.4%; }
.page-title { font-family: var(--serif); font-weight: 700; font-size: 6cqw; }
.page-date { color: var(--ink); opacity: .6; }
.page-thought { color: var(--ink); }
.decor-layer { z-index: 3; }

/* printed stickers: thick white die-cut edge */
.deco.k-stickers { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff) drop-shadow(0 3px 3px rgba(30, 27, 46, .35)); }
.deco.k-stickers svg { filter: none; }
.deco.k-stickers svg * { stroke-width: 2.8; }
.deco.k-tape { filter: drop-shadow(0 1.5px 1.5px rgba(30, 27, 46, .3)); opacity: .96; }
.deco.selected { filter: none; outline-color: var(--ink); }
.deco-del { background: var(--pink); color: var(--ink); border: 2px solid var(--ink); }
.deco-handle { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); }

/* ---------- welcome ---------- */
.welcome { padding-top: calc(env(safe-area-inset-top) + 18px); }
.welcome-collage { position: relative; height: 330px; margin: 0 auto; width: 100%; max-width: 360px; }
.wc { position: absolute; transform: rotate(var(--rot)); animation: drop .6s cubic-bezier(.2, .7, .3, 1) both; }
.wc1 { left: 0; top: 36px; animation-delay: .05s; } .wc3 { right: 0; top: 52px; animation-delay: .15s; } .wc2 { left: 50%; top: 4px; margin-left: -62px; z-index: 2; animation-delay: .25s; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) rotate(var(--rot)) scale(1.06); } to { opacity: 1; transform: rotate(var(--rot)); } }
.wc-tape { position: absolute; width: 92px; z-index: 4; filter: drop-shadow(0 1px 1.5px rgba(30, 27, 46, .3)); }
.wc-tape svg { width: 100%; display: block; }
.wc-tape.t1 { left: 70px; top: 0; transform: rotate(-12deg); } .wc-tape.t2 { right: 56px; top: 36px; transform: rotate(14deg); }
.wc-sticker { position: absolute; z-index: 5; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 3px rgba(30, 27, 46, .35)); }
.wc-sticker svg { width: 100%; display: block; }
.wc-sticker.s1 { width: 76px; left: 4px; bottom: 28px; transform: rotate(-10deg); } .wc-sticker.s2 { width: 60px; right: 20px; bottom: 54px; transform: rotate(12deg); } .wc-sticker.s3 { width: 112px; left: 50%; margin-left: -40px; bottom: 6px; transform: rotate(-4deg); }
.welcome-copy { text-align: center; padding: 8px 4px 0; }
.welcome h1 { font-size: 34px; line-height: 1.12; }
.welcome p { color: var(--plum-soft); font-size: 16px; }
.brand-line { color: var(--ink); font-weight: 700; }
.brand { color: var(--ink); font-weight: 700; }

/* ---------- calendar ---------- */
.cal-head { height: 46px; }
.month-nav { margin: 6px 0 4px; }
.month-nav h1 { font-size: 44px; line-height: 1; display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.month-nav h1 .yr { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .12em; background: var(--ink); color: var(--cream); padding: 3px 8px; border-radius: 6px; transform: rotate(3deg); }
.weekdays span { color: var(--ink); opacity: .55; font-size: 12px; }
.grid { gap: 2px 3px; }
.cell { aspect-ratio: 1 / 1.3; border-radius: 0; }
.cell .num { color: var(--ink); font-size: 13.5px; }
.cell:not(.has):not(.future):not(.today)::before { content: ""; position: absolute; left: 12%; right: 12%; top: 8%; bottom: 22%; border: 1.5px dashed rgba(30, 27, 46, .18); border-radius: 3px; }
.cell:not(.has) .num { margin-top: 15px; position: relative; }
.cell.today:not(.has) { background: transparent; box-shadow: none; }
.cell.today:not(.has) .num { background: var(--pink); color: var(--ink); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); margin-top: 9px; font-weight: 700; }
.cell.today:not(.has) .dots { margin-top: 2px; }
.cell.has { padding-top: 0; }
.cell.has .cover { width: 100%; height: 72%; align-items: center; }
.cell.has .cover .stamp-wrap { font-size: 8.6cqw; }
.cell:nth-child(odd).has .cover .stamp-wrap { transform: rotate(-3deg); } .cell:nth-child(even).has .cover .stamp-wrap { transform: rotate(2.5deg); }
.cell.has .num { top: 2px; left: 3px; font-size: 10px; background: var(--ink); color: #fff; border-radius: 50%; width: 17px; height: 17px; padding: 0; display: grid; place-items: center; }
.cell.today.has .num { background: var(--pink); color: var(--ink); border: 1.5px solid var(--ink); }
.cell.today.has, .cell.today:not(.has) { box-shadow: none; }
.cell.today.has .cover { outline: none; }
.cell.today.has .stamp-wrap { filter: drop-shadow(0 0 0 var(--pink)); }
.dots { gap: 3px; margin-top: auto; }
.dot { width: 6px; height: 6px; border: 1.5px solid var(--ink); background: transparent; }
.dot.on { border-color: var(--ink); background: var(--pink); }
.dots .dot.on:nth-child(2) { background: var(--lime); } .dots .dot.on:nth-child(3) { background: var(--turq); }
.bottom .hint { color: var(--ink); font-weight: 700; letter-spacing: .02em; background: var(--yellow); padding: 3px 10px; border-radius: 6px; transform: rotate(-1.5deg); border: 1.5px solid var(--ink); }
.latest { margin: 14px -16px 0; }
.latest-title { font-family: var(--serif); font-weight: 700; font-size: 22px; padding: 0 16px 6px; }
.latest-row { display: flex; gap: 2px; overflow-x: auto; padding: 8px 18px 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.latest-row::-webkit-scrollbar { display: none; }
.latest-card { flex: none; transform: rotate(var(--rot)); margin-right: -6px; transition: transform .2s; }
.latest-card:active { transform: rotate(0) scale(1.04); }

/* ---------- moment ---------- */
.moment-copy h1 { font-size: 36px; } .moment-copy p { color: var(--ink); opacity: .7; }
.moment-hero { transform: rotate(-3deg); }

/* ---------- camera: the viewfinder is a stamp ---------- */
.camera { background: var(--ink); background-image: var(--bg-pink); background-size: cover; display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 12px) 16px 0; }
.camera::before { content: ""; position: absolute; inset: 0; background: rgba(30, 27, 46, .72); }
.camera > * { position: relative; z-index: 2; }
.cam-title { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--cream); margin-top: 56px; }
.cam-title em { color: var(--lime); }
.vf-wrap { margin: 26px auto 0; font-size: min(28px, calc((100dvh - 330px) / 12.6)); transform: rotate(-1.5deg); }
.stamp.vf { width: 10em; }
.vf .stamp-photo { background: #000; }
.cam-video { position: static; width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-grid { position: absolute; inset: 0; background: linear-gradient(transparent 33%, rgba(255, 255, 255, .25) 33% 33.4%, transparent 33.4% 66%, rgba(255, 255, 255, .25) 66% 66.4%, transparent 66.4%), linear-gradient(90deg, transparent 33%, rgba(255, 255, 255, .25) 33% 33.4%, transparent 33.4% 66%, rgba(255, 255, 255, .25) 66% 66.4%, transparent 66.4%); pointer-events: none; }
.cam-close { background: #fff; color: var(--ink); border: 2px solid var(--ink); z-index: 5; }
.cam-bar { background: none; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.shutter { border: 4px solid #fff; width: 84px; height: 84px; }
.shutter span { background: var(--pink); border: 3px solid var(--ink); width: 64px; height: 64px; }
.cam-flip { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.cam-msg { background: var(--cream); color: var(--ink); z-index: 6; }

/* ---------- thought ---------- */
.thought h1 { font-size: 27px; }
.mic { background: var(--pink); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 0 0 9px rgba(255, 79, 163, .22); width: 88px; height: 88px; }
.mic.rec { background: var(--coral); animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 16px rgba(255, 107, 74, .25); } }
.mic-label { color: var(--ink); font-weight: 700; }
.wave i { background: var(--pink); }
.text-wrap { transform: rotate(-.8deg); margin-top: 14px; }
.text-wrap::before { content: ""; position: absolute; left: 50%; top: -12px; width: 86px; height: 24px; margin-left: -43px; background: var(--turq); opacity: .9; transform: rotate(-3deg); z-index: 2; clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.thought-input { background: #FFF3A8; border: 0; border-radius: 4px; box-shadow: 0 2px 0 rgba(30, 27, 46, .15), 0 10px 18px rgba(30, 27, 46, .16); color: var(--ink); padding: 22px 16px 28px; }
.thought-input:focus { outline: 2.5px solid var(--ink); }
.count { color: var(--ink); opacity: .55; }
.voice-pill { background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.vp-play { background: var(--pink); border: 2px solid var(--ink); color: var(--ink); }
.vp-bars i { background: rgba(30, 27, 46, .22); } .vp-bars i.on { background: var(--pink); }

/* ---------- frame ---------- */
.label { color: var(--ink); opacity: .65; }
.chip { border: 2.5px solid var(--ink); border-radius: 14px; font-weight: 700; background: #fff; height: 50px; }
.chip.lt-morning { background: #BFE6FF; } .chip.lt-golden { background: #FFE27A; } .chip.lt-dark { background: #CFC8FF; }
.chip.on { box-shadow: 0 4px 0 var(--ink); transform: translateY(-2px) rotate(-1deg); color: var(--ink); }
.title-input { border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; }
.title-input:focus { outline: none; box-shadow: 0 4px 0 var(--pink); }

/* ---------- stamping ---------- */
.stamping-text { color: var(--ink); font-weight: 700; background: var(--yellow); padding: 4px 12px; border: 1.5px solid var(--ink); border-radius: 6px; transform: rotate(-2deg); }

/* ---------- decorate ---------- */
.tray { background: #fff; border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 0 5px 0 var(--ink); }
.tray-tabs { background: transparent; padding: 0; gap: 8px; }
.tab { border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; height: 38px; }
.tab.on { background: var(--pink); color: var(--ink); box-shadow: 0 3px 0 var(--ink); transform: translateY(-1px); }
.tray-item { border: 2px solid var(--ink); border-radius: 12px; background: #FFF6D9; }
.tray-item:nth-child(4n+1) { background: #FFE0EF; } .tray-item:nth-child(4n+2) { background: #EAF9B8; } .tray-item:nth-child(4n+3) { background: #CFF3EE; }
.deco-hint { color: var(--ink); opacity: .7; }

/* ---------- day + tale ---------- */
.day-kicker { color: var(--ink); opacity: .6; }
.day-head h1 { font-size: 30px; }
.day-head .dot { width: 9px; height: 9px; }
.day-card { position: relative; }
.day-card::before { content: ""; position: absolute; top: -10px; left: 50%; width: 62px; height: 20px; margin-left: -31px; background: var(--c, var(--pink)); opacity: .92; transform: rotate(-4deg); z-index: 3; clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.day-card:nth-child(2)::before { --c: var(--lime); } .day-card:nth-child(3)::before { --c: var(--turq); }
.day-title { color: var(--ink); }

/* ---------- sheets + toast ---------- */
.sheet { background: var(--cream); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 28px 28px 0 0; }
.sheet h2 { color: var(--ink); }
.date-input { border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; }
.menu-item { color: var(--ink); border-bottom-color: rgba(30, 27, 46, .15); }
.toast { background: var(--ink); color: var(--cream); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--pink); font-weight: 700; }
.founder .stat { border: 2px solid var(--ink); background: #fff; }
.founder .stat b { color: var(--pink); }
.limit h2 { font-size: 26px; }

.camera > .cam-close { position: absolute; top: calc(env(safe-area-inset-top) + 12px); left: 12px; }
.camera > .cam-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.camera > .cam-msg { position: absolute; }
.cam-title { margin-top: 64px; }
.stamp-wrap.mini .stamp { padding: 1.05em 1.05em 0; }