/* --- 字体引入 (必须在最顶部) --- */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
/* --- 通用样式 --- */
body{font-family:'ZCOOL+KuaiLe', cursive, 'Helvetica Neue', Arial, sans-serif;background-color:#fce4ec;margin:0;padding:0;color:#444}
.main-content { padding-top: 70px; } /* 为固定的头部留出空间 */
.container{max-width:900px;margin:20px auto;padding:20px;background:#fff;border-radius:15px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
a{color:#e91e63;text-decoration:none}
a:hover{text-decoration:underline}
/* --- 头部与导航 --- */
.main-header{background:rgba(255, 255, 255, 0.98); backdrop-filter: blur(5px);padding:0 20px;box-shadow:0 2px 5px rgba(0,0,0,0.05);position:fixed;top:0;left:0;width:100%;box-sizing:border-box;z-index:900;}
.header-content{display:flex;justify-content:space-between;align-items:center;height:70px;max-width:1200px;margin:0 auto;}
.main-header .logo { flex-grow: 1; }
.main-header h1{color:#ff7eb3; margin: 0;}
.main-header h1 a {color: #ff7eb3; text-decoration: none;}
.main-nav { display: flex; align-items: center; }
.main-nav a{margin:0 8px;padding:5px;border-bottom:2px solid transparent;transition:border-color .2s ease; white-space: nowrap;}
.main-nav a:hover,.main-nav a.active{border-color:#ff7eb3}
.logout-link{margin-left:15px!important}
.menu-toggle { display: none; }
/* --- 认证页面 --- */
.auth-container{max-width:400px;margin:100px auto;padding:40px;background:white;border-radius:15px;text-align:center}.input-group{margin-bottom:20px;text-align:left}.input-group label{display:block;margin-bottom:5px;color:#666}.input-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;box-sizing:border-box}.btn{width:100%;padding:12px;background-color:#ff7eb3;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:transform .2s}.btn:hover{background-color:#ff5c9e;transform:scale(1.05)}.error-msg{color:#c0392b;background-color:#f9e3e3;padding:10px;border-radius:5px;margin-bottom:15px}.success-msg{color:#27ae60;background-color:#e3f9e3;padding:10px;border-radius:5px;margin-bottom:15px}.switch-auth{margin-top:20px}
/* --- 聊天模块 --- */
.chat-container{border:1px solid #eee;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;height:calc(100vh - 150px)}.message-display{flex-grow:1;padding:20px;background-color:#f9f9f9;overflow-y:auto}.message-form{display:flex;padding:10px;border-top:1px solid #eee;background-color:#fff}#message-input{flex-grow:1;border:1px solid #ddd;border-radius:20px;padding:10px 15px;margin-right:10px}.message-form button{border-radius:20px}.message-bubble{max-width:70%;margin-bottom:15px;padding:10px 15px;border-radius:18px;clear:both;position:relative}.message-bubble .sender-name{font-weight:700;font-size:.8em;margin-bottom:5px;color:#666}.message-bubble .message-content{word-wrap:break-word}.message-bubble .message-time{font-size:.75em;color:#999;text-align:right;margin-top:5px}.message-bubble.theirs{background-color:#e5e5ea;color:#000;float:left}.message-bubble.theirs .sender-name{color:#e91e63}.message-bubble.mine{background-color:#ff7eb3;color:#fff;float:right}.message-bubble.mine .sender-name{color:#fce4ec}.message-bubble.mine .message-time{color:#eee}.loading-text,.empty-list-msg{text-align:center;color:#999;padding:20px 0}.delete-message-btn{position:absolute;top:-5px;background:#e74c3c;color:#fff;border:none;border-radius:50%;width:20px;height:20px;line-height:20px;text-align:center;font-size:14px;font-weight:700;cursor:pointer;opacity:0;transition:all .2s ease;z-index:10}.message-bubble.mine:hover .delete-message-btn{opacity:1}.message-bubble.mine .delete-message-btn{left:-10px}
/* --- 纪念日模块 --- */
.countdown-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:30px}.countdown-card{background-color:#fff;border-radius:10px;padding:20px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.08);position:relative;overflow:hidden;border-left:5px solid}.countdown-card.future{border-color:#ff7eb3}.countdown-card.past{border-color:#88c8ff}.countdown-card.today{border-color:#ffc107}.countdown-card h3{margin-top:0;font-size:1.2em;color:#333}.countdown-text{font-size:1.5em;margin:10px 0;color:#555}.days-number{font-size:2.5em;font-weight:700;display:block;line-height:1;color:#e91e63}.countdown-card.past .days-number{color:#3498db}.countdown-card.today .days-number{font-size:1.5em;color:#f39c12}.event-date{font-size:.9em;color:#888}.delete-form{position:absolute;top:5px;right:5px}.delete-btn{background:0 0;border:none;font-size:24px;color:#ccc;cursor:pointer;padding:5px;line-height:1}.delete-btn:hover{color:#e74c3c}.divider{border:0;height:1px;background-color:#f0f0f0;margin:40px 0}.add-countdown-form{max-width:500px;margin:0 auto;background:#fdfdfd;padding:20px 30px;border-radius:8px}
/* --- 相册模块 --- */
.upload-form-container{max-width:600px;margin:0 auto 30px;background:#fdfdfd;padding:20px 30px;border-radius:8px;border:1px dashed #ddd}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.gallery-item{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,.1);cursor:pointer;aspect-ratio:1/1}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.gallery-item:hover img{transform:scale(1.05)}.gallery-item-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff;padding:20px 10px 10px;transform:translateY(100%);transition:transform .3s ease}.gallery-item:hover .gallery-item-info{transform:translateY(0)}.gallery-item-info p{margin:0;font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-gallery-btn{position:absolute;top:5px;right:5px;width:28px;height:28px;background-color:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;font-size:20px;line-height:28px;text-align:center;cursor:pointer;opacity:0;transition:opacity .2s ease,transform .2s ease;transform:scale(.8)}.gallery-item:hover .delete-gallery-btn{opacity:1;transform:scale(1)}.delete-gallery-btn:hover{background-color:#e74c3c}
/* --- 待办清单模块 --- */
.todo-add-form{margin-bottom:20px}.todo-add-form form{display:flex}#new-todo-input{flex-grow:1;padding:12px 15px;border:1px solid #ddd;border-radius:8px 0 0 8px;font-size:1em}.todo-add-form button{padding:0 25px;border:none;background-color:#ff7eb3;color:white;border-radius:0 8px 8px 0;cursor:pointer;font-size:1em}.todo-list-container{background:#fff;border-radius:8px;padding:10px 20px;box-shadow:0 2px 5px rgba(0,0,0,.05)}#todo-list{list-style:none;padding:0;margin:0}.todo-item{display:flex;align-items:center;padding:15px 0;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:opacity .3s ease}.todo-item:last-child{border-bottom:none}.todo-checkbox{width:22px;height:22px;border:2px solid #ccc;border-radius:50%;margin-right:15px;flex-shrink:0;transition:background-color .2s ease,border-color .2s ease;position:relative}.todo-item.completed .todo-checkbox{background-color:#2ecc71;border-color:#2ecc71}.todo-item.completed .todo-checkbox::after{content:'✔';color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px}.todo-text{color:#333;transition:color .3s ease}.todo-item.completed .todo-text{text-decoration:line-through;color:#aaa}.delete-todo-btn{background:0 0;border:none;color:#ddd;font-size:24px;font-weight:700;cursor:pointer;margin-left:auto;padding:0 10px;line-height:1;opacity:0;transition:opacity .2s ease,color .2s ease}.todo-item:hover .delete-todo-btn{opacity:1}.delete-todo-btn:hover{color:#e74c3c}
/* --- 私人密语模块 --- */
.secret-container{max-width:700px;margin:20px auto;padding:30px;background:#fff;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,.08)}#secret-text{width:100%;box-sizing:border-box;padding:15px;border:1px solid #ddd;border-radius:8px;margin-bottom:15px;font-size:1.1em;line-height:1.6}#save-form{display:flex;flex-direction:column}#save-form .input-group{margin-top:10px}.btn.btn-secondary,#save-form .btn-secondary{background-color:#aaa;margin-top:10px}.btn.btn-secondary:hover,#save-form .btn-secondary:hover{background-color:#999}.message-area{margin-top:15px;text-align:center;font-weight:700}
/* --- GPS打卡模块 --- */
.checkin-container{text-align:center;padding:20px}.btn-large{padding:15px 30px;font-size:1.2em;border-radius:30px}.status-area{margin-top:15px;font-weight:700;min-height:1.2em}.checkin-history{margin-top:20px}.checkin-item{background:#fff;padding:15px 20px;border-radius:8px;margin-bottom:10px;box-shadow:0 2px 4px rgba(0,0,0,.05);border-left:4px solid #88c8ff;position:relative}.checkin-description{font-size:1.1em;font-style:italic;color:#333}.checkin-meta{font-size:.9em;color:#777;margin-top:8px}.checkin-coords{font-size:.8em;color:#aaa;margin-top:4px;font-family:monospace}.delete-checkin-btn{position:absolute;top:10px;right:10px;width:28px;height:28px;background-color:rgba(0,0,0,.1);color:#999;border:none;border-radius:50%;font-size:20px;line-height:28px;text-align:center;cursor:pointer;opacity:0;transition:all .2s ease}.checkin-item:hover .delete-checkin-btn{opacity:1}.delete-checkin-btn:hover{background-color:#e74c3c;color:#fff;transform:scale(1.1)}
/* --- 纪念册/时间线模块 --- */
.timeline-container{position:relative;padding-left:50px;border-left:3px solid #f0f0f0;margin-top:30px}.timeline-item{position:relative;margin-bottom:30px}.timeline-item:last-child{margin-bottom:0}.timeline-icon{position:absolute;left:-66.5px;top:0;width:30px;height:30px;border-radius:50%;background-color:#ccc;background-size:55%;background-repeat:no-repeat;background-position:center;border:3px solid #fff;box-shadow:0 0 0 3px #f0f0f0}.timeline-icon-chat{background-color:#88c8ff;background-image:url('data:image/svg+xml,')}.timeline-icon-gallery{background-color:#ff7eb3;background-image:url('data:image/svg+xml,')}.timeline-icon-checkin{background-color:#2ecc71;background-image:url('data:image/svg+xml,')}.timeline-icon-todo_completed{background-color:#f39c12;background-image:url('data:image/svg+xml,')}.timeline-content{background:#f9f9f9;padding:15px 20px;border-radius:8px}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.timeline-header .username{font-weight:700;color:#333}.timeline-header .timestamp{font-size:.85em;color:#999}.timeline-body p{margin:5px 0}.timeline-body .coords{font-size:.8em;color:#aaa;font-family:monospace}.timeline-thumbnail{max-width:150px;border-radius:4px;margin-top:10px;border:1px solid #eee;cursor:pointer}
/* --- 通知中心模块 --- */
.notifications-list{display:flex;flex-direction:column;gap:15px}.notification-item{display:flex;align-items:center;background:#f9f9f9;padding:20px;border-radius:8px;border-left:5px solid #ccc}.notification-icon{flex-shrink:0;width:32px;height:32px;margin-right:20px;border-radius:50%;background-size:60%;background-repeat:no-repeat;background-position:center}.notification-icon-anniversary{background-color:#ffc107;background-image:url('data:image/svg+xml,')}.notification-icon-todo{background-color:#3498db;background-image:url('data:image/svg+xml,')}.notification-icon-system{background-color:#bdc3c7;background-image:url('data:image/svg+xml,')}.notification-message{color:#333}.nav-link-notifications{position:relative}.notification-badge{position:absolute;top:-2px;right:-12px;background-color:#e74c3c;color:#fff;border-radius:10px;padding:1px 6px;font-size:.7em;font-weight:700;border:1px solid #fff}
/* --- 伴侣/邀请码页面 --- */
.partner-container{text-align:center;background:#fff;padding:40px;border-radius:8px}.invite-code-box{font-size:2em;font-weight:700;color:#e91e63;background:#fce4ec;padding:15px 25px;border-radius:8px;border:2px dashed #ff7eb3;display:inline-block;margin:20px 0;letter-spacing:3px}.partner-info p:first-child{font-size:3em;margin:0}
/* --- 日历弹窗样式 (终极修正) --- */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;z-index:9999 !important; /* 强制将层级提到最高 */}
.modal-content{background:white;padding:30px;border-radius:8px;width:90%;max-width:500px;box-shadow:0 5px 15px rgba(0,0,0,0.3)}
.modal-content h3{margin-top:0;text-align:center}
.btn.btn-secondary {background-color: #aaa;margin-top: 10px;}
.btn.btn-secondary:hover {background-color: #999;}
/* --- 响应式设计与手机端样式 (最终修正版) --- */
@media (max-width: 1024px) {
.header-content { justify-content: space-between; }
.main-nav { display: none; position: absolute; top: 70px; left: 0; right: 0; width: 100%; background-color: white; box-shadow: 0 4px 8px rgba(0,0,0,0.1); flex-direction: column; padding: 10px 0; border-top: 1px solid #f0f0f0; }
.main-nav.nav-active { display: flex; }
.main-nav a { width: 100%; box-sizing: border-box; margin: 0; padding: 15px 20px; text-align: left; border-bottom: 1px solid #f0f0f0; }
.main-nav a:last-child { border-bottom: none; }
.menu-toggle { display: block; }
.main-content { padding-top: 70px; }
.container { margin: 10px; padding: 15px; }
.countdown-grid, .gallery-grid { grid-template-columns: 1fr; }
.chat-container { height: calc(100vh - 140px); }
.timeline-container { padding-left: 20px; }
.timeline-icon { left: -31.5px; }
.auth-container { margin: 20px; padding: 20px;}
/* 修正手机端弹窗样式 */
.modal-overlay { align-items: flex-start; padding-top: 10vh; }
.modal-content { padding: 20px; }
.modal-content h3 { font-size: 1.2em; }
}
/* --- 后台分页样式 --- */
.pagination {
margin-top: 20px;
text-align: center;
}
.pagination a {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
border: 1px solid #ddd;
color: #ff7eb3;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s, color 0.2s;
}
.pagination a:hover {
background-color: #fce4ec;
border-color: #ff7eb3;
}
.pagination a.active {
background-color: #ff7eb3;
color: white;
border-color: #ff7eb3;
font-weight: bold;
}