:root {
    --primary-color: #ff8fab; --secondary-color: #f8b195;
    --background-color: #fff5f8; --card-background: #ffffff;
    --text-color: #555; --text-light-color: #999;
    --cute-font: 'Zhi Mang Xing', cursive; --body-font: 'Noto Sans SC', sans-serif;
    --border-radius: 20px; --shadow: 0 8px 25px rgba(255, 143, 171, 0.15);
}
body { font-family: var(--body-font); background-color: var(--background-color); color: var(--text-color); margin: 0; padding: 15px; overflow-x: hidden; }
.container { max-width: 900px; margin: 0 auto; position: relative; z-index: 10; }
header { text-align: center; padding: 10px 0; }
header h1 { font-family: var(--cute-font); color: var(--primary-color); font-size: 2.5em; margin: 0; }
.subtitle { font-size: 1.1em; color: #aaa; margin-top: 5px; }
#today-btn { margin-top: 15px; padding: 8px 20px; background: #fff; color: var(--primary-color); border: 2px solid var(--primary-color); box-shadow: 0 4px 10px rgba(255, 143, 171, 0.2); border-radius: 50px; font-family: var(--body-font); cursor: pointer; transition: all 0.2s; }
#today-btn:active { transform: scale(0.95); }
.hearts-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.heart { position: absolute; bottom: -50px; font-size: 20px; color: var(--primary-color); animation: floatUp linear forwards; }
@keyframes floatUp { to { transform: translateY(-100vh) rotate(60deg); opacity: 0; } }
#calendar-app { background: var(--card-background); border-radius: var(--border-radius); padding: 20px; box-shadow: var(--shadow); }
.calendar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.calendar-controls h2 { color: var(--primary-color); font-size: 1.5em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.date-cell { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; cursor: pointer; transition: transform 0.2s; overflow: hidden; background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; }
.date-cell:not(.empty):hover { transform: scale(1.05); z-index: 5; }
.date-cell.today { box-shadow: 0 0 0 3px var(--primary-color); }
.date-cell.empty { cursor: default; background: transparent !important; }
.date-number { position: absolute; top: 5px; right: 8px; z-index: 3; font-weight: bold; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.7); }
.date-cell:not(:has(img)) .date-number { color: var(--text-light-color); text-shadow: none; }
.calendar-thumbnail { width: 100%; height: 100%; object-fit: cover; }
.meal-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); padding: 15px 5px 5px; z-index: 2; }
.meal-overlay-text { color: white; font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-only-entry { padding: 5px; font-size: 12px; font-weight: bold; color: var(--secondary-color); text-align: center; }
.future-plan-marker { position: absolute; top: 5px; left: 5px; z-index: 3; font-size: 1.5em; animation: pulse 1.5s infinite; filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));}
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-overlay.is-visible { opacity: 1; pointer-events: auto; }
.modal-content { background: var(--background-color); padding: 25px; border-radius: var(--border-radius); width: 90%; max-width: 400px; max-height: 90vh; overflow-y: auto; text-align: center; }
#modal-title { margin-top: 0; color: var(--primary-color); }
#modal-date-display { margin-top: -15px; margin-bottom: 20px; color: var(--text-light-color); }
.close-modal-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2em; color: #ccc; cursor: pointer; }
.meal-item { background: #fff; padding: 15px; border-radius: 15px; margin-bottom: 15px; text-align: left; }
.meal-item-content { display: flex; align-items: flex-start; gap: 15px; }
.meal-details { flex-grow: 1; }
.image-upload-area { flex-shrink: 0; }
.image-upload-placeholder, .image-preview-wrapper { position: relative; width: 100px; height: 100px; border-radius: 10px; cursor: pointer; }
.image-upload-placeholder { border: 2px dashed #e0e0e0; display: flex; justify-content: center; align-items: center; font-size: 2.5em; color: #e0e0e0; }
.image-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.rating-emojis { margin-top: 10px; }
button { font-family: var(--body-font); cursor: pointer; }
input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 10px; border: 1px solid #eee; }
.day-name{padding-bottom:5px; text-align:center; font-weight:500; color:var(--secondary-color)}.calendar-controls button{background:none;border:none;font-size:1.5em;color:var(--primary-color);transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.calendar-controls button:hover{transform:scale(1.2)}.calendar-controls button:active{transform:scale(.9)}.rating-emojis button{background:none;border:none;font-size:2em;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);filter:grayscale(80%);opacity:.6}.rating-emojis button:hover{transform:scale(1.3)}.rating-emojis button.selected{transform:scale(1.4) rotate(10deg);filter:grayscale(0%);opacity:1}.image-upload-placeholder:hover{border-color:var(--primary-color);color:var(--primary-color)}.image-preview-wrapper::after{content:'更换图片';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);color:#fff;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s;border-radius:10px}.image-preview-wrapper:hover::after{opacity:1}.close-modal-btn:hover{transform:rotate(90deg) scale(1.2)}.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}.lightbox-overlay.is-visible{opacity:1;pointer-events:auto}.lightbox-content{max-width:90%;max-height:80%}