:root{
  --pink:#ff6b9d; --pink-l:#ffd6e7; --bg:#fff5f8; --card:#fff;
  --text:#4a3b47; --muted:#a08a98; --shadow:0 6px 20px rgba(255,107,157,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}

/* topbar */
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,#ff9a9e,#ff6b9d);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}
.brand{font-size:18px;font-weight:700}
.menu-btn{background:rgba(255,255,255,.25);border:0;color:#fff;font-size:20px;padding:4px 12px;border-radius:8px;cursor:pointer}
.nav{position:fixed;top:0;right:-260px;width:240px;height:100vh;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,.1);padding:60px 20px;transition:right .3s;overflow:auto}
body.open .nav{right:0}
.nav a{display:block;padding:10px 12px;border-radius:8px;margin:2px 0;color:var(--text)}
.nav a:hover{background:var(--pink-l);color:var(--pink)}

.container{max-width:900px;margin:0 auto;padding:24px 16px 60px}

/* cards & grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.card{background:var(--card);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.module{display:block;text-align:center;padding:28px 12px;transition:.2s}
.module:hover{transform:translateY(-4px);background:var(--pink)}
.module:hover .m-icon,.module:hover .m-desc{color:#fff}
.m-icon{font-size:36px;display:block;margin-bottom:8px}
.m-name{font-weight:700;font-size:16px}
.m-desc{color:var(--muted);font-size:12px;margin-top:4px}

h1.page-title{font-size:24px;margin-bottom:20px}
h2{font-size:18px;margin:20px 0 12px}

/* forms */
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
input,textarea,select{width:100%;padding:10px 12px;border:1.5px solid #ffd6e7;border-radius:10px;font-size:14px;background:#fffdfd;outline:none}
input:focus,textarea:focus{border-color:var(--pink)}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
.field{flex:1;min-width:140px}
button,.btn{background:linear-gradient(135deg,#ff9a9e,#ff6b9d);color:#fff;border:0;padding:10px 18px;border-radius:10px;cursor:pointer;font-size:14px;white-space:nowrap}
button.ghost{background:#fff;color:var(--pink);border:1.5px solid var(--pink)}
button.danger{background:#eee;color:#e74c3c;border:0;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px}

/* list items */
.item{background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.item .body{flex:1}
.item .title{font-weight:700}
.item .meta{font-size:12px;color:var(--muted);margin-top:4px}
.item .del{flex-shrink:0}

/* timer */
.hero{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#ffdde1,#ffc3d9);border-radius:20px;box-shadow:var(--shadow)}
.hero .names{font-size:22px;font-weight:700}
.hero .love-date{color:var(--muted);margin:8px 0}
.timer-big{font-size:48px;font-weight:800;color:var(--pink);letter-spacing:2px}
.timer-sub{font-size:14px;color:var(--muted);margin-top:8px}
.timer-grid{display:flex;justify-content:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.timer-cell{background:#fff;border-radius:12px;padding:14px 18px;min-width:80px}
.timer-cell .n{font-size:28px;font-weight:800;color:var(--pink)}
.timer-cell .l{font-size:12px;color:var(--muted)}

/* 双方头像并排 */
.couple-avatars{display:flex!important;flex-direction:row!important;justify-content:center;align-items:flex-start;gap:14px;margin-bottom:18px;width:100%}
.cav{display:block;text-align:center;flex:0 0 auto}
.cav img,.cav-fb{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 14px rgba(255,107,157,.35);display:block;margin:0 auto}
.cav-fb{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff9a9e,#ff6b9d);color:#fff;font-size:30px;font-weight:700}
.cav-heart{font-size:22px;color:#ff4757;padding-top:28px;animation:beat 1.2s infinite;flex:0 0 auto;line-height:1}
.cav-name{margin-top:8px;font-size:14px;font-weight:600;text-align:center}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* photos */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.photo-item{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.photo-item img{width:100%;height:160px;object-fit:cover;display:block}
.photo-item .cap{padding:8px;font-size:12px;background:#fff}
.photo-item .rm{position:absolute;top:6px;right:6px;background:rgba(231,76,60,.9);color:#fff;border:0;border-radius:6px;padding:2px 8px;font-size:11px;cursor:pointer}

/* wish tree */
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.wish-card{border-radius:12px;padding:16px;color:#fff;min-height:100px;position:relative}
.wish-card.done{opacity:.55;text-decoration:line-through}
.wish-card .act{position:absolute;bottom:8px;right:8px;display:flex;gap:6px}
.wish-card .act button{background:rgba(255,255,255,.3);color:#fff;border:0;padding:3px 8px;border-radius:6px;font-size:11px;cursor:pointer}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#ffdde1,#c3cfe2)}
.login-card{background:#fff;border-radius:20px;padding:40px 30px;width:90%;max-width:360px;text-align:center;box-shadow:var(--shadow)}
.login-card .logo{font-size:50px}
.login-card h1{margin:10px 0;font-size:20px}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-card input{margin-bottom:12px}
.login-card button{width:100%;padding:12px}
.login-card .tip{font-size:11px;color:var(--muted);margin-top:14px}
.err{background:#ffe0e0;color:#e74c3c;padding:8px;border-radius:8px;font-size:13px;margin-bottom:10px}

/* misc */
.badge{display:inline-block;background:var(--pink-l);color:var(--pink);padding:2px 10px;border-radius:20px;font-size:12px}
.done{color:#27ae60}
.footer{text-align:center;color:var(--muted);padding:30px;font-size:13px}
.empty{text-align:center;color:var(--muted);padding:30px}
.music-bar{position:sticky;bottom:0;background:#fff;padding:10px;box-shadow:0 -4px 12px rgba(0,0,0,.05);border-radius:16px 16px 0 0}
.music-bar audio{width:100%}
.chat-bubble{background:#fff;padding:12px 16px;border-radius:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.chat-bubble .who{font-weight:700;color:var(--pink)}
.chat-bubble .time{font-size:11px;color:var(--muted)}
@media(max-width:600px){.timer-big{font-size:34px}.hero{padding:24px 12px}}