:root {
 --days-bg: #f6f1e7;
 --days-bg-elevated: #fffdf7;
 --days-text: #30312d;
 --days-text-secondary: #697065;
 --days-text-muted: #9a9d92;
 --days-brand: #6b9080;
 --days-brand-light: #a4c3b2;
 --days-accent: #b78168;
 --days-border: rgba(108, 120, 98, 0.15);
 --days-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
 --days-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
 --days-bg: #1a1b18;
 --days-bg-elevated: #252622;
 --days-text: #e4e2dc;
 --days-text-secondary: #a8aaa3;
 --days-text-muted: #6b6e66;
 --days-brand: #7ba88f;
 --days-brand-light: #4a6b5c;
 --days-accent: #c9967a;
 --days-border: rgba(168, 170, 163, 0.15);
 --days-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
 --days-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.4);
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 background: var(--days-bg);
 color: var(--days-text);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
 line-height: 1.7;
 -webkit-font-smoothing: antialiased;
 transition: background 0.4s ease, color 0.4s ease;
}

.back-home {
 position: fixed;
 top: 1.5rem;
 left: 1.5rem;
 z-index: 100;
 display: flex;
 align-items: center;
 gap: 0.4rem;
 padding: 0.5rem 1rem;
 background: var(--days-bg-elevated);
 border: 1px solid var(--days-border);
 border-radius: 999px;
 color: var(--days-text-secondary);
 text-decoration: none;
 font-size: 0.85rem;
 box-shadow: var(--days-shadow);
 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.back-home:hover {
 color: var(--days-brand);
 border-color: var(--days-brand-light);
 transform: translateX(-2px);
}

.theme-btn {
 position: fixed;
 top: 1.5rem;
 right: 1.5rem;
 z-index: 100;
 width: 2.6rem;
 height: 2.6rem;
 border-radius: 50%;
 border: 1px solid var(--days-border);
 background: var(--days-bg-elevated);
 color: var(--days-text-secondary);
 cursor: pointer;
 box-shadow: var(--days-shadow);
 transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
 display: flex;
 align-items: center;
 justify-content: center;
 touch-action: manipulation;
 -webkit-tap-highlight-color: transparent;
}

.theme-btn:hover {
 color: var(--days-brand);
 border-color: var(--days-brand-light);
 transform: translateY(-1px);
}

.theme-btn:active {
 transform: scale(0.94);
}

.theme-btn .icon {
 width: 1.1rem;
 height: 1.1rem;
 display: block;
}

.theme-btn .icon-moon,
.theme-btn .icon-sun {
 position: absolute;
 transition: opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
 transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.theme-btn .icon-sun {
 opacity: 0;
 transform: rotate(-90deg) scale(0.4);
}
.theme-btn .icon-moon {
 opacity: 1;
 transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-btn .icon-moon {
 opacity: 0;
 transform: rotate(90deg) scale(0.4);
}
[data-theme="dark"] .theme-btn .icon-sun {
 opacity: 1;
 transform: rotate(0) scale(1);
}

.days-container {
 max-width: 860px;
 margin: 0 auto;
 padding: 5rem 1.5rem 4rem;
}

.days-header {
 text-align: center;
 margin-bottom: 3rem;
}

.header-leaf {
 font-size: 2rem;
 margin-bottom: 0.5rem;
 animation: leafSway 4s ease-in-out infinite;
}

@keyframes leafSway {
 0%, 100% { transform: rotate(-5deg); }
 50% { transform: rotate(5deg); }
}

.days-title {
 font-size: 2.2rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 color: var(--days-text);
 margin-bottom: 0.5rem;
}

.header-line {
 width: 48px;
 height: 2px;
 background: var(--days-brand);
 margin: 0.5rem auto 1rem;
 border-radius: 1px;
}

.days-subtitle {
 font-size: 0.9rem;
 color: var(--days-text-secondary);
 letter-spacing: 0.02em;
}

.days-filter {
 display: flex;
 justify-content: center;
 gap: 0.5rem;
 margin-bottom: 1.5rem;
 flex-wrap: wrap;
}

.filter-chip {
 padding: 0.35rem 1rem;
 border: 1px solid var(--days-border);
 border-radius: 999px;
 background: transparent;
 color: var(--days-text-secondary);
 font-size: 0.82rem;
 cursor: pointer;
 transition: border-color 0.25s ease, color 0.25s ease;
}

.filter-chip:hover {
 border-color: var(--days-brand-light);
 color: var(--days-brand);
}

.filter-chip.active {
 background: var(--days-brand);
 border-color: var(--days-brand);
 color: #fff;
}

.days-stats {
 text-align: center;
 font-size: 0.82rem;
 color: var(--days-text-muted);
 margin-bottom: 2.5rem;
}

.stat-num {
 color: var(--days-brand);
 font-weight: 600;
}

.stat-divider {
 margin: 0 0.5rem;
 opacity: 0.5;
}

.days-timeline {
 position: relative;
}

.month-group {
 margin-bottom: 2.5rem;
}

.month-label {
 display: flex;
 align-items: center;
 gap: 0.8rem;
 margin-bottom: 1.2rem;
 font-size: 0.85rem;
 color: var(--days-text-muted);
 letter-spacing: 0.05em;
}

.month-label::after {
 content: '';
 flex: 1;
 height: 1px;
 background: var(--days-border);
}

.month-text {
 font-weight: 500;
 color: var(--days-text-secondary);
}

.record-card {
 background: var(--days-bg-elevated);
 border: 1px solid var(--days-border);
 border-radius: 12px;
 padding: 1.4rem 1.6rem;
 margin-bottom: 1rem;
 box-shadow: var(--days-shadow);
 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
 position: relative;
 overflow: hidden;
}

.record-card:hover {
 box-shadow: var(--days-shadow-hover);
 transform: translateY(-2px);
}

.record-type {
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 font-size: 0.72rem;
 padding: 0.15rem 0.6rem;
 border-radius: 999px;
 margin-bottom: 0.6rem;
 letter-spacing: 0.03em;
}

.record-type[data-type="diary"] {
 background: rgba(107, 144, 128, 0.12);
 color: var(--days-brand);
}

.record-type[data-type="journey"] {
 background: rgba(183, 129, 104, 0.12);
 color: var(--days-accent);
}

.record-type[data-type="thought"] {
 background: rgba(111, 148, 184, 0.12);
 color: #6f94b8;
}

.record-date {
 font-size: 0.75rem;
 color: var(--days-text-muted);
 margin-bottom: 0.5rem;
}

.record-title {
 font-size: 1.05rem;
 font-weight: 600;
 color: var(--days-text);
 margin-bottom: 0.4rem;
 line-height: 1.5;
}

.record-body {
 font-size: 0.9rem;
 color: var(--days-text-secondary);
 line-height: 1.75;
 margin-bottom: 0.6rem;
 white-space: pre-wrap;
 word-break: break-word;
}

.record-quote {
 font-size: 0.92rem;
 color: var(--days-text);
 line-height: 1.8;
 padding: 0.6rem 0 0.6rem 1rem;
 border-left: 3px solid var(--days-brand-light);
 margin-bottom: 0.6rem;
 font-style: italic;
}

.record-images {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 0.5rem;
 margin-top: 0.8rem;
}

.record-image {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: 8px;
 cursor: pointer;
 transition: transform 0.3s ease;
 background: var(--days-bg);
}

.record-image:hover {
 transform: scale(1.03);
}

.record-source {
 font-size: 0.78rem;
 color: var(--days-text-muted);
 margin-top: 0.5rem;
}

.days-loading {
 text-align: center;
 padding: 4rem 0;
 color: var(--days-text-muted);
}

.loading-leaf {
 font-size: 2rem;
 margin-bottom: 0.8rem;
 animation: leafFall 2s ease-in-out infinite;
}

@keyframes leafFall {
 0%, 100% { transform: translateY(0) rotate(0); }
 50% { transform: translateY(10px) rotate(10deg); }
}

.days-empty {
 text-align: center;
 padding: 4rem 0;
}

.empty-icon {
 font-size: 3rem;
 margin-bottom: 1rem;
}

.empty-title {
 font-size: 1.1rem;
 color: var(--days-text);
 margin-bottom: 0.4rem;
}

.empty-desc {
 font-size: 0.85rem;
 color: var(--days-text-muted);
 margin-bottom: 1.5rem;
}

.empty-link {
 display: inline-block;
 padding: 0.5rem 1.5rem;
 border: 1px solid var(--days-brand);
 border-radius: 999px;
 color: var(--days-brand);
 text-decoration: none;
 font-size: 0.85rem;
 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.empty-link:hover {
 background: var(--days-brand);
 color: #fff;
}

.days-footer {
 text-align: center;
 margin-top: 4rem;
 padding-top: 2rem;
 border-top: 1px solid var(--days-border);
}

.days-footer p {
 font-size: 0.88rem;
 color: var(--days-text-secondary);
 font-style: italic;
 margin-bottom: 0.8rem;
}

.footer-link {
 font-size: 0.82rem;
 color: var(--days-text-muted);
 text-decoration: none;
 transition: color 0.3s ease;
}

.footer-link:hover {
 color: var(--days-brand);
}

.lightbox {
 position: fixed;
 inset: 0;
 z-index: 9999;
 background: rgba(0, 0, 0, 0.88);
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 2rem;
 cursor: zoom-out;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.lightbox.open {
 opacity: 1;
}

.lightbox img {
 max-width: 90%;
 max-height: 90vh;
 border-radius: 8px;
 box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.scroll-reveal {
 opacity: 0;
 transform: translateY(20px);
 filter: none !important;
 transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.scroll-reveal.revealed {
 opacity: 1;
 transform: translateY(0);
 filter: none !important;
}

@media (max-width: 640px) {
 .days-container {
 padding: 4rem 1rem 3rem;
 }

 .days-title {
 font-size: 1.8rem;
 }

 .record-card {
 padding: 1.1rem 1.2rem;
 }

 .record-images {
 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 }

 .back-home span {
 display: none;
 }
}