@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root { --ink:#3c3036; --muted:#8d7d82; --rose:#ed6483; --rose-deep:#d94e70; --pink:#fff1f4; --peach:#ffcfb9; --lavender:#bda8e5; --cream:#fffaf7; --line:#f2e6e5; --shadow:0 16px 45px rgba(136,71,85,.12); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(145deg,#fff7f3 0%,#fffdfb 50%,#fff4f5 100%); font-family:"Noto Sans SC",system-ui,sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(100%, 680px); margin:0 auto; padding:clamp(16px,4vw,28px) clamp(16px,4vw,28px) 100px; }
.hero-card { position:relative; overflow:hidden; border-radius:28px; padding:17px 19px 20px; background:linear-gradient(129deg,#f85f81,#fa8d98 60%,#f7b3a9); color:white; box-shadow:0 18px 36px rgba(213,75,109,.22); }
.hero-card:before,.hero-card:after { content:""; position:absolute; border:1px solid rgba(255,255,255,.28); border-radius:50%; pointer-events:none; }
.hero-card:before { width:230px;height:230px;right:-105px;bottom:-148px; }.hero-card:after { width:88px;height:88px;right:17px;top:31px; }
.hero-topline,.couple-heading,.love-counter,.section-heading,.day-heading,.dialog-title-row,.author-row { display:flex; align-items:center; justify-content:space-between; }
.hero-topline { position:relative; z-index:1; }.icon-button { width:36px;height:36px; display:grid;place-items:center; border:0;border-radius:50%; background:#fff; color:var(--rose); font-size:24px; line-height:1; transition:transform .18s,background .18s; }.icon-button:hover { transform:translateY(-2px); background:#fff6f7; }.icon-button.soft { color:#fff;background:rgba(255,255,255,.16);font-size:22px; }.sync-chip { padding:5px 9px; border-radius:20px; background:rgba(94,22,42,.12); font-size:11px; letter-spacing:.02em; }.sync-chip i { display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff0bd;margin:0 5px 1px 0; }
.couple-heading { position:relative;z-index:1; justify-content:flex-start;gap:13px; margin:23px 0 18px; }.avatars { display:flex; }.avatar { width:43px;height:43px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.7);border-radius:50%;font-size:16px;font-weight:700; }.avatar-b { margin-left:-10px;background:#9d7996; }.avatar-a { background:#f4b08b; }.eyebrow { margin:0 0 4px; font:10px "DM Mono",monospace; letter-spacing:.12em; color:var(--muted); }.hero-card .eyebrow { color:rgba(255,255,255,.72); }.hero-card h1 { margin:0;font:600 clamp(20px,5vw,27px) "Playfair Display","Noto Sans SC",serif;letter-spacing:.02em; }.love-counter { position:relative;z-index:1;justify-content:flex-start; gap:17px; padding-top:14px;border-top:1px solid rgba(255,255,255,.27); }.love-counter div:first-child { display:grid;gap:1px; }.love-counter span { font:600 29px "Playfair Display",serif;line-height:.95; }.love-counter small { font-size:11px;color:rgba(255,255,255,.76); }.counter-divider { width:1px;height:31px;background:rgba(255,255,255,.35); }.love-counter p { margin:0; font-size:11px;line-height:1.55;color:rgba(255,255,255,.8);}.love-counter strong { color:white;font-weight:600; }.floating-petal {position:absolute; z-index:0; color:rgba(255,255,255,.36);}.petal-one{right:32px;bottom:18px;font-size:33px;transform:rotate(15deg)}.petal-two{right:104px;top:46px;font-size:13px;transform:rotate(-20deg)}
.month-section { margin-top:28px; }.section-heading { margin-bottom:15px; }.section-heading h2,.day-heading h2,.dialog-title-row h2,.share-dialog h2 { margin:0;font:700 23px "Playfair Display","Noto Sans SC",serif;letter-spacing:.02em; }.month-controls { display:flex;gap:8px; }.month-controls .icon-button { width:31px;height:31px;border:1px solid var(--line);font-size:22px; }.month-controls #todayButton { font-size:12px;color:#f3a0af; }
.weekdays,.calendar-grid { display:grid;grid-template-columns:repeat(7,1fr); }.weekdays { margin-bottom:7px;color:#b4a3a7;font-size:11px;text-align:center; }.calendar-grid { gap:5px; }.day-cell { position:relative; min-height:50px; padding:6px 4px; border:0;border-radius:13px;background:transparent;color:var(--ink); text-align:center; }.day-cell:hover { background:#fff3f5; }.day-cell.other-month { color:#d9cdd0; }.day-number { position:relative;z-index:1;display:grid;place-items:center;margin:auto;width:25px;height:25px;border-radius:50%;font-size:13px; }.day-cell.today .day-number { border:1.5px solid var(--rose);color:var(--rose-deep);font-weight:700; }.day-cell.selected { background:#fff0f3; }.day-cell.selected .day-number { color:#fff;background:var(--rose);box-shadow:0 3px 8px rgba(237,100,131,.35); }.markers { height:9px;margin-top:3px;display:flex;justify-content:center;gap:2px; }.marker { width:5px;height:5px;border-radius:50%; }.marker.anniversary { background:var(--rose); }.marker.photo { background:#f2af89; }.marker.note { background:var(--lavender); }.calendar-legend { display:flex;justify-content:center;gap:15px;margin:10px 0 0;color:var(--muted);font-size:10px; }.dot { display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%; }.rose{background:var(--rose)}.peach{background:#f2af89}.lavender{background:var(--lavender)}
.day-sheet { min-height:245px;margin:27px -2px 0;padding:14px 18px 23px;border-radius:24px;background:#fff;box-shadow:var(--shadow); }.sheet-handle { width:31px;height:3px;margin:0 auto 14px;border-radius:3px;background:#f1d9dc; }.day-heading { margin-bottom:16px; }.day-heading h2 {font-size:21px}.text-button { border:0;background:none;color:var(--rose-deep);font-size:12px;font-weight:600; }.moments { display:grid;gap:12px; }.moment-card { position:relative;overflow:hidden;border:1px solid #f5e7e8;border-radius:17px;padding:13px;display:flex;gap:12px;background:#fffcfb; }.moment-card:before { content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:0 3px 3px 0;background:var(--card-color,var(--rose));}.moment-photo { width:71px;height:71px;border:0;border-radius:12px;object-fit:cover;background:linear-gradient(145deg,#ffd4c1,#e98e9d);flex:0 0 auto; }.moment-photo-placeholder { width:71px;height:71px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:linear-gradient(145deg,#ffd9c5,#f5aab4);color:white;font-size:22px; }.moment-copy { min-width:0;flex:1; }.moment-meta { display:flex;align-items:center;gap:6px;margin-bottom:3px;color:var(--muted);font-size:10px; }.moment-type { padding:2px 6px;border-radius:8px;background:#fff0f3;color:var(--rose-deep); }.moment-copy h3 { margin:0 0 4px;font-size:14px; }.moment-copy p { margin:0;color:#75686c;font-size:12px;line-height:1.55; }.author-badge { width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#f5b093;color:white;font-size:9px;font-weight:700; }.author-badge.林 {background:#ab92d6}.empty-day { text-align:center;padding:17px 10px 8px; }.empty-heart {display:grid;place-items:center;margin:0 auto 9px;width:44px;height:44px;border-radius:50%;background:#fff1f4;color:var(--rose);font:25px "Playfair Display",serif}.empty-day h3 {margin:0 0 4px;font-size:14px}.empty-day p {margin:0 auto 13px;max-width:230px;color:var(--muted);font-size:12px;line-height:1.6}.secondary-button {border:1px solid #f3c4cf;border-radius:20px;background:#fff;color:var(--rose-deep);padding:8px 13px;font-size:12px;font-weight:600}
.bottom-nav { position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,680px); display:flex;justify-content:space-around;padding:max(9px,env(safe-area-inset-bottom)) 12px 9px;background:rgba(255,255,255,.92);border-top:1px solid #f7eaeb;backdrop-filter:blur(12px); }.nav-item {min-width:50px;display:grid;gap:2px;place-items:center;border:0;background:none;color:#b3a4a8;font-size:10px}.nav-item span {font-size:19px;line-height:1}.nav-item.active {color:var(--rose-deep);font-weight:700}
dialog { width:min(calc(100% - 32px),510px);border:0;border-radius:23px;box-shadow:0 25px 80px rgba(60,25,35,.3);color:var(--ink); }.moment-dialog {padding:0;background:#fff}.moment-dialog::backdrop,.share-dialog::backdrop {background:rgba(73,37,47,.35);backdrop-filter:blur(2px)}.moment-dialog form {padding:22px}.dialog-title-row {align-items:flex-start}.close-button {width:29px;height:29px;font-size:24px;color:#9b858b;background:#fff3f4}.date-context {margin:5px 0 18px;color:var(--muted);font-size:12px}.moment-dialog label {display:grid;gap:6px;margin-top:13px;color:#5a4a4f;font-size:12px;font-weight:600}.moment-dialog input:not([type=file]),.moment-dialog textarea {width:100%;border:1px solid #ebdfe0;border-radius:11px;padding:10px;background:#fffdfd;color:var(--ink);outline:none;font-weight:400}.moment-dialog textarea {min-height:77px;resize:vertical}.moment-dialog input:focus,.moment-dialog textarea:focus {border-color:#ef93a8;box-shadow:0 0 0 3px #fff0f3}.type-picker {display:flex;gap:7px;margin-top:13px}.type-option {flex:1;border:1px solid #eee1e4;border-radius:11px;padding:8px 5px;background:#fff;font-size:11px;color:var(--muted)}.type-option.selected {border-color:#f19bae;background:#fff0f3;color:var(--rose-deep);font-weight:700}.photo-upload {position:relative;min-height:57px;place-items:center;border:1px dashed #eab5c1;border-radius:13px;background:#fff8f8;cursor:pointer}.photo-upload input {position:absolute;inset:0;opacity:0;cursor:pointer}.photo-upload span {color:var(--rose-deep);font-size:12px}.photo-upload small {color:var(--muted);font-weight:400}.photo-upload img {position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:10px;object-fit:cover}.author-row {margin:17px 0;color:#5a4a4f;font-size:12px;font-weight:600}.author-toggle {display:flex;padding:2px;border-radius:17px;background:#f8eeee}.author-toggle button {border:0;border-radius:14px;background:transparent;padding:5px 11px;color:var(--muted);font-size:11px}.author-toggle button.selected {color:var(--rose-deep);background:white;box-shadow:0 1px 4px rgba(100,44,56,.12)}.primary-button {width:100%;border:0;border-radius:13px;padding:12px;background:linear-gradient(110deg,var(--rose),#f08291);color:#fff;font-size:13px;font-weight:700;box-shadow:0 7px 14px rgba(222,81,110,.2)}.share-dialog {position:relative;padding:31px 26px 24px;text-align:center;background:#fffdfc}.share-dialog h2 {font-size:25px}.share-dialog p:not(.eyebrow) {margin:10px 0 18px;color:var(--muted);font-size:12px;line-height:1.7;text-align:left}.dialog-close {position:absolute;right:12px;top:12px}.share-illustration {width:56px;height:56px;display:grid;place-items:center;margin:0 auto 12px;border-radius:19px;background:#fff0f3;color:var(--rose);font:32px "Playfair Display",serif}
@media (min-width:560px) { .calendar-grid { gap:8px; }.day-cell { min-height:57px; }.day-sheet { padding:15px 22px 25px; }.moments { grid-template-columns:repeat(2,1fr); }.moment-card { min-height:100px; } }
@media (max-width:360px) { .app-shell {padding-inline:12px}.hero-card{padding-inline:15px}.calendar-grid{gap:2px}.day-cell{min-height:46px}.day-sheet{padding-inline:14px}.calendar-legend{gap:8px}.moment-dialog form{padding:18px} }