:root {
            --bg-color: #F8F5F2;
            --text-color: #3D3D3D;
            --text-color-secondary: #575757;
            --primary-color: #C4A484;
            --primary-hover: #B09373;
            --card-bg: rgba(255, 255, 255, 0.85);
            --border-color: rgba(0, 0, 0, 0.08);
            --action-bg-hover: rgba(0, 0, 0, 0.05);
            --input-bg: rgba(255, 255, 255, 0.5);
            --subtle-button-bg: #e5e7eb;
            --subtle-button-text: #374151;
            --loader-secondary-color: #f3f3f3;
            --transition-speed: 0.4s;
            --mood-bg-default: rgba(0, 0, 0, 0.03);
        }

        html[data-theme="dark"] {
            --bg-color: #18181b;
            --text-color: #f4f4f5;
            --text-color-secondary: #a1a1aa;
            --primary-color: #d2b48c;
            --primary-hover: #c1a37c;
            --card-bg: rgba(39, 39, 42, 0.85);
            --border-color: rgba(255, 255, 255, 0.15);
            --action-bg-hover: rgba(255, 255, 255, 0.1);
            --input-bg: rgba(63, 63, 70, 0.5);
            --subtle-button-bg: #3f3f46;
            --subtle-button-text: #e4e4e7;
            --loader-secondary-color: rgba(255, 255, 255, 0.2);
            --mood-bg-default: rgba(255, 255, 255, 0.05);
        }

        * {
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease, filter var(--transition-speed) ease;
        }
        
        /* ✨ [NEW] PWA & Mobile layout fixes ✨ */
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden; /* Prevents body from scrolling */
            overscroll-behavior: none; /* Disables the bounce/pull-to-refresh effect */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            opacity: 0;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
        }

        /* ✨ 全新的动态背景 ✨ */
        .elegant-bg {
            background-size: cover;
            background-position: center;
            transition: filter var(--transition-speed) ease, background-image 1s ease-in-out;
        }
        .login-bg {
             background-image: url('https://images.unsplash.com/photo-1502781252691-8581da8e8a69?q=80&w=2070&auto=format&fit=crop');
        }
        .welcome-bg {
            background-image: url('https://images.unsplash.com/photo-1532372576292-a45b8c347358?q=80&w=2574&auto=format&fit=crop');
            animation: kenburns 40s ease-in-out infinite alternate;
        }
        @keyframes kenburns {
            from { background-position: 50% 50%; background-size: 150%; }
            to { background-position: 0% 0%; background-size: 170%; }
        }

        .glass-card {
            background-color: var(--card-bg);
            backdrop-filter: blur(12px) saturate(180%);
            border-radius: 20px;
            border: 1px solid var(--border-color);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
        }

        html[data-theme="dark"] .elegant-bg { filter: brightness(0.6); }
        html[data-theme="dark"] img,
        html[data-theme="dark"] .diary-image-container img,
        html[data-theme="dark"] .gallery-item img { filter: brightness(0.8) contrast(1.05); }
        html[data-theme="dark"] .text-gray-400, html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-600 { color: var(--text-color-secondary); }
        html[data-theme="dark"] .text-red-500 { color: #f87171; }
        .diary-text { color: var(--text-color); opacity: 0.9; white-space: pre-wrap; word-break: break-word; }
        html[data-theme="dark"] .bg-gray-50\/50 { background-color: transparent; }
        html[data-theme="dark"] aside { background-color: rgba(39, 39, 42, 0.7) !important; }
        html[data-theme="dark"] .border-r { border-color: var(--border-color); }
        html[data-theme="dark"] #loading-overlay { background-color: rgba(24, 24, 27, 0.8); }
        html[data-theme="dark"] .bg-gray-200 { background-color: rgba(255, 255, 255, 0.1); }
        html[data-theme="dark"] .border-gray-200\/80 { border-color: var(--border-color); }
        
        #theme-toggle-btn { background-color: #e2e8f0; }
        #theme-toggle-btn > span { transform: translateX(0); }
        html[data-theme="dark"] #theme-toggle-btn { background-color: var(--primary-color); }
        html[data-theme="dark"] #theme-toggle-btn > span { transform: translateX(calc(4rem - 0.5rem - 1.5rem)); }

        ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
        ::view-transition-old(root) { z-index: 1; }
        ::view-transition-new(root) { z-index: 999; }
        
        .btn-elegant { background-color: var(--primary-color); color: white; transition: all 0.3s ease; border-radius: 10px; font-weight: 500; }
        .btn-elegant:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(196, 164, 132, 0.3); }
        .btn-elegant:disabled { background-color: var(--primary-hover); opacity: 0.7; cursor: not-allowed; }
        
        .nav-link { transition: all 0.2s ease; border-radius: 8px; }
        .nav-link.active, .nav-link:hover { background-color: var(--action-bg-hover); color: var(--primary-color); }
        .nav-link.active svg, .nav-link:hover svg { color: var(--primary-color); }
        
        /* ✨ 优化和新增的动画 ✨ */
        .fade-in { animation: fadeIn 0.8s ease-in-out forwards; }
        .fade-out { animation: fadeOut 0.5s ease-in-out forwards; }
        .zoom-in { animation: zoomIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        .fade-in-stagger { opacity: 0; animation: fadeIn 0.5s ease-in-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
        @keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        
        .gallery-item:hover .overlay { opacity: 1; }
        .loader { border: 4px solid var(--loader-secondary-color); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        .comments-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease-in-out; }
        .comments-wrapper.expanded { grid-template-rows: 1fr; }
        .comments-container { overflow: hidden; }

        .input-field { background-color: var(--input-bg); border: 1px solid var(--border-color); transition: all 0.3s ease; color: var(--text-color); }
        .input-field::placeholder { color: var(--text-color-secondary); opacity: 0.8; }
        .input-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-color); }
        
        #diary-filter-reset, #load-more-diaries-btn { background-color: var(--subtle-button-bg); color: var(--subtle-button-text); }
        #diary-filter-reset:hover, #load-more-diaries-btn:hover { filter: brightness(0.95); }
        html[data-theme="dark"] #diary-filter-reset:hover, html[data-theme="dark"] #load-more-diaries-btn:hover { filter: brightness(1.2); }
        
        .editable-text-wrapper { position: relative; display: inline-block; padding-right: 5px; }
        .edit-icon { display: none; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); cursor: pointer; color: var(--primary-color); opacity: 0.6; transition: opacity 0.2s; padding: 2px; }
        .edit-icon:hover { opacity: 1; }
        .admin-mode .edit-icon { display: inline-block; }
        [contenteditable="true"] { outline: 2px dashed var(--primary-color); padding: 2px 4px; border-radius: 4px; }
        
        .diary-images-grid { display: grid; gap: 4px; margin-top: 1rem; border-radius: 12px; overflow: hidden; max-width: 500px; }
        .diary-image-item { position: relative; overflow: hidden; cursor: pointer; background-color: var(--loader-secondary-color); aspect-ratio: 1 / 1; }
        .diary-image-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
        .diary-image-item:hover img { transform: scale(1.05); }
        .image-count-1 { grid-template-columns: 1fr; }
        .image-count-2, .image-count-4 { grid-template-columns: repeat(2, 1fr); }
        .image-count-3, .image-count-5, .image-count-6, .image-count-7, .image-count-8, .image-count-9 { grid-template-columns: repeat(3, 1fr); }
        
        .image-viewer-modal { overscroll-behavior: contain; }
        .image-viewer-slider { display: flex; height: 100%; will-change: transform; touch-action: pan-y; }
        .image-viewer-slide { flex-shrink: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0.5rem; }
        .image-viewer-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

        .week-day-card { border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.6s ease-in-out; background-color: var(--mood-bg-default); background-image: var(--mood-gradient, none); padding: 12px; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; }
        .week-day-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
        .week-day-card.today { outline: 2px solid var(--primary-color); }
        .week-day-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 500; }
        .week-day-name { color: var(--text-color-secondary); }
        .week-day-number { color: var(--text-color); font-weight: bold; }
        .week-mood-emoji { text-align: center; font-size: 2.5rem; line-height: 1; margin-top: 8px; margin-bottom: 8px; flex-grow: 1; display: flex; align-items: center; justify-content: center; animation: zoomIn 0.4s; }
        
        .dual-mood-container { position: relative; width: 100%; flex-grow: 1; min-height: 50px; }
        .mood-emoji-tl, .mood-emoji-br { position: absolute; font-size: 2rem; line-height: 1; animation: mood-float 4s ease-in-out infinite; text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        .mood-emoji-tl { top: 0px; left: 0px; }
        .mood-emoji-br { bottom: 0px; right: 0px; animation-delay: -2s; }
        @keyframes mood-float { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-4px) scale(1.08); } 100% { transform: translateY(0px) scale(1); } }

        /* ✨ [NEW] Enhanced Mood Card Effects ✨ */
        .mood-match {
            position: relative;
            overflow: hidden;
        }
        .mood-match .week-mood-emoji,
        .mood-match .mood-emoji-center {
            animation: pulse-emoji 2.5s infinite ease-in-out;
        }
        .mood-match::before,
        .mood-match::after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: sparkle 2.5s infinite ease-out;
            opacity: 0;
        }
        .mood-match::before {
            width: 5px; height: 5px;
            top: 25%; left: 18%;
            animation-delay: 0s;
        }
        .mood-match::after {
            width: 7px; height: 7px;
            top: 65%; right: 22%;
            animation-delay: 1.2s;
        }

        @keyframes pulse-emoji {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        @keyframes sparkle {
            0% { transform: scale(0) translate(-50%, -50%); opacity: 0; }
            30% { transform: scale(1.2) translate(0, 0); opacity: 1; }
            100% { transform: scale(0) translate(50%, 50%); opacity: 0; }
        }

        /* 月度日历 (弹窗内) */
        .calendar-day { aspect-ratio: 1 / 1; border-radius: 12px; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; background-color: var(--mood-bg-default); background-image: var(--mood-gradient, none); display: flex; align-items: center; justify-content: center; }
        .calendar-day:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
        .calendar-day.empty { cursor: default; background-color: transparent; }
        .calendar-day.empty:hover { transform: none; box-shadow: none; }
        .day-number { position: absolute; top: 5px; left: 8px; font-weight: 500; font-size: 0.85rem; color: var(--text-color); opacity: 0.6; z-index: 2; }
        .calendar-day.today .day-number { background-color: var(--primary-color); color: white; font-weight: bold; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; top: 4px; left: 4px; opacity: 1; }
        .mood-emoji-center { font-size: 1.8rem; opacity: 0.9; z-index: 1; line-height: 1; animation: zoomIn 0.3s ease-out; }
        
        .mood-stat-card .mood-stat-item { display: flex; align-items: center; gap: 12px; font-size: 1rem; padding: 4px 0; }
        .mood-stat-color { width: 14px; height: 14px; border-radius: 50%; }
        .mood-option { transition: transform 0.2s ease; cursor: pointer; }
        .mood-option:hover { transform: scale(1.1); }
        .mood-option.selected { outline: 3px solid var(--primary-color); border-radius: 50%; }

        /* ✨ 全新欢迎页快捷入口卡片 ✨ */
        .welcome-action-card {
            background-color: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 0.6s ease-out forwards;
        }
        .welcome-action-card:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            border-color: var(--primary-color);
        }
        /* ✨ [NEW] Body scroll lock and layout fixes ✨ */
        body.modal-open {
            overflow: hidden;
        }
        #main-app > .flex {
            overflow: hidden;
        }
        #main-content {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }
        /* ✨ [FIX] Welcome screen text color fix ✨ */
        #welcome-message, #welcome-screen .opacity-90 {
            color: var(--text-color);
            text-shadow: 0 1px 5px rgba(255, 255, 255, 0.3);
        }
        html[data-theme="dark"] #welcome-message,
        html[data-theme="dark"] #welcome-screen .opacity-90 {
            color: var(--text-color);
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }