@font-face{font-family:"ZCOOL KuaiLe";src:url('/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--dialog-font:"ZCOOL KuaiLe","YouYuan","幼圆","Microsoft YaHei",sans-serif;--dialog-ink:#795463;--dialog-rose:#a95878;--dialog-paper:#fff7f5;--dialog-border:#efbfd1}
/* Shared by all app dialogs, including new dialogs added later. */
dialog,dialog :is(h1,h2,h3,p,label,input,textarea,button,select,blockquote,time,b){font-family:var(--dialog-font);font-weight:400}
dialog::backdrop{background:#4936446b;backdrop-filter:blur(5px)}
dialog :focus-visible{outline:3px solid #d884a6;outline-offset:4px}
.keepsake-dialog,.auth-dialog,.full-note-dialog{color:var(--dialog-ink);background:var(--dialog-paper);border:3px solid var(--dialog-border);border-radius:22px 18px 24px 18px;box-shadow:0 6px 0 #bc809a55,0 24px 80px #49354440,inset 0 0 0 4px #fffdfb;max-height:88svh;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#deb2c4 transparent}
.keepsake-dialog{width:min(440px,calc(100vw - 32px));padding:30px 32px 28px;overflow:auto}
.dialog-heart{width:32px;height:30px;margin:0 auto 12px;background:url('/scene/heart-thumb-v1.svg') center/contain no-repeat;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #e8afc366);position:relative}
.dialog-heart::before,.dialog-heart::after{content:"";position:absolute;top:13px;width:46px;height:2px;background:#eac0ce}
.dialog-heart::before{right:47px;transform:rotate(-5deg)}.dialog-heart::after{left:47px;transform:rotate(5deg)}
.keepsake-dialog h2,.auth-dialog h2{font:400 27px/1.5 var(--dialog-font);letter-spacing:1px;color:#9a5270}
.keepsake-dialog h2{text-align:center;margin:0 0 22px}
.keepsake-form{display:grid;gap:20px}
.date-editor{width:min(480px,calc(100vw - 32px))}
.date-range-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.date-range-fields label{min-width:0}
.date-range-fields input{font-size:16px;padding:11px 8px}
.background-preview{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:3px solid #f1ccda;border-radius:12px;margin-bottom:20px}
.background-hint{margin:0 0 10px}
.background-status{font-size:14px;text-align:center;min-height:22px;color:var(--dialog-rose)}
@media(max-width:400px){.date-range-fields{grid-template-columns:1fr;gap:14px}}
.keepsake-form label{display:grid;gap:8px;font-size:17px;line-height:1.5;color:#986079}
.keepsake-form input,.auth-form input:not([type="checkbox"]){width:100%;min-width:0;min-height:48px;border:2px solid #edc8d7;border-radius:11px 13px 10px 13px;padding:11px 13px;background:#fffdfb;color:#715367;font:400 18px/1.45 var(--dialog-font);box-shadow:inset 0 2px 0 #efdce24d;transition:border-color .15s}
.keepsake-form input::placeholder{color:#b89aa8;font-size:16px}
.keepsake-form input:focus{border-color:#cc87a6;outline:2px solid #f8dce8;outline-offset:2px}
.keepsake-form input[type="date"]{color-scheme:light}
.keepsake-form input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.keepsake-actions{display:flex;gap:13px;margin-top:6px}
.keepsake-actions>button{flex:1;min-height:44px;padding:10px 12px;font:400 18px/1.35 var(--dialog-font);border:2px solid #e7b2c8;border-radius:12px 14px 12px 14px;box-shadow:0 3px 0 #bd779541;transition:transform .15s,background .15s}
.keepsake-primary,.auth-dialog .primary{background:var(--dialog-rose);color:#fffafc;border-color:#a15173}
.keepsake-secondary,.auth-dialog .secondary{background:#fff7f9;color:#a3647f;border-color:#ecc8d6}
.keepsake-actions>button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.035)}
.keepsake-actions>button:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.keepsake-description{text-align:center;font-size:16px;line-height:1.7;color:#876074;margin:-8px 0 18px}
.keepsake-note-preview{margin:0 0 20px;padding:14px 16px;max-height:110px;overflow:auto;border:1px dashed #dfb3c7;border-radius:10px;background:#fffdfb;color:#937084;font-size:16px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
dialog .inline-error{font-size:15px;line-height:1.6;margin:0 0 12px;color:#a84765}
.dialog-close,.full-note-close{display:grid;place-items:center;width:32px;height:32px;padding:3px;right:12px;top:10px;border:1px solid #efd4df;border-radius:11px;background:#fff2f6;color:#ab7690;font:400 23px/1 var(--dialog-font)}
.full-note-dialog .full-note-body{font-family:var(--dialog-font);font-size:17px;line-height:1.9}
.full-note-dialog[data-side="boy"]{background:#f3f8ff;border-color:#bdd0e5;color:#5b718c}
.full-note-dialog[data-side="boy"] .full-note-close{border-color:#ccdded;background:#eaf2fc;color:#7996b6}
dialog.photo-dialog{padding:8px;border:3px solid #ebc1d3;border-radius:16px;background:#fff6f8;color:var(--dialog-ink);box-shadow:0 20px 70px #49354440}
dialog.photo-dialog .photo-close{background:#fff0f5;color:#a76b86;border-radius:12px}
.fated-memory-preview .memory-preview-close{color:#f2bfd4}
.toast{font:400 16px/1.6 var(--dialog-font);background:#fff2f7;color:#92516e;border:2px solid #edc5d4;border-radius:13px;box-shadow:0 3px 0 #ac6f8e33,0 8px 28px #49354422}
@media(max-width:600px){.keepsake-dialog{padding:26px 22px 24px}.keepsake-dialog h2{font-size:24px}.keepsake-form input{font-size:17px}.keepsake-actions>button{font-size:17px}.full-note-dialog .full-note-body{font-size:16px}}
@media(prefers-reduced-motion:reduce){.keepsake-actions>button,.keepsake-form input{transition:none}}